changed some color and fix some styles

features/category/components/CategoryFiltersSheet.tsx

@@ -8,6 +8,7 @@ import {
   SheetTrigger,
 } from "@/components/ui/sheet";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { useState } from "react";
 
 interface CategoryFiltersSheetProps {
   isOpen: boolean;
@@ -24,6 +25,24 @@ export default function CategoryFiltersSheet({
   closeLabel,
   children,
 }: CategoryFiltersSheetProps) {
+  const [touchStart, setTouchStart] = useState<number | null>(null);
+
+  const handleTouchStart = (e: React.TouchEvent) => {
+    setTouchStart(e.targetTouches[0].clientX);
+  };
+
+  const handleTouchEnd = (e: React.TouchEvent) => {
+    if (touchStart === null) return;
+    const touchEnd = e.changedTouches[0].clientX;
+    const distance = touchStart - touchEnd;
+
+    // Side is left, so swiping left (positive distance) closes it
+    if (distance > 50) {
+      onOpenChange(false);
+    }
+    setTouchStart(null);
+  };
+
   return (
     <Sheet open={isOpen} onOpenChange={onOpenChange}>
       <SheetTrigger asChild>
@@ -35,7 +54,12 @@ export default function CategoryFiltersSheet({
           <SlidersHorizontal className="h-5 w-5" />
         </Button>
       </SheetTrigger>
-      <SheetContent side="left" className="w-[290px] p-0">
+      <SheetContent
+        side="left"
+        className="w-[290px] p-0"
+        onTouchStart={handleTouchStart}
+        onTouchEnd={handleTouchEnd}
+      >
         <SheetHeader className="p-4 border-b text-gray-900">
           <SheetTitle className="text-gray-900">{filterLabel}</SheetTitle>
           <button
@@ -46,10 +70,8 @@ export default function CategoryFiltersSheet({
             <span className="sr-only">{closeLabel}</span>
           </button>
         </SheetHeader>
-        <ScrollArea className="h-[calc(100vh-80px)] p-4">
-          {children}
-        </ScrollArea>
+        <ScrollArea className="h-[calc(100vh-80px)] p-4">{children}</ScrollArea>
       </SheetContent>
     </Sheet>
   );
-}
+}