From 83a4983808372a2740259bef8699da3babf270a6 Mon Sep 17 00:00:00 2001 From: apanizo Date: Fri, 31 Aug 2018 14:00:53 +0200 Subject: [PATCH] Welcome Route changes --- src/components/layout/Heading/index.scss | 13 +++- src/index.scss | 2 +- src/routes/welcome/assets/new.svg | 3 + src/routes/welcome/assets/safe.svg | 3 + src/routes/welcome/assets/vault.svg | 86 ----------------------- src/routes/welcome/components/Layout.jsx | 48 +++++++++++-- src/routes/welcome/components/Layout.scss | 15 ++-- src/theme/variables.js | 10 +-- 8 files changed, 72 insertions(+), 108 deletions(-) create mode 100644 src/routes/welcome/assets/new.svg create mode 100644 src/routes/welcome/assets/safe.svg delete mode 100644 src/routes/welcome/assets/vault.svg 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) => ( - Safe Box + + 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,