arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-30 20:28:09 +00:00
Code Issues Releases Wiki Activity

Merge pull request #338 from trezor/fix/ui-issues

Browse Source 
Fix/ui issues
This commit is contained in:
Vladimir Volek 2019-01-22 15:26:55 +01:00 committed by GitHub
commit d0aa40e1b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 94 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Log/index.js
View File

@ -22,7 +22,7 @@ const Wrapper = styled.div`
position: relative; position: relative;
color: ${colors.INFO_PRIMARY}; color: ${colors.INFO_PRIMARY};
background: ${colors.INFO_SECONDARY}; background: ${colors.INFO_SECONDARY};
padding: 24px 48px; padding: 24px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-align: left; text-align: left;
@ -32,9 +32,10 @@ const Wrapper = styled.div`
const Click = styled.div` const Click = styled.div`
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
top: 8px; top: 0;
right: 0; right: 0;
padding: 12px; padding-right: inherit;
padding-top: inherit;
color: inherit; color: inherit;
transition: opacity 0.3s; transition: opacity 0.3s;
@ -61,7 +62,7 @@ const Log = (props: Props): ?React$Element<string> => {
return ( return (
<Wrapper> <Wrapper>
<Click onClick={props.toggle}> <Click onClick={props.toggle}>
<Icon size={25} color={colors.INFO_PRIMARY} icon={icons.CLOSE} /> <Icon size={24} color={colors.INFO_PRIMARY} icon={icons.CLOSE} />
</Click> </Click>
<H2>Log</H2> <H2>Log</H2>
<StyledParagraph isSmaller>Attention: The log contains your XPUBs. Anyone with your XPUBs can see your account history.</StyledParagraph> <StyledParagraph isSmaller>Attention: The log contains your XPUBs. Anyone with your XPUBs can see your account history.</StyledParagraph>

25
src/components/Notification/index.js
View File

@ -58,11 +58,8 @@ const Title = styled.div`
`; `;
const CloseClick = styled.div` const CloseClick = styled.div`
position: absolute; margin-left: 24px;
right: 0; align-self: flex-start;
top: 0;
padding-right: inherit;
padding-top: inherit;
cursor: pointer; cursor: pointer;
`; `;
@ -102,15 +99,6 @@ const Notification = (props: Props): React$Element<string> => {
<Wrapper className={props.className} type={props.type}> <Wrapper className={props.className} type={props.type}>
<Content> <Content>
{props.loading && <Loader size={50} /> } {props.loading && <Loader size={50} /> }
{props.cancelable && (
<CloseClick onClick={() => close()}>
<Icon
color={getPrimaryColor(props.type)}
icon={icons.CLOSE}
size={20}
/>
</CloseClick>
)}
<Body> <Body>
<IconWrapper> <IconWrapper>
<StyledIcon <StyledIcon
@ -138,6 +126,15 @@ const Notification = (props: Props): React$Element<string> => {
</ActionContent> </ActionContent>
)} )}
</AdditionalContent> </AdditionalContent>
{props.cancelable && (
<CloseClick onClick={() => close()}>
<Icon
color={getPrimaryColor(props.type)}
icon={icons.CLOSE}
size={20}
/>
</CloseClick>
)}
</Content> </Content>
</Wrapper> </Wrapper>
); );

1
src/components/Textarea/index.js
View File

@ -114,6 +114,7 @@ const TopLabel = styled.span`
`; `;
const BottomText = styled.span` const BottomText = styled.span`
margin-top: 10px;
font-size: ${FONT_SIZE.SMALL}; font-size: ${FONT_SIZE.SMALL};
color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)}; color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)};
`; `;

2
src/components/modals/confirm/Address/index.js
View File

@ -17,7 +17,7 @@ const Wrapper = styled.div`
`; `;
const Header = styled.div` const Header = styled.div`
padding: 24px 48px; padding: 30px 48px;
`; `;
const Content = styled.div` const Content = styled.div`

4
src/components/modals/confirm/SignTx/index.js
View File

@ -24,13 +24,13 @@ const Wrapper = styled.div`
`; `;
const Header = styled.div` const Header = styled.div`
padding: 24px 48px; padding: 30px 48px;
`; `;
const Content = styled.div` const Content = styled.div`
border-top: 1px solid ${colors.DIVIDER}; border-top: 1px solid ${colors.DIVIDER};
background: ${colors.MAIN}; background: ${colors.MAIN};
padding: 24px 48px; padding: 30px 48px;
border-radius: 4px; border-radius: 4px;
`; `;

17
src/components/modals/confirm/UnverifiedAddress/index.js
View File

@ -31,21 +31,20 @@ const StyledLink = styled(Link)`
const Wrapper = styled.div` const Wrapper = styled.div`
width: 370px; width: 370px;
padding: 24px 48px; padding: 30px 48px;
`; `;
const StyledP = styled(P)` const StyledP = styled(P)`
padding: 10px 0px; padding: 20px 0px;
`; `;
const Row = styled.div` const Row = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 10px 0;
`;
const StyledButton = styled(Button)` Button + Button {
margin: 0 0 10px 0; margin-top: 10px;
}
`; `;
class ConfirmUnverifiedAddress extends PureComponent<Props> { class ConfirmUnverifiedAddress extends PureComponent<Props> {
@ -99,13 +98,13 @@ class ConfirmUnverifiedAddress extends PureComponent<Props> {
return ( return (
<Wrapper> <Wrapper>
<StyledLink onClick={onCancel}> <StyledLink onClick={onCancel}>
<Icon size={20} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} /> <Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
</StyledLink> </StyledLink>
<H2>{ deviceStatus }</H2> <H2>{ deviceStatus }</H2>
<StyledP isSmaller>To prevent phishing attacks, you should verify the address on your Trezor first. { claim } to continue with the verification process.</StyledP> <StyledP isSmaller>To prevent phishing attacks, you should verify the address on your Trezor first. { claim } to continue with the verification process.</StyledP>
<Row> <Row>
<StyledButton onClick={() => (!account ? this.verifyAddress() : 'false')}>Try again</StyledButton> <Button onClick={() => (!account ? this.verifyAddress() : 'false')}>Try again</Button>
<StyledButton isWhite onClick={() => this.showUnverifiedAddress()}>Show unverified address</StyledButton> <Button isWhite onClick={() => this.showUnverifiedAddress()}>Show unverified address</Button>
</Row> </Row>
</Wrapper> </Wrapper>
); );

4
src/components/modals/device/Duplicate/index.js
View File

@ -41,7 +41,7 @@ const StyledLink = styled(Link)`
const Wrapper = styled.div` const Wrapper = styled.div`
width: 360px; width: 360px;
padding: 24px 48px; padding: 30px 48px;
`; `;
const Column = styled.div` const Column = styled.div`
@ -138,7 +138,7 @@ class DuplicateDevice extends PureComponent<Props, State> {
return ( return (
<Wrapper> <Wrapper>
<StyledLink onClick={onCancel}> <StyledLink onClick={onCancel}>
<Icon size={20} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} /> <Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
</StyledLink> </StyledLink>
<H3>Clone { device.label }?</H3> <H3>Clone { device.label }?</H3>
<StyledP isSmaller>This will create new instance of device which can be used with different passphrase</StyledP> <StyledP isSmaller>This will create new instance of device which can be used with different passphrase</StyledP>

21
src/components/modals/device/Forget/index.js
View File

@ -4,7 +4,7 @@ import React, { PureComponent } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import { H3 } from 'components/Heading'; import { H2 } from 'components/Heading';
import P from 'components/Paragraph'; import P from 'components/Paragraph';
import Button from 'components/Button'; import Button from 'components/Button';
@ -19,21 +19,20 @@ type Props = {
const Wrapper = styled.div` const Wrapper = styled.div`
width: 360px; width: 360px;
padding: 24px 48px; padding: 30px 48px;
`; `;
const StyledP = styled(P)` const StyledP = styled(P)`
padding: 7px 0px; padding: 20px 0px;
`;
const StyledButton = styled(Button)`
margin: 0 0 10px 0;
`; `;
const Row = styled.div` const Row = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 10px 0;
Button + Button {
margin-top: 10px;
}
`; `;
class ForgetDevice extends PureComponent<Props> { class ForgetDevice extends PureComponent<Props> {
@ -62,11 +61,11 @@ class ForgetDevice extends PureComponent<Props> {
render() { render() {
return ( return (
<Wrapper> <Wrapper>
<H3>Forget { this.props.device.instanceLabel }?</H3> <H2>Forget { this.props.device.instanceLabel }?</H2>
<StyledP isSmaller>Forgetting only removes the device from the list on the left, your coins are still safe and you can access them by reconnecting your Trezor again.</StyledP> <StyledP isSmaller>Forgetting only removes the device from the list on the left, your coins are still safe and you can access them by reconnecting your Trezor again.</StyledP>
<Row> <Row>
<StyledButton onClick={() => this.forget()}>Forget</StyledButton> <Button onClick={() => this.forget()}>Forget</Button>
<StyledButton isWhite onClick={this.props.onCancel}>Don&apos;t forget</StyledButton> <Button isWhite onClick={this.props.onCancel}>Don&apos;t forget</Button>
</Row> </Row>
</Wrapper> </Wrapper>
); );

18
src/components/modals/device/Remember/index.js
View File

@ -31,12 +31,12 @@ const ButtonContent = styled.div`
`; `;
const StyledP = styled(P)` const StyledP = styled(P)`
padding: 10px 0; padding: 20px 0;
`; `;
const Wrapper = styled.div` const Wrapper = styled.div`
width: 360px; width: 360px;
padding: 24px 48px; padding: 30px 48px;
`; `;
const Text = styled.div` const Text = styled.div`
@ -46,10 +46,10 @@ const Text = styled.div`
const Column = styled.div` const Column = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
`;
const StyledButton = styled(Button)` Button + Button {
margin: 5px 0; margin-top: 10px;
}
`; `;
const StyledLoader = styled(Loader)` const StyledLoader = styled(Loader)`
@ -128,7 +128,7 @@ class RememberDevice extends PureComponent<Props, State> {
<H3>Forget {label}?</H3> <H3>Forget {label}?</H3>
<StyledP isSmaller>Would you like Trezor Wallet to forget your { devicePlural }, so that it is still visible even while disconnected?</StyledP> <StyledP isSmaller>Would you like Trezor Wallet to forget your { devicePlural }, so that it is still visible even while disconnected?</StyledP>
<Column> <Column>
<StyledButton onClick={() => this.forget()}> <Button onClick={() => this.forget()}>
<ButtonContent> <ButtonContent>
<Text>Forget</Text> <Text>Forget</Text>
<StyledLoader <StyledLoader
@ -138,12 +138,12 @@ class RememberDevice extends PureComponent<Props, State> {
text={this.state.countdown.toString()} text={this.state.countdown.toString()}
/> />
</ButtonContent> </ButtonContent>
</StyledButton> </Button>
<StyledButton <Button
isWhite isWhite
onClick={() => onRememberDevice(device)} onClick={() => onRememberDevice(device)}
>Remember >Remember
</StyledButton> </Button>
</Column> </Column>
</Wrapper> </Wrapper>
); );

8
src/components/modals/device/WalletType/index.js
View File

@ -7,7 +7,7 @@ import styled, { css } from 'styled-components';
import icons from 'config/icons'; import icons from 'config/icons';
import colors from 'config/colors'; import colors from 'config/colors';
import { H3 } from 'components/Heading'; import { H2 } from 'components/Heading';
import P from 'components/Paragraph'; import P from 'components/Paragraph';
import Button from 'components/Button'; import Button from 'components/Button';
import Tooltip from 'components/Tooltip'; import Tooltip from 'components/Tooltip';
@ -36,8 +36,8 @@ const Header = styled.div`
color: ${colors.TEXT_PRIMARY}; color: ${colors.TEXT_PRIMARY};
`; `;
const StyledHeading = styled(H3)` const StyledHeading = styled(H2)`
padding-top: 30px; padding: 30px 48px 10px 48px;
`; `;
const StyledLink = styled(Link)` const StyledLink = styled(Link)`
@ -105,7 +105,7 @@ class WalletType extends PureComponent<Props> {
{ device.state && ( { device.state && (
<StyledLink onClick={onCancel}> <StyledLink onClick={onCancel}>
<Icon <Icon
size={20} size={24}
color={colors.TEXT_SECONDARY} color={colors.TEXT_SECONDARY}
icon={icons.CLOSE} icon={icons.CLOSE}
/> />

4
src/components/modals/external/Cardano/index.js vendored
View File

@ -26,7 +26,7 @@ const Wrapper = styled.div`
`; `;
const StyledButton = styled(Button)` const StyledButton = styled(Button)`
margin: 10px 0 10px 0; margin-top: 10px;
width: 100%; width: 100%;
`; `;
@ -48,7 +48,7 @@ const CardanoWallet = (props: Props) => (
<Wrapper> <Wrapper>
<StyledLink onClick={props.onCancel}> <StyledLink onClick={props.onCancel}>
<Icon <Icon
size={20} size={24}
color={colors.TEXT_SECONDARY} color={colors.TEXT_SECONDARY}
icon={icons.CLOSE} icon={icons.CLOSE}
/> />

6
src/components/modals/external/Nem/index.js vendored
View File

@ -22,11 +22,11 @@ type Props = {
const Wrapper = styled.div` const Wrapper = styled.div`
width: 100%; width: 100%;
max-width: 620px; max-width: 620px;
padding: 24px 48px; padding: 30px 48px;
`; `;
const StyledButton = styled(Button)` const StyledButton = styled(Button)`
margin: 0 0 10px 0; margin-top: 10px;
width: 100%; width: 100%;
`; `;
@ -46,7 +46,7 @@ const NemWallet = (props: Props) => (
<Wrapper> <Wrapper>
<StyledLink onClick={props.onCancel}> <StyledLink onClick={props.onCancel}>
<Icon <Icon
size={20} size={24}
color={colors.TEXT_SECONDARY} color={colors.TEXT_SECONDARY}
icon={icons.CLOSE} icon={icons.CLOSE}
/> />

4
src/components/modals/external/Stellar/index.js vendored
View File

@ -26,7 +26,7 @@ const Wrapper = styled.div`
`; `;
const StyledButton = styled(Button)` const StyledButton = styled(Button)`
margin: 10px 0 10px 0; margin-top: 10px;
width: 100%; width: 100%;
`; `;
@ -48,7 +48,7 @@ const StellarWallet = (props: Props) => (
<Wrapper> <Wrapper>
<StyledLink onClick={props.onCancel}> <StyledLink onClick={props.onCancel}>
<Icon <Icon
size={20} size={24}
color={colors.TEXT_SECONDARY} color={colors.TEXT_SECONDARY}
icon={icons.CLOSE} icon={icons.CLOSE}
/> />

2
src/components/modals/passphrase/Passphrase/index.js
View File

@ -31,7 +31,7 @@ type State = {
}; };
const Wrapper = styled.div` const Wrapper = styled.div`
padding: 24px 48px; padding: 30px 48px;
max-width: 390px; max-width: 390px;
`; `;

2
src/components/modals/passphrase/Type/index.js
View File

@ -19,7 +19,7 @@ type Props = {
const Wrapper = styled.div` const Wrapper = styled.div`
width: 360px; width: 360px;
padding: 24px 48px; padding: 30px 48px;
`; `;
const Header = styled.div``; const Header = styled.div``;

2
src/components/modals/pin/Invalid/index.js
View File

@ -14,7 +14,7 @@ type Props = {
} }
const Wrapper = styled.div` const Wrapper = styled.div`
padding: 24px 48px; padding: 30px 48px;
`; `;
const InvalidPin = (props: Props) => ( const InvalidPin = (props: Props) => (

1
src/components/modals/pin/Pin/components/Button/index.js
View File

@ -22,6 +22,7 @@ const Wrapper = styled.button`
border: 1px solid ${colors.DIVIDER}; border: 1px solid ${colors.DIVIDER};
background: ${colors.WHITE}; background: ${colors.WHITE};
transition: all 0.3s; transition: all 0.3s;
cursor: pointer;
&:first-child { &:first-child {
margin-left: 0px; margin-left: 0px;

2
src/components/modals/pin/Pin/index.js
View File

@ -25,7 +25,7 @@ type State = {
} }
const Wrapper = styled.div` const Wrapper = styled.div`
padding: 24px 48px; padding: 30px 48px;
`; `;
const InputRow = styled.div` const InputRow = styled.div`

2
src/views/Landing/components/BetaDisclaimer/index.js
View File

@ -36,7 +36,7 @@ const ModalWindow = styled.div`
text-align: center; text-align: center;
width: 100%; width: 100%;
max-width: 620px; max-width: 620px;
padding: 24px 48px; padding: 30px 48px;
`; `;
const StyledP = styled(P)` const StyledP = styled(P)`

1
src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js
View File

@ -9,6 +9,7 @@ import { FONT_SIZE } from 'config/variables';
const Wrapper = styled.div` const Wrapper = styled.div`
background: ${colors.WHITE}; background: ${colors.WHITE};
box-shadow: 0 3px 8px rgba(0,0,0,0.06);
`; `;
const Item = styled.div` const Item = styled.div`

8
src/views/Wallet/components/LeftNavigation/components/Divider/index.js
View File

@ -3,7 +3,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import colors from 'config/colors'; import colors from 'config/colors';
import { FONT_SIZE } from 'config/variables'; import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
const Wrapper = styled.div` const Wrapper = styled.div`
display: flex; display: flex;
@ -18,6 +18,10 @@ const Wrapper = styled.div`
`} `}
`; `;
const TextLeft = styled.p`
font-weight: ${FONT_WEIGHT.MEDIUM};
`;
const Divider = ({ const Divider = ({
textLeft, textRight, hasBorder = false, className, textLeft, textRight, hasBorder = false, className,
}) => ( }) => (
@ -25,7 +29,7 @@ const Divider = ({
hasBorder={hasBorder} hasBorder={hasBorder}
className={className} className={className}
> >
<p>{textLeft}</p> <TextLeft>{textLeft}</TextLeft>
<p>{textRight}</p> <p>{textRight}</p>
</Wrapper> </Wrapper>
); );

5
src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js
View File

@ -30,6 +30,11 @@ const AsideWrapper = styled.aside.attrs(props => ({
overflow: hidden; overflow: hidden;
background: ${colors.MAIN}; background: ${colors.MAIN};
border-right: 1px solid ${colors.DIVIDER}; border-right: 1px solid ${colors.DIVIDER};
border-top-left-radius: 4px;
@media screen and (max-width: 1170px) {
border-top-left-radius: 0px;
}
`; `;
const StickyContainerWrapper = styled.div.attrs(props => ({ const StickyContainerWrapper = styled.div.attrs(props => ({

5
src/views/Wallet/components/LeftNavigation/index.js
View File

@ -24,13 +24,14 @@ const Header = styled(DeviceHeader)`
`; `;
const Counter = styled.div` const Counter = styled.div`
display: flex;
justify-content: center;
align-items: center;
border: 1px solid ${colors.DIVIDER}; border: 1px solid ${colors.DIVIDER};
border-radius: 50%; border-radius: 50%;
color: ${colors.TEXT_SECONDARY}; color: ${colors.TEXT_SECONDARY};
width: 24px; width: 24px;
height: 24px; height: 24px;
line-height: 22px;
text-align: center;
font-size: ${FONT_SIZE.COUNTER}; font-size: ${FONT_SIZE.COUNTER};
margin-right: 8px; margin-right: 8px;
`; `;

5
src/views/Wallet/index.js
View File

@ -66,6 +66,11 @@ const MainContent = styled.article`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: auto; overflow: auto;
border-top-right-radius: 4px;
@media screen and (max-width: 1170px) {
border-top-right-radius: 0px;
}
`; `;
const Navigation = styled.nav` const Navigation = styled.nav`

10
src/views/Wallet/views/Account/Send/ethereum/components/AdvancedForm/index.js
View File

@ -4,6 +4,7 @@ import * as React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import colors from 'config/colors'; import colors from 'config/colors';
import Link from 'components/Link';
import Input from 'components/inputs/Input'; import Input from 'components/inputs/Input';
import Textarea from 'components/Textarea'; import Textarea from 'components/Textarea';
import Tooltip from 'components/Tooltip'; import Tooltip from 'components/Tooltip';
@ -117,7 +118,10 @@ const Right = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-size: ${FONT_SIZE.SMALL}; font-size: ${FONT_SIZE.SMALL};
cursor: pointer; `;
const StyledLink = styled(Link)`
white-space: nowrap;
`; `;
// stateless component // stateless component
@ -190,8 +194,8 @@ const AdvancedForm = (props: Props) => {
</Tooltip> </Tooltip>
</Left> </Left>
{ showDefaultGasLimitButton && ( { showDefaultGasLimitButton && (
<Right onClick={() => setDefaultGasLimit()}> <Right>
Set default <StyledLink onClick={setDefaultGasLimit} isGreen>Set default</StyledLink>
</Right>) </Right>)
} }
</InputLabelWrapper> </InputLabelWrapper>

2
src/views/Wallet/views/Account/Summary/components/Token/index.js
View File

@ -46,7 +46,7 @@ const TokenText = styled.div`
`; `;
const TokenName = styled(TokenText)` const TokenName = styled(TokenText)`
flex: 0 0 0; flex: 1 1 0;
padding-right: 5px; padding-right: 5px;
`; `;