Styled bridge page better

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 {

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};

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;
-    align-items: center;
-    margin-bottom: 24px;
+    max-width: 500px;
+    flex: 1;
+    padding-top: 30px;
 `;
 
-const BridgeVersion = styled.span`
+const Bottom = styled.div`
+    padding-bottom: 20px;
+`;
+
+const TitleHeader = styled(H1)`
+    display: flex;
+    font-size: ${FONT_SIZE.BIGGEST};
+    justify-content: center;
+    align-items: center;
+`;
+
+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>
+                        {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>
-                            No, i dont want to upgrade Bridge now,
+                            No, i dont want to upgrade Bridge now<br />
+                            Take me <GoBack onClick={() => this.props.selectFirstAvailableDevice()}>back to the wallet</GoBack>
                         </P>
-                        <P>
-                            Take me <Link href="#/">back to the wallet</Link>
-                        </P>
-                    </React.Fragment>
-                )}
-            </InstallBridgeWrapper>
+                    )}
+                </Bottom>
+            </Wrapper>
         );
     }
 }
+
+export default InstallBridge;

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>