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 ? (