mirror of
https://github.com/trezor/trezor-wallet
synced 2024-12-25 16:38:08 +00:00
more consistent UI
This commit is contained in:
parent
78eb5501b3
commit
8e14e04dc1
@ -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 ? (
|
||||
|
@ -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)}
|
||||
|
@ -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`
|
||||
|
@ -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)`
|
||||
|
@ -22,7 +22,7 @@ type State = {
|
||||
};
|
||||
|
||||
const Wrapper = styled.div`
|
||||
padding: 10px 0 25px 0;
|
||||
padding-bottom: 25px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user