diff --git a/src/pages/auth/Auth.module.scss b/src/pages/auth/Auth.module.scss index 1ff79cc4..a631556f 100644 --- a/src/pages/auth/Auth.module.scss +++ b/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; diff --git a/src/pages/auth/Auth.tsx b/src/pages/auth/Auth.tsx index 9d1f6008..7057e10e 100644 --- a/src/pages/auth/Auth.tsx +++ b/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 }) => { {!isElectron && ( - - 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. -

- } - > - {({ ref, iconRef, getAttrs }) => ( - - - How can I create an account? - - )} -
+ )} ) diff --git a/src/pages/auth/Menu.module.scss b/src/pages/auth/Menu.module.scss index 12ce1c70..832d9fae 100644 --- a/src/pages/auth/Menu.module.scss +++ b/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; + } + } } diff --git a/src/pages/auth/Menu.tsx b/src/pages/auth/Menu.tsx index 354b5cb5..137e7fa5 100644 --- a/src/pages/auth/Menu.tsx +++ b/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) => (
- {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: ( <> - +

{title}

- - {isNotReady && ( -

- Coming soon -

- )} + ) } - return disabled && !isNotReady ? ( + return disabled ? (