changed some styles

features/collections/components/CollectionFilters.tsx

@@ -3,6 +3,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Slider } from "@/components/ui/slider";
+import { RotateCcw } from "lucide-react";
 import type { FilterBrand, FilterCategory } from "@/lib/types/api";
 
 interface FiltersData {
@@ -49,7 +50,7 @@ export default function CollectionFilters({
   translations,
 }: CollectionFiltersProps) {
   return (
-    <div className="space-y-6 mb-6">
+    <div className="space-y-8 mb-6">
       {filtersData?.categories && filtersData.categories.length > 0 && (
         <FilterSection title={translations.category}>
           {filtersData.categories.map((category) => (
@@ -76,7 +77,7 @@ export default function CollectionFilters({
         </FilterSection>
       )}
 
-      <FilterSection title={translations.sort}>
+      {/* <FilterSection title={translations.sort}>
         <RadioItem
           name="sort"
           checked={priceSort === "none"}
@@ -95,7 +96,7 @@ export default function CollectionFilters({
           onChange={() => onPriceSortChange("highToLow")}
           label={translations.price_high_to_low}
         />
-      </FilterSection>
+      </FilterSection> */}
 
       <PriceFilter
         title={translations.price}
@@ -107,7 +108,12 @@ export default function CollectionFilters({
         }}
       />
 
-      <Button variant="outline" className="w-full rounded-lg cursor-pointer mb-6" onClick={onReset}>
+      <Button 
+        variant="outline" 
+        className="w-full rounded-[10px] cursor-pointer mb-6 h-12 font-semibold border-2 border-gray-200 hover:border-gray-900 hover:bg-gray-50 transition-all duration-200 gap-2" 
+        onClick={onReset}
+      >
+        <RotateCcw className="h-4 w-4" />
         {translations.reset}
       </Button>
     </div>
@@ -122,9 +128,9 @@ function FilterSection({
   children: React.ReactNode;
 }) {
   return (
-    <div>
-      <h3 className="text-lg font-semibold mb-3">{title}</h3>
-      <div className="space-y-2">{children}</div>
+    <div className="pb-6 border-b border-gray-100 last:border-0">
+      <h3 className="text-lg font-bold mb-4 text-gray-900">{title}</h3>
+      <div className="space-y-3">{children}</div>
     </div>
   );
 }
@@ -139,9 +145,15 @@ function CheckboxItem({
   label: string;
 }) {
   return (
-    <label className="flex items-center gap-2 cursor-pointer">
-      <Checkbox checked={checked} onCheckedChange={onCheckedChange} />
-      <span className="text-sm">{label}</span>
+    <label className="flex items-center gap-3 cursor-pointer group py-1 hover:bg-gray-50 rounded-lg px-2 -mx-2 transition-colors mb-1">
+      <Checkbox 
+        checked={checked} 
+        onCheckedChange={onCheckedChange}
+        className="border-2 border-gray-300 data-[state=checked]:bg-gray-900 data-[state=checked]:border-gray-900"
+      />
+      <span className="text-sm font-medium text-gray-700 group-hover:text-gray-900 transition-colors">
+        {label}
+      </span>
     </label>
   );
 }
@@ -158,15 +170,17 @@ function RadioItem({
   label: string;
 }) {
   return (
-    <label className="flex items-center gap-2 cursor-pointer">
+    <label className="flex items-center gap-3 cursor-pointer group py-1 hover:bg-gray-50 rounded-lg px-2 -mx-2 transition-colors">
       <input
         type="radio"
         name={name}
         checked={checked}
         onChange={onChange}
-        className="w-4 h-4"
+        className="w-4 h-4 accent-gray-900"
       />
-      <span>{label}</span>
+      <span className="text-sm font-medium text-gray-700 group-hover:text-gray-900 transition-colors">
+        {label}
+      </span>
     </label>
   );
 }
@@ -183,12 +197,12 @@ function PriceFilter({
   translations: { from: string; to: string };
 }) {
   return (
-    <div>
-      <h3 className="text-lg font-semibold mb-3">{title}</h3>
-      <div className="space-y-4">
-        <div className="flex gap-2">
+    <div className="pb-6">
+      <h3 className="text-lg font-bold mb-4 text-gray-900">{title}</h3>
+      <div className="space-y-5">
+        <div className="flex gap-3">
           <div className="flex-1">
-            <Label htmlFor="price-from" className="text-xs mb-1">
+            <Label htmlFor="price-from" className="text-xs font-semibold mb-2 block text-gray-700">
               {translations.from}
             </Label>
             <Input
@@ -198,11 +212,11 @@ function PriceFilter({
               onChange={(e) =>
                 onPriceChange([parseInt(e.target.value) || 0, priceRange[1]])
               }
-              className="rounded-lg"
+              className="rounded-[10px] border-2 border-gray-200 focus:border-gray-900 h-11 font-medium"
             />
           </div>
           <div className="flex-1">
-            <Label htmlFor="price-to" className="text-xs mb-1">
+            <Label htmlFor="price-to" className="text-xs font-semibold mb-2 block text-gray-700">
               {translations.to}
             </Label>
             <Input
@@ -215,18 +229,20 @@ function PriceFilter({
                   parseInt(e.target.value) || 10000,
                 ])
               }
-              className="rounded-lg"
+              className="rounded-[10px] border-2 border-gray-200 focus:border-gray-900 h-11 font-medium"
             />
           </div>
         </div>
-        <Slider
-          min={0}
-          max={99999}
-          step={100}
-          value={priceRange}
-          onValueChange={onPriceChange}
-          className="mt-2"
-        />
+        <div className="px-1">
+          <Slider
+            min={0}
+            max={99999}
+            step={100}
+            value={priceRange}
+            onValueChange={onPriceChange}
+            className="mt-2"
+          />
+        </div>
       </div>
     </div>
   );

features/collections/components/CollectionFiltersSheet.tsx

@@ -28,7 +28,7 @@ export default function CollectionFiltersSheet({
     <Sheet open={isOpen} onOpenChange={onOpenChange}>
       <SheetTrigger asChild>
         <Button
-          className="bg-[#005bff] hover:bg-[#0041c4] sm:hidden fixed bottom-20 right-4 rounded-lg 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}
@@ -37,7 +37,7 @@ export default function CollectionFiltersSheet({
       </SheetTrigger>
       <SheetContent side="left" className="w-[290px] p-0">
         <SheetHeader className="p-4 border-b">
-          <SheetTitle>{filterLabel}</SheetTitle>
+          <SheetTitle className="text-gray-900">{filterLabel}</SheetTitle>
           <button
             onClick={() => onOpenChange(false)}
             className="absolute top-4 right-4 rounded-md cursor-pointer ring-offset-background transition-opacity hover:opacity-100"