You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
trezor-wallet/src/views/Landing/components/BrowserNotSupported/index.js

56 lines
1.5 KiB

import React from 'react';
import styled from 'styled-components';
import Link from 'components/Link';
import Button from 'components/Button';
import P from 'components/Paragraph';
import { H2 } from 'components/Heading';
import ChromeImage from 'images/browser-chrome.png';
import FirefoxImage from 'images/browser-firefox.png';
const Wrapper = styled.div``;
const ChooseBrowserWrapper = styled.div`
display: flex;
justify-content: space-between;
`;
const BrowserLogo = styled.img`
margin-bottom: 10px;
width: 43px;
height: 43px;
`;
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 src={ChromeImage} />
<P isSmaller>Google Chrome</P>
<Link href="https://www.google.com/chrome/">
<Button>Get Chrome</Button>
</Link>
</Browser>
<Browser>
<BrowserLogo src={FirefoxImage} />
<P isSmaller>Mozzila Firefox</P>
<Link href="https://www.mozilla.org/en-US/firefox/new/">
<Button>Get Firefox</Button>
</Link>
</Browser>
</ChooseBrowserWrapper>
</Wrapper>
);
export default BrowserNotSupported;