1
0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-28 00:41:08 +00:00

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

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

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};
`; `;

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};
`; `;

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 ? (

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,6 +210,7 @@ const AdvancedForm = (props: Props) => {
spellCheck="false" spellCheck="false"
topLabel={( topLabel={(
<InputLabelWrapper> <InputLabelWrapper>
<Left>
Gas price Gas price
<Tooltip <Tooltip
content={( content={(
@ -233,6 +230,7 @@ const AdvancedForm = (props: Props) => {
size={24} size={24}
/> />
</Tooltip> </Tooltip>
</Left>
</InputLabelWrapper> </InputLabelWrapper>
)} )}
bottomText={errors.gasPrice || warnings.gasPrice || infos.gasPrice} bottomText={errors.gasPrice || warnings.gasPrice || infos.gasPrice}
@ -244,6 +242,7 @@ const AdvancedForm = (props: Props) => {
<StyledTextarea <StyledTextarea
topLabel={( topLabel={(
<InputLabelWrapper> <InputLabelWrapper>
<Left>
Data Data
<Tooltip <Tooltip
content={( content={(
@ -259,6 +258,7 @@ const AdvancedForm = (props: Props) => {
size={24} size={24}
/> />
</Tooltip> </Tooltip>
</Left>
</InputLabelWrapper> </InputLabelWrapper>
)} )}
state={getDataTextareaState(errors.data, warnings.data)} state={getDataTextareaState(errors.data, warnings.data)}

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`

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)`

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;

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;