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

64 lines
1.8 KiB

import React from 'react';
import styled from 'styled-components';
import { FormattedMessage } from 'react-intl';
import { Button, P, H5, Link } from 'trezor-ui-components';
import ChromeImage from 'images/browser-chrome.png';
import FirefoxImage from 'images/browser-firefox.png';
import l10nMessages from './index.messages';
const Wrapper = styled.div`
padding: 24px 0px;
`;
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>
<H5>
<FormattedMessage {...l10nMessages.TR_YOUR_BROWSER_IS_NOT_SUPPORTED} />
</H5>
<P textAlign="center">
<FormattedMessage {...l10nMessages.TR_PLEASE_CHOOSE_ONE_OF_THE_SUPPORTED} />
</P>
<ChooseBrowserWrapper>
<Browser>
<BrowserLogo src={ChromeImage} />
<P size="small">Google Chrome</P>
<Link href="https://www.google.com/chrome/">
<Button>
<FormattedMessage {...l10nMessages.TR_GET_CHROME} />
</Button>
</Link>
</Browser>
<Browser>
<BrowserLogo src={FirefoxImage} />
<P size="small">Mozila Firefox</P>
<Link href="https://www.mozilla.org/en-US/firefox/new/">
<Button>
<FormattedMessage {...l10nMessages.TR_GET_FIREFOX} />
</Button>
</Link>
</Browser>
</ChooseBrowserWrapper>
</Wrapper>
);
export default BrowserNotSupported;