design(Auth): Redesign auth menu

src/pages/auth/Auth.module.scss

@@ -1,10 +1,18 @@
+@import '../../styles/variables';
 @import '../../styles/mixins';
 
 .footer {
-  @include flex();
+  border-top: 1px solid $hairline;
+  padding: 20px;
+  padding-bottom: 0;
 
-  font-size: 13px;
-  margin: 30px auto 0;
+  span {
+    @include flex(flex-start);
+    display: inline-flex;
+
+    color: $sky;
+    font-size: 13px;
+  }
 
   i {
     margin-right: 8px;

src/pages/auth/Auth.tsx

@@ -15,7 +15,6 @@ import s from './Auth.module.scss'
 export type Item = {
   title: string
   icon: string
-  isNotReady?: boolean
   disabled?: boolean
   render: () => ReactNode
 }
@@ -75,25 +74,27 @@ const Auth = ({ onClose }: { onClose: () => void }) => {
       <Menu list={list} onSelect={setCurrentIndex} />
 
       {!isElectron && (
-        <Pop
-          type="pop"
-          placement="top"
-          width={380}
-          content={
-            <p className={s.tooltip}>
-              If you want to create an account, please download {TerraStation}.
-              We don't support creating an account for Terra Station web due to
-              the security reasons.
-            </p>
-          }
-        >
-          {({ ref, iconRef, getAttrs }) => (
-            <span {...getAttrs({ className: s.footer })} ref={ref}>
-              <Icon name="info" forwardRef={iconRef} />
-              How can I create an account?
-            </span>
-          )}
-        </Pop>
+        <footer className={s.footer}>
+          <Pop
+            type="pop"
+            placement="top"
+            width={380}
+            content={
+              <p className={s.tooltip}>
+                If you want to create an account, please download {TerraStation}
+                . We don't support creating an account for Terra Station web due
+                to the security reasons.
+              </p>
+            }
+          >
+            {({ ref, iconRef, getAttrs }) => (
+              <span {...getAttrs({})} ref={ref}>
+                <Icon name="info" forwardRef={iconRef} />
+                How can I create an account?
+              </span>
+            )}
+          </Pop>
+        </footer>
       )}
     </ModalContent>
   )

src/pages/auth/Menu.module.scss

@@ -1,59 +1,47 @@
 @import '../../styles/mixins';
 @import '../../styles/variables';
 
-.list {
-  @include flex(flex-start);
-  flex-wrap: wrap;
-
-  .item {
-    flex: none;
-
-    @media (max-width: $breakpoint - 1) {
-      width: 100%;
-    }
-
-    @media (min-width: $breakpoint) {
-      width: 50%;
-    }
-  }
-}
-
 .item {
   @include flex();
-  flex-direction: column;
-  padding: 25px;
+  padding: 20px;
   position: relative;
   overflow: visible;
+  width: 100%;
+
+  &:not(:first-child) {
+    border-top: 1px solid $hairline;
+  }
 
   h1 {
+    flex: 1;
     font-size: 15px;
     font-weight: 500;
-    margin-top: 10px;
+    margin-left: 15px;
+    text-align: left;
+
     @media (max-width: $breakpoint - 1) {
       font-size: 18px;
     }
   }
 
-  &:hover:not(:disabled) {
-    background: $bg-hover;
+  .chevron {
+    @include flex();
+    border: 1px solid $line;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
   }
 
-  &.disabled,
-  &:disabled {
-    i,
-    h1 {
-      opacity: 0.5;
-    }
+  &.disabled {
+    opacity: 0.5;
   }
-}
 
-.badge {
-  position: absolute;
-  left: 50%;
-  bottom: -10px;
-  transform: translate(-50%, 0);
+  &:not(.disabled):hover {
+    background: $bg-hover;
 
-  font-size: 11px;
-  font-weight: 400;
-  text-transform: uppercase;
+    .chevron {
+      background: $brand;
+      color: white;
+    }
+  }
 }

src/pages/auth/Menu.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import c from 'classnames'
 import Icon from '../../components/Icon'
-import Badge from '../../components/Badge'
 import Pop from '../../components/Pop'
 import { Item } from './Auth'
 import s from './Menu.module.scss'
@@ -10,26 +9,21 @@ type Props = { list: Item[]; onSelect: (index: number) => void }
 
 const Menu = ({ list, onSelect }: Props) => (
   <div className={s.list}>
-    {list.map(({ title, icon, isNotReady, disabled }, index) => {
+    {list.map(({ title, icon, disabled }, index) => {
       const attrs = {
         disabled,
-        className: c(s.item, isNotReady && 'desktop'),
+        className: c(s.item),
         onClick: () => onSelect(index),
         children: (
           <>
-            <Icon name={icon} size={48} />
+            <Icon name={icon} size={40} />
             <h1>{title}</h1>
-
-            {isNotReady && (
-              <p className={s.badge}>
-                <Badge className="badge-secondary">Coming soon</Badge>
-              </p>
-            )}
+            <Icon name="chevron_right" className={s.chevron} />
           </>
         )
       }
 
-      return disabled && !isNotReady ? (
+      return disabled ? (
         <Pop
           type="tooltip"
           placement="top"