changed some color and fix some styles

features/collections/components/CollectionFiltersSheet.tsx

@@ -8,6 +8,7 @@ import {
   SheetTrigger,
 } from "@/components/ui/sheet";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { useState } from "react";
 
 interface CollectionFiltersSheetProps {
   isOpen: boolean;
@@ -24,18 +25,41 @@ export default function CollectionFiltersSheet({
   closeLabel,
   children,
 }: CollectionFiltersSheetProps) {
+  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>
         <Button
-           className=" border-gray-200 hover:border-gray-900 hover:bg-gray-50 transition-all duration-200 sm:hidden fixed bottom-20 right-4 rounded-[10px] cursor-pointer font-bold gap-2 z-10 shadow-lg"
+          className=" border-gray-200 hover:border-gray-900 hover:bg-gray-50 transition-all duration-200 sm:hidden fixed bottom-20 right-4 rounded-[10px] cursor-pointer font-bold gap-2 z-10 shadow-lg"
           size="lg"
         >
           {filterLabel}
           <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">
           <SheetTitle className="text-gray-900">{filterLabel}</SheetTitle>
           <button
@@ -46,10 +70,8 @@ export default function CollectionFiltersSheet({
             <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>
   );
-}
+}