changed some styles

features/category/components/CategoryFilters.tsx

@@ -4,6 +4,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 {
@@ -50,7 +51,7 @@ export default function CategoryFilters({
   translations,
 }: CategoryFiltersProps) {
   return (
-    <div className="space-y-6 mb-6">
+    <div className="space-y-8 mb-3">
       {filtersData?.categories && filtersData.categories.length > 0 && (
         <FilterSection title={translations.category}>
           {filtersData.categories.map((category) => (
@@ -77,27 +78,6 @@ export default function CategoryFilters({
         </FilterSection>
       )}
 
-      {/* <FilterSection title={translations.sort}>
-        <RadioItem
-          name="sort"
-          checked={priceSort === "none"}
-          onChange={() => onPriceSortChange("none")}
-          label={translations.default}
-        />
-        <RadioItem
-          name="sort"
-          checked={priceSort === "lowToHigh"}
-          onChange={() => onPriceSortChange("lowToHigh")}
-          label={translations.price_low_to_high}
-        />
-        <RadioItem
-          name="sort"
-          checked={priceSort === "highToLow"}
-          onChange={() => onPriceSortChange("highToLow")}
-          label={translations.price_high_to_low}
-        />
-      </FilterSection> */}
-
       <PriceFilter
         title={translations.price}
         priceRange={priceRange}
@@ -108,7 +88,12 @@ export default function CategoryFilters({
         }}
       />
 
-      <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>
@@ -123,9 +108,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 mb-2 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>
   );
 }
@@ -140,9 +125,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 mb-1 transition-colors">
+      <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>
   );
 }
@@ -159,15 +150,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>
   );
 }
@@ -184,12 +177,15 @@ 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
@@ -199,11 +195,14 @@ 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
@@ -216,19 +215,21 @@ 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/category/components/CategoryFiltersSheet.tsx

@@ -28,7 +28,7 @@ export default function CategoryFiltersSheet({
     <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}
@@ -36,13 +36,13 @@ export default function CategoryFiltersSheet({
         </Button>
       </SheetTrigger>
       <SheetContent side="left" className="w-[290px] p-0">
-        <SheetHeader className="p-4 border-b">
-          <SheetTitle>{filterLabel}</SheetTitle>
+        <SheetHeader className="p-4 border-b text-gray-900">
+          <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"
+            className="absolute top-4 right-4 rounded-[10px] cursor-pointer ring-offset-background transition-opacity hover:opacity-100 text-gray-900"
           >
-            <X className="h-4 w-4" />
+            <X className="h-4 w-4 text-gray-900" />
             <span className="sr-only">{closeLabel}</span>
           </button>
         </SheetHeader>