arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-31 19:30:53 +00:00
Code Issues Releases Wiki Activity

Merge pull request #308 from trezor/fix/loader-ui-design

Browse Source 
More consistent design of account loaders/info messages
This commit is contained in:
Vladimir Volek 2019-01-07 16:58:22 +01:00 committed by GitHub
commit e2896774f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/views/Wallet/components/Content/index.js
View File

@ -4,7 +4,9 @@ import * as React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import Loader from 'components/Loader'; import Loader from 'components/Loader';
import { FONT_SIZE } from 'config/variables'; import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
import { H1 } from 'components/Heading';
import P from 'components/Paragraph';
import colors from 'config/colors'; import colors from 'config/colors';
import type { State } from 'flowtype'; import type { State } from 'flowtype';
@ -34,15 +36,15 @@ const Loading = styled.div`
flex-direction: column; flex-direction: column;
`; `;
const Text = styled.div` const Title = styled(H1)`
font-size: ${FONT_SIZE.BIGGER}; font-size: ${FONT_SIZE.BIGGER};
color: ${colors.TEXT_SECONDARY}; font-weight: ${FONT_WEIGHT.NORMAL};
color: ${props => (props.type === 'progress' ? colors.TEXT_SECONDARY : '')};
margin-left: 10px; margin-left: 10px;
`; `;
const Message = styled.div` const Message = styled(P)`
font-size: ${FONT_SIZE.BASE}; text-align: center;
color: ${colors.TEXT_PRIMARY};
`; `;
const Row = styled.div` const Row = styled.div`
@ -74,7 +76,7 @@ const Content = ({
<Loading> <Loading>
<Row> <Row>
{loader.type === 'progress' && <Loader size={30} />} {loader.type === 'progress' && <Loader size={30} />}
<Text>{loader.title || 'Initializing accounts'}</Text> <Title type={loader.type}>{loader.title || 'Initializing accounts'}</Title>
</Row> </Row>
{loader.message && <Message>{loader.message}</Message>} {loader.message && <Message>{loader.message}</Message>}
</Loading> </Loading>