arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-26 07:51:36 +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 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,14 +116,15 @@ const AccountReceive = (props: Props) => {
return ( return (
<Content> <Content>
<React.Fragment>
<Title>Receive Ethereum or tokens</Title> <Title>Receive Ethereum or tokens</Title>
<AddressWrapper isShowingQrCode={addressVerified || addressUnverified}> <AddressWrapper isShowingQrCode={addressVerified || addressUnverified}>
<Label>Address</Label>
<Row> <Row>
<Input <Input
type="text" type="text"
readOnly readOnly
autoSelect autoSelect
topLabel="Address"
value={address} value={address}
isPartiallyHidden={isAddressHidden} isPartiallyHidden={isAddressHidden}
trezorAction={isAddressVerifying ? ( trezorAction={isAddressVerifying ? (
@ -171,6 +175,7 @@ const AccountReceive = (props: Props) => {
</QrWrapper> </QrWrapper>
)} )}
</AddressWrapper> </AddressWrapper>
</React.Fragment>
</Content> </Content>
); );
}; };

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

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

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