Styled bridge page better

6 years ago · 29e5dc2314
parent 2831b7d254
commit 29e5dc2314
4 changed files with 107 additions and 63 deletions
--- 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 {
--- 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};
--- 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<TrezorConnectState, 'transport'>;
 }

-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<Props, State> {
+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<Props, State> {
    constructor(props: Props) {
        super(props);

@ -113,67 +150,68 @@ export default class InstallBridge extends Component<Props, State> {
        if (!target) {
            return <Loader text="Loading" size={100} />;
        }
-
-        const changelog = this.props.transport.bridge.changelog.map(entry => (
-            <li key={entry}>{entry}</li>
-        ));
-        const url = `${this.state.uri}${target.value}`;
        return (
-            <InstallBridgeWrapper>
-                <TitleHeader>TREZOR Bridge.<BridgeVersion>{this.state.currentVersion}</BridgeVersion></TitleHeader>
-                <P>New communication tool to facilitate the connection between your TREZOR and your internet browser.</P>
-                <DownloadBridgeWrapper>
-                    <SelectWrapper
-                        isSearchable={false}
-                        isClearable={false}
-                        value={target}
-                        onChange={v => this.onChange(v)}
-                        options={this.state.installers}
-                    />
-                    <Link href={url}>
-                        <DownloadBridgeButton>
-                            <Icon
-                                icon={ICONS.DOWNLOAD}
-                                color={colors.WHITE}
-                                size={30}
-                            />
+            <Wrapper>
+                <Top>
+                    <TitleHeader>TREZOR Bridge<Version>{this.state.currentVersion}</Version></TitleHeader>
+                    <P>New communication tool to facilitate the connection between your TREZOR and your internet browser.</P>
+                    <Download>
+                        <SelectWrapper
+                            isSearchable={false}
+                            isClearable={false}
+                            value={target}
+                            onChange={v => this.onChange(v)}
+                            options={this.state.installers}
+                        />
+                        <Link href={`${this.state.uri}${target.value}`}>
+                            <DownloadBridgeButton>
+                                <Icon
+                                    icon={ICONS.DOWNLOAD}
+                                    color={colors.WHITE}
+                                    size={30}
+                                />
                            Download latest Bridge {this.state.latestVersion}
-                        </DownloadBridgeButton>
-                    </Link>
-                </DownloadBridgeWrapper>
-                {target.signature && (
-                    <P>
+                            </DownloadBridgeButton>
+                        </Link>
+                    </Download>
+                    <Ol>
+                        {this.props.transport.bridge.changelog.map(entry => (
+                            <Li key={entry}>{entry}</Li>
+                        ))}
+                    </Ol>
+                    <P isSmaller>
+                        <LearnMoreText>Learn more about latest versions in</LearnMoreText>
                        <Link
-                            href={this.state.uri + target.signature}
+                            href="https://github.com/trezor/trezord-go/blob/master/CHANGELOG.md"
                            target="_blank"
                            rel="noreferrer noopener"
                            isGreen
-                        >Check PGP signature
+                        >Changelog
                        </Link>
                    </P>
-                )}
-                <P>
-                    { changelog }
-                    <LearnMoreText>Learn more about latest versions in</LearnMoreText>
-                    <Link
-                        href="https://github.com/trezor/trezord-go/blob/master/CHANGELOG.md"
-                        target="_blank"
-                        rel="noreferrer noopener"
-                        isGreen
-                    >Changelog
-                    </Link>
-                </P>
-                {this.props.transport.type && (
-                    <React.Fragment>
-                        <P>
-                            No, i dont want to upgrade Bridge now,
-                        </P>
+                    <P>
+                        {target.signature && (
+                            <Link
+                                href={this.state.uri + target.signature}
+                                target="_blank"
+                                rel="noreferrer noopener"
+                                isGreen
+                            >Check PGP signature
+                            </Link>
+                        )}
+                    </P>
+                </Top>
+                <Bottom>
+                    {this.props.transport.type && (
                        <P>
-                            Take me <Link href="#/">back to the wallet</Link>
+                            No, i dont want to upgrade Bridge now<br />
+                            Take me <GoBack onClick={() => this.props.selectFirstAvailableDevice()}>back to the wallet</GoBack>
                        </P>
-                    </React.Fragment>
-                )}
-            </InstallBridgeWrapper>
+                    )}
+                </Bottom>
+            </Wrapper>
        );
    }
-}
+}
+
+export default InstallBridge;
--- 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 (
        <LandingWrapper>
            {isLoading && <LandingLoader text="Loading" size={100} />}
@ -103,7 +103,7 @@ export default (props: Props) => {
                    <Log />
                    <LandingContent>
                        {shouldShowUnsupportedBrowser && <BrowserNotSupported />}
-                        {shouldShowInstallBridge && <InstallBridge transport={transport} />}
+                        {shouldShowInstallBridge && <InstallBridge selectFirstAvailableDevice={props.selectFirstAvailableDevice} transport={transport} />}

                        {(shouldShowConnectDevice || shouldShowDisconnectDevice) && (
                            <div>