arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-12 09:00:58 +00:00
Code Issues Releases Wiki Activity

css changes in views/Account components from master

Browse Source
This commit is contained in:
Szymon Lesisz 2018-12-11 15:28:44 +01:00
parent b368447bcb
commit 15ad3ceee7
6 changed files with 150 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
src/views/Wallet/views/Account/Receive/ethereum/index.js
View File

@ -2,7 +2,6 @@
import React from 'react';
import { QRCode } from 'react-qr-svg';
import styled from 'styled-components';
import media from 'styled-media-query';
import Title from 'views/Wallet/components/Title';
import Button from 'components/Button';
@ -20,7 +19,7 @@ import VerifyAddressTooltip from '../components/VerifyAddressTooltip';
import type { Props } from './Container';
const Label = styled.div`
padding: 25px 0 5px 0;
padding-bottom: 10px;
color: ${colors.TEXT_SECONDARY};
`;
@ -43,14 +42,17 @@ const ShowAddressButton = styled(Button)`
display: flex;
height: 40px;
align-items: center;
align-self: flex-end;
justify-content: center;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
${media.lessThan('795px')`
@media screen and (max-width: 795px) {
margin-top: 10px;
`}
align-self: auto;
border-radius: 3px;
}
`;
const ShowAddressIcon = styled(Icon)`
@ -63,23 +65,24 @@ const EyeButton = styled(Button)`
z-index: 10001;
padding: 0;
width: 30px;
background: white;
background: transparent;
top: 5px;
position: absolute;
right: 10px;
&:hover {
background: white;
background: transparent;
}
`;
const Row = styled.div`
display: flex;
width: 100%;
padding-bottom: 28px;
${media.lessThan('795px')`
@media screen and (max-width: 795px) {
flex-direction: column;
`}
}
`;
const QrWrapper = styled.div`
@ -113,64 +116,66 @@ const AccountReceive = (props: Props) => {
return (
<Content>
<Title>Receive Ethereum or tokens</Title>
<AddressWrapper isShowingQrCode={addressVerified || addressUnverified}>
<Label>Address</Label>
<Row>
<Input
type="text"
readOnly
autoSelect
value={address}
isPartiallyHidden={isAddressHidden}
trezorAction={isAddressVerifying ? (
<React.Fragment>
<Icon
icon={ICONS.T1}
color={colors.WHITE}
/>
Check address on your Trezor
</React.Fragment>
) : null}
icon={((addressVerified || addressUnverified) && !isAddressVerifying) && (
<Tooltip
placement="left"
content={(
<VerifyAddressTooltip
isConnected={device.connected}
isAvailable={device.available}
addressUnverified={addressUnverified}
/>
)}
>
<EyeButton onClick={() => props.showAddress(account.addressPath)}>
<React.Fragment>
<Title>Receive Ethereum or tokens</Title>
<AddressWrapper isShowingQrCode={addressVerified || addressUnverified}>
<Row>
<Input
type="text"
readOnly
autoSelect
topLabel="Address"
value={address}
isPartiallyHidden={isAddressHidden}
trezorAction={isAddressVerifying ? (
<React.Fragment>
<Icon
icon={addressUnverified ? ICONS.EYE_CROSSED : ICONS.EYE}
color={addressUnverified ? colors.ERROR_PRIMARY : colors.TEXT_PRIMARY}
icon={ICONS.T1}
color={colors.WHITE}
/>
</EyeButton>
</Tooltip>
)}
/>
{!(addressVerified || addressUnverified) && (
<ShowAddressButton onClick={() => props.showAddress(account.addressPath)} isDisabled={device.connected && !discovery.completed}>
<ShowAddressIcon icon={ICONS.EYE} color={colors.WHITE} />Show full address
</ShowAddressButton>
)}
</Row>
{(addressVerified || addressUnverified) && !isAddressVerifying && (
<QrWrapper>
<Label>QR code</Label>
<StyledQRCode
bgColor="#FFFFFF"
fgColor="#000000"
level="Q"
style={{ width: 150 }}
value={account.address}
Check address on your Trezor
</React.Fragment>
) : null}
icon={((addressVerified || addressUnverified) && !isAddressVerifying) && (
<Tooltip
placement="left"
content={(
<VerifyAddressTooltip
isConnected={device.connected}
isAvailable={device.available}
addressUnverified={addressUnverified}
/>
)}
>
<EyeButton onClick={() => props.showAddress(account.addressPath)}>
<Icon
icon={addressUnverified ? ICONS.EYE_CROSSED : ICONS.EYE}
color={addressUnverified ? colors.ERROR_PRIMARY : colors.TEXT_PRIMARY}
/>
</EyeButton>
</Tooltip>
)}
/>
</QrWrapper>
)}
</AddressWrapper>
{!(addressVerified || addressUnverified) && (
<ShowAddressButton onClick={() => props.showAddress(account.addressPath)} isDisabled={device.connected && !discovery.completed}>
<ShowAddressIcon icon={ICONS.EYE} color={colors.WHITE} />Show full address
</ShowAddressButton>
)}
</Row>
{(addressVerified || addressUnverified) && !isAddressVerifying && (
<QrWrapper>
<Label>QR code</Label>
<StyledQRCode
bgColor="#FFFFFF"
fgColor="#000000"
level="Q"
style={{ width: 150 }}
value={account.address}
/>
</QrWrapper>
)}
</AddressWrapper>
</React.Fragment>
</Content>
);
};

131
src/views/Wallet/views/Account/Receive/ripple/index.js
View File

@ -2,7 +2,6 @@
import React from 'react';
import { QRCode } from 'react-qr-svg';
import styled from 'styled-components';
import media from 'styled-media-query';
import Title from 'views/Wallet/components/Title';
import Button from 'components/Button';
@ -20,7 +19,7 @@ import VerifyAddressTooltip from '../components/VerifyAddressTooltip';
import type { Props } from './Container';
const Label = styled.div`
padding: 25px 0 5px 0;
padding-bottom: 10px;
color: ${colors.TEXT_SECONDARY};
`;
@ -43,14 +42,17 @@ const ShowAddressButton = styled(Button)`
display: flex;
height: 40px;
align-items: center;
align-self: flex-end;
justify-content: center;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
${media.lessThan('795px')`
@media screen and (max-width: 795px) {
margin-top: 10px;
`}
align-self: auto;
border-radius: 3px;
}
`;
const ShowAddressIcon = styled(Icon)`
@ -63,23 +65,24 @@ const EyeButton = styled(Button)`
z-index: 10001;
padding: 0;
width: 30px;
background: white;
background: transparent;
top: 5px;
position: absolute;
right: 10px;
&:hover {
background: white;
background: transparent;
}
`;
const Row = styled.div`
display: flex;
width: 100%;
padding-bottom: 28px;
${media.lessThan('795px')`
@media screen and (max-width: 795px) {
flex-direction: column;
`}
}
`;
const QrWrapper = styled.div`
@ -113,64 +116,66 @@ const AccountReceive = (props: Props) => {
return (
<Content>
<Title>Receive Ripple</Title>
<AddressWrapper isShowingQrCode={addressVerified || addressUnverified}>
<Label>Address</Label>
<Row>
<Input
type="text"
readOnly
autoSelect
value={address}
isPartiallyHidden={isAddressHidden}
trezorAction={isAddressVerifying ? (
<React.Fragment>
<Icon
icon={ICONS.T1}
color={colors.WHITE}
/>
Check address on your Trezor
</React.Fragment>
) : null}
icon={((addressVerified || addressUnverified) && !isAddressVerifying) && (
<Tooltip
placement="left"
content={(
<VerifyAddressTooltip
isConnected={device.connected}
isAvailable={device.available}
addressUnverified={addressUnverified}
/>
)}
>
<EyeButton onClick={() => props.showAddress(account.addressPath)}>
<React.Fragment>
<Title>Receive Ripple</Title>
<AddressWrapper isShowingQrCode={addressVerified || addressUnverified}>
<Row>
<Input
type="text"
readOnly
autoSelect
topLabel="Address"
value={address}
isPartiallyHidden={isAddressHidden}
trezorAction={isAddressVerifying ? (
<React.Fragment>
<Icon
icon={addressUnverified ? ICONS.EYE_CROSSED : ICONS.EYE}
color={addressUnverified ? colors.ERROR_PRIMARY : colors.TEXT_PRIMARY}
icon={ICONS.T1}
color={colors.WHITE}
/>
</EyeButton>
</Tooltip>
)}
/>
{!(addressVerified || addressUnverified) && (
<ShowAddressButton onClick={() => props.showAddress(account.addressPath)} isDisabled={device.connected && !discovery.completed}>
<ShowAddressIcon icon={ICONS.EYE} color={colors.WHITE} />Show full address
</ShowAddressButton>
)}
</Row>
{(addressVerified || addressUnverified) && !isAddressVerifying && (
<QrWrapper>
<Label>QR code</Label>
<StyledQRCode
bgColor="#FFFFFF"
fgColor="#000000"
level="Q"
style={{ width: 150 }}
value={account.address}
Check address on your Trezor
</React.Fragment>
) : null}
icon={((addressVerified || addressUnverified) && !isAddressVerifying) && (
<Tooltip
placement="left"
content={(
<VerifyAddressTooltip
isConnected={device.connected}
isAvailable={device.available}
addressUnverified={addressUnverified}
/>
)}
>
<EyeButton onClick={() => props.showAddress(account.addressPath)}>
<Icon
icon={addressUnverified ? ICONS.EYE_CROSSED : ICONS.EYE}
color={addressUnverified ? colors.ERROR_PRIMARY : colors.TEXT_PRIMARY}
/>
</EyeButton>
</Tooltip>
)}
/>
</QrWrapper>
)}
</AddressWrapper>
{!(addressVerified || addressUnverified) && (
<ShowAddressButton onClick={() => props.showAddress(account.addressPath)} isDisabled={device.connected && !discovery.completed}>
<ShowAddressIcon icon={ICONS.EYE} color={colors.WHITE} />Show full address
</ShowAddressButton>
)}
</Row>
{(addressVerified || addressUnverified) && !isAddressVerifying && (
<QrWrapper>
<Label>QR code</Label>
<StyledQRCode
bgColor="#FFFFFF"
fgColor="#000000"
level="Q"
style={{ width: 150 }}
value={account.address}
/>
</QrWrapper>
)}
</AddressWrapper>
</React.Fragment>
</Content>
);
};

11
src/views/Wallet/views/Account/Send/ethereum/index.js
View File

@ -34,7 +34,7 @@ const AmountInputLabel = styled.span`
`;
const InputRow = styled.div`
padding: 0 0 15px 0;
padding-bottom: 28px;
`;
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: 10px;
`;
const FeeLabel = styled.span`
@ -264,7 +264,6 @@ const AccountSend = (props: Props) => {
onChange={event => onAddressChange(event.target.value)}
/>
</InputRow>
<InputRow>
<Input
state={getAmountInputState(errors.amount, warnings.amount)}
@ -304,7 +303,7 @@ const AccountSend = (props: Props) => {
color={colors.WHITE}
/>
)}
Set max
Set max
</SetMaxAmountButton>
),
(
@ -332,7 +331,7 @@ const AccountSend = (props: Props) => {
color={colors.WARNING_PRIMARY}
size={20}
/>
Recommended fees updated. <StyledLink onClick={updateFeeLevels} isGreen>Click here to use them</StyledLink>
Recommended fees updated. <StyledLink onClick={updateFeeLevels} isGreen>Click here to use them</StyledLink>
</UpdateFeeWrapper>
)}
</FeeLabelWrapper>
@ -358,7 +357,7 @@ const AccountSend = (props: Props) => {
isTransparent
onClick={toggleAdvanced}
>
Advanced settings
Advanced settings
<AdvancedSettingsIcon
icon={ICONS.ARROW_DOWN}
color={colors.TEXT_SECONDARY}

5
src/views/Wallet/views/Account/Send/ripple/index.js
View File

@ -20,7 +20,7 @@ import type { Props } from './Container';
const SmallScreenWidth = '850px';
const InputRow = styled.div`
padding: 0 0 15px 0;
padding-bottom: 28px;
`;
const SetMaxAmountButton = styled(Button)`
@ -180,7 +180,6 @@ const AccountSend = (props: Props) => {
onChange={event => onAddressChange(event.target.value)}
/>
</InputRow>
<InputRow>
<Input
state={getAmountInputState(errors.amount, warnings.amount)}
@ -212,7 +211,7 @@ const AccountSend = (props: Props) => {
color={colors.WHITE}
/>
)}
Set max
Set max
</SetMaxAmountButton>
),
(

3
src/views/Wallet/views/Account/Summary/ethereum/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;
@ -57,6 +57,7 @@ const StyledCoinLogo = styled(CoinLogo)`
const StyledIcon = styled(Icon)`
position: relative;
top: -7px;
&:hover {
cursor: pointer;
}

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

@ -18,7 +18,7 @@ import AccountBalance from '../components/Balance';
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;
@ -54,6 +54,7 @@ const StyledCoinLogo = styled(CoinLogo)`
const StyledIcon = styled(Icon)`
position: relative;
top: -7px;
&:hover {
cursor: pointer;
}