From a5a149f51ba6fb44469227f82630b06064faeb80 Mon Sep 17 00:00:00 2001
From: Mikhail Mikheev <mdoublemmm@gmail.com>
Date: Fri, 19 Apr 2019 18:56:41 +0400
Subject: [PATCH] border radius to input styles to make it look like in zeplin

---
 src/components/forms/TextField/index.jsx      |  6 +++-
 .../open/components/SafeNameForm/index.jsx    | 15 ++++++++--
 .../Tokens/screens/AddCustomToken/index.jsx   | 30 +++++++++++++++----
 .../Tokens/screens/AddCustomToken/style.js    |  3 ++
 4 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/src/components/forms/TextField/index.jsx b/src/components/forms/TextField/index.jsx
index dc28ae26..c03baaf4 100644
--- a/src/components/forms/TextField/index.jsx
+++ b/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
diff --git a/src/routes/open/components/SafeNameForm/index.jsx b/src/routes/open/components/SafeNameForm/index.jsx
index 537c9238..d0745973 100644
--- a/src/routes/open/components/SafeNameForm/index.jsx
+++ b/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}>
diff --git a/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/index.jsx b/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/index.jsx
index 43031912..c450f900 100644
--- a/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/index.jsx
+++ b/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>
     )
   }
diff --git a/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/style.js b/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/style.js
index 34d21ff3..7d5b82e0 100644
--- a/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/style.js
+++ b/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',
+  },
 })