mirror of
https://github.com/trezor/trezor-wallet
synced 2024-11-28 03:08:30 +00:00
Padding in accounts
This commit is contained in:
Vladimir Volek
parent
6199ac5ef3
commit
f8a947e187
@ -15,7 +15,7 @@ import colors from 'config/colors';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
position: relative;
|
||||
height: 64px;
|
||||
height: 70px;
|
||||
width: 320px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -16,6 +16,7 @@ const Wrapper = styled.div`
|
||||
color: ${colors.TEXT_SECONDARY};
|
||||
padding: 22px 48px;
|
||||
display: flex;
|
||||
border-top: 1px solid ${colors.BACKGROUND};
|
||||
`;
|
||||
|
||||
const StyledLink = styled(Link)`
|
||||
|
||||
@ -3,6 +3,8 @@ export const FONT_SIZE = {
|
||||
SMALLER: '12px',
|
||||
SMALL: '14px',
|
||||
BASE: '16px',
|
||||
TOP_MENU: '17px',
|
||||
BIG: '21px',
|
||||
BIGGER: '32px',
|
||||
BIGGEST: '36px',
|
||||
};
|
||||
|
||||
@ -22,8 +22,10 @@ const AsideWrapper = styled.aside`
|
||||
min-width: 320px;
|
||||
overflow: hidden;
|
||||
background: ${colors.MAIN};
|
||||
border-right: 1px solid ${colors.BACKGROUND};
|
||||
|
||||
.fixed {
|
||||
border-right: 1px solid ${colors.BACKGROUND};
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
|
||||
@ -11,7 +11,9 @@ import CoinMenu from './components/CoinMenu';
|
||||
import DeviceMenu from './components/DeviceMenu';
|
||||
import StickyContainer from './components/StickyContainer';
|
||||
|
||||
const Header = styled(DeviceHeader)``;
|
||||
const Header = styled(DeviceHeader)`
|
||||
border-right: 1px solid ${colors.BACKGROUND};
|
||||
`;
|
||||
|
||||
const TransitionGroupWrapper = styled(TransitionGroup)`
|
||||
width: 640px;
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import styled from 'styled-components';
|
||||
import React from 'react';
|
||||
import { FONT_SIZE } from 'config/variables';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import colors from 'config/colors';
|
||||
import Indicator from './components/Indicator';
|
||||
@ -7,20 +8,21 @@ import Indicator from './components/Indicator';
|
||||
const Wrapper = styled.div`
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0px 28px;
|
||||
padding: 0px 30px 0 40px;
|
||||
max-width: 600px;
|
||||
`;
|
||||
|
||||
const StyledNavLink = styled(NavLink)`
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
font-size: ${FONT_SIZE.TOP_MENU};
|
||||
color: ${colors.TEXT_SECONDARY};
|
||||
margin: 0px 4px;
|
||||
padding: 20px;
|
||||
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
transition: all 0.3s ease-in-out;
|
||||
@ -44,8 +46,9 @@ const TopNavigationAccount = (props) => {
|
||||
return (
|
||||
<Wrapper className="account-tabs">
|
||||
<StyledNavLink exact to={`${basePath}`}>Summary</StyledNavLink>
|
||||
<StyledNavLink to={`${basePath}/send`}>Send</StyledNavLink>
|
||||
<StyledNavLink to={`${basePath}/receive`}>Receive</StyledNavLink>
|
||||
<StyledNavLink to={`${basePath}/send`}>Send</StyledNavLink>
|
||||
{/* <StyledNavLink to={`${basePath}/signverify`}>Sign & Verify</StyledNavLink> */}
|
||||
<Indicator pathname={props.match.pathname} />
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
@ -66,7 +66,7 @@ const MainContent = styled.article`
|
||||
`;
|
||||
|
||||
const Navigation = styled.nav`
|
||||
height: 64px;
|
||||
height: 70px;
|
||||
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
|
||||
display: flex;
|
||||
background: ${colors.WHITE};
|
||||
|
||||
@ -16,7 +16,10 @@ import { FONT_SIZE, FONT_WEIGHT, FONT_FAMILY } from 'config/variables';
|
||||
|
||||
import type { Props } from './Container';
|
||||
|
||||
const Wrapper = styled.div``;
|
||||
const Wrapper = styled.div`
|
||||
padding-top: 20px;
|
||||
`;
|
||||
|
||||
const StyledH2 = styled(H2)`
|
||||
padding: 20px 48px;
|
||||
`;
|
||||
|
||||
@ -24,7 +24,7 @@ import type { Props } from './Container';
|
||||
const SmallScreenWidth = '850px';
|
||||
|
||||
const Wrapper = styled.section`
|
||||
padding: 0 48px;
|
||||
padding: 20px 48px;
|
||||
`;
|
||||
|
||||
const StyledH2 = styled(H2)`
|
||||
|
||||
@ -22,7 +22,7 @@ type State = {
|
||||
};
|
||||
|
||||
const Wrapper = styled.div`
|
||||
padding: 0 48px 25px;
|
||||
padding: 10px 0 25px 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
@ -52,12 +52,31 @@ const HideBalanceIconWrapper = styled.div`
|
||||
`;
|
||||
|
||||
const FiatValue = styled.div`
|
||||
font-size: ${FONT_SIZE.BASE};
|
||||
font-weight: ${FONT_WEIGHT.BASE};
|
||||
font-weight: ${FONT_WEIGHT.BIGGER};
|
||||
font-size: ${FONT_SIZE.BIG};
|
||||
margin: 7px 0;
|
||||
min-height: 25px;
|
||||
color: ${colors.TEXT_PRIMARY};
|
||||
`;
|
||||
|
||||
const FiatValueRate = styled.div`
|
||||
font-weight: ${FONT_WEIGHT.BIGGER};
|
||||
font-size: ${FONT_SIZE.BASE};
|
||||
min-height: 25px;
|
||||
margin: 7px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: ${colors.TEXT_PRIMARY};
|
||||
`;
|
||||
|
||||
const BalanceWrapper = styled.div`
|
||||
margin-right: 48px;
|
||||
`;
|
||||
|
||||
const BalanceRateWrapper = styled(BalanceWrapper)`
|
||||
padding-left: 50px;
|
||||
`;
|
||||
|
||||
const CoinBalace = styled.div`
|
||||
font-size: ${FONT_SIZE.SMALLER};
|
||||
color: ${colors.TEXT_SECONDARY};
|
||||
@ -68,9 +87,6 @@ const Label = styled.div`
|
||||
color: ${colors.TEXT_SECONDARY};
|
||||
`;
|
||||
|
||||
const BalanceWrapper = styled.div`
|
||||
margin-right: 48px;
|
||||
`;
|
||||
|
||||
class AccountBalance extends Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
@ -125,11 +141,11 @@ class AccountBalance extends Component<Props, State> {
|
||||
<CoinBalace>{this.props.balance} {selectedCoin.symbol}</CoinBalace>
|
||||
</BalanceWrapper>
|
||||
{fiatRate && (
|
||||
<BalanceWrapper>
|
||||
<BalanceRateWrapper>
|
||||
<Label>Rate</Label>
|
||||
<FiatValue>${fiatRateValue}</FiatValue>
|
||||
<FiatValueRate>${fiatRateValue}</FiatValueRate>
|
||||
<CoinBalace>1.00 {selectedCoin.symbol}</CoinBalace>
|
||||
</BalanceWrapper>
|
||||
</BalanceRateWrapper>
|
||||
)}
|
||||
</React.Fragment>
|
||||
)}
|
||||
|
||||
@ -18,8 +18,12 @@ import AddedToken from './components/AddedToken';
|
||||
|
||||
import type { Props } from './Container';
|
||||
|
||||
const Content = styled.div`
|
||||
padding-left: 35px;
|
||||
`;
|
||||
|
||||
const AccountHeading = styled.div`
|
||||
padding: 20px 48px 20px 45px;
|
||||
padding: 30px 48px 30px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@ -28,7 +32,7 @@ const AccountHeading = styled.div`
|
||||
const H2Wrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px 48px;
|
||||
padding: 20px 0;
|
||||
`;
|
||||
|
||||
const StyledTooltip = styled(Tooltip)`
|
||||
@ -54,7 +58,7 @@ const StyledIcon = styled(Icon)`
|
||||
`;
|
||||
|
||||
const AsyncSelectWrapper = styled.div`
|
||||
padding: 0px 48px 32px 48px;
|
||||
padding-bottom: 32px;
|
||||
`;
|
||||
|
||||
const AddedTokensWrapper = styled.div``;
|
||||
@ -77,89 +81,91 @@ const AccountSummary = (props: Props) => {
|
||||
|
||||
return (
|
||||
<SelectedAccount {...props}>
|
||||
<AccountHeading>
|
||||
<AccountName>
|
||||
<StyledCoinLogo coinNetwork={account.network} />
|
||||
<H2>Account #{parseInt(account.index, 10) + 1}</H2>
|
||||
</AccountName>
|
||||
<Link
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
href={explorerLink}
|
||||
isGray
|
||||
>See full transaction history
|
||||
</Link>
|
||||
</AccountHeading>
|
||||
<Content>
|
||||
<AccountHeading>
|
||||
<AccountName>
|
||||
<StyledCoinLogo coinNetwork={account.network} />
|
||||
<H2>Account #{parseInt(account.index, 10) + 1}</H2>
|
||||
</AccountName>
|
||||
<Link
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
href={explorerLink}
|
||||
isGray
|
||||
>See full transaction history
|
||||
</Link>
|
||||
</AccountHeading>
|
||||
|
||||
<AccountBalance
|
||||
coin={network}
|
||||
summary={props.summary}
|
||||
balance={balance}
|
||||
network={network.network}
|
||||
fiat={props.fiat}
|
||||
localStorage={props.localStorage}
|
||||
/>
|
||||
|
||||
<H2Wrapper>
|
||||
<H2>Tokens</H2>
|
||||
<StyledTooltip
|
||||
placement="top"
|
||||
content={(
|
||||
<React.Fragment>
|
||||
Insert token name, symbol or address to be able to send it.
|
||||
</React.Fragment>
|
||||
)}
|
||||
>
|
||||
<StyledIcon
|
||||
icon={ICONS.HELP}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
size={24}
|
||||
/>
|
||||
</StyledTooltip>
|
||||
</H2Wrapper>
|
||||
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */}
|
||||
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */}
|
||||
|
||||
{/* TOOO: AsyncSelect is lagging when dropdown menu must show more than 200 items */}
|
||||
{/* TODO: Input's box-shadow */}
|
||||
<AsyncSelectWrapper>
|
||||
<AsyncSelect
|
||||
isSearchable
|
||||
defaultOptions
|
||||
value={null}
|
||||
isMulti={false}
|
||||
placeholder="Search for the token"
|
||||
loadingMessage={() => 'Loading...'}
|
||||
noOptionsMessage={() => 'Token not found'}
|
||||
onChange={(token) => {
|
||||
const isAdded = tokens.find(t => t.symbol === token.symbol);
|
||||
if (!isAdded) {
|
||||
props.addToken(token, account);
|
||||
}
|
||||
}}
|
||||
loadOptions={input => props.loadTokens(input, account.network)}
|
||||
formatOptionLabel={(option) => {
|
||||
const isAdded = tokens.find(t => t.symbol === option.symbol);
|
||||
if (isAdded) {
|
||||
return `${option.name} (Already added)`;
|
||||
}
|
||||
return option.name;
|
||||
}}
|
||||
getOptionLabel={option => option.name}
|
||||
getOptionValue={option => option.symbol}
|
||||
<AccountBalance
|
||||
coin={network}
|
||||
summary={props.summary}
|
||||
balance={balance}
|
||||
network={network.network}
|
||||
fiat={props.fiat}
|
||||
localStorage={props.localStorage}
|
||||
/>
|
||||
</AsyncSelectWrapper>
|
||||
|
||||
<AddedTokensWrapper>
|
||||
{tokens.map(token => (
|
||||
<AddedToken
|
||||
key={token.symbol}
|
||||
token={token}
|
||||
pending={pending}
|
||||
removeToken={props.removeToken}
|
||||
<H2Wrapper>
|
||||
<H2>Tokens</H2>
|
||||
<StyledTooltip
|
||||
placement="top"
|
||||
content={(
|
||||
<React.Fragment>
|
||||
Insert token name, symbol or address to be able to send it.
|
||||
</React.Fragment>
|
||||
)}
|
||||
>
|
||||
<StyledIcon
|
||||
icon={ICONS.HELP}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
size={24}
|
||||
/>
|
||||
</StyledTooltip>
|
||||
</H2Wrapper>
|
||||
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */}
|
||||
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */}
|
||||
|
||||
{/* TOOO: AsyncSelect is lagging when dropdown menu must show more than 200 items */}
|
||||
{/* TODO: Input's box-shadow */}
|
||||
<AsyncSelectWrapper>
|
||||
<AsyncSelect
|
||||
isSearchable
|
||||
defaultOptions
|
||||
value={null}
|
||||
isMulti={false}
|
||||
placeholder="Search for the token"
|
||||
loadingMessage={() => 'Loading...'}
|
||||
noOptionsMessage={() => 'Token not found'}
|
||||
onChange={(token) => {
|
||||
const isAdded = tokens.find(t => t.symbol === token.symbol);
|
||||
if (!isAdded) {
|
||||
props.addToken(token, account);
|
||||
}
|
||||
}}
|
||||
loadOptions={input => props.loadTokens(input, account.network)}
|
||||
formatOptionLabel={(option) => {
|
||||
const isAdded = tokens.find(t => t.symbol === option.symbol);
|
||||
if (isAdded) {
|
||||
return `${option.name} (Already added)`;
|
||||
}
|
||||
return option.name;
|
||||
}}
|
||||
getOptionLabel={option => option.name}
|
||||
getOptionValue={option => option.symbol}
|
||||
/>
|
||||
))}
|
||||
</AddedTokensWrapper>
|
||||
</AsyncSelectWrapper>
|
||||
|
||||
<AddedTokensWrapper>
|
||||
{tokens.map(token => (
|
||||
<AddedToken
|
||||
key={token.symbol}
|
||||
token={token}
|
||||
pending={pending}
|
||||
removeToken={props.removeToken}
|
||||
/>
|
||||
))}
|
||||
</AddedTokensWrapper>
|
||||
</Content>
|
||||
</SelectedAccount>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user