mirror of
https://github.com/trezor/trezor-wallet
synced 2024-12-23 23:48:07 +00:00
Refactorize "BrowserNotSupported"
This commit is contained in:
parent
90fe036748
commit
991aeb8831
64
src/js/views/Landing/components/BrowserNotSupported/index.js
Normal file
64
src/js/views/Landing/components/BrowserNotSupported/index.js
Normal file
@ -0,0 +1,64 @@
|
||||
import React from 'react';
|
||||
import styled, { css } from 'styled-components';
|
||||
import Link from 'components/Link';
|
||||
import P from 'components/Paragraph';
|
||||
import { H2 } from 'components/Heading';
|
||||
|
||||
const Wrapper = styled.div``;
|
||||
|
||||
const ChooseBrowserWrapper = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
||||
const BrowserLogo = styled.div`
|
||||
margin-bottom: 10px;
|
||||
width: 43px;
|
||||
height: 43px;
|
||||
${props => props.isChrome && css`
|
||||
background-image: url('../images/browser-chrome.png');
|
||||
`}
|
||||
${props => props.isFirefox && css`
|
||||
background-image: url('../images/browser-firefox.png');
|
||||
`}
|
||||
`;
|
||||
|
||||
const Browser = styled.div`
|
||||
margin: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const BrowserNotSupported = () => (
|
||||
<Wrapper>
|
||||
<H2>Your browser is not supported</H2>
|
||||
<P>Please choose one of the supported browsers</P>
|
||||
<ChooseBrowserWrapper>
|
||||
<Browser>
|
||||
<BrowserLogo isChrome />
|
||||
<P isSmaller>Google Chrome</P>
|
||||
<Link
|
||||
text="Get Chrome"
|
||||
href="https://www.google.com/chrome/"
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
isButton
|
||||
/>
|
||||
</Browser>
|
||||
<Browser>
|
||||
<BrowserLogo isFirefox />
|
||||
<P isSmaller>Mozzila Firefox</P>
|
||||
<Link
|
||||
text="Get Firefox"
|
||||
href="https://www.mozilla.org/en-US/firefox/new/"
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
isButton
|
||||
/>
|
||||
</Browser>
|
||||
</ChooseBrowserWrapper>
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
export default BrowserNotSupported;
|
Loading…
Reference in New Issue
Block a user