A e s t h e t i c s

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>