arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-28 03:08:30 +00:00
Code Issues Releases Wiki Activity

Padding in accounts

Browse Source
This commit is contained in:
Vladimir Volek 2018-09-24 16:40:38 +02:00
parent 6199ac5ef3
commit f8a947e187
11 changed files with 135 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/DeviceHeader/index.js
View File

@ -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;

1
src/components/Footer/index.js
View File

@ -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)`

2
src/config/variables.js
View File

@ -3,6 +3,8 @@ export const FONT_SIZE = {
SMALLER: '12px',
SMALL: '14px',
BASE: '16px',
TOP_MENU: '17px',
BIG: '21px',
BIGGER: '32px',
BIGGEST: '36px',
};

2
src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js
View File

@ -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;
}

4
src/views/Wallet/components/LeftNavigation/index.js
View File

@ -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;

9
src/views/Wallet/components/TopNavigationAccount/index.js
View File

@ -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,16 +8,17 @@ 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;
@ -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>
);

2
src/views/Wallet/index.js
View File

@ -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};

5
src/views/Wallet/views/AccountReceive/index.js
View File

@ -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;
`;

2
src/views/Wallet/views/AccountSend/index.js
View File

@ -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)`

34
src/views/Wallet/views/AccountSummary/components/AccountBalance/index.js
View File

@ -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>
)}

12
src/views/Wallet/views/AccountSummary/index.js
View File

@ -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,6 +81,7 @@ const AccountSummary = (props: Props) => {
return (
<SelectedAccount {...props}>
<Content>
<AccountHeading>
<AccountName>
<StyledCoinLogo coinNetwork={account.network} />
@ -160,6 +165,7 @@ const AccountSummary = (props: Props) => {
/>
))}
</AddedTokensWrapper>
</Content>
</SelectedAccount>
);
};