1
0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-03 21:00:55 +00:00

unify paddings in wallet views

This commit is contained in:
slowbackspace 2019-01-07 13:54:33 +01:00
parent 9c400f0b6e
commit 0be0c918de
8 changed files with 18 additions and 21 deletions

View File

@ -3,8 +3,8 @@ import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import colors from 'config/colors'; import colors from 'config/colors';
import { FONT_SIZE } from 'config/variables'; import { H1 } from 'components/Heading';
import { H2 } from 'components/Heading'; import Paragraph from 'components/Paragraph';
import Button from 'components/Button'; import Button from 'components/Button';
import Link from 'components/Link'; import Link from 'components/Link';
import CoinLogo from 'components/images/CoinLogo'; import CoinLogo from 'components/images/CoinLogo';
@ -39,21 +39,17 @@ const StyledCoinLogo = styled(CoinLogo)`
width: 32px; width: 32px;
`; `;
const StyledLink = styled(Link)`
padding-top: 24px;
`;
const Row = styled.div` const Row = styled.div`
flex: 1;
display: flex; display: flex;
padding: 50px 0;
flex-direction: column; flex-direction: column;
justify-content: center;
align-items: center; align-items: center;
text-align: center;
`; `;
const Message = styled.div` const Message = styled(Paragraph)`
font-size: ${FONT_SIZE.SMALL}; padding: 0 0 15px 0;
color: ${colors.TEXT_SECONDARY};
text-align: center; text-align: center;
`; `;
@ -61,11 +57,11 @@ const FirmwareUnsupported = (props: Props) => (
<Wrapper> <Wrapper>
<Row> <Row>
{props.networkShortcut && <CoinLogoWrapper><StyledCoinLogo standalone network={props.networkShortcut} /></CoinLogoWrapper>} {props.networkShortcut && <CoinLogoWrapper><StyledCoinLogo standalone network={props.networkShortcut} /></CoinLogoWrapper>}
<H2>{props.title}</H2> <H1>{props.title}</H1>
<Message>{props.message}</Message> <Message>{props.message}</Message>
<StyledLink href={getInfoUrl(props.networkShortcut)}> <Link href={getInfoUrl(props.networkShortcut)}>
<Button>Find out more info</Button> <Button>Find out more info</Button>
</StyledLink> </Link>
</Row> </Row>
</Wrapper> </Wrapper>
); );

View File

@ -7,13 +7,14 @@ import { connect } from 'react-redux';
const Wrapper = styled.div` const Wrapper = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 40px 35px 40px 35px;
`; `;
const Row = styled.div` const Row = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 100px 48px; padding: 50px 0;
`; `;
const StyledP = styled(P)` const StyledP = styled(P)`

View File

@ -15,7 +15,7 @@ const Wrapper = styled.div`
const Row = styled.div` const Row = styled.div`
flex: 1; flex: 1;
display: flex; display: flex;
padding: 100px 48px; padding: 50px 0;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;

View File

@ -20,7 +20,7 @@ const Row = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 100px 48px; padding: 50px 0;
`; `;
const StyledP = styled(P)` const StyledP = styled(P)`

View File

@ -31,7 +31,7 @@ const Wrapper = styled.section`
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 100px 48px; padding: 90px 35px 40px 35px;
`; `;
const StyledNavLink = styled(Link)` const StyledNavLink = styled(Link)`

View File

@ -15,7 +15,7 @@ const Row = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 100px 48px; padding: 50px 0;
`; `;
const A = styled.a``; const A = styled.a``;

View File

@ -15,7 +15,7 @@ const Row = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 100px 48px; padding: 50px 0;
`; `;
const StyledParagraph = styled(Paragraph)` const StyledParagraph = styled(Paragraph)`

View File

@ -20,7 +20,7 @@ const Row = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 100px 48px; padding: 50px 0;
`; `;
const WalletSettings = () => ( const WalletSettings = () => (