diff --git a/src/components/Link/index.js b/src/components/Link/index.js index 3a81db1b..5118113e 100644 --- a/src/components/Link/index.js +++ b/src/components/Link/index.js @@ -37,7 +37,7 @@ const A = styled.a` const StyledNavLink = styled(NavLink)` ${props => props.isGreen && css` - color: ${colors.GREEN_PRIMARY}; + color: ${colors.GREEN_PRIMARY}; `} ${props => props.isGray && css` @@ -51,12 +51,7 @@ class Link extends PureComponent { let LinkComponent; if (shouldRenderRouterLink) { LinkComponent = ( - {this.props.children} - ); + {this.props.children}); } else { LinkComponent = ( = [ fields: ['import'], }, { - name: 'wallet-setting', + name: 'wallet-settings', pattern: '/settings', fields: ['settings'], }, diff --git a/src/views/Landing/components/ConnectDevice/index.js b/src/views/Landing/components/ConnectDevice/index.js index 9aea96cb..83c73cfb 100644 --- a/src/views/Landing/components/ConnectDevice/index.js +++ b/src/views/Landing/components/ConnectDevice/index.js @@ -5,15 +5,62 @@ import styled, { keyframes } from 'styled-components'; import TrezorConnect from 'trezor-connect'; import P from 'components/Paragraph'; import Button from 'components/Button'; +import { H2 } from 'components/Heading'; import { PULSATE } from 'config/animations'; import colors from 'config/colors'; import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; +import CaseImage from 'images/case.png'; +import Link from 'components/Link'; type Props = { deviceLabel: string, showWebUsb: boolean, showDisconnect: boolean, }; + +const Title = styled.div` + margin-top: 60px; +`; + +const Wrapper = styled.div` + display: flex; + justify-content: space-around; + align-items: center; + width: 400px; + margin: 0 auto; + padding: 36px 0; +`; + +const ConnectTrezorWrapper = styled.div` + position: relative; + top: 1px; + animation: ${PULSATE} 1.3s ease-out infinite; + color: ${colors.GREEN_PRIMARY}; + font-size: ${FONT_SIZE.BASE}; + font-weight: ${FONT_WEIGHT.BASE}; +`; + +const Image = styled.img` + width: 777px; + min-height: 500px; + margin: auto; + background-repeat: no-repeat; + background-position: center 0px; + background-size: contain; +`; + +const Footer = styled.div` + margin-bottom: 32px; +`; + +const FooterText = styled.span` + margin-right: 4px; +`; + +const StyledLink = styled(Link)` + font-size: ${FONT_SIZE.BASE}; +`; + class ConnectDevice extends PureComponent { componentDidMount() { if (this.props.showWebUsb) { @@ -57,44 +104,59 @@ class ConnectDevice extends PureComponent { } render() { - const Wrapper = styled.div` - display: flex; - justify-content: space-around; - align-items: center; - width: 400px; - margin: 0 auto; - padding: 36px 0; - `; - - const ConnectTrezorWrapper = styled.div` - position: relative; - top: 1px; - animation: ${PULSATE} 1.3s ease-out infinite; - color: ${colors.GREEN_PRIMARY}; - font-size: ${FONT_SIZE.BASE}; - font-weight: ${FONT_WEIGHT.BASE}; - `; - return ( - - - {this.props.showDisconnect && `Unplug "${this.props.deviceLabel}" device`} - {!this.props.showDisconnect && ( +
+ + <H2 claim>The private bank in your hands.</H2> + <P>TREZOR Wallet is an easy-to-use interface for your TREZOR.</P> + <P>TREZOR Wallet allows you to easily control your funds, manage your balance and initiate transfers.</P> + + + + + {this.props.showDisconnect && `Unplug "${this.props.deviceLabel}" device`} + {!this.props.showDisconnect && ( + + {this.getTrezorDeviceImage()} + Connect TREZOR + + )} + + {this.props.showWebUsb && !this.props.showDisconnect && ( - {this.getTrezorDeviceImage()} - Connect TREZOR +

and

+ )} - - {this.props.showWebUsb && !this.props.showDisconnect && ( - -

and

- - - )} - + + + + +
+ {this.props.showWebUsb && ( +

+ Device not recognized? + Try installing the TREZOR Bridge. + +

+ )} +

+ + Don't have TREZOR? + + Get one + +

+
+
); } } diff --git a/src/views/Landing/components/InitializationError/index.js b/src/views/Landing/components/InitializationError/index.js index a3fc17cb..b2e64961 100644 --- a/src/views/Landing/components/InitializationError/index.js +++ b/src/views/Landing/components/InitializationError/index.js @@ -9,11 +9,11 @@ const Wrapper = styled.div` width: 100%; `; -const InitializationError = (props: { error: ?string }) => ( +const InitializationError = (props: { error: string }) => ( diff --git a/src/views/Landing/components/LandingWrapper/index.js b/src/views/Landing/components/LandingWrapper/index.js new file mode 100644 index 00000000..25c9b3bb --- /dev/null +++ b/src/views/Landing/components/LandingWrapper/index.js @@ -0,0 +1,73 @@ +/* @flow */ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import styled from 'styled-components'; +import Header from 'components/Header'; +import Footer from 'components/Footer'; +import Log from 'components/Log'; +import Loader from 'components/Loader'; +import ContextNotifications from 'components/notifications/Context'; +import colors from 'config/colors'; + +import InitializationError from '../InitializationError'; + +type Props = { + loading?: boolean; + error?: ?string; + children?: React.Node; +} + +const Wrapper = styled.div` + min-height: 100%; + min-width: 720px; + + display: flex; + flex-direction: column; + align-items: center; + + text-align: center; + background: ${colors.LANDING}; +`; + +const LandingContent = styled.div` + flex: 1; + display: flex; + justify-content: center; +`; + +const LandingLoader = styled(Loader)` + margin: auto; +`; + +const LandingWrapper = (props: Props) => ( + + {props.loading && } + {!props.loading && ( + +
+ + {props.error && } + + {!props.error && ( + + { props.children } + + )} +