Merge pull request #68 from gnosis/development

Feature: Design Welcome route including Header's Provider

.storybook/preview-head.html

@@ -1,2 +1,3 @@
 <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,500" rel="stylesheet">
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

package.json

@@ -65,7 +65,7 @@
     "ethereumjs-abi": "^0.6.5",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^1.1.11",
-    "flow-bin": "^0.66.0",
+    "flow-bin": "^0.79.1",
     "fs-extra": "^5.0.0",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.0.4",
@@ -102,8 +102,8 @@
   },
   "dependencies": {
     "@gnosis.pm/util-contracts": "^0.2.14",
-    "@material-ui/core": "^1.2.1",
-    "@material-ui/icons": "^1.1.0",
+    "@material-ui/core": "^3.0.1",
+    "@material-ui/icons": "^3.0.1",
     "final-form": "^4.2.1",
     "history": "^4.7.2",
     "react-final-form": "^3.1.2",

public/index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" href="favicon.ico">
     <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,500" rel="stylesheet">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <title>Multisig Safe</title>
   </head>

src/components/Footer/index.jsx

@@ -2,16 +2,17 @@
 import React from 'react'
 import Block from '~/components/layout/Block'
 import Link from '~/components/layout/Link'
+import Paragraph from '~/components/layout/Paragraph'
 import { WELCOME_ADDRESS, SAFELIST_ADDRESS } from '~/routes/routes'
 import styles from './index.scss'
 
 const Footer = () => (
   <Block className={styles.footer}>
-    <Link padding="md" to={WELCOME_ADDRESS}>
-      Welcome
+    <Link to={WELCOME_ADDRESS}>
+      <Paragraph size="sm" color="primary" noMargin>Welcome</Paragraph>
     </Link>
     <Link to={SAFELIST_ADDRESS}>
-      Safe List
+      <Paragraph size="sm" color="primary" noMargin>Safe List</Paragraph>
     </Link>
   </Block>
 )

src/components/Footer/index.scss

@@ -1,7 +1,12 @@
 .footer {
+  font-size: $smallFontSize;
   display: grid;
-  grid-template-columns: 1fr auto auto;
-  justify-items: end;
+  grid-template-columns: 100px 100px 1fr;
+  grid-template-rows: 36px;
+  justify-items: center;
+  align-items: center;
+  border: solid 0.5px $border;
+  background-color: white;
 }
 
 @media only screen and (max-width: $(screenXs)px) {

src/components/Footer/index.stories.js

@@ -11,6 +11,6 @@ const FrameDecorator = story => (
   </div>
 )
 
-storiesOf('Components', module)
+storiesOf('Components /Footer', module)
   .addDecorator(FrameDecorator)
-  .add('Footer', () => <Component />)
+  .add('Loaded', () => <Component />)

src/components/Header/actions.js

@@ -1,6 +1,12 @@
 // @flow
-import { fetchProvider } from '~/logic/wallets/store/actions'
+import { fetchProvider, removeProvider } from '~/logic/wallets/store/actions'
+
+export type Actions = {
+  fetchProvider: typeof fetchProvider,
+  removeProvider: typeof removeProvider,
+}
 
 export default {
   fetchProvider,
+  removeProvider,
 }