Open style changes

src/components/layout/Heading/index.scss

@@ -13,6 +13,9 @@
 
 .h2 {
   line-height: 28px;
+  font-weight: $bolderFont;
+  letter-spacing: -0.5px;
+  font-family: 'Roboto Mono', monospace;
   font-size: $(fontSizeHeadingMd)px;
 }
 

src/components/layout/Page/index.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex: 1 0 auto;
   flex-direction: column;
-  padding: 80px 260px 0px 260px;
+  padding: 80px 200px 0px 200px;
 }
 
 .center {

src/routes/open/components/Layout.jsx

@@ -32,6 +32,8 @@ type Props = {
 
 const iconStyle = {
   color: secondary,
+  width: '32px',
+  height: '32px',
 }
 
 const Layout = ({
@@ -50,7 +52,7 @@ const Layout = ({
               <IconButton style={iconStyle} disableRipple>
                 <ChevronLeft />
               </IconButton>
-              <Heading tag="h3">Create New Safe</Heading>
+              <Heading tag="h2">Create New Safe</Heading>
             </Row>
             <Stepper
               finishedButton={finishedButton}

src/routes/open/components/SafeNameForm/index.jsx

@@ -27,17 +27,23 @@ const styles = () => ({
 
 const SafeName = ({ classes }: Props) => (
   <Block className={classes.container}>
-    <Paragraph size="md" color="primary">
+    <Block margin="lg">
+      <Paragraph noMargin size="md" color="primary" weight="light">
         This setup will create a Safe with one or more owners. Optionally give the Safe a local name.
         By continuing you consent with the terms of use and privacy policy.
       </Paragraph>
-    <Paragraph size="md" color="primary" weight="bolder">
+    </Block>
+    <Block margin="md">
+      <Paragraph noMargin size="md" color="primary" weight="bolder">
         &#9679; I understand that my funds are held securely in my Safe. They cannot be accessed by Gnosis.
       </Paragraph>
+    </Block>
+    <Block margin="md">
       <Paragraph size="md" color="primary" weight="bolder">
         &#9679; My Safe is a smart contract on the Ethereum blockchain.
       </Paragraph>
-    <Block margin="md" className={classes.root}>
+    </Block>
+    <Block margin="lg" className={classes.root}>
       <Field
         name={FIELD_NAME}
         component={TextField}

src/theme/mui.js

@@ -1,7 +1,7 @@
 // @flow
 import red from '@material-ui/core/colors/red'
 import { createMuiTheme } from '@material-ui/core/styles'
-import { largeFontSize, mediumFontSize, smallFontSize, primary, secondary, md, lg, background } from './variables'
+import { largeFontSize, mediumFontSize, smallFontSize, disabled, primary, secondary, md, lg, background } from './variables'
 
 export type WithStyles = {
   classes: Object,
@@ -30,6 +30,13 @@ export default createMuiTheme({
       root: {
         fontFamily: 'Roboto Mono, monospace',
         letterSpacing: '1px',
+        '&:disabled': {
+          color: disabled,
+        },
+        color: disabled,
+      },
+      disabled: {
+        cursor: 'pointer',
       },
       containedPrimary: {
         backgroundColor: secondary,
@@ -39,6 +46,10 @@ export default createMuiTheme({
         minHeight: '52px',
         fontSize: mediumFontSize,
       },
+      sizeSmall: {
+        minWidth: '130px',
+        fontSize: smallFontSize,
+      },
     },
     MuiStepIcon: {
       active: {
@@ -73,9 +84,13 @@ export default createMuiTheme({
         order: 1,
         padding: `0 ${md}`,
         backgroundColor: background,
+        '&:$disabled': {
+          color: '#0000ff',
+        },
       },
       input: {
         padding: 0,
+        color: 'initial',
       },
       underline: {
         '&:before': {

src/theme/variables.js

@@ -7,6 +7,7 @@ const tertiary = '#f6f9fc'
 const fontColor = '#4a5579'
 const fancyColor = '#fd7890'
 const warningColor = '#c97c05'
+const disabled = '#65707e'
 const xs = '4px'
 const sm = '8px'
 const md = '16px'
@@ -18,6 +19,7 @@ module.exports = Object.assign({}, {
   primary,
   secondary,
   tertiary,
+  disabled,
   background,
   fontColor,
   fancy: fancyColor,