arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-07-03 13:22:35 +00:00
Code Issues Releases Wiki Activity

Merge pull request #269 from trezor/account-view-guidelines

Browse Source 
More consistent UI across tabs in account view
This commit is contained in:
Vladimir Volek 2018-12-10 15:29:25 +01:00 committed by GitHub
commit f4d438cb0b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 57 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -94,7 +94,7 @@ const StyledTextarea = styled(Textarea)`
`; `;
const TopLabel = styled.span` const TopLabel = styled.span`
padding-bottom: 8px; padding-bottom: 10px;
color: ${colors.TEXT_SECONDARY}; color: ${colors.TEXT_SECONDARY};
`; `;

2
src/components/inputs/Input/index.js
View File

@ -29,7 +29,7 @@ const InputIconWrapper = styled.div`
`; `;
const TopLabel = styled.span` const TopLabel = styled.span`
padding-bottom: 8px; padding-bottom: 10px;
color: ${colors.TEXT_SECONDARY}; color: ${colors.TEXT_SECONDARY};
`; `;

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

@ -3,7 +3,7 @@ import React from 'react';
import { QRCode } from 'react-qr-svg'; import { QRCode } from 'react-qr-svg';
import styled from 'styled-components'; import styled from 'styled-components';
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';
@ -19,7 +19,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: 10px;
color: ${colors.TEXT_SECONDARY}; color: ${colors.TEXT_SECONDARY};
`; `;
@ -42,6 +42,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;
@ -49,6 +50,8 @@ const ShowAddressButton = styled(Button)`
@media screen and (max-width: 795px) { @media screen and (max-width: 795px) {
margin-top: 10px; margin-top: 10px;
align-self: auto;
border-radius: 3px;
} }
`; `;
@ -75,6 +78,7 @@ const EyeButton = styled(Button)`
const Row = styled.div` const Row = styled.div`
display: flex; display: flex;
width: 100%; width: 100%;
padding-bottom: 28px;
@media screen and (max-width: 795px) { @media screen and (max-width: 795px) {
flex-direction: column; flex-direction: column;
@ -113,14 +117,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 ? (

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

@ -22,10 +22,6 @@ type Props = BaseProps & {
// same variable also in "AccountSend/index.js" // same variable also in "AccountSend/index.js"
const SmallScreenWidth = '850px'; const SmallScreenWidth = '850px';
const InputRow = styled.div`
margin-bottom: 20px;
`;
const InputLabelWrapper = styled.div` const InputLabelWrapper = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
@ -45,7 +41,7 @@ const AdvancedSettingsWrapper = styled.div`
border-top: 1px solid ${colors.DIVIDER}; border-top: 1px solid ${colors.DIVIDER};
`; `;
const GasInputRow = styled(InputRow)` const GasInputRow = styled.div`
width: 100%; width: 100%;
display: flex; display: flex;
@ -55,7 +51,8 @@ const GasInputRow = styled(InputRow)`
`; `;
const GasInput = styled(Input)` const GasInput = styled(Input)`
min-height: 85px; /* min-height: 85px; */
padding-bottom: 28px;
&:first-child { &:first-child {
padding-right: 20px; padding-right: 20px;
} }
@ -63,13 +60,12 @@ const GasInput = styled(Input)`
@media screen and (max-width: ${SmallScreenWidth}) { @media screen and (max-width: ${SmallScreenWidth}) {
&:first-child { &:first-child {
padding-right: 0; padding-right: 0;
margin-bottom: 2px;
} }
} }
`; `;
const StyledTextarea = styled(Textarea)` const StyledTextarea = styled(Textarea)`
margin-bottom: 20px; padding-bottom: 28px;
min-height: 80px; min-height: 80px;
`; `;
@ -214,25 +210,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 +242,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-bottom: 28px;
`; `;
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: 10px;
`; `;
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: 28px;
`; `;
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: 28px;
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;