Match design for filters

web/src/components/filter/ReviewFilterGroup.tsx

@@ -515,7 +515,7 @@ function GeneralFilterButton({
       }}
     >
       <PopoverTrigger asChild>{trigger}</PopoverTrigger>
-      <PopoverContent side="left">{content}</PopoverContent>
+      <PopoverContent>{content}</PopoverContent>
     </Popover>
   );
 }
@@ -538,35 +538,52 @@ export function GeneralFilterContent({
 }: GeneralFilterContentProps) {
   return (
     <>
-      <DropdownMenuSeparator />
-      <DropdownMenuLabel className="flex justify-center items-center">
-        Filter Labels
-      </DropdownMenuLabel>
-      <DropdownMenuSeparator />
       <div className="h-auto overflow-y-auto overflow-x-hidden">
-        <FilterCheckBox
+        <div className="flex justify-between items-center my-2.5">
-          isChecked={currentLabels == undefined}
+          <Label
-          label="All Labels"
+            className="mx-2 text-secondary-foreground cursor-pointer"
+            htmlFor="allLabels"
+          >
+            All Labels
+          </Label>
+          <Switch
+            className="ml-1"
+            id="allLabels"
+            checked={currentLabels == undefined}
             onCheckedChange={(isChecked) => {
               if (isChecked) {
                 setCurrentLabels(undefined);
               }
             }}
           />
+        </div>
         <DropdownMenuSeparator />
+        <div className="my-2.5 flex flex-col gap-2.5">
           {allLabels.map((item) => (
-          <FilterCheckBox
+            <div className="flex justify-between items-center">
+              <Label
+                className="w-full mx-2 text-secondary-foreground capitalize cursor-pointer"
+                htmlFor={item}
+              >
+                {item.replaceAll("_", " ")}
+              </Label>
+              <Switch
                 key={item}
-            isChecked={currentLabels?.includes(item) ?? false}
+                className="ml-1"
-            label={item.replaceAll("_", " ")}
+                id={item}
+                checked={currentLabels?.includes(item) ?? false}
                 onCheckedChange={(isChecked) => {
                   if (isChecked) {
-                const updatedLabels = currentLabels ? [...currentLabels] : [];
+                    const updatedLabels = currentLabels
+                      ? [...currentLabels]
+                      : [];
 
                     updatedLabels.push(item);
                     setCurrentLabels(updatedLabels);
                   } else {
-                const updatedLabels = currentLabels ? [...currentLabels] : [];
+                    const updatedLabels = currentLabels
+                      ? [...currentLabels]
+                      : [];
 
                     // can not deselect the last item
                     if (updatedLabels.length > 1) {
@@ -576,8 +593,10 @@ export function GeneralFilterContent({
                   }
                 }}
               />
+            </div>
           ))}
         </div>
+      </div>
       <DropdownMenuSeparator />
       <div className="p-2 flex justify-evenly items-center">
         <Button

web/src/components/overlay/MobileReviewSettingsDrawer.tsx

@@ -292,10 +292,3 @@ export default function MobileReviewSettingsDrawer({
     </>
   );
 }
-
-/**
- * <MobileTimelineDrawer
-              selected={timelineType ?? "timeline"}
-              onSelect={setTimelineType}
-            />
- */