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 media from 'styled-media-query';
import { H2 } from 'components/Heading';
import Title from 'views/Wallet/components/Title';
import Button from 'components/Button';
import Icon from 'components/Icon';
import Tooltip from 'components/Tooltip';
@ -20,7 +20,7 @@ import VerifyAddressTooltip from './components/VerifyAddressTooltip';
import type { Props } from './Container';
const Label = styled.div`
padding: 25px 0 5px 0;
padding-bottom: 8px;
color: ${colors.TEXT_SECONDARY};
`;
@ -43,6 +43,7 @@ const ShowAddressButton = styled(Button)`
display: flex;
height: 40px;
align-items: center;
align-self: flex-end;
justify-content: center;
border-top-left-radius: 0;
@ -76,6 +77,7 @@ const EyeButton = styled(Button)`
const Row = styled.div`
display: flex;
width: 100%;
padding-bottom: 25px;
${media.lessThan('795px')`
flex-direction: column;
@ -114,14 +116,14 @@ const AccountReceive = (props: Props) => {
return (
<Content>
<React.Fragment>
<H2>Receive Ethereum or tokens</H2>
<Title>Receive Ethereum or tokens</Title>
<AddressWrapper isShowingQrCode={addressVerified || addressUnverified}>
<Label>Address</Label>
<Row>
<Input
type="text"
readOnly
autoSelect
topLabel="Address"
value={address}
isPartiallyHidden={isAddressHidden}
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 InputRow = styled.div`
margin-bottom: 20px;
padding-bottom: 25px;
`;
const InputLabelWrapper = styled.div`
@ -55,7 +55,7 @@ const GasInputRow = styled(InputRow)`
`;
const GasInput = styled(Input)`
min-height: 85px;
/* min-height: 85px; */
&:first-child {
padding-right: 20px;
}
@ -69,7 +69,7 @@ const GasInput = styled(Input)`
`;
const StyledTextarea = styled(Textarea)`
margin-bottom: 20px;
padding-bottom: 25px;
min-height: 80px;
`;
@ -214,25 +214,27 @@ const AdvancedForm = (props: Props) => {
spellCheck="false"
topLabel={(
<InputLabelWrapper>
Gas price
<Tooltip
content={(
<React.Fragment>
Gas price refers to the amount of ether you are willing to pay for every
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
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"
placement="top"
>
<Icon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={24}
/>
</Tooltip>
<Left>
Gas price
<Tooltip
content={(
<React.Fragment>
Gas price refers to the amount of ether you are willing to pay for every
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
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"
placement="top"
>
<Icon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={24}
/>
</Tooltip>
</Left>
</InputLabelWrapper>
)}
bottomText={errors.gasPrice || warnings.gasPrice || infos.gasPrice}
@ -244,21 +246,23 @@ const AdvancedForm = (props: Props) => {
<StyledTextarea
topLabel={(
<InputLabelWrapper>
Data
<Tooltip
content={(
<React.Fragment>
Data is usually used when you send transactions to contracts.
</React.Fragment>
)}
placement="top"
>
<Icon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={24}
/>
</Tooltip>
<Left>
Data
<Tooltip
content={(
<React.Fragment>
Data is usually used when you send transactions to contracts.
</React.Fragment>
)}
placement="top"
>
<Icon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={24}
/>
</Tooltip>
</Left>
</InputLabelWrapper>
)}
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`
padding: 0 0 15px 0;
padding: 0 0 25px 0;
`;
const SetMaxAmountButton = styled(Button)`
@ -88,7 +88,7 @@ const FeeOptionWrapper = styled.div`
const FeeLabelWrapper = styled.div`
display: flex;
align-items: center;
margin-bottom: 4px;
padding-bottom: 8px;
`;
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`
display: flex;
flex: 1;
margin-top: -5px;
flex-direction: row;
background: ${colors.WHITE};
`;
const Row = styled.div`
padding: 0 0 25px 0;
padding-bottom: 25px;
`;
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`
padding: 10px 0 25px 0;
padding-bottom: 25px;
position: relative;
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';
const AccountHeading = styled.div`
padding: 0 0 30px 0;
padding-bottom: 35px;
display: flex;
justify-content: space-between;
align-items: center;