arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-28 18:08:08 +00:00
Code Issues Releases Wiki Activity

fix device connect wrapper on landing page

Browse Source
This commit is contained in:
slowbackspace 2019-01-25 12:44:35 +01:00
parent ce38002b84
commit b9edb4abc8
1 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/views/Landing/components/ConnectDevice/index.js
View File

@ -8,7 +8,7 @@ import Button from 'components/Button';
import { H2 } from 'components/Heading'; import { H2 } from 'components/Heading';
import { PULSATE } from 'config/animations'; import { PULSATE } from 'config/animations';
import colors from 'config/colors'; import colors from 'config/colors';
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; import { FONT_SIZE, FONT_WEIGHT, SCREEN_SIZE } from 'config/variables';
import CaseImage from 'images/macbook.png'; import CaseImage from 'images/macbook.png';
import Link from 'components/Link'; import Link from 'components/Link';
@ -28,21 +28,35 @@ const Title = styled.div`
const Wrapper = styled.div` const Wrapper = styled.div`
display: flex; display: flex;
justify-content: space-around;
align-items: center; align-items: center;
margin: 0 auto; margin: 0 auto;
padding: 36px 0; padding: 36px 0;
justify-content: center;
@media screen and (max-width: ${SCREEN_SIZE.SM}) {
align-content: center;
flex-direction: column;
}
`; `;
const ConnectTrezorWrapper = styled.div` const ConnectTrezorWrapper = styled.div`
position: relative; position: relative;
top: 1px; top: 1px;
margin: 10px 10px 0px 10px;
animation: ${PULSATE} 1.3s ease-out infinite; animation: ${PULSATE} 1.3s ease-out infinite;
color: ${colors.GREEN_PRIMARY}; color: ${colors.GREEN_PRIMARY};
font-size: ${FONT_SIZE.BIG}; font-size: ${FONT_SIZE.BIG};
font-weight: ${FONT_WEIGHT.MEDIUM}; font-weight: ${FONT_WEIGHT.MEDIUM};
`; `;
const StyledP = styled(P)`
margin: 10px 10px 0px 10px;
`;
const StyledButton = styled(Button)`
margin: 10px 10px 0px 10px;
`;
const Image = styled.img` const Image = styled.img`
width: 100%; width: 100%;
max-width: 777px; max-width: 777px;
@ -128,10 +142,10 @@ class ConnectDevice extends PureComponent<Props> {
</ConnectTrezorWrapper> </ConnectTrezorWrapper>
{this.props.showWebUsb && !this.props.showDisconnect && ( {this.props.showWebUsb && !this.props.showDisconnect && (
<React.Fragment> <React.Fragment>
<P>and</P> <StyledP>and</StyledP>
<Button isWebUsb> <StyledButton isWebUsb>
Check for devices Check for devices
</Button> </StyledButton>
</React.Fragment> </React.Fragment>
)} )}
</Wrapper> </Wrapper>