arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-03 21:00:55 +00:00
Code Issues Releases Wiki Activity

unify paddings in wallet views

Browse Source
This commit is contained in:
slowbackspace 2019-01-07 10:52:26 +01:00
parent 4a97682b1f
commit 9c400f0b6e
7 changed files with 45 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/views/Wallet/views/Bootloader/index.js
View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { H2 } from 'components/Heading'; import { H1 } from 'components/Heading';
import P from 'components/Paragraph';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
const Wrapper = styled.div` const Wrapper = styled.div`
@ -15,16 +16,16 @@ const Row = styled.div`
padding: 100px 48px; padding: 100px 48px;
`; `;
const P = styled.p` const StyledP = styled(P)`
padding: 10px 0px; padding: 0 0 15px 0;
text-align: center; text-align: center;
`; `;
const Bootloader = () => ( const Bootloader = () => (
<Wrapper> <Wrapper>
<Row> <Row>
<H2>Your device is in firmware update mode</H2> <H1>Your device is in firmware update mode</H1>
<P>Please re-connect it</P> <StyledP>Please re-connect it</StyledP>
</Row> </Row>
</Wrapper> </Wrapper>
); );

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

@ -3,7 +3,8 @@ import styled from 'styled-components';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import Content from 'views/Wallet/components/Content'; import Content from 'views/Wallet/components/Content';
import { H2 } from 'components/Heading'; import { H1 } from 'components/Heading';
import Paragraph from 'components/Paragraph';
import DashboardImg from 'images/dashboard.png'; import DashboardImg from 'images/dashboard.png';
const Wrapper = styled.div` const Wrapper = styled.div`
@ -20,18 +21,17 @@ const Row = styled.div`
align-items: center; align-items: center;
`; `;
const P = styled.p` const StyledP = styled(Paragraph)`
padding: 24px 0px; padding: 0 0 15px 0;
text-align: center; text-align: center;
`; `;
const Dashboard = () => ( const Dashboard = () => (
<Content> <Content>
<Wrapper> <Wrapper>
<H2>Dashboard</H2>
<Row> <Row>
<H2>Please select your coin</H2> <H1>Please select your coin</H1>
<P>You will gain access to receiving &amp; sending selected coin</P> <StyledP>You will gain access to receiving &amp; sending selected coin</StyledP>
<img src={DashboardImg} height="34" width="auto" alt="Dashboard" /> <img src={DashboardImg} height="34" width="auto" alt="Dashboard" />
</Row> </Row>
</Wrapper> </Wrapper>

8
src/views/Wallet/views/DeviceSettings/index.js
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { H2 } from 'components/Heading'; import { H1 } from 'components/Heading';
import Icon from 'components/Icon'; import Icon from 'components/Icon';
import colors from 'config/colors'; import colors from 'config/colors';
import Button from 'components/Button'; import Button from 'components/Button';
@ -24,7 +24,7 @@ const Row = styled.div`
`; `;
const StyledP = styled(P)` const StyledP = styled(P)`
padding: 10px 0 15px 0; padding: 0 0 15px 0;
text-align: center; text-align: center;
`; `;
@ -37,8 +37,8 @@ const DeviceSettings = () => (
color={colors.WARNING_PRIMARY} color={colors.WARNING_PRIMARY}
icon={ICONS.WARNING} icon={ICONS.WARNING}
/> />
<H2>Device settings is under construction</H2> <H1>Device settings is under construction</H1>
<StyledP isSmaller>Please use Bitcoin wallet interface to change your device settings</StyledP> <StyledP>Please use Bitcoin wallet interface to change your device settings</StyledP>
<Link href="https://beta-wallet.trezor.io/"> <Link href="https://beta-wallet.trezor.io/">
<Button>Take me to the Bitcoin wallet</Button> <Button>Take me to the Bitcoin wallet</Button>
</Link> </Link>

1
src/views/Wallet/views/FirmwareUpdate/index.js
View File

@ -46,6 +46,7 @@ const Image = styled.div`
const StyledP = styled(P)` const StyledP = styled(P)`
padding: 0 0 15px 0; padding: 0 0 15px 0;
text-align: center;
`; `;
const FirmwareUpdate = (props: Props) => ( const FirmwareUpdate = (props: Props) => (

26
src/views/Wallet/views/Initialize/index.js
View File

@ -1,7 +1,8 @@
import styled from 'styled-components'; import styled from 'styled-components';
import { H2 } from 'components/Heading'; import { H1 } from 'components/Heading';
import Button from 'components/Button'; import Button from 'components/Button';
import Paragraph from 'components/Paragraph'; import Paragraph from 'components/Paragraph';
import Content from 'views/Wallet/components/Content';
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
@ -20,21 +21,22 @@ const Row = styled.div`
const A = styled.a``; const A = styled.a``;
const StyledParagraph = styled(Paragraph)` const StyledParagraph = styled(Paragraph)`
margin: 10px 50px; padding: 0 0 15px 0;
display: block;
text-align: center; text-align: center;
`; `;
const Initialize = () => ( const Initialize = () => (
<Wrapper> <Content>
<Row> <Wrapper>
<H2>Your device is in not initialized</H2> <Row>
<StyledParagraph>Please use Bitcoin wallet interface to start initialization process</StyledParagraph> <H1>Your device is in not initialized</H1>
<A href="https://beta-wallet.trezor.io/"> <StyledParagraph>Please use Bitcoin wallet interface to start initialization process</StyledParagraph>
<Button>Take me to the Bitcoin wallet</Button> <A href="https://beta-wallet.trezor.io/">
</A> <Button>Take me to the Bitcoin wallet</Button>
</Row> </A>
</Wrapper> </Row>
</Wrapper>
</Content>
); );
export default connect(null, null)(Initialize); export default connect(null, null)(Initialize);

21
src/views/Wallet/views/Seedless/index.js
View File

@ -1,9 +1,11 @@
import styled from 'styled-components'; import styled from 'styled-components';
import { H2 } from 'components/Heading'; import { H1 } from 'components/Heading';
import Paragraph from 'components/Paragraph'; import Paragraph from 'components/Paragraph';
import Content from 'views/Wallet/components/Content';
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
const Wrapper = styled.div` const Wrapper = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -17,18 +19,19 @@ const Row = styled.div`
`; `;
const StyledParagraph = styled(Paragraph)` const StyledParagraph = styled(Paragraph)`
margin: 10px 50px; padding: 0 0 15px 0;
display: block;
text-align: center; text-align: center;
`; `;
const Seedless = () => ( const Seedless = () => (
<Wrapper> <Content>
<Row> <Wrapper>
<H2>Device is in seedless mode</H2> <Row>
<StyledParagraph>It&apos;s not suitable to use this service.</StyledParagraph> <H1>Device is in seedless mode</H1>
</Row> <StyledParagraph>It&apos;s not suitable to use this service.</StyledParagraph>
</Wrapper> </Row>
</Wrapper>
</Content>
); );
export default connect(null, null)(Seedless); export default connect(null, null)(Seedless);

4
src/views/Wallet/views/WalletSettings/index.js
View File

@ -6,7 +6,7 @@ import colors from 'config/colors';
import icons from 'config/icons'; import icons from 'config/icons';
import Content from 'views/Wallet/components/Content'; import Content from 'views/Wallet/components/Content';
import { H2 } from 'components/Heading'; import { H1 } from 'components/Heading';
import Icon from 'components/Icon'; import Icon from 'components/Icon';
import Link from 'components/Link'; import Link from 'components/Link';
import Button from 'components/Button'; import Button from 'components/Button';
@ -32,7 +32,7 @@ const WalletSettings = () => (
color={colors.WARNING_PRIMARY} color={colors.WARNING_PRIMARY}
icon={icons.WARNING} icon={icons.WARNING}
/> />
<H2>Wallet settings is under construction</H2> <H1>Wallet settings is under construction</H1>
<Link to="/"> <Link to="/">
<Button>Take me back</Button> <Button>Take me back</Button>
</Link> </Link>