From 29e5dc2314ea740877c4fc8245225b1140f67af4 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Tue, 9 Oct 2018 12:07:27 +0200 Subject: [PATCH] Styled bridge page better --- src/components/Heading/index.js | 7 +- src/components/Paragraph/index.js | 1 + .../Landing/components/InstallBridge/index.js | 158 +++++++++++------- src/views/Landing/index.js | 4 +- 4 files changed, 107 insertions(+), 63 deletions(-) diff --git a/src/components/Heading/index.js b/src/components/Heading/index.js index d62aef5d..466671c0 100644 --- a/src/components/Heading/index.js +++ b/src/components/Heading/index.js @@ -6,13 +6,14 @@ const baseStyles = css` text-rendering: optimizeLegibility; color: ${colors.TEXT_PRIMARY}; font-weight: bold; - padding: 0; margin: 0; + padding: 0; `; const H1 = styled.h1` ${baseStyles}; font-size: 18px; + padding-bottom: 10px; `; const H2 = styled.h2` @@ -23,16 +24,20 @@ const H2 = styled.h2` font-size: 36px; padding-bottom: 24px `} + padding-bottom: 10px; `; const H3 = styled.h3` ${baseStyles}; font-size: 14px; + border: 1px solid red; + margin-bottom: 10px; `; const H4 = styled.h4` ${baseStyles}; font-size: 12px; + padding-bottom: 10px; `; export { diff --git a/src/components/Paragraph/index.js b/src/components/Paragraph/index.js index 34f498de..9c9a8374 100644 --- a/src/components/Paragraph/index.js +++ b/src/components/Paragraph/index.js @@ -9,6 +9,7 @@ const Wrapper = styled.p` line-height: ${LINE_HEIGHT.BASE}; color: ${colors.TEXT_SECONDARY}; padding: 0; + margin: 0; ${props => props.isSmaller && css` font-size: ${FONT_SIZE.SMALLER}; diff --git a/src/views/Landing/components/InstallBridge/index.js b/src/views/Landing/components/InstallBridge/index.js index c0743e3d..fcec71fc 100644 --- a/src/views/Landing/components/InstallBridge/index.js +++ b/src/views/Landing/components/InstallBridge/index.js @@ -3,9 +3,11 @@ import React, { Component } from 'react'; import styled from 'styled-components'; import colors from 'config/colors'; +import PropTypes from 'prop-types'; import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; import { Select } from 'components/Select'; import Link from 'components/Link'; +import { H1 } from 'components/Heading'; import Button from 'components/Button'; import Loader from 'components/Loader'; import P from 'components/Paragraph'; @@ -30,26 +32,39 @@ type State = { } type Props = { + selectFirstAvailableDevice: typeof RouterActions.selectFirstAvailableDevice, transport: $ElementType; } -const InstallBridgeWrapper = styled.div` +const Wrapper = styled.div` display: flex; flex-direction: column; justify-content: center; - padding-top: 0px; + align-items: center; max-width: 500px; `; -const TitleHeader = styled.h3` - font-size: ${FONT_SIZE.BIGGEST}; +const Top = styled.div` display: flex; + flex-direction: column; + justify-content: center; + max-width: 500px; + flex: 1; + padding-top: 30px; +`; + +const Bottom = styled.div` + padding-bottom: 20px; +`; + +const TitleHeader = styled(H1)` + display: flex; + font-size: ${FONT_SIZE.BIGGEST}; justify-content: center; align-items: center; - margin-bottom: 24px; `; -const BridgeVersion = styled.span` +const Version = styled.span` color: ${colors.GREEN_PRIMARY}; padding: 6px 10px; border: 1px solid ${colors.GREEN_PRIMARY}; @@ -68,7 +83,7 @@ const SelectWrapper = styled(Select)` width: 180px; `; -const DownloadBridgeWrapper = styled.div` +const Download = styled.div` margin: 24px auto; display: flex; align-items: center; @@ -81,7 +96,29 @@ const DownloadBridgeButton = styled(Button)` align-items: center; `; -export default class InstallBridge extends Component { +const GoBack = styled.span` + color: ${colors.GREEN_PRIMARY}; + text-decoration: underline; + + &:hover { + cursor: pointer; + text-decoration: none; + } +`; + +const Ol = styled.ul` + margin: 0 auto; + color: ${colors.TEXT_SECONDARY}; + font-size: ${FONT_SIZE.BASE}; + padding: 10px 0 15px 25px; + text-align: left; +`; + +const Li = styled.li` + text-align: justify; +`; + +class InstallBridge extends Component { constructor(props: Props) { super(props); @@ -113,67 +150,68 @@ export default class InstallBridge extends Component { if (!target) { return ; } - - const changelog = this.props.transport.bridge.changelog.map(entry => ( -
  • {entry}
    • - )); - const url = `${this.state.uri}${target.value}`; return ( - - TREZOR Bridge.{this.state.currentVersion} -

    New communication tool to facilitate the connection between your TREZOR and your internet browser.

    - - this.onChange(v)} - options={this.state.installers} - /> - - - + + + TREZOR Bridge{this.state.currentVersion} +

    New communication tool to facilitate the connection between your TREZOR and your internet browser.

    + + this.onChange(v)} + options={this.state.installers} + /> + + + Download latest Bridge {this.state.latestVersion} - - -     - {target.signature && ( -

    + + + +

      + {this.props.transport.bridge.changelog.map(entry => ( +
    1. {entry}
      2. + ))} +
    +

    + Learn more about latest versions in Check PGP signature + >Changelog

    - )} -

    - { changelog } - Learn more about latest versions in - Changelog - -

    - {this.props.transport.type && ( - -

    - No, i dont want to upgrade Bridge now, -

    +

    + {target.signature && ( + Check PGP signature + + )} +

    + + + {this.props.transport.type && (

    - Take me back to the wallet + No, i dont want to upgrade Bridge now
    + Take me this.props.selectFirstAvailableDevice()}>back to the wallet

    -     - )} -     + )} + + ); } -} \ No newline at end of file +} + +export default InstallBridge; \ No newline at end of file diff --git a/src/views/Landing/index.js b/src/views/Landing/index.js index 00b5facd..9266fa09 100644 --- a/src/views/Landing/index.js +++ b/src/views/Landing/index.js @@ -36,7 +36,6 @@ const LandingWrapper = styled.div` const LandingContent = styled.div` flex: 1; display: flex; - align-items: center; justify-content: center; `; @@ -85,6 +84,7 @@ export default (props: Props) => { const shouldShowUnsupportedBrowser = browserState.supported === false; const isLoading = !shouldShowInitializationError && !shouldShowInstallBridge && !shouldShowConnectDevice && !shouldShowUnsupportedBrowser && !localStorageError; + return ( {isLoading && } @@ -103,7 +103,7 @@ export default (props: Props) => { {shouldShowUnsupportedBrowser && } - {shouldShowInstallBridge && } + {shouldShowInstallBridge && } {(shouldShowConnectDevice || shouldShowDisconnectDevice) && (