A e s t h e t i c s

src/components/Dashboard/style.module.css

@@ -1,18 +1,25 @@
 .dashboard {
-
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 }
 
 .cardWrapper {
+    margin: 30px;
+    height: 100%;
+    gap: 30px;
+    flex-direction: column;
+    display: flex;
+    justify-content: flex-start;
 }
 
 .card {
-  border-radius: 10px;
-  padding: 1px 100px 30px 100px;
-  margin-bottom: 20px;
-  border: 1px solid rgba(220, 220, 220, 0.4);
-  box-shadow: 5px 5px 7px rgba(220, 220, 220, 0.5);
+    border-radius: 10px;
+    padding: 1px 100px 30px 100px;
+    border: 1px solid rgba(220, 220, 220, 0.4);
+    box-shadow: 5px 5px 7px rgba(220, 220, 220, 0.5);
 }
 
 .footer {
-  background-color: rgba(220, 220, 220, 0.5);
+    background-color: rgba(220, 220, 220, 0.5);
 }

src/components/Flatastic/Flatastic.tsx

@@ -3,6 +3,8 @@ import { useFlatasticStore } from "@/store/flatastic";
 
 import type { FlatasticChore } from "@/types/flatasticChore";
 
+import style from "./style.module.css";
+
 const idToNameMap: Record<number, string> = {
     1836104: "Gruber",
     1836101: "Darius",
@@ -25,11 +27,13 @@ export default function Flatastic() {
     return (
         <div>
             <h1>Flatastic Chores</h1>
-            <ul>
+            <ul className={style.choreList}>
                 {chores.map((chore: FlatasticChore) => (
-                    <li key={chore.id} style={{ textAlign: "left" }}>
-                        {idToNameMap[chore.currentUser]}: {chore.title} -
-                        Points: {chore.points}
+                    <li key={chore.id} className={style.chore}>
+                        <span className={style.userName}>
+                            {idToNameMap[chore.currentUser]}
+                        </span>
+                        : {chore.title} - {"🪙".repeat(chore.points)}
                     </li>
                 ))}
             </ul>

src/components/Flatastic/style.module.css

@@ -0,0 +1,20 @@
+.choreList {
+  list-style-type: none;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  border-radius: 10px;
+  gap: 10px;
+  padding: 10px 0;
+}
+
+.chore {
+  padding: 5px 10px;
+  border: 1px solid rgba(220, 220, 220, 0.4);
+  box-shadow: 5px 5px 7px rgba(220, 220, 220, 0.5);
+  text-align: left;
+}
+
+.userName {
+  font-weight: bold;
+}