Using Mui Button and TextField, improving mui palette with gnosis colors

src/App.css

@@ -1,6 +1,7 @@
 body {
   font-family: 'Montserrat', sans-serif;
-  color: #1798cc;
+  color: #6b7c93;
+  background-color: #f0f1f3;
 }
 
 h1, h2, h3 {

src/App.js

@@ -1,10 +1,12 @@
+import Button from 'material-ui/Button';
 import React, { Component } from 'react'
 import { Form, Field } from 'react-final-form'
 import Safe from '../gnosis-safe-contracts/build/contracts/GnosisSafe.json'
 import getWeb3, { promisify } from './utils/getWeb3'
 import contract from 'truffle-contract'
-import Header from './components/Header'
-import PageFrame from './components/PageFrame'
+import TextField from './components/forms/TextField'
+import Page from './components/layout/Page'
+import PageFrame from './components/layout/PageFrame'
 import './App.css'
 
 class App extends Component {
@@ -67,8 +69,7 @@ class App extends Component {
     const { safeAddress, funds } = this.state
 
     return (
-      <div className="App">
-        <Header />
+      <Page>
         <PageFrame>
           <Form
             onSubmit={this.onCallSafeContractSubmit}
@@ -76,34 +77,35 @@ class App extends Component {
               <form onSubmit={handleSubmit}>
                 <h2>Create a new Safe instance for testing purposes</h2>
                 <div>
-                  <button style={{ marginLeft: '10px', border: '1px solid #ccc' }} type="submit">
+                  <Button variant="raised" color="primary" type="submit">
                     Create Safe
-                  </button>
+                  </Button>
                 </div> 
               </form>
-            )} />
-            <Form
-              onSubmit={this.onAddFunds}
-              render={({ handleSubmit, pristine, invalid }) => (
-                <form onSubmit={handleSubmit}>
-                  <h2>Add Funds to the safe</h2>
-                  <div style={{ margin: '10px 0px'}}>
-                    <label style={{ marginRight: '10px' }}>{safeAddress ? safeAddress : 'Not safe detected'}</label>
-                  </div>
-                  { safeAddress && <div>
-                    <Field name="funds" component="input" placeholder="ETH to add" />
-                    <button style={{ marginLeft: '10px', border: '1px solid #ccc' }} type="submit" disabled={ !safeAddress || pristine || invalid}>
-                      Add funds
-                    </button>
-                  </div> }
-                  { safeAddress && <div style={{ margin: '10px 0px'}}>
-                    Total funds in this safe: { funds ? funds : 0 } ETH
-                  </div> }
-                </form>
-              )}
-            />
+            )}
+          />
+          <Form
+            onSubmit={this.onAddFunds}
+            render={({ handleSubmit, pristine, invalid }) => (
+              <form onSubmit={handleSubmit}>
+                <h2>Add Funds to the safe</h2>
+                <div style={{ margin: '10px 0px'}}>
+                  <label style={{ marginRight: '10px' }}>{safeAddress ? safeAddress : 'Not safe detected'}</label>
+                </div>
+                { safeAddress && <div>
+                  <Field name="funds" component={TextField} type="text" placeholder="ETH to add" />
+                  <Button type="submit" disabled={ !safeAddress || pristine || invalid}>
+                    Add funds
+                  </Button>
+                </div> }
+                { safeAddress && <div style={{ margin: '15px 0px'}}>
+                  Total funds in this safe: { funds ? funds : 0 } ETH
+                </div> }
+              </form>
+            )}
+          />
           </PageFrame>
-      </div>
+      </Page>
     );
   }
 }

src/components/Header/index.css

@@ -4,7 +4,6 @@
   grid-column-gap: 20px;
   align-items: center;
   margin: 0 20px;
-  color: #1798cc;
 }
 
 .subtitle {

src/components/forms/TextField/index.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import {default as MuiTextField } from 'material-ui/TextField'
+
+const TextField = ({
+  input: { name, onChange, value, ...restInput },
+  meta,
+  render,
+  ...rest
+}) => (
+  <MuiTextField
+    {...rest}
+    name={name}
+    helperText={meta.touched ? meta.error : undefined}
+    error={meta.error && meta.touched}
+    inputProps={restInput}
+    onChange={onChange}
+    value={value}
+  />
+)
+
+export default TextField

src/components/layout/Page/index.css

@@ -0,0 +1,3 @@
+.page {
+  margin: 0px 30px;
+}

src/components/layout/Page/index.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import Header from '../../Header'
+import './index.css'
+
+const Page = ({children}) => (
+  <div className="page">
+    <Header />
+    {children}
+  </div>
+)
+
+export default Page

src/theme/mui.js

@@ -6,7 +6,7 @@ const palette = {
     main: '#1798cc',
   },
   secondary: {
-    main: '#F6F9FC',
+    main: '#6b7c93',
   },
   error: red,
   contrastThreshold: 3,