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;
color: ${colors.INFO_PRIMARY};
background: ${colors.INFO_SECONDARY};
padding: 24px 48px;
padding: 24px;
display: flex;
flex-direction: column;
text-align: left;
@ -32,9 +32,10 @@ const Wrapper = styled.div`
const Click = styled.div`
cursor: pointer;
position: absolute;
top: 8px;
top: 0;
right: 0;
padding: 12px;
padding-right: inherit;
padding-top: inherit;
color: inherit;
transition: opacity 0.3s;
@ -61,7 +62,7 @@ const Log = (props: Props): ?React$Element<string> => {
return (
<Wrapper>
<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>
<H2>Log</H2>
<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`
position: absolute;
right: 0;
top: 0;
padding-right: inherit;
padding-top: inherit;
margin-left: 24px;
align-self: flex-start;
cursor: pointer;
`;
@ -102,15 +99,6 @@ const Notification = (props: Props): React$Element<string> => {
<Wrapper className={props.className} type={props.type}>
<Content>
{props.loading && <Loader size={50} /> }
{props.cancelable && (
<CloseClick onClick={() => close()}>
<Icon
color={getPrimaryColor(props.type)}
icon={icons.CLOSE}
size={20}
/>
</CloseClick>
)}
<Body>
<IconWrapper>
<StyledIcon
@ -138,6 +126,15 @@ const Notification = (props: Props): React$Element<string> => {
</ActionContent>
)}
</AdditionalContent>
{props.cancelable && (
<CloseClick onClick={() => close()}>
<Icon
color={getPrimaryColor(props.type)}
icon={icons.CLOSE}
size={20}
/>
</CloseClick>
)}
</Content>
</Wrapper>
);

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

@ -114,6 +114,7 @@ const TopLabel = styled.span`
`;
const BottomText = styled.span`
margin-top: 10px;
font-size: ${FONT_SIZE.SMALL};
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`
padding: 24px 48px;
padding: 30px 48px;
`;
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`
padding: 24px 48px;
padding: 30px 48px;
`;
const Content = styled.div`
border-top: 1px solid ${colors.DIVIDER};
background: ${colors.MAIN};
padding: 24px 48px;
padding: 30px 48px;
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`
width: 370px;
padding: 24px 48px;
padding: 30px 48px;
`;
const StyledP = styled(P)`
padding: 10px 0px;
padding: 20px 0px;
`;
const Row = styled.div`
display: flex;
flex-direction: column;
padding: 10px 0;
`;
const StyledButton = styled(Button)`
margin: 0 0 10px 0;
Button + Button {
margin-top: 10px;
}
`;
class ConfirmUnverifiedAddress extends PureComponent<Props> {
@ -99,13 +98,13 @@ class ConfirmUnverifiedAddress extends PureComponent<Props> {
return (
<Wrapper>
<StyledLink onClick={onCancel}>
<Icon size={20} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
<Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
</StyledLink>
<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>
<Row>
<StyledButton onClick={() => (!account ? this.verifyAddress() : 'false')}>Try again</StyledButton>
<StyledButton isWhite onClick={() => this.showUnverifiedAddress()}>Show unverified address</StyledButton>
<Button onClick={() => (!account ? this.verifyAddress() : 'false')}>Try again</Button>
<Button isWhite onClick={() => this.showUnverifiedAddress()}>Show unverified address</Button>
</Row>
</Wrapper>
);

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

@ -41,7 +41,7 @@ const StyledLink = styled(Link)`
const Wrapper = styled.div`
width: 360px;
padding: 24px 48px;
padding: 30px 48px;
`;
const Column = styled.div`
@ -138,7 +138,7 @@ class DuplicateDevice extends PureComponent<Props, State> {
return (
<Wrapper>
<StyledLink onClick={onCancel}>
<Icon size={20} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
<Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
</StyledLink>
<H3>Clone { device.label }?</H3>
<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 styled from 'styled-components';
import { H3 } from 'components/Heading';
import { H2 } from 'components/Heading';
import P from 'components/Paragraph';
import Button from 'components/Button';
@ -19,21 +19,20 @@ type Props = {
const Wrapper = styled.div`
width: 360px;
padding: 24px 48px;
padding: 30px 48px;
`;
const StyledP = styled(P)`
padding: 7px 0px;
`;
const StyledButton = styled(Button)`
margin: 0 0 10px 0;
padding: 20px 0px;
`;
const Row = styled.div`
display: flex;
flex-direction: column;
padding: 10px 0;
Button + Button {
margin-top: 10px;
}
`;
class ForgetDevice extends PureComponent<Props> {
@ -62,11 +61,11 @@ class ForgetDevice extends PureComponent<Props> {
render() {
return (
<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>
<Row>
<StyledButton onClick={() => this.forget()}>Forget</StyledButton>
<StyledButton isWhite onClick={this.props.onCancel}>Don&apos;t forget</StyledButton>
<Button onClick={() => this.forget()}>Forget</Button>
<Button isWhite onClick={this.props.onCancel}>Don&apos;t forget</Button>
</Row>
</Wrapper>
);

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

@ -31,12 +31,12 @@ const ButtonContent = styled.div`
`;
const StyledP = styled(P)`
padding: 10px 0;
padding: 20px 0;
`;
const Wrapper = styled.div`
width: 360px;
padding: 24px 48px;
padding: 30px 48px;
`;
const Text = styled.div`
@ -46,10 +46,10 @@ const Text = styled.div`
const Column = styled.div`
display: flex;
flex-direction: column;
`;
const StyledButton = styled(Button)`
margin: 5px 0;
Button + Button {
margin-top: 10px;
}
`;
const StyledLoader = styled(Loader)`
@ -128,7 +128,7 @@ class RememberDevice extends PureComponent<Props, State> {
<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>
<Column>
<StyledButton onClick={() => this.forget()}>
<Button onClick={() => this.forget()}>
<ButtonContent>
<Text>Forget</Text>
<StyledLoader
@ -138,12 +138,12 @@ class RememberDevice extends PureComponent<Props, State> {
text={this.state.countdown.toString()}
/>
</ButtonContent>
</StyledButton>
<StyledButton
</Button>
<Button
isWhite
onClick={() => onRememberDevice(device)}
>Remember
</StyledButton>
</Button>
</Column>
</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 colors from 'config/colors';
import { H3 } from 'components/Heading';
import { H2 } from 'components/Heading';
import P from 'components/Paragraph';
import Button from 'components/Button';
import Tooltip from 'components/Tooltip';
@ -36,8 +36,8 @@ const Header = styled.div`
color: ${colors.TEXT_PRIMARY};
`;
const StyledHeading = styled(H3)`
padding-top: 30px;
const StyledHeading = styled(H2)`
padding: 30px 48px 10px 48px;
`;
const StyledLink = styled(Link)`
@ -105,7 +105,7 @@ class WalletType extends PureComponent<Props> {
{ device.state && (
<StyledLink onClick={onCancel}>
<Icon
size={20}
size={24}
color={colors.TEXT_SECONDARY}
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)`
margin: 10px 0 10px 0;
margin-top: 10px;
width: 100%;
`;
@ -48,7 +48,7 @@ const CardanoWallet = (props: Props) => (
<Wrapper>
<StyledLink onClick={props.onCancel}>
<Icon
size={20}
size={24}
color={colors.TEXT_SECONDARY}
icon={icons.CLOSE}
/>

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

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

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

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

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

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

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

@ -14,7 +14,7 @@ type Props = {
}
const Wrapper = styled.div`
padding: 24px 48px;
padding: 30px 48px;
`;
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};
background: ${colors.WHITE};
transition: all 0.3s;
cursor: pointer;
&:first-child {
margin-left: 0px;

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

@ -25,7 +25,7 @@ type State = {
}
const Wrapper = styled.div`
padding: 24px 48px;
padding: 30px 48px;
`;
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;
width: 100%;
max-width: 620px;
padding: 24px 48px;
padding: 30px 48px;
`;
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`
background: ${colors.WHITE};
box-shadow: 0 3px 8px rgba(0,0,0,0.06);
`;
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 colors from 'config/colors';
import { FONT_SIZE } from 'config/variables';
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
const Wrapper = styled.div`
display: flex;
@ -18,6 +18,10 @@ const Wrapper = styled.div`
`}
`;
const TextLeft = styled.p`
font-weight: ${FONT_WEIGHT.MEDIUM};
`;
const Divider = ({
textLeft, textRight, hasBorder = false, className,
}) => (
@ -25,7 +29,7 @@ const Divider = ({
hasBorder={hasBorder}
className={className}
>
<p>{textLeft}</p>
<TextLeft>{textLeft}</TextLeft>
<p>{textRight}</p>
</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;
background: ${colors.MAIN};
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 => ({

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

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

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

@ -66,6 +66,11 @@ const MainContent = styled.article`
display: flex;
flex-direction: column;
overflow: auto;
border-top-right-radius: 4px;
@media screen and (max-width: 1170px) {
border-top-right-radius: 0px;
}
`;
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 colors from 'config/colors';
import Link from 'components/Link';
import Input from 'components/inputs/Input';
import Textarea from 'components/Textarea';
import Tooltip from 'components/Tooltip';
@ -117,7 +118,10 @@ const Right = styled.div`
display: flex;
flex-direction: row;
font-size: ${FONT_SIZE.SMALL};
cursor: pointer;
`;
const StyledLink = styled(Link)`
white-space: nowrap;
`;
// stateless component
@ -190,8 +194,8 @@ const AdvancedForm = (props: Props) => {
</Tooltip>
</Left>
{ showDefaultGasLimitButton && (
<Right onClick={() => setDefaultGasLimit()}>
Set default
<Right>
<StyledLink onClick={setDefaultGasLimit} isGreen>Set default</StyledLink>
</Right>)
}
</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)`
flex: 0 0 0;
flex: 1 1 0;
padding-right: 5px;
`;