Welcome Route changes

src/components/layout/Heading/index.scss

@@ -1,19 +1,26 @@
 .heading {
-  font-weight: $boldFontWeight;
+  font-weight: normal;
   line-height: normal;  
   margin: 0;
 }
 
 .h1 {
+  line-height: 36px;
+  font-weight: 500;
+  letter-spacing: -1px;
   font-size: $(fontSizeHeadingLg)px;
 }
 
 .h2 {
-  font-size: $(fontSizeHeadingMd)px;
+  line-height: 28px;
+  font-size: $largeFontSize;
 }
 
 .h3 {
-  font-size: $(fontSizeHeadingSm)px;
+  line-height: 21px;
+  font-size: $mediumFontSize;
+  font-weight: bold;
+  font-family: 'Roboto Mono', monospace;
 }
 
 .h4 {

src/index.scss

@@ -10,7 +10,7 @@ body {
   left: 0;
   right: 0;
   overflow-x: hidden;
-  color: #1f5f76;
+  color:  $fontColor;
   font-family: 'Montserrat', sans-serif;
   font-size: $mediumFontSize;
   margin: 0;  

src/routes/welcome/assets/new.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+    <path fill="#FFF" fill-rule="nonzero" d="M14 8H8v6H6V8H0V6h6V0h2v6h6z"/>
+</svg>

src/routes/welcome/assets/safe.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="13" viewBox="0 0 16 13">
+    <path fill="#65707E" fill-rule="nonzero" d="M1.6 0A1.6 1.6 0 0 0 0 1.6v8.8A1.6 1.6 0 0 0 1.6 12v.8h1.6V12H12v.8h1.6V12a1.6 1.6 0 0 0 1.6-1.6v-.8h.8V8h-.8V4h.8V2.4h-.8v-.8A1.6 1.6 0 0 0 13.6 0h-12zm0 1.6h12v8.8h-12V1.6zm7.6 1.2a3.2 3.2 0 1 0 0 6.4 3.2 3.2 0 0 0 0-6.4zM2.4 4v4H4V4H2.4zm6.8.4a1.6 1.6 0 1 1 0 3.2 1.6 1.6 0 0 1 0-3.2z"/>
+</svg>

src/routes/welcome/components/Layout.jsx

@@ -1,13 +1,16 @@
 // @flow
 import * as React from 'react'
 import Block from '~/components/layout/Block'
+import Heading from '~/components/layout/Heading'
 import Img from '~/components/layout/Img'
 import Button from '~/components/layout/Button'
 import Link from '~/components/layout/Link'
 import { OPEN_ADDRESS } from '~/routes/routes'
+import { sm } from '~/theme/variables'
 import styles from './Layout.scss'
 
-const vault = require('../assets/vault.svg')
+const safe = require('../assets/safe.svg')
+const plus = require('../assets/new.svg')
 
 type Props = {
   provider: string
@@ -15,26 +18,61 @@ type Props = {
 
 type SafeProps = {
   provider: string,
-  size?: 'small' | 'medium',
+  size?: 'small' | 'medium' | 'large',
+}
+
+const buttonStyle = {
+  marginLeft: sm,
 }
 
 export const CreateSafe = ({ size, provider }: SafeProps) => (
   <Button
+    component={Link}
+    to={OPEN_ADDRESS}
     variant="raised"
     size={size || 'medium'}
     color="primary"
     disabled={!provider}
   >
-    <Link to={OPEN_ADDRESS} color="white">Create a new Safe</Link>
+    <Img src={plus} height={16} alt="Safe" />
+    <div style={buttonStyle}>Create a new Safe</div>
+  </Button>
+)
+
+export const LoadSafe = ({ size, provider }: SafeProps) => (
+  <Button
+    component={Link}
+    to={OPEN_ADDRESS}
+    variant="outlined"
+    size={size || 'medium'}
+    color="primary"
+    disabled={!provider}
+  >
+    <Img src={safe} height={16} alt="Safe" />
+    <div style={buttonStyle}>Load existing Safe</div>
   </Button>
 )
 
 
 const Welcome = ({ provider }: Props) => (
   <Block className={styles.safe}>
-    <Img alt="Safe Box" src={vault} height={330} />
+    <Heading tag="h1" align="center">
+      Welcome to the Gnosis
+    </Heading>
+    <Heading tag="h1" align="center" margin="lg">
+      Safe Team Edition
+    </Heading>
+    <Heading tag="h3" align="center" margin="lg">
+      The Gnosis Safe Team Edition is geared towards teams managing <br />
+      shared crypto funds. It is an improvement of the existing Gnosis <br />
+      MultiSig wallet with redesigned smart contracts, cheaper setup and <br />
+      transaction costs as well as an enhanced user experience.
+    </Heading>
     <Block className={styles.safeActions} margin="md">
-      <CreateSafe provider={provider} />
+      <CreateSafe size="large" provider={provider} />
+    </Block>
+    <Block className={styles.safeActions} margin="md">
+      <LoadSafe size="large" provider={provider} />
     </Block>
   </Block>
 )

src/routes/welcome/components/Layout.scss

@@ -1,18 +1,15 @@
 .safe {
-  display: grid;
   justify-content: center;
-  grid-row-gap: $xl;
+  justify-items: center;
+  margin-top: $xl;
 }
 
-.safeActions {
+.summary {
   display: flex;
   justify-content: space-around;
 }
 
-@media(max-width: $(screenXsMax)px) {
+.safeActions {
-  .safeActions {
+  display: flex;
-    grid-row-gap: $md;
+  justify-content: center;
-    display: grid;
-    justify-items: center;
-  }
 }

src/theme/variables.js

@@ -1,9 +1,10 @@
 // @flow
 const border = '#e4e8f1'
 const background = '#f4f4f9'
-const primary = '#467ee5' // '#1798cc'
+const primary = '#4a5579' // '#467ee5' // '#1798cc'
 const secondary = '#13222b'
 const tertiary = '#f6f9fc'
+const fontColor = '#4a5579'
 const xs = '4px'
 const sm = '8px'
 const md = '16px'
@@ -15,6 +16,7 @@ module.exports = Object.assign({}, {
   secondary,
   tertiary,
   background,
+  fontColor,
   xs,
   sm,
   md,
@@ -24,11 +26,11 @@ module.exports = Object.assign({}, {
   fontSizeHeadingXs: 16,
   fontSizeHeadingSm: 18,
   fontSizeHeadingMd: 21,
-  fontSizeHeadingLg: 28,
+  fontSizeHeadingLg: 32,
   regularFontWeight: 400,
   boldFontWeight: 700,
-  smallFontSize: '12px',
+  smallFontSize: '11x',
-  mediumFontSize: '14px',
+  mediumFontSize: '13px',
   largeFontSize: '18px',
   extraLargeFontSize: '24px',
   screenXs: 480,