fix dateime for positive dates, add new color and new text for chore due today

src/components/Flatastic/Flatastic.tsx

@@ -15,20 +15,28 @@ function choreItem(chore: FlatasticChore, idToNameMap: Record<number, string>) {
     if (chore.rotationTime === -1) {
         className = "irregular";
     } else {
-        className = chore.timeLeftNext <= 0 ? "due" : "notDue";
+        const negativeTimeFix = chore.timeLeftNext < 0 ? 1 : 0; // Floats are rounded down, so we need to add 1 to the days if the time is negative
+        const timeInDays =
+            Math.abs(chore.timeLeftNext) / (60 * 60 * 24) + negativeTimeFix;
 
-        const timeInDays = Math.abs(chore.timeLeftNext) / (60 * 60 * 24) + 1;
+        const bigG = Math.trunc(timeInDays / 100);
-        const grubers = Math.floor(timeInDays / 100);
+        const days = Math.trunc(timeInDays % 100);
-        const days = Math.floor(timeInDays % 100);
 
         timeLeftInDays = (
             <span className={style.timeLeft}>
-                {grubers > 0 && `${grubers} g${grubers > 1 ? "s" : ""} `}
+                {bigG > 0 && `${bigG} g${bigG > 1 ? "s" : ""} `}
-                {days > 0 && `${days} d`}
+                {days >= 0 && `${days} d`}
             </span>
         );
 
-        Math.abs(chore.timeLeftNext) / (60 * 60 * 24) + 1;
+        if (days === 0) {
+            className = "dueToday";
+            timeLeftInDays = <span className={style.timeLeft}>today</span>;
+        } else if (chore.timeLeftNext < 0) {
+            className = "due";
+        } else {
+            className = "notDue";
+        }
     }
 
     return (

src/components/Flatastic/style.module.css

@@ -66,6 +66,11 @@
     background-color: #a6cfa6;
 }
 
+/* oragne redis color */
+.dueToday {
+    background-color: #eda455;
+}
+
 .timeLeft {
     font-weight: bold;
 }