Fix button colors

blakeblackshear · Apr 9, 2024 · 3d104c4 · 3d104c4
1 parent 15e4f5c
commit 3d104c4
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 14 deletions.
diff --git a/web/src/components/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx
@@ -222,11 +222,12 @@ function CamerasFilterButton({
 
   const trigger = (
     <Button
-      className={`flex items-center gap-2 capitalize ${selectedCameras?.length ? "bg-selected hover:bg-selected" : ""}`}
+      className="flex items-center gap-2 capitalize"
+      variant={selectedCameras?.length == undefined ? "default" : "select"}
       size="sm"
     >
       <FaVideo
-        className={`${selectedCameras?.length ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
+        className={`${selectedCameras?.length == 1 ? "text-selected-foreground" : "text-secondary-foreground"}`}
       />
       <div
         className={`hidden md:block ${selectedCameras?.length ? "text-background dark:text-primary" : "text-primary"}`}
@@ -391,12 +392,13 @@ function ShowReviewFilter({
       </div>
 
       <Button
-        className={`block md:hidden duration-0 ${showReviewedSwitch == 1 ? "bg-selected hover:bg-selected" : "bg-secondary hover:bg-secondary/80"}`}
+        className="block md:hidden duration-0"
+        variant={showReviewedSwitch == 1 ? "select" : "default"}
         size="sm"
         onClick={() => setShowReviewedSwitch(showReviewedSwitch == 0 ? 1 : 0)}
       >
         <FaCheckCircle
-          className={`${showReviewedSwitch == 1 ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
+          className={`${showReviewedSwitch == 1 ? "text-selected-foreground" : "text-secondary-foreground"}`}
         />
       </Button>
     </>
@@ -420,11 +422,13 @@ function CalendarFilterButton({
 
   const trigger = (
     <Button
+      className="flex items-center gap-2"
+      variant={day == undefined ? "default" : "select"}
       size="sm"
       className={`flex items-center gap-2 ${day == undefined ? "bg-secondary hover:bg-secondary/80" : "bg-selected hover:bg-selected"}`}
     >
       <FaCalendarAlt
-        className={`${day == undefined ? "text-secondary-foreground" : "text-background dark:text-primary"}`}
+        className={`${day == undefined ? "text-secondary-foreground" : "text-selected-foreground"}`}
       />
       <div
         className={`hidden md:block ${day == undefined ? "text-primary" : "text-background dark:text-primary"}`}
@@ -488,10 +492,11 @@ function GeneralFilterButton({
   const trigger = (
     <Button
       size="sm"
-      className={`flex items-center gap-2 capitalize ${selectedLabels?.length ? "bg-selected hover:bg-selected" : ""}`}
+      variant={selectedLabels?.length ? "select" : "default"}
+      className="flex items-center gap-2 capitalize"
     >
       <FaFilter
-        className={`${selectedLabels?.length ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
+        className={`${selectedLabels?.length ? "text-selected-foreground" : "text-secondary-foreground"}`}
       />
       <div
         className={`hidden md:block ${selectedLabels?.length ? "text-background dark:text-primary" : "text-primary"}`}
@@ -685,7 +690,8 @@ function ShowMotionOnlyButton({
       <div className="block md:hidden">
         <Button
           size="sm"
-          className={`duration-0 ${motionOnlyButton ? "bg-selected hover:bg-selected" : "bg-secondary hover:bg-secondary/80"}`}
+          className="duration-0"
+          variant={motionOnlyButton ? "select" : "default"}
           onClick={() => setMotionOnlyButton(!motionOnlyButton)}
         >
           <FaRunning

diff --git a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
@@ -146,22 +146,24 @@ export default function MobileReviewSettingsDrawer({
         )}
         {features.includes("calendar") && (
           <Button
-            className={`w-full flex justify-center items-center gap-2 ${filter?.after ? "bg-selected text-background dark:text-primary" : ""}`}
+            className="w-full flex justify-center items-center gap-2"
+            variant={filter?.after ? "select" : "default"}
             onClick={() => setDrawerMode("calendar")}
           >
             <FaCalendarAlt
-              className={`${filter?.after ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
+              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 ${filter?.labels ? "bg-selected text-background dark:text-primary" : ""}`}
+            className="w-full flex justify-center items-center gap-2"
+            variant={filter?.labels ? "select" : "default"}
             onClick={() => setDrawerMode("filter")}
           >
             <FaFilter
-              className={`${filter?.labels ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
+              className={`${filter?.labels ? "text-selected-foreground" : "text-secondary-foreground"}`}
             />
             Filter
           </Button>
@@ -283,12 +285,13 @@ export default function MobileReviewSettingsDrawer({
       >
         <DrawerTrigger asChild>
           <Button
-            className={`rounded-lg capitalize ${filter?.labels || filter?.after ? "bg-selected hover:bg-selected" : "bg-secondary hover:bg-secondary/80"}`}
+            className="rounded-lg capitalize"
+            variant={filter?.labels || filter?.after ? "select" : "default"}
             size="sm"
             onClick={() => setDrawerMode("select")}
           >
             <FaCog
-              className={`${filter?.labels || filter?.after ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
+              className={`${filter?.labels || filter?.after ? "text-selected-foreground" : "text-secondary-foreground"}`}
             />
           </Button>
         </DrawerTrigger>