minor css changes, top and bottom padding on wrappers unified to 30px

pull/338/head
slowbackspace 5 years ago
parent 85326fdc86
commit 34654f9a50

@ -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`

@ -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;
`; `;

@ -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> {
@ -104,8 +103,8 @@ class ConfirmUnverifiedAddress extends PureComponent<Props> {
<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>
); );

@ -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`

@ -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>
); );

@ -37,7 +37,7 @@ const Header = styled.div`
`; `;
const StyledHeading = styled(H2)` const StyledHeading = styled(H2)`
padding-top: 30px; padding: 30px 48px 10px 48px;
`; `;
const StyledLink = styled(Link)` const StyledLink = styled(Link)`

@ -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%;
`; `;

@ -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%;
`; `;

@ -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%;
`; `;

@ -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;
`; `;

@ -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``;

@ -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) => (

@ -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`

@ -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)`

Loading…
Cancel
Save