Fix button colors

web/src/components/filter/ReviewFilterGroup.tsx

@@ -222,14 +222,15 @@ 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"}`}
+ className={`hidden md:block ${selectedCameras?.length ? "text-selected-foreground" : "text-primary"}`}
  >
  {selectedCameras == undefined
  ? "All Cameras"
@@ -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,14 +422,15 @@ 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"}`}
+ className={`hidden md:block ${day == undefined ? "text-primary" : "text-selected-foreground"}`}
  >
  {day == undefined ? "Last 24 Hours" : selectedDate}
  </div>
@@ -488,13 +491,14 @@ 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"}`}
+ className={`hidden md:block ${selectedLabels?.length ? "text-selected-foreground" : "text-primary"}`}
  >
  Filter
  </div>
@@ -685,12 +689,11 @@ 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
- className={`${motionOnlyButton ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
- />
+ <FaRunning />
  </Button>
  </div>
  </>

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>

web/src/components/ui/button.tsx

@@ -10,7 +10,7 @@ const buttonVariants = cva(
  variants: {
  variant: {
  default: "bg-secondary text-primary hover:bg-secondary/80",
- select: "bg-selected text-white hover:bg-opacity-90",
+ select: "bg-selected text-selected-foreground hover:bg-opacity-90",
  destructive:
  "bg-destructive text-destructive-foreground hover:bg-destructive/90",
  outline:

web/tailwind.config.js

@@ -46,7 +46,10 @@ module.exports = {
  background: "hsl(var(--background))",
  background_alt: "hsl(var(--background-alt))",
  foreground: "hsl(var(--foreground))",
- selected: "hsl(var(--selected))",
+ selected: {
+ DEFAULT: "hsl(var(--selected))",
+ foreground: "hsl(var(--selected-foreground))",
+ },
  primary: {
  DEFAULT: "hsl(var(--primary))",
  foreground: "hsl(var(--primary-foreground))",

web/themes/theme-default.css

@@ -72,6 +72,9 @@
  --selected: hsl(228, 89%, 63%);
  --selected: 228 89% 63%;
 
+ --selected-foreground: hsl(0 0% 100%);
+ --selected-foreground: 0 0% 100%;
+
  --radius: 0.5rem;
 
  --severity_alert: var(--red-800);
@@ -162,8 +165,5 @@
 
  --ring: hsla(0 0% 25% 0%);
  --ring: 0 0% 25% 0%;
-
- --selected: hsl(228, 89%, 63%);
- --selected: 228 89% 63%;
  }
 }