border radius to input styles to make it look like in zeplin

src/components/forms/TextField/index.jsx

@@ -1,5 +1,6 @@
 // @flow
 import React from 'react'
+import cn from 'classnames'
 import MuiTextField, { TextFieldProps } from '@material-ui/core/TextField'
 import { withStyles } from '@material-ui/core/styles'
 import { lg } from '~/theme/variables'
@@ -16,6 +17,9 @@ const styles = () => ({
     paddingBottom: '12px',
     lineHeight: 0,
   },
+  input: {
+    borderRadius: '5px',
+  },
 })
 
 class TextField extends React.PureComponent<TextFieldProps> {
@@ -37,7 +41,7 @@ class TextField extends React.PureComponent<TextFieldProps> {
 
     const inputRoot = helperText ? classes.root : undefined
     const inputProps = { ...restInput, autoComplete: 'off' }
-    const inputRootProps = { ...inputAdornment, disableUnderline: !underline, className: inputRoot }
+    const inputRootProps = { ...inputAdornment, disableUnderline: !underline, className: cn(inputRoot, classes.input) }
 
     return (
       <MuiTextField

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

@@ -37,8 +37,19 @@ const SafeName = ({ classes }: Props) => (
   <React.Fragment>
     <Block margin="lg">
       <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>.
+        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>
     </Block>
     <Row margin="md" className={classes.text}>

src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/index.jsx

@@ -3,19 +3,39 @@ import React, { Component } from 'react'
 import { withStyles } from '@material-ui/core/styles'
 import Block from '~/components/layout/Block'
 import Paragraph from '~/components/layout/Paragraph'
+import Field from '~/components/forms/Field'
+import GnoForm from '~/components/forms/GnoForm'
+import TextField from '~/components/forms/TextField'
+import { composeValidators, required, mustBeEthereumAddress } from '~/components/forms/validator'
 import { styles } from './style'
 
 class AddCustomToken extends Component {
+  handleSubmit = () => {
+    console.log('form submitted')
+  }
+
   render() {
     const { classes } = this.props
 
     return (
       <React.Fragment>
-        <Block>
-          <Paragraph noMargin className={classes.title} size="lg">
-            Add custom token
-          </Paragraph>
-        </Block>
+        <Paragraph noMargin className={classes.title} size="lg">
+          Add custom token
+        </Paragraph>
+        <GnoForm onSubmit={this.handleSubmit}>
+          {(submitting: boolean, validating: boolean, ...rest: any) => (
+            <Block className={classes.inputContainer}>
+              <Field
+                name="tokenAddress"
+                component={TextField}
+                type="text"
+                validate={composeValidators(required, mustBeEthereumAddress)}
+                placeholder="Token contract address*"
+                text="Token contract address*"
+              />
+            </Block>
+          )}
+        </GnoForm>
       </React.Fragment>
     )
   }

src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/style.js

@@ -7,4 +7,7 @@ export const styles = () => ({
     fontWeight: bolderFont,
     fontSize: '16px',
   },
+  inputContainer: {
+    padding: '0 20px',
+  },
 })