From ae30e6ecc0e0639fbc2809f305e665eeae548352 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 9 Apr 2024 17:01:16 -0600
Subject: [PATCH] fix colors

---
 .../components/filter/ReviewFilterGroup.tsx   | 26 ++++++++++++-------
 .../overlay/MobileReviewSettingsDrawer.tsx    | 18 ++++++++-----
 2 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/web/src/components/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx
index bcf72655b..036f30a36 100644
--- a/web/src/components/filter/ReviewFilterGroup.tsx
+++ b/web/src/components/filter/ReviewFilterGroup.tsx
@@ -223,10 +223,12 @@ function CamerasFilterButton({
   const trigger = (
     <Button
       className="flex items-center gap-2 capitalize"
-      variant={selectedCameras?.length == undefined ? "secondary" : "select"}
+      variant={selectedCameras?.length == undefined ? "default" : "select"}
       size="sm"
     >
-      <FaVideo />
+      <FaVideo
+        className={`${selectedCameras?.length == 1 ? "text-selected-foreground" : "text-secondary-foreground"}`}
+      />
       <div
         className={`hidden md:block ${selectedCameras?.length ? "text-selected-foreground" : "text-primary"}`}
       >
@@ -391,11 +393,13 @@ function ShowReviewFilter({
 
       <Button
         className="block md:hidden duration-0"
-        variant={showReviewedSwitch == 1 ? "select" : "secondary"}
+        variant={showReviewedSwitch == 1 ? "select" : "default"}
         size="sm"
         onClick={() => setShowReviewedSwitch(showReviewedSwitch == 0 ? 1 : 0)}
       >
-        <FaCheckCircle />
+        <FaCheckCircle
+          className={`${showReviewedSwitch == 1 ? "text-selected-foreground" : "text-secondary-foreground"}`}
+        />
       </Button>
     </>
   );
@@ -419,10 +423,12 @@ function CalendarFilterButton({
   const trigger = (
     <Button
       className="flex items-center gap-2"
-      variant={day == undefined ? "secondary" : "select"}
+      variant={day == undefined ? "default" : "select"}
       size="sm"
     >
-      <FaCalendarAlt />
+      <FaCalendarAlt
+        className={`${day == undefined ? "text-secondary-foreground" : "text-selected-foreground"}`}
+      />
       <div
         className={`hidden md:block ${day == undefined ? "text-primary" : "text-selected-foreground"}`}
       >
@@ -485,10 +491,12 @@ function GeneralFilterButton({
   const trigger = (
     <Button
       size="sm"
-      variant={selectedLabels?.length ? "select" : "secondary"}
+      variant={selectedLabels?.length ? "select" : "default"}
       className="flex items-center gap-2 capitalize"
     >
-      <FaFilter />
+      <FaFilter
+        className={`${selectedLabels?.length ? "text-selected-foreground" : "text-secondary-foreground"}`}
+      />
       <div
         className={`hidden md:block ${selectedLabels?.length ? "text-selected-foreground" : "text-primary"}`}
       >
@@ -682,7 +690,7 @@ function ShowMotionOnlyButton({
         <Button
           size="sm"
           className="duration-0"
-          variant={motionOnlyButton ? "select" : "secondary"}
+          variant={motionOnlyButton ? "select" : "default"}
           onClick={() => setMotionOnlyButton(!motionOnlyButton)}
         >
           <FaRunning />
diff --git a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
index 5cb1663e6..a7c8069c1 100644
--- a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
+++ b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
@@ -147,20 +147,24 @@ export default function MobileReviewSettingsDrawer({
         {features.includes("calendar") && (
           <Button
             className="w-full flex justify-center items-center gap-2"
-            variant={filter?.after ? "select" : "secondary"}
+            variant={filter?.after ? "select" : "default"}
             onClick={() => setDrawerMode("calendar")}
           >
-            <FaCalendarAlt />
+            <FaCalendarAlt
+              className={`${filter?.after ? "text-selected-foreground" : "text-secondary-foreground"}`}
+            />
             Calendar
           </Button>
         )}
         {features.includes("filter") && (
           <Button
             className="w-full flex justify-center items-center gap-2"
-            variant={filter?.labels ? "select" : "secondary"}
+            variant={filter?.labels ? "select" : "default"}
             onClick={() => setDrawerMode("filter")}
           >
-            <FaFilter />
+            <FaFilter
+              className={`${filter?.labels ? "text-selected-foreground" : "text-secondary-foreground"}`}
+            />
             Filter
           </Button>
         )}
@@ -282,11 +286,13 @@ export default function MobileReviewSettingsDrawer({
         <DrawerTrigger asChild>
           <Button
             className="rounded-lg capitalize"
-            variant={filter?.labels || filter?.after ? "select" : "secondary"}
+            variant={filter?.labels || filter?.after ? "select" : "default"}
             size="sm"
             onClick={() => setDrawerMode("select")}
           >
-            <FaCog />
+            <FaCog
+              className={`${filter?.labels || filter?.after ? "text-selected-foreground" : "text-secondary-foreground"}`}
+            />
           </Button>
         </DrawerTrigger>
         <DrawerContent className="max-h-[80dvh] overflow-hidden flex flex-col items-center gap-2 px-4 pb-4 mx-1 rounded-t-2xl">