arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-06-19 14:38:50 +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

23
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,14 +116,15 @@ const AccountReceive = (props: Props) => {
return (
<Content>
<React.Fragment>
<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 ? (
@ -171,6 +175,7 @@ const AccountReceive = (props: Props) => {
</QrWrapper>
)}
</AddressWrapper>
</React.Fragment>
</Content>
);
};

23
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,14 +116,15 @@ const AccountReceive = (props: Props) => {
return (
<Content>
<React.Fragment>
<Title>Receive Ripple</Title>
<AddressWrapper isShowingQrCode={addressVerified || addressUnverified}>
<Label>Address</Label>
<Row>
<Input
type="text"
readOnly
autoSelect
topLabel="Address"
value={address}
isPartiallyHidden={isAddressHidden}
trezorAction={isAddressVerifying ? (
@ -171,6 +175,7 @@ const AccountReceive = (props: Props) => {
</QrWrapper>
)}
</AddressWrapper>
</React.Fragment>
</Content>
);
};

5
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)}

3
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)}

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