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

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

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

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

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

13
src/views/Wallet/views/Account/Send/ethereum/index.js
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`
@ -264,7 +264,6 @@ const AccountSend = (props: Props) => {
onChange={event => onAddressChange(event.target.value)} onChange={event => onAddressChange(event.target.value)}
/> />
</InputRow> </InputRow>
<InputRow> <InputRow>
<Input <Input
state={getAmountInputState(errors.amount, warnings.amount)} state={getAmountInputState(errors.amount, warnings.amount)}
@ -304,7 +303,7 @@ const AccountSend = (props: Props) => {
color={colors.WHITE} color={colors.WHITE}
/> />
)} )}
Set max Set max
</SetMaxAmountButton> </SetMaxAmountButton>
), ),
( (
@ -332,7 +331,7 @@ const AccountSend = (props: Props) => {
color={colors.WARNING_PRIMARY} color={colors.WARNING_PRIMARY}
size={20} 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> </UpdateFeeWrapper>
)} )}
</FeeLabelWrapper> </FeeLabelWrapper>
@ -358,7 +357,7 @@ const AccountSend = (props: Props) => {
isTransparent isTransparent
onClick={toggleAdvanced} onClick={toggleAdvanced}
> >
Advanced settings Advanced settings
<AdvancedSettingsIcon <AdvancedSettingsIcon
icon={ICONS.ARROW_DOWN} icon={ICONS.ARROW_DOWN}
color={colors.TEXT_SECONDARY} color={colors.TEXT_SECONDARY}
@ -401,4 +400,4 @@ const AccountSend = (props: Props) => {
); );
}; };
export default AccountSend; export default AccountSend;

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 SmallScreenWidth = '850px';
const InputRow = styled.div` const InputRow = styled.div`
padding: 0 0 15px 0; padding-bottom: 28px;
`; `;
const SetMaxAmountButton = styled(Button)` const SetMaxAmountButton = styled(Button)`
@ -180,7 +180,6 @@ const AccountSend = (props: Props) => {
onChange={event => onAddressChange(event.target.value)} onChange={event => onAddressChange(event.target.value)}
/> />
</InputRow> </InputRow>
<InputRow> <InputRow>
<Input <Input
state={getAmountInputState(errors.amount, warnings.amount)} state={getAmountInputState(errors.amount, warnings.amount)}
@ -212,7 +211,7 @@ const AccountSend = (props: Props) => {
color={colors.WHITE} color={colors.WHITE}
/> />
)} )}
Set max Set max
</SetMaxAmountButton> </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'; 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;
@ -57,6 +57,7 @@ const StyledCoinLogo = styled(CoinLogo)`
const StyledIcon = styled(Icon)` const StyledIcon = styled(Icon)`
position: relative; position: relative;
top: -7px; top: -7px;
&:hover { &:hover {
cursor: pointer; 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'; 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;
@ -54,6 +54,7 @@ const StyledCoinLogo = styled(CoinLogo)`
const StyledIcon = styled(Icon)` const StyledIcon = styled(Icon)`
position: relative; position: relative;
top: -7px; top: -7px;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
} }