diff --git a/src/components/layout/Heading/index.scss b/src/components/layout/Heading/index.scss
index 32a232c4..e4f156eb 100644
--- a/src/components/layout/Heading/index.scss
+++ b/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 {
diff --git a/src/index.scss b/src/index.scss
index 50d00c9e..a453a219 100644
--- a/src/index.scss
+++ b/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;
diff --git a/src/routes/welcome/assets/new.svg b/src/routes/welcome/assets/new.svg
new file mode 100644
index 00000000..f308edc1
--- /dev/null
+++ b/src/routes/welcome/assets/new.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/routes/welcome/assets/safe.svg b/src/routes/welcome/assets/safe.svg
new file mode 100644
index 00000000..43ec9182
--- /dev/null
+++ b/src/routes/welcome/assets/safe.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/routes/welcome/assets/vault.svg b/src/routes/welcome/assets/vault.svg
deleted file mode 100644
index 46b00a87..00000000
--- a/src/routes/welcome/assets/vault.svg
+++ /dev/null
@@ -1,86 +0,0 @@
-
diff --git a/src/routes/welcome/components/Layout.jsx b/src/routes/welcome/components/Layout.jsx
index fa42d03d..95cd669b 100644
--- a/src/routes/welcome/components/Layout.jsx
+++ b/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) => (
+)
+
+export const LoadSafe = ({ size, provider }: SafeProps) => (
+
)
const Welcome = ({ provider }: Props) => (
- 
+
+ Welcome to the Gnosis
+
+
+ Safe Team Edition
+
+
+ The Gnosis Safe Team Edition is geared towards teams managing
+ shared crypto funds. It is an improvement of the existing Gnosis
+ MultiSig wallet with redesigned smart contracts, cheaper setup and
+ transaction costs as well as an enhanced user experience.
+
-
+
+
+
+
)
diff --git a/src/routes/welcome/components/Layout.scss b/src/routes/welcome/components/Layout.scss
index 681515f7..aeb5a001 100644
--- a/src/routes/welcome/components/Layout.scss
+++ b/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 {
- grid-row-gap: $md;
- display: grid;
- justify-items: center;
- }
+.safeActions {
+ display: flex;
+ justify-content: center;
}
diff --git a/src/theme/variables.js b/src/theme/variables.js
index d1cab272..379cbc2b 100644
--- a/src/theme/variables.js
+++ b/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',
- mediumFontSize: '14px',
+ smallFontSize: '11x',
+ mediumFontSize: '13px',
largeFontSize: '18px',
extraLargeFontSize: '24px',
screenXs: 480,