Convert HeaderMenu component to Sass

src/components/HeaderMenu/index.css

@@ -1,50 +0,0 @@
-.Menu {
-    background: white;
-    border-radius: 6px;
-    display: none;
-    min-width: 140px;
-    position: absolute;
-    top: 24px;
-    z-index: 1;
-}
-
-.MenuItem {
-    -webkit-font-smoothing: antialiased;
-
-    color: #777;
-    font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
-    font-weight: 500;
-    padding: 6px 12px;
-}
-
-.MenuItem:hover {
-    color: #555;
-    cursor: pointer;
-    background: #f9f9f9;
-}
-
-.MenuItem a {
-    color: #777
-}
-
-.MenuItem:hover a {
-    color: #555
-}
-
-.MenuGroup {
-    border-bottom: 2px solid #f5f5f5;
-}
-
-.MenuGroup:first-child .MenuItem:first-child:hover {
-    border-top-left-radius: 6px;
-    border-top-right-radius: 6px;
-}
-
-.MenuGroup:last-child .MenuItem:last-child:hover {
-    border-bottom-left-radius: 6px;
-    border-bottom-right-radius: 6px;
-}
-
-.MenuGroup:last-child {
-    border-bottom: none;
-}

src/components/HeaderMenu/index.scss

@@ -0,0 +1,47 @@
+.Menu {
+    background: white;
+    border-radius: 6px;
+    display: none;
+    min-width: 140px;
+    position: absolute;
+    top: $unit * 4;
+    z-index: 1;
+}
+
+.MenuItem {
+    color: $grey-10;
+    font-weight: 500;
+    padding: 6px 12px;
+
+    &:hover {
+        background: $grey-90;
+        color: $grey-00;
+        cursor: pointer;
+    }
+
+    a {
+        color: $grey-10;
+
+        &:hover {
+            color: $grey-00;
+        }
+    }
+}
+
+.MenuGroup {
+    border-bottom: 2px solid #f5f5f5;
+
+    &:first-child .MenuItem:first-child:hover {
+        border-top-left-radius: 6px;
+        border-top-right-radius: 6px;
+    }
+
+    &:last-child .MenuItem:last-child:hover {
+        border-bottom-left-radius: 6px;
+        border-bottom-right-radius: 6px;
+    }
+
+    &:last-child {
+        border-bottom: none;
+    }
+}

src/components/HeaderMenu/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import './index.css'
+import './index.scss'
 
 import LoginModal from '~components/LoginModal'
 import SignupModal from '~components/SignupModal'