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

Fixed padding in account pages

Browse Source
This commit is contained in:
Vladimir Volek 2018-10-16 14:47:49 +02:00
parent 6461400853
commit 0f544f8578
5 changed files with 146 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/views/Wallet/components/Title/index.js
View File

@ -8,6 +8,7 @@ const Wrapper = styled.div`
font-size: ${FONT_SIZE.WALLET_TITLE}; font-size: ${FONT_SIZE.WALLET_TITLE};
font-weight: ${FONT_WEIGHT.BASE}; font-weight: ${FONT_WEIGHT.BASE};
color: ${colors.WALLET_TITLE}; color: ${colors.WALLET_TITLE};
padding-bottom: 25px;
`; `;
const Title = ({ const Title = ({

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

@ -24,7 +24,6 @@ const Label = styled.div`
const AddressWrapper = styled.div` const AddressWrapper = styled.div`
position: relative; position: relative;
display: flex; display: flex;
margin-top: 20px;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: ${props => (props.isShowingQrCode ? 'column' : 'row')}; flex-direction: ${props => (props.isShowingQrCode ? 'column' : 'row')};
`; `;

287
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`
margin: 20px 0; padding: 0 0 15px 0;
`; `;
const SetMaxAmountButton = styled(Button)` const SetMaxAmountButton = styled(Button)`
@ -247,155 +247,152 @@ const AccountSend = (props: Props) => {
return ( return (
<Content> <Content>
<React.Fragment> <Title>Send Ethereum or tokens</Title>
<Title>Send Ethereum or tokens</Title> <InputRow>
<InputRow> <Input
<Input state={getAddressInputState(address, errors.address, warnings.address)}
state={getAddressInputState(address, errors.address, warnings.address)} autoComplete="off"
autoComplete="off" autoCorrect="off"
autoCorrect="off" autoCapitalize="off"
autoCapitalize="off" spellCheck="false"
spellCheck="false" topLabel="Address"
topLabel="Address" bottomText={errors.address || warnings.address || infos.address}
bottomText={errors.address || warnings.address || infos.address} value={address}
value={address} onChange={event => onAddressChange(event.target.value)}
onChange={event => onAddressChange(event.target.value)} />
/> </InputRow>
</InputRow> <InputRow>
<Input
<InputRow> state={getAmountInputState(errors.amount, warnings.amount)}
<Input autoComplete="off"
state={getAmountInputState(errors.amount, warnings.amount)} autoCorrect="off"
autoComplete="off" autoCapitalize="off"
autoCorrect="off" spellCheck="false"
autoCapitalize="off" topLabel={(
spellCheck="false" <AmountInputLabelWrapper>
topLabel={( <AmountInputLabel>Amount</AmountInputLabel>
<AmountInputLabelWrapper> {(isCurrentCurrencyToken && selectedToken) && (
<AmountInputLabel>Amount</AmountInputLabel> <AmountInputLabel>You have: {selectedTokenBalance} {selectedToken.symbol}</AmountInputLabel>
{(isCurrentCurrencyToken && selectedToken) && ( )}
<AmountInputLabel>You have: {selectedTokenBalance} {selectedToken.symbol}</AmountInputLabel> </AmountInputLabelWrapper>
)}
</AmountInputLabelWrapper>
)}
value={amount}
onChange={event => onAmountChange(event.target.value)}
bottomText={errors.amount || warnings.amount || infos.amount}
sideAddons={[
(
<SetMaxAmountButton
key="icon"
onClick={() => onSetMax()}
isActive={setMax}
>
{!setMax && (
<Icon
icon={ICONS.TOP}
size={25}
color={colors.TEXT_SECONDARY}
/>
)}
{setMax && (
<Icon
icon={ICONS.CHECKED}
size={25}
color={colors.WHITE}
/>
)}
Set max
</SetMaxAmountButton>
),
(
<CurrencySelect
key="currency"
isSearchable={false}
isClearable={false}
defaultValue={tokensSelectData[0]}
isDisabled={tokensSelectData.length < 2}
onChange={onCurrencyChange}
options={tokensSelectData}
/>
),
]}
/>
</InputRow>
<InputRow>
<FeeLabelWrapper>
<FeeLabel>Fee</FeeLabel>
{gasPriceNeedsUpdate && (
<UpdateFeeWrapper>
<Icon
icon={ICONS.WARNING}
color={colors.WARNING_PRIMARY}
size={20}
/>
Recommended fees updated. <StyledLink onClick={updateFeeLevels} isGreen>Click here to use them</StyledLink>
</UpdateFeeWrapper>
)}
</FeeLabelWrapper>
<Select
isSearchable={false}
isClearable={false}
value={selectedFeeLevel}
onChange={onFeeLevelChange}
options={feeLevels}
formatOptionLabel={option => (
<FeeOptionWrapper>
<P>{option.value}</P>
<P>{option.label}</P>
</FeeOptionWrapper>
)}
/>
</InputRow>
<ToggleAdvancedSettingsWrapper
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
>
<ToggleAdvancedSettingsButton
isTransparent
onClick={toggleAdvanced}
>
Advanced settings
<AdvancedSettingsIcon
icon={ICONS.ARROW_DOWN}
color={colors.TEXT_SECONDARY}
size={24}
isActive={advanced}
canAnimate
/>
</ToggleAdvancedSettingsButton>
{isAdvancedSettingsHidden && (
<SendButton
isDisabled={isSendButtonDisabled}
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
onClick={() => onSend()}
>
{sendButtonText}
</SendButton>
)} )}
</ToggleAdvancedSettingsWrapper> value={amount}
onChange={event => onAmountChange(event.target.value)}
bottomText={errors.amount || warnings.amount || infos.amount}
sideAddons={[
(
<SetMaxAmountButton
key="icon"
onClick={() => onSetMax()}
isActive={setMax}
>
{!setMax && (
<Icon
icon={ICONS.TOP}
size={25}
color={colors.TEXT_SECONDARY}
/>
)}
{setMax && (
<Icon
icon={ICONS.CHECKED}
size={25}
color={colors.WHITE}
/>
)}
Set max
</SetMaxAmountButton>
),
(
<CurrencySelect
key="currency"
isSearchable={false}
isClearable={false}
defaultValue={tokensSelectData[0]}
isDisabled={tokensSelectData.length < 2}
onChange={onCurrencyChange}
options={tokensSelectData}
/>
),
]}
/>
</InputRow>
{advanced && ( <InputRow>
<AdvancedForm {...props}> <FeeLabelWrapper>
<SendButton <FeeLabel>Fee</FeeLabel>
isDisabled={isSendButtonDisabled} {gasPriceNeedsUpdate && (
onClick={() => onSend()} <UpdateFeeWrapper>
> <Icon
{sendButtonText} icon={ICONS.WARNING}
</SendButton> color={colors.WARNING_PRIMARY}
</AdvancedForm> size={20}
)} />
Recommended fees updated. <StyledLink onClick={updateFeeLevels} isGreen>Click here to use them</StyledLink>
</UpdateFeeWrapper>
)}
</FeeLabelWrapper>
<Select
isSearchable={false}
isClearable={false}
value={selectedFeeLevel}
onChange={onFeeLevelChange}
options={feeLevels}
formatOptionLabel={option => (
<FeeOptionWrapper>
<P>{option.value}</P>
<P>{option.label}</P>
</FeeOptionWrapper>
)}
/>
</InputRow>
{props.selectedAccount.pending.length > 0 && ( <ToggleAdvancedSettingsWrapper
<PendingTransactions isAdvancedSettingsHidden={isAdvancedSettingsHidden}
pending={props.selectedAccount.pending} >
tokens={props.selectedAccount.tokens} <ToggleAdvancedSettingsButton
network={network} isTransparent
onClick={toggleAdvanced}
>
Advanced settings
<AdvancedSettingsIcon
icon={ICONS.ARROW_DOWN}
color={colors.TEXT_SECONDARY}
size={24}
isActive={advanced}
canAnimate
/> />
</ToggleAdvancedSettingsButton>
{isAdvancedSettingsHidden && (
<SendButton
isDisabled={isSendButtonDisabled}
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
onClick={() => onSend()}
>
{sendButtonText}
</SendButton>
)} )}
</React.Fragment> </ToggleAdvancedSettingsWrapper>
{advanced && (
<AdvancedForm {...props}>
<SendButton
isDisabled={isSendButtonDisabled}
onClick={() => onSend()}
>
{sendButtonText}
</SendButton>
</AdvancedForm>
)}
{props.selectedAccount.pending.length > 0 && (
<PendingTransactions
pending={props.selectedAccount.pending}
tokens={props.selectedAccount.tokens}
network={network}
/>
)}
</Content> </Content>
); );
}; };

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

@ -10,12 +10,13 @@ import colors from 'config/colors';
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: 10px 0 10px 0; padding: 0 0 10px 0;
`; `;
const RowButtons = styled(Row)` const RowButtons = styled(Row)`

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

@ -7,7 +7,6 @@ import Icon from 'components/Icon';
import { AsyncSelect } from 'components/Select'; import { AsyncSelect } from 'components/Select';
import ICONS from 'config/icons'; import ICONS from 'config/icons';
import colors from 'config/colors'; import colors from 'config/colors';
import Title from 'views/Wallet/components/Title';
import Tooltip from 'components/Tooltip'; import Tooltip from 'components/Tooltip';
import Content from 'views/Wallet/components/Content'; import Content from 'views/Wallet/components/Content';
@ -83,7 +82,7 @@ const AccountSummary = (props: Props) => {
<AccountHeading> <AccountHeading>
<AccountName> <AccountName>
<StyledCoinLogo coinNetwork={account.network} /> <StyledCoinLogo coinNetwork={account.network} />
<Title>Account #{parseInt(account.index, 10) + 1}</Title> <H2>Account #{parseInt(account.index, 10) + 1}</H2>
</AccountName> </AccountName>
<Link href={explorerLink} isGray>See full transaction history</Link> <Link href={explorerLink} isGray>See full transaction history</Link>
</AccountHeading> </AccountHeading>