Use switch and adjust colors

web/src/components/filter/ReviewFilterGroup.tsx

@@ -16,8 +16,11 @@ import { ReviewFilter } from "@/types/review";
 import { getEndOfDayTimestamp } from "@/utils/dateUtil";
 import { useFormattedTimestamp } from "@/hooks/use-date-utils";
 import { FaCalendarAlt, FaFilter, FaVideo } from "react-icons/fa";
-import { getIconTypeForGroup } from "@/utils/iconUtil";
 import { IconType } from "react-icons";
+import { isMobile } from "react-device-detect";
+import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
+import { Switch } from "../ui/switch";
+import { Label } from "../ui/label";
 
 const ATTRIBUTES = ["amazon", "face", "fedex", "license_plate", "ups"];
 
@@ -137,6 +140,105 @@ function CamerasFilterButton({
     selectedCameras,
   );
 
+  const trigger = (
+    <Button size="sm" className="mx-1 capitalize" variant="secondary">
+      <FaVideo className="md:mr-[10px] text-muted-foreground" />
+      <div className="hidden md:block">
+        {selectedCameras == undefined
+          ? "All Cameras"
+          : `${selectedCameras.length} Cameras`}
+      </div>
+    </Button>
+  );
+  const content = (
+    <>
+      <DropdownMenuLabel className="flex justify-center">
+        Filter Cameras
+      </DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      <FilterCheckBox
+        isChecked={currentCameras == undefined}
+        label="All Cameras"
+        onCheckedChange={(isChecked) => {
+          if (isChecked) {
+            setCurrentCameras(undefined);
+          }
+        }}
+      />
+      {groups.length > 0 && (
+        <>
+          <DropdownMenuSeparator />
+          {groups.map(([name, conf]) => {
+            return (
+              <FilterCheckBox
+                key={name}
+                label={name}
+                isChecked={false}
+                onCheckedChange={() => {
+                  setCurrentCameras([...conf.cameras]);
+                }}
+              />
+            );
+          })}
+        </>
+      )}
+      <DropdownMenuSeparator />
+      {allCameras.map((item) => (
+        <FilterCheckBox
+          key={item}
+          isChecked={currentCameras?.includes(item) ?? false}
+          label={item.replaceAll("_", " ")}
+          onCheckedChange={(isChecked) => {
+            if (isChecked) {
+              const updatedCameras = currentCameras ? [...currentCameras] : [];
+
+              updatedCameras.push(item);
+              setCurrentCameras(updatedCameras);
+            } else {
+              const updatedCameras = currentCameras ? [...currentCameras] : [];
+
+              // can not deselect the last item
+              if (updatedCameras.length > 1) {
+                updatedCameras.splice(updatedCameras.indexOf(item), 1);
+                setCurrentCameras(updatedCameras);
+              }
+            }
+          }}
+        />
+      ))}
+      <DropdownMenuSeparator />
+      <div className="flex justify-center items-center">
+        <Button
+          variant="select"
+          onClick={() => {
+            updateCameraFilter(currentCameras);
+            setOpen(false);
+          }}
+        >
+          Apply
+        </Button>
+      </div>
+    </>
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer
+        open={open}
+        onOpenChange={(open) => {
+          if (!open) {
+            setCurrentCameras(selectedCameras);
+          }
+
+          setOpen(open);
+        }}
+      >
+        <DrawerTrigger asChild>{trigger}</DrawerTrigger>
+        <DrawerContent>{content}</DrawerContent>
+      </Drawer>
+    );
+  }
+
   return (
     <DropdownMenu
       open={open}
@@ -148,87 +250,8 @@ function CamerasFilterButton({
         setOpen(open);
       }}
     >
-      <DropdownMenuTrigger asChild>
-        <Button size="sm" className="mx-1 capitalize" variant="secondary">
-          <FaVideo className="md:mr-[10px] text-muted-foreground" />
-          <div className="hidden md:block">
-            {selectedCameras == undefined
-              ? "All Cameras"
-              : `${selectedCameras.length} Cameras`}
-          </div>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuLabel>Filter Cameras</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <FilterCheckBox
-          isChecked={currentCameras == undefined}
-          label="All Cameras"
-          onCheckedChange={(isChecked) => {
-            if (isChecked) {
-              setCurrentCameras(undefined);
-            }
-          }}
-        />
-        {groups.length > 0 && (
-          <>
-            <DropdownMenuSeparator />
-            {groups.map(([name, conf]) => {
-              return (
-                <FilterCheckBox
-                  key={name}
-                  label={name}
-                  CheckIcon={getIconTypeForGroup(conf.icon)}
-                  isChecked
-                  onCheckedChange={() => {
-                    setCurrentCameras([...conf.cameras]);
-                  }}
-                />
-              );
-            })}
-          </>
-        )}
-        <DropdownMenuSeparator />
-        {allCameras.map((item) => (
-          <FilterCheckBox
-            key={item}
-            isChecked={currentCameras?.includes(item) ?? false}
-            label={item.replaceAll("_", " ")}
-            onCheckedChange={(isChecked) => {
-              if (isChecked) {
-                const updatedCameras = currentCameras
-                  ? [...currentCameras]
-                  : [];
-
-                updatedCameras.push(item);
-                setCurrentCameras(updatedCameras);
-              } else {
-                const updatedCameras = currentCameras
-                  ? [...currentCameras]
-                  : [];
-
-                // can not deselect the last item
-                if (updatedCameras.length > 1) {
-                  updatedCameras.splice(updatedCameras.indexOf(item), 1);
-                  setCurrentCameras(updatedCameras);
-                }
-              }
-            }}
-          />
-        ))}
-        <DropdownMenuSeparator />
-        <div className="flex justify-center items-center">
-          <Button
-            variant="select"
-            onClick={() => {
-              updateCameraFilter(currentCameras);
-              setOpen(false);
-            }}
-          >
-            Apply
-          </Button>
-        </div>
-      </DropdownMenuContent>
+      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
+      <DropdownMenuContent>{content}</DropdownMenuContent>
     </DropdownMenu>
   );
 }
@@ -255,6 +278,58 @@ function CalendarFilterButton({
     "%b %-d",
   );
 
+  const trigger = (
+    <Button size="sm" className="mx-1" variant="secondary">
+      <FaCalendarAlt className="md:mr-[10px] text-muted-foreground" />
+      <div className="hidden md:block">
+        {day == undefined ? "Last 24 Hours" : selectedDate}
+      </div>
+    </Button>
+  );
+  const content = (
+    <>
+      <Calendar
+        mode="single"
+        disabled={disabledDates}
+        selected={selectedDay}
+        showOutsideDays={false}
+        onSelect={(day) => {
+          setSelectedDay(day);
+        }}
+      />
+      <DropdownMenuSeparator />
+      <div className="flex justify-center items-center">
+        <Button
+          variant="select"
+          onClick={() => {
+            updateSelectedDay(selectedDay);
+            setOpen(false);
+          }}
+        >
+          Apply
+        </Button>
+      </div>
+    </>
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer
+        open={open}
+        onOpenChange={(open) => {
+          if (!open) {
+            setSelectedDay(day);
+          }
+
+          setOpen(open);
+        }}
+      >
+        <DrawerTrigger asChild>{trigger}</DrawerTrigger>
+        <DrawerContent>{content}</DrawerContent>
+      </Drawer>
+    );
+  }
+
   return (
     <Popover
       open={open}
@@ -266,36 +341,8 @@ function CalendarFilterButton({
         setOpen(open);
       }}
     >
-      <PopoverTrigger asChild>
-        <Button size="sm" className="mx-1" variant="secondary">
-          <FaCalendarAlt className="md:mr-[10px] text-muted-foreground" />
-          <div className="hidden md:block">
-            {day == undefined ? "Last 24 Hours" : selectedDate}
-          </div>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent>
-        <Calendar
-          mode="single"
-          disabled={disabledDates}
-          selected={selectedDay}
-          onSelect={(day) => {
-            setSelectedDay(day);
-          }}
-        />
-        <DropdownMenuSeparator />
-        <div className="flex justify-center items-center">
-          <Button
-            variant="select"
-            onClick={() => {
-              updateSelectedDay(selectedDay);
-              setOpen(false);
-            }}
-          >
-            Apply
-          </Button>
-        </div>
-      </PopoverContent>
+      <PopoverTrigger asChild>{trigger}</PopoverTrigger>
+      <PopoverContent>{content}</PopoverContent>
     </Popover>
   );
 }
@@ -320,6 +367,101 @@ function GeneralFilterButton({
     selectedLabels,
   );
 
+  const trigger = (
+    <Button size="sm" className="ml-1" variant="secondary">
+      <FaFilter className="md:mr-[10px] text-muted-foreground" />
+      <div className="hidden md:block">Filter</div>
+    </Button>
+  );
+  const content = (
+    <>
+      <div className="flex p-2 justify-start items-center">
+        <Switch
+          id="reviewed"
+          checked={reviewed == 1}
+          onCheckedChange={() => setReviewed(reviewed == 0 ? 1 : 0)}
+        />
+        <Label className="ml-2" htmlFor="reviewed">Show Reviewed</Label>
+      </div>
+      <DropdownMenuSeparator />
+      <DropdownMenuLabel className="flex justify-center items-center">
+        Filter Labels
+      </DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      <FilterCheckBox
+        isChecked={currentLabels == undefined}
+        label="All Labels"
+        onCheckedChange={(isChecked) => {
+          if (isChecked) {
+            setCurrentLabels(undefined);
+          }
+        }}
+      />
+      <DropdownMenuSeparator />
+      {allLabels.map((item) => (
+        <FilterCheckBox
+          key={item}
+          isChecked={currentLabels?.includes(item) ?? false}
+          label={item.replaceAll("_", " ")}
+          onCheckedChange={(isChecked) => {
+            if (isChecked) {
+              const updatedLabels = currentLabels ? [...currentLabels] : [];
+
+              updatedLabels.push(item);
+              setCurrentLabels(updatedLabels);
+            } else {
+              const updatedLabels = currentLabels ? [...currentLabels] : [];
+
+              // can not deselect the last item
+              if (updatedLabels.length > 1) {
+                updatedLabels.splice(updatedLabels.indexOf(item), 1);
+                setCurrentLabels(updatedLabels);
+              }
+            }
+          }}
+        />
+      ))}
+      <DropdownMenuSeparator />
+      <div className="flex justify-center items-center">
+        <Button
+          variant="select"
+          onClick={() => {
+            if (reviewed != showReviewed) {
+              setShowReviewed(reviewed);
+            }
+
+            if (selectedLabels != currentLabels) {
+              updateLabelFilter(currentLabels);
+            }
+
+            setOpen(false);
+          }}
+        >
+          Apply
+        </Button>
+      </div>
+    </>
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer
+        open={open}
+        onOpenChange={(open) => {
+          if (!open) {
+            setReviewed(showReviewed ?? 0);
+            setCurrentLabels(selectedLabels);
+          }
+
+          setOpen(open);
+        }}
+      >
+        <DrawerTrigger asChild>{trigger}</DrawerTrigger>
+        <DrawerContent>{content}</DrawerContent>
+      </Drawer>
+    );
+  }
+
   return (
     <Popover
       open={open}
@@ -332,85 +474,8 @@ function GeneralFilterButton({
         setOpen(open);
       }}
     >
-      <PopoverTrigger asChild>
-        <Button size="sm" className="ml-1" variant="secondary">
-          <FaFilter className="md:mr-[10px] text-muted-foreground" />
-          <div className="hidden md:block">Filter</div>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent side="left">
-        <>
-          <Button
-            className="capitalize flex justify-between items-center w-full"
-            variant="ghost"
-            onClick={() => setReviewed(reviewed == 0 ? 1 : 0)}
-          >
-            {reviewed ? (
-              <LuCheck className="w-6 h-6" />
-            ) : (
-              <div className="w-6 h-6" />
-            )}
-            <div className="ml-1 w-full flex justify-start text-primary-foreground">
-              Show Reviewed
-            </div>
-          </Button>
-          <DropdownMenuSeparator />
-          <DropdownMenuLabel>Filter Labels</DropdownMenuLabel>
-          <DropdownMenuSeparator />
-          <FilterCheckBox
-            isChecked={currentLabels == undefined}
-            label="All Labels"
-            onCheckedChange={(isChecked) => {
-              if (isChecked) {
-                setCurrentLabels(undefined);
-              }
-            }}
-          />
-          <DropdownMenuSeparator />
-          {allLabels.map((item) => (
-            <FilterCheckBox
-              key={item}
-              isChecked={currentLabels?.includes(item) ?? false}
-              label={item.replaceAll("_", " ")}
-              onCheckedChange={(isChecked) => {
-                if (isChecked) {
-                  const updatedLabels = currentLabels ? [...currentLabels] : [];
-
-                  updatedLabels.push(item);
-                  setCurrentLabels(updatedLabels);
-                } else {
-                  const updatedLabels = currentLabels ? [...currentLabels] : [];
-
-                  // can not deselect the last item
-                  if (updatedLabels.length > 1) {
-                    updatedLabels.splice(updatedLabels.indexOf(item), 1);
-                    setCurrentLabels(updatedLabels);
-                  }
-                }
-              }}
-            />
-          ))}
-          <DropdownMenuSeparator />
-          <div className="flex justify-center items-center">
-            <Button
-              variant="select"
-              onClick={() => {
-                if (reviewed != showReviewed) {
-                  setShowReviewed(reviewed);
-                }
-
-                if (selectedLabels != currentLabels) {
-                  updateLabelFilter(currentLabels);
-                }
-
-                setOpen(false);
-              }}
-            >
-              Apply
-            </Button>
-          </div>
-        </>
-      </PopoverContent>
+      <PopoverTrigger asChild>{trigger}</PopoverTrigger>
+      <PopoverContent side="left">{content}</PopoverContent>
     </Popover>
   );
 }

web/src/components/ui/calendar.tsx

@@ -25,19 +25,19 @@ function Calendar({
         nav: "space-x-1 flex items-center",
         nav_button: cn(
           buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
         ),
         nav_button_previous: "absolute left-1",
         nav_button_next: "absolute right-1",
         table: "w-full border-collapse space-y-1",
-        head_row: "flex",
+        head_row: "flex justify-center",
         head_cell:
           "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
+        row: "flex w-full mt-2 justify-center",
         cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
         day: cn(
           buttonVariants({ variant: "ghost" }),
-          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100",
         ),
         day_range_end: "day-range-end",
         day_selected:

web/src/components/ui/switch.tsx

@@ -9,7 +9,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-selected data-[state=unchecked]:bg-input",
       className
     )}
     {...props}