Fix slider and switch components

components/common/Slider/index.module.scss

@@ -1,4 +1,4 @@
-.Slider {
+.slider {
   position: relative;
   display: flex;
   align-items: center;
@@ -7,7 +7,7 @@
   width: $unit-20x;
   height: 20px;
 
-  .SliderTrack {
+  .track {
     background-color: var(--button-bg);
     position: relative;
     flex-grow: 1;
@@ -16,14 +16,14 @@
   }
 }
 
-.SliderRange {
+.range {
   position: absolute;
   background-color: var(--accent-blue);
   border-radius: 9999px;
   height: 100%;
 }
 
-.SliderThumb {
+.thumb {
   display: block;
   width: 20px;
   height: 20px;

components/common/Slider/index.tsx

@@ -9,19 +9,20 @@ interface Props {}
 
 const Slider = React.forwardRef<HTMLDivElement, Props & SliderProps>(
   (props, forwardedRef) => {
-    const value = props.value || props.defaultValue
+    const classes = classNames(
+      {
+        [styles.slider]: true,
+      },
+      props.className?.split(' ').map((c) => styles[c])
+    )
 
     return (
-      <SliderPrimitive.Slider
-        {...props}
-        className={classNames({ Slider: true }, props.className)}
-        ref={forwardedRef}
-      >
-        <SliderPrimitive.Track className="SliderTrack">
-          <SliderPrimitive.Range className="SliderRange" />
+      <SliderPrimitive.Slider {...props} className={classes} ref={forwardedRef}>
+        <SliderPrimitive.Track className={styles.track}>
+          <SliderPrimitive.Range className={styles.range} />
         </SliderPrimitive.Track>
 
-        <SliderPrimitive.Thumb className="SliderThumb" />
+        <SliderPrimitive.Thumb className={styles.thumb} />
       </SliderPrimitive.Slider>
     )
   }

components/common/Switch/index.module.scss

@@ -1,4 +1,4 @@
-.Switch {
+.switch {
   $height: 34px;
   background: $grey-70;
   border-radius: calc($height / 2);
@@ -33,7 +33,7 @@
   }
 }
 
-.SwitchThumb {
+.thumb {
   background: $grey-100;
   border-radius: 13px;
   display: block;

components/common/Switch/index.tsx

@@ -25,8 +25,19 @@ const Switch = (props: Props) => {
     value,
   } = props
 
-  const mainClasses = classNames({ Switch: true }, className)
-  const thumbClasses = classNames({ SwitchThumb: true }, thumbClass)
+  const mainClasses = classNames(
+    {
+      [styles.switch]: true,
+    },
+    className?.split(' ').map((c) => styles[c])
+  )
+
+  const thumbClasses = classNames(
+    {
+      [styles.thumb]: true,
+    },
+    thumbClass?.split(' ').map((c) => styles[c])
+  )
 
   return (
     <RadixSwitch.Root