Convert Button component to Sass

src/components/Button/index.css

@@ -1,76 +0,0 @@
-.Button {
-    -webkit-font-smoothing: antialiased;
-    border: none;
-    box-shadow: none;
-
-    align-items: center;
-    border-radius: 6px;
-    display: inline-flex;
-    font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
-    font-size: 16px;
-    font-weight: 600;
-    gap: 6px;
-    padding: 8px 12px;
-}
-
-.Button.btn-grey {
-    background: white;
-    color: #777;
-}
-
-.Button.btn-blue {
-    background: #61B3FF;
-    color: #8b8b8b;
-}
-
-.Button.btn-blue:hover {
-    background: #4B9BE5;
-    color: #233E56;
-}
-
-.Button.btn-red {
-    background: #fa4242;
-    color: #860f0f;
-}
-
-.Button.btn-red:hover {
-    background: #e91a1a;
-    color: #4e1717;
-}
-
-.Button.btn-red .icon {
-    color: #860f0f;
-}
-
-.Button.btn-red:hover .icon {
-    color: #4e1717;
-}
-
-.Button.btn-disabled {
-    background: #e0e0e0;
-    color: #bababa;
-}
-
-.Button.btn-disabled:hover {
-    background: #e0e0e0;
-    color: #bababa;
-}
-
-.Button .icon {
-    color: #c9c9c9;
-    height: 12px;
-    width: 12px;
-}
-
-.Button .text {
-    color: inherit;
-}
-
-.Button:hover {
-    color: #555;
-    cursor: pointer;
-}
-
-.Button:hover .icon {
-    color: #2360C5;
-}

src/components/Button/index.scss

@@ -0,0 +1,85 @@
+.Button {
+    -webkit-font-smoothing: antialiased;
+    border: none;
+    box-shadow: none;
+
+    align-items: center;
+    border-radius: 6px;
+    display: inline-flex;
+    font-size: 1.4rem;
+    font-weight: 600;
+    gap: 6px;
+    padding: 8px 12px;
+
+    &:hover {
+        color: $grey-00;
+        cursor: pointer;
+
+        & .icon {
+            color: #2360C5;
+        }
+    }
+
+    &.btn-grey {
+        background: white;
+
+        &:hover {
+            background: $grey-90;
+        }
+
+        .text {
+            color: $grey-10;
+        }
+    }
+
+    &.btn-blue {
+        background: $blue;
+        color: #8b8b8b;
+
+        &:hover {
+            background: #4B9BE5;
+            color: #233E56;
+        }
+    }
+
+    &.btn-red {
+        background: #fa4242;
+        color: #860f0f;
+
+        &:hover {
+            background: #e91a1a;
+            color: #4e1717;
+
+            .icon {
+                color: #4e1717;
+            }
+        }
+
+        .icon {
+            color: #860f0f;
+        }
+    }
+
+    &.btn-disabled {
+        background: #e0e0e0;
+        color: #bababa;
+
+        &:hover {
+            background: #e0e0e0;
+            color: #bababa;
+        }
+    }
+
+    .icon {
+        height: 12px;
+        width: 12px;
+
+        svg {
+            fill: #c9c9c9;
+        }
+    }
+    
+    .text {
+        color: inherit;
+    }
+}

src/components/Button/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classNames from 'classnames'
 
-import './index.css'
+import './index.scss'
 
 import New from '../../../assets/new'
 import Menu from '../../../assets/menu'