style: change colour of isnights dates bar

fac30 · Dec 13, 2024 · 7df9e3c · 7df9e3c
1 parent a980606
commit 7df9e3c
Showing 1 changed file with 23 additions and 18 deletions.
diff --git a/src/app/insights/components/InsightsDisplay.tsx b/src/app/insights/components/InsightsDisplay.tsx
@@ -33,15 +33,16 @@ export default function InsightsDisplay() {
     setSelectedButton(dateChoice);
   };
 
-  const [selectedButton, setSelectedButton] = useState<keyof typeof dateOffsets>("day");
+  const [selectedButton, setSelectedButton] =
+    useState<keyof typeof dateOffsets>("day");
 
   /* Handler & State for Currently Unused "To Now" Button
     const [useNow, setUseNow] = useState(true);
 
     const handleUseNowClick = () => {
       setUseNow((prevUseNow) => !prevUseNow);
     }; */
-  
+
   const [now, setNow] = useState<Date | null>(null);
 
   const getDateRange = (selected: keyof typeof dateOffsets) => {
@@ -51,12 +52,12 @@ export default function InsightsDisplay() {
     const end = now;
     return { start, end };
   };
-  
+
   const dateOffsets = {
     day: 24 * 60 * 60 * 1000,
     week: 7 * 24 * 60 * 60 * 1000,
     month: 30 * 24 * 60 * 60 * 1000,
-    year: 365 * 24 * 60 * 60 * 1000
+    year: 365 * 24 * 60 * 60 * 1000,
   } as const;
 
   const [startOfRange, setStartOfRange] = useState<Date>(new Date());
@@ -68,7 +69,6 @@ export default function InsightsDisplay() {
     setStartOfRange(start);
     setEndOfRange(end);
   }, [/* useNow, */ selectedButton, now]);
-
 
   const getInsights = async () => {
     const myInsights = await database.getFromDb("mood_records");
@@ -92,21 +92,26 @@ export default function InsightsDisplay() {
     }
   };
 
-  useEffect(() => { 
-    getInsights(); 
+  useEffect(() => {
+    getInsights();
   }, []);
 
   return (
     <>
-      <div className="flex text-center w-full m-auto justify-between bg-twd-navbar-background py-2 px-4 sticky top-0 z-50">
+      <div className="flex text-center w-full m-auto justify-between bg-twd-background py-2 px-4 sticky top-0 z-50">
         {dateOptions.map((dateOption, index) => {
           const isActive = selectedButton === dateOption;
           return (
             <Button
               key={index}
               label={dateOption}
-              onClick={() => handleDateChange(dateOption as keyof typeof dateOffsets)}
-              className={clsx("font-normal", isActive && "bg-twd-primary-purple text-white")}
+              onClick={() =>
+                handleDateChange(dateOption as keyof typeof dateOffsets)
+              }
+              className={clsx(
+                "font-normal",
+                isActive && "bg-twd-primary-purple text-white"
+              )}
             />
           );
         })}
@@ -120,13 +125,13 @@ export default function InsightsDisplay() {
 
       {insights ? ( // Line Graph
         <LineGraph
-            dataArray={insights}
-            startOfRange={startOfRange}
-            endOfRange={endOfRange}
-            selectedButton={selectedButton}
-          />
-        ) : (
-          <div>Loading Line Graph...</div>
+          dataArray={insights}
+          startOfRange={startOfRange}
+          endOfRange={endOfRange}
+          selectedButton={selectedButton}
+        />
+      ) : (
+        <div>Loading Line Graph...</div>
       )}
 
       {insights ? ( // Area Chart
@@ -156,4 +161,4 @@ export default function InsightsDisplay() {
       )}
     </>
   );
-}
+}