highlight due date

src/components/Flatastic/Flatastic.tsx

@@ -35,9 +35,11 @@ export default function Flatastic() {
             className = "irregular";
         } else {
             className = chore.timeLeftNext <= 0 ? "due" : "notDue";
-            timeLeftInDays = Math.abs(
+            timeLeftInDays = <span className={style.timeLeft}>
-                Math.floor(chore.timeLeftNext / (60 * 60 * 24)),
+                {Math.abs(
-            );
+                    Math.floor(chore.timeLeftNext / (60 * 60 * 24)),
+                )}d
+            </span>;
         }
 
         return (

src/components/Flatastic/style.module.css

@@ -30,5 +30,9 @@
 }
 
 .notDue {
-    background-color: #ccffcc;
+    background-color: #a6cfa6;
+}
+
+.timeLeft {
+    font-weight: bold;
 }