arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-26 00:48:35 +00:00
Code Issues Releases Wiki Activity

more consistent UI

Browse Source
This commit is contained in:
slowbackspace 2018-12-10 11:43:43 +01:00
parent 78eb5501b3
commit 8e14e04dc1
6 changed files with 52 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/views/Wallet/views/Account/Receive/index.js
View File

@ -4,7 +4,7 @@ import { QRCode } from 'react-qr-svg';
import styled from 'styled-components'; import styled from 'styled-components';
import media from 'styled-media-query'; import media from 'styled-media-query';
import { H2 } from 'components/Heading'; import Title from 'views/Wallet/components/Title';
import Button from 'components/Button'; import Button from 'components/Button';
import Icon from 'components/Icon'; import Icon from 'components/Icon';
import Tooltip from 'components/Tooltip'; import Tooltip from 'components/Tooltip';
@ -20,7 +20,7 @@ import VerifyAddressTooltip from './components/VerifyAddressTooltip';
import type { Props } from './Container'; import type { Props } from './Container';
const Label = styled.div` const Label = styled.div`
padding: 25px 0 5px 0; padding-bottom: 8px;
color: ${colors.TEXT_SECONDARY}; color: ${colors.TEXT_SECONDARY};
`; `;
@ -43,6 +43,7 @@ const ShowAddressButton = styled(Button)`
display: flex; display: flex;
height: 40px; height: 40px;
align-items: center; align-items: center;
align-self: flex-end;
justify-content: center; justify-content: center;
border-top-left-radius: 0; border-top-left-radius: 0;
@ -76,6 +77,7 @@ const EyeButton = styled(Button)`
const Row = styled.div` const Row = styled.div`
display: flex; display: flex;
width: 100%; width: 100%;
padding-bottom: 25px;
${media.lessThan('795px')` ${media.lessThan('795px')`
flex-direction: column; flex-direction: column;
@ -114,14 +116,14 @@ const AccountReceive = (props: Props) => {
return ( return (
<Content> <Content>
<React.Fragment> <React.Fragment>
<H2>Receive Ethereum or tokens</H2> <Title>Receive Ethereum or tokens</Title>
<AddressWrapper isShowingQrCode={addressVerified || addressUnverified}> <AddressWrapper isShowingQrCode={addressVerified || addressUnverified}>
<Label>Address</Label>
<Row> <Row>
<Input <Input
type="text" type="text"
readOnly readOnly
autoSelect autoSelect
topLabel="Address"
value={address} value={address}
isPartiallyHidden={isAddressHidden} isPartiallyHidden={isAddressHidden}
trezorAction={isAddressVerifying ? ( trezorAction={isAddressVerifying ? (

78
src/views/Wallet/views/Account/Send/components/AdvancedForm/index.js
View File

@ -23,7 +23,7 @@ type Props = BaseProps & {
const SmallScreenWidth = '850px'; const SmallScreenWidth = '850px';
const InputRow = styled.div` const InputRow = styled.div`
margin-bottom: 20px; padding-bottom: 25px;
`; `;
const InputLabelWrapper = styled.div` const InputLabelWrapper = styled.div`
@ -55,7 +55,7 @@ const GasInputRow = styled(InputRow)`
`; `;
const GasInput = styled(Input)` const GasInput = styled(Input)`
min-height: 85px; /* min-height: 85px; */
&:first-child { &:first-child {
padding-right: 20px; padding-right: 20px;
} }
@ -69,7 +69,7 @@ const GasInput = styled(Input)`
`; `;
const StyledTextarea = styled(Textarea)` const StyledTextarea = styled(Textarea)`
margin-bottom: 20px; padding-bottom: 25px;
min-height: 80px; min-height: 80px;
`; `;
@ -214,25 +214,27 @@ const AdvancedForm = (props: Props) => {
spellCheck="false" spellCheck="false"
topLabel={( topLabel={(
<InputLabelWrapper> <InputLabelWrapper>
Gas price <Left>
<Tooltip Gas price
content={( <Tooltip
<React.Fragment> content={(
Gas price refers to the amount of ether you are willing to pay for every <React.Fragment>
unit of gas, and is usually measured in “Gwei”. <GreenSpan>Transaction fee = gas limit * gas price</GreenSpan>. Increasing the gas price will get the transaction confirmed sooner but Gas price refers to the amount of ether you are willing to pay for every
makes it more expensive. The recommended gas price is <GreenSpan>{recommendedGasPrice} GWEI</GreenSpan>. unit of gas, and is usually measured in “Gwei”. <GreenSpan>Transaction fee = gas limit * gas price</GreenSpan>. Increasing the gas price will get the transaction confirmed sooner but
</React.Fragment> makes it more expensive. The recommended gas price is <GreenSpan>{recommendedGasPrice} GWEI</GreenSpan>.
)} </React.Fragment>
maxWidth={400} )}
readMoreLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_price" maxWidth={400}
placement="top" readMoreLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_price"
> placement="top"
<Icon >
icon={ICONS.HELP} <Icon
color={colors.TEXT_SECONDARY} icon={ICONS.HELP}
size={24} color={colors.TEXT_SECONDARY}
/> size={24}
</Tooltip> />
</Tooltip>
</Left>
</InputLabelWrapper> </InputLabelWrapper>
)} )}
bottomText={errors.gasPrice || warnings.gasPrice || infos.gasPrice} bottomText={errors.gasPrice || warnings.gasPrice || infos.gasPrice}
@ -244,21 +246,23 @@ const AdvancedForm = (props: Props) => {
<StyledTextarea <StyledTextarea
topLabel={( topLabel={(
<InputLabelWrapper> <InputLabelWrapper>
Data <Left>
<Tooltip Data
content={( <Tooltip
<React.Fragment> content={(
Data is usually used when you send transactions to contracts. <React.Fragment>
</React.Fragment> Data is usually used when you send transactions to contracts.
)} </React.Fragment>
placement="top" )}
> placement="top"
<Icon >
icon={ICONS.HELP} <Icon
color={colors.TEXT_SECONDARY} icon={ICONS.HELP}
size={24} color={colors.TEXT_SECONDARY}
/> size={24}
</Tooltip> />
</Tooltip>
</Left>
</InputLabelWrapper> </InputLabelWrapper>
)} )}
state={getDataTextareaState(errors.data, warnings.data)} state={getDataTextareaState(errors.data, warnings.data)}

4
src/views/Wallet/views/Account/Send/index.js
View File

@ -34,7 +34,7 @@ const AmountInputLabel = styled.span`
`; `;
const InputRow = styled.div` const InputRow = styled.div`
padding: 0 0 15px 0; padding: 0 0 25px 0;
`; `;
const SetMaxAmountButton = styled(Button)` const SetMaxAmountButton = styled(Button)`
@ -88,7 +88,7 @@ const FeeOptionWrapper = styled.div`
const FeeLabelWrapper = styled.div` const FeeLabelWrapper = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 4px; padding-bottom: 8px;
`; `;
const FeeLabel = styled.span` const FeeLabel = styled.span`

3
src/views/Wallet/views/Account/SignVerify/index.js
View File

@ -13,13 +13,12 @@ import type { Props } from './Container';
const Wrapper = styled.div` const Wrapper = styled.div`
display: flex; display: flex;
flex: 1; flex: 1;
margin-top: -5px;
flex-direction: row; flex-direction: row;
background: ${colors.WHITE}; background: ${colors.WHITE};
`; `;
const Row = styled.div` const Row = styled.div`
padding: 0 0 25px 0; padding-bottom: 25px;
`; `;
const RowButtons = styled(Row)` const RowButtons = styled(Row)`

2
src/views/Wallet/views/Account/Summary/components/Balance/index.js
View File

@ -22,7 +22,7 @@ type State = {
}; };
const Wrapper = styled.div` const Wrapper = styled.div`
padding: 10px 0 25px 0; padding-bottom: 25px;
position: relative; position: relative;
display: flex; display: flex;

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

@ -21,7 +21,7 @@ import AddTokenMessage from './components/AddTokenMessage';
import type { Props } from './Container'; import type { Props } from './Container';
const AccountHeading = styled.div` const AccountHeading = styled.div`
padding: 0 0 30px 0; padding-bottom: 35px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;