From a4fe525b9ed18205e90bbc1f839c7067b71363e1 Mon Sep 17 00:00:00 2001
From: Arif Hasanic <arif@hasanic.com>
Date: Thu, 28 Aug 2025 22:23:16 +0200
Subject: [PATCH] highlight due date

---
 src/components/Flatastic/Flatastic.tsx    | 8 +++++---
 src/components/Flatastic/style.module.css | 6 +++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/Flatastic/Flatastic.tsx b/src/components/Flatastic/Flatastic.tsx
index 968f05b..cce0b55 100644
--- a/src/components/Flatastic/Flatastic.tsx
+++ b/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(
-                Math.floor(chore.timeLeftNext / (60 * 60 * 24)),
-            );
+            timeLeftInDays = <span className={style.timeLeft}>
+                {Math.abs(
+                    Math.floor(chore.timeLeftNext / (60 * 60 * 24)),
+                )}d
+            </span>;
         }
 
         return (
diff --git a/src/components/Flatastic/style.module.css b/src/components/Flatastic/style.module.css
index 8a3ea11..eb1f027 100644
--- a/src/components/Flatastic/style.module.css
+++ b/src/components/Flatastic/style.module.css
@@ -30,5 +30,9 @@
 }
 
 .notDue {
-    background-color: #ccffcc;
+    background-color: #a6cfa6;
+}
+
+.timeLeft {
+    font-weight: bold;
 }