Adding custom GNO TextField for forms

src/components/forms/TextField/index.jsx

@@ -1,12 +1,23 @@
 // @flow
 import React from 'react'
 import MuiTextField, { TextFieldProps } from '@material-ui/core/TextField'
+import { withStyles } from '@material-ui/core/styles'
+import { lg } from '~/theme/variables'
 
 // Neded for solving a fix in Windows browsers
 const overflowStyle = {
   overflow: 'hidden',
+  width: '100%',
 }
 
+const styles = () => ({
+  root: {
+    paddingTop: lg,
+    paddingBottom: '12px',
+    lineHeight: 0,
+  },
+})
+
 class TextField extends React.PureComponent<TextFieldProps> {
   render() {
     const {
@@ -16,25 +27,32 @@ class TextField extends React.PureComponent<TextFieldProps> {
       meta,
       render,
       text,
+      classes,
       ...rest
     } = this.props
     const helperText = value ? text : undefined
     const showError = (meta.touched || !meta.pristine) && !meta.valid
+    const underline = meta.active || (meta.visited && !meta.valid)
+
+    const inputRoot = helperText ? classes.root : undefined
+    const inputProps = { ...restInput, autocomplete: 'off' }
+    const inputRootProps = { disableUnderline: !underline, className: inputRoot }
 
     return (
       <MuiTextField
         style={overflowStyle}
         {...rest}
         name={name}
-        helperText={showError ? meta.error : helperText}
+        helperText={showError ? meta.error : helperText || ' '} // blank in order to force to have helper text
         error={meta.error && (meta.touched || !meta.pristine)}
-        inputProps={restInput}
+        InputProps={inputRootProps}
+        // eslint-disable-next-line
+        inputProps={inputProps}
         onChange={onChange}
         value={value}
-        fullWidth
       />
     )
   }
 }
 
-export default TextField
+export default withStyles(styles)(TextField)

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

@@ -1,9 +1,40 @@
 // @flow
 import * as React from 'react'
+import { withStyles } from '@material-ui/core/styles'
+import Field from '~/components/forms/Field'
+import TextField from '~/components/forms/TextField'
+import { required } from '~/components/forms/validator'
+import Block from '~/components/layout/Block'
+import { FIELD_NAME } from '~/routes/open/components/fields'
 import Paragraph from '~/components/layout/Paragraph'
 import OpenPaper from '../OpenPaper'
 
-const SafeNameForm = () => () => (
+type Props = {
+  classes: Object,
+}
+
+const styles = () => ({
+  root: {
+    display: 'flex',
+  },
+})
+
+const SafeName = ({ classes }: Props) => (
+  <Block margin="md" className={classes.root}>
+    <Field
+      name={FIELD_NAME}
+      component={TextField}
+      type="text"
+      validate={required}
+      placeholder="Name of the new Safe"
+      text="Safe name"
+    />
+  </Block>
+)
+
+const SafeNameForm = withStyles(styles)(SafeName)
+
+const SafeNamePage = () => () => (
   <OpenPaper>
     <Paragraph size="md" color="primary">
       This setup will create a Safe with one or more owners. Optionally give the Safe a local name.
@@ -15,7 +46,8 @@ const SafeNameForm = () => () => (
     <Paragraph size="md" color="primary" weight="bolder">
       &#9679; My Safe is a smart contract on the Ethereum blockchain.
     </Paragraph>
+    <SafeNameForm />
   </OpenPaper>
 )
 
-export default SafeNameForm
+export default SafeNamePage

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 { mediumFontSize, primary, secondary, md, lg } from './variables'
+import { largeFontSize, mediumFontSize, smallFontSize, primary, secondary, md, lg, background } from './variables'
 
 export type WithStyles = {
   classes: Object,
@@ -51,6 +51,44 @@ export default createMuiTheme({
         letterSpacing: '-0.5px',
       },
     },
+    MuiFormHelperText: {
+      root: {
+        fontFamily: 'Roboto Mono, monospace',
+        fontSize: smallFontSize,
+        padding: `0 0 0 ${md}`,
+        position: 'relative',
+        top: '20px',
+        color: secondary,
+        order: 0,
+        marginTop: '0px',
+        backgroundColor: background,
+      },
+    },
+    MuiInput: {
+      root: {
+        fontFamily: 'Roboto Mono, monospace',
+        color: primary,
+        fontSize: largeFontSize,
+        lineHeight: '56px',
+        order: 1,
+        padding: `0 ${md}`,
+        backgroundColor: background,
+      },
+      input: {
+        padding: 0,
+      },
+      underline: {
+        '&:before': {
+          borderBottom: `2px solid ${secondary}`,
+        },
+        '&:focus:before': {
+          borderBottom: '1px solid purple',
+        },
+        '&:hover:not($disabled):not($focused):not($error):before': {
+          borderBottom: `2px solid ${secondary}`,
+        },
+      },
+    },
   },
   palette,
 })