From f9ba98ca8254ae2a8ddf39f40f9f1116019784c7 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 30 Jun 2023 13:09:31 -0700
Subject: [PATCH] Fix slider and switch components

---
 components/common/Slider/index.module.scss |  8 ++++----
 components/common/Slider/index.tsx         | 19 ++++++++++---------
 components/common/Switch/index.module.scss |  4 ++--
 components/common/Switch/index.tsx         | 15 +++++++++++++--
 4 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/components/common/Slider/index.module.scss b/components/common/Slider/index.module.scss
index 0a3a64d3..a34fb341 100644
--- a/components/common/Slider/index.module.scss
+++ b/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;
diff --git a/components/common/Slider/index.tsx b/components/common/Slider/index.tsx
index 37a7dd7e..57cdcb32 100644
--- a/components/common/Slider/index.tsx
+++ b/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>
     )
   }
diff --git a/components/common/Switch/index.module.scss b/components/common/Switch/index.module.scss
index 4548f64c..b8d4ed65 100644
--- a/components/common/Switch/index.module.scss
+++ b/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;
diff --git a/components/common/Switch/index.tsx b/components/common/Switch/index.tsx
index 3f0ccec9..949fd850 100644
--- a/components/common/Switch/index.tsx
+++ b/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