Fix batch of CSS improvements on OpenSafe page 1

src/components/Stepper/Controls/index.jsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import Button from '~/components/layout/Button'
 import Col from '~/components/layout/Col'
 import Row from '~/components/layout/Row'
-import { sm } from '~/theme/variables'
+import { sm, boldFont } from '~/theme/variables'
 
 const controlStyle = {
   backgroundColor: 'white',
@@ -12,6 +12,11 @@ const controlStyle = {
 
 const firstButtonStyle = {
   marginRight: sm,
+  fontWeight: boldFont,
+}
+
+const secondButtonStyle = {
+  fontWeight: boldFont,
 }
 
 type Props = {
@@ -41,6 +46,7 @@ const Controls = ({
           {back}
         </Button>
         <Button
+          style={secondButtonStyle}
           size="small"
           variant="raised"
           color="primary"

src/components/Stepper/OpenPaper/index.jsx

@@ -9,6 +9,7 @@ const styles = () => ({
   root: {
     margin: '10px',
     maxWidth: '870px',
+    boxShadow: '0 0 10px 0 rgba(33,48,77,0.10)',
   },
   container: {
     letterSpacing: '-0.5px',

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

@@ -36,7 +36,7 @@ const styles = () => ({
 const SafeName = ({ classes }: Props) => (
   <React.Fragment>
     <Block margin="lg">
-      <Paragraph noMargin size="md" color="primary" weight="light" className={classes.links}>
+      <Paragraph noMargin size="md" color="primary" className={classes.links}>
         This setup will create a Safe with one or more owners. Optionally give the Safe a local name.
         By continuing you consent with the <a rel="noopener noreferrer" href="https://safe.gnosis.io/terms" target="_blank">terms of use</a> and <a rel="noopener noreferrer" href="https://safe.gnosis.io/privacy" target="_blank">privacy policy</a>.
       </Paragraph>

src/theme/mui.js

@@ -1,7 +1,6 @@
 // @flow
-import red from '@material-ui/core/colors/red'
 import { createMuiTheme } from '@material-ui/core/styles'
-import { largeFontSize, mediumFontSize, smallFontSize, disabled, primary, secondary, md, lg, background, bolderFont, boldFont, buttonLargeFontSize } from './variables'
+import { largeFontSize, mediumFontSize, smallFontSize, disabled, primary, secondary, md, lg, bolderFont, boldFont, buttonLargeFontSize } from './variables'
 
 export type WithStyles = {
   classes: Object,
@@ -14,7 +13,9 @@ const palette = {
   secondary: {
     main: secondary,
   },
-  error: red,
+  error: {
+    main: '#FB4F62',
+  },
   contrastThreshold: 3,
   tonalOffset: 0.2,
 }
@@ -55,6 +56,11 @@ export default createMuiTheme({
         fontSize: smallFontSize,
       },
     },
+    MuiStepper: {
+      root: {
+        padding: '24px 0 0 15px',
+      },
+    },
     MuiStepIcon: {
       root: {
         fontSize: '22px',
@@ -76,14 +82,14 @@ export default createMuiTheme({
     MuiFormHelperText: {
       root: {
         fontFamily: 'Roboto Mono, monospace',
-        fontSize: smallFontSize,
+        fontSize: '12px',
         padding: `0 0 0 ${md}`,
         position: 'relative',
         top: '20px',
         color: secondary,
         order: 0,
         marginTop: '0px',
-        backgroundColor: background,
+        backgroundColor: 'EAE9EF',
       },
     },
     MuiInput: {
@@ -94,16 +100,20 @@ export default createMuiTheme({
         lineHeight: '56px',
         order: 1,
         padding: `0 ${md}`,
-        backgroundColor: background,
+        backgroundColor: '#EAE9EF',
         '&:$disabled': {
           color: '#0000ff',
         },
       },
       input: {
         padding: 0,
-        color: 'initial',
+        letterSpacing: '0.5px',
+        color: primary,
         textOverflow: 'ellipsis',
         display: 'flex',
+        '&::-webkit-input-placeholder': {
+          color: disabled,
+        },
       },
       underline: {
         '&:before': {