A e s t h e t i c s

src/App.css

@@ -1,42 +1,7 @@
 #root {
+    height: 100vh;
     max-width: 1280px;
     margin: 0 auto;
-    padding: 2rem;
+    padding: 0;
     text-align: center;
 }
-
-.logo {
-    height: 6em;
-    padding: 1.5em;
-    will-change: filter;
-    transition: filter 300ms;
-}
-.logo:hover {
-    filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-    filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-    a:nth-of-type(2) .logo {
-        animation: logo-spin infinite 20s linear;
-    }
-}
-
-.card {
-    padding: 2em;
-}
-
-.read-the-docs {
-    color: #888;
-}

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;
+}