select token wip

src/components/forms/SelectField/index.jsx

@@ -20,28 +20,16 @@ const SelectInput = ({
 }: SelectFieldProps) => {
   const showError = ((meta.submitError && !meta.dirtySinceLastSubmit) || meta.error) && meta.touched
   const inputProps = { ...restInput, name }
+  const inputRootProps = { style: { borderRadius: '5px' } }
 
   return (
-    <FormControl
-      {...formControlProps}
-      error={showError}
-      style={style}
-    >
+    <FormControl {...formControlProps} error={showError} style={style}>
       <InputLabel htmlFor={name}>{label}</InputLabel>
-      <Select
-        {...rest}
-        onChange={onChange}
-        inputProps={inputProps}
-        value={value}
-      />
-      { showError &&
-        <FormHelperText>
-          {meta.error || meta.submitError}
-        </FormHelperText>
-      }
+      {/* eslint-disable-next-line */}
+      <Select {...rest} onChange={onChange} inputProps={inputProps} InputProps={inputRootProps} value={value} />
+      {showError && <FormHelperText>{meta.error || meta.submitError}</FormHelperText>}
     </FormControl>
   )
 }
 
-
 export default SelectInput

src/components/forms/TextField/index.jsx

@@ -1,6 +1,5 @@
 // @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'
@@ -17,9 +16,6 @@ const styles = () => ({
     paddingBottom: '12px',
     lineHeight: 0,
   },
-  input: {
-    borderRadius: '5px',
-  },
 })
 
 class TextField extends React.PureComponent<TextFieldProps> {
@@ -41,7 +37,7 @@ class TextField extends React.PureComponent<TextFieldProps> {
 
     const inputRoot = helperText ? classes.root : undefined
     const inputProps = { ...restInput, autoComplete: 'off' }
-    const inputRootProps = { ...inputAdornment, disableUnderline: !underline, className: cn(inputRoot, classes.input) }
+    const inputRootProps = { ...inputAdornment, disableUnderline: !underline, className: inputRoot }
 
     return (
       <MuiTextField

src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.jsx

@@ -4,6 +4,7 @@ import { withStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import IconButton from '@material-ui/core/IconButton'
 import OpenInNew from '@material-ui/icons/OpenInNew'
+import MenuItem from '@material-ui/core/MenuItem'
 import Identicon from '~/components/Identicon'
 import Paragraph from '~/components/layout/Paragraph'
 import Row from '~/components/layout/Row'
@@ -12,6 +13,7 @@ import Link from '~/components/layout/Link'
 import Col from '~/components/layout/Col'
 import Field from '~/components/forms/Field'
 import TextField from '~/components/forms/TextField'
+import SelectField from '~/components/forms/SelectField'
 import Block from '~/components/layout/Block'
 import Bold from '~/components/layout/Bold'
 import Hairline from '~/components/layout/Hairline'
@@ -103,7 +105,7 @@ const SendFunds = ({
                 <Bold>
                   {ethBalance}
                   {' '}
-                  ETH
+ETH
                 </Bold>
               </Paragraph>
             </Block>
@@ -119,19 +121,33 @@ const SendFunds = ({
         </Row>
         <GnoForm onSubmit={handleSubmit}>
           {() => (
-            <Row>
-              <Col xs={12}>
-                <Field
-                  name="address"
-                  component={TextField}
-                  type="text"
-                  validate={composeValidators(required, mustBeEthereumAddress)}
-                  placeholder="Recipient*"
-                  text="Recipient*"
-                  className={classes.addressInput}
-                />
-              </Col>
-            </Row>
+            <React.Fragment>
+              <Row margin="md">
+                <Col xs={12}>
+                  <Field
+                    name="recipientAddress"
+                    component={TextField}
+                    type="text"
+                    validate={composeValidators(required, mustBeEthereumAddress)}
+                    placeholder="Recipient*"
+                    text="Recipient*"
+                    className={classes.addressInput}
+                  />
+                </Col>
+              </Row>
+              <Row>
+                <Col>
+                  <Field name="token" component={SelectField} validate={composeValidators(required)}>
+                    <MenuItem>
+                      1
+                    </MenuItem>
+                    <MenuItem>
+                      2
+                    </MenuItem>
+                  </Field>
+                </Col>
+              </Row>
+            </React.Fragment>
           )}
         </GnoForm>
       </Block>

src/theme/mui.js

@@ -123,6 +123,7 @@ export default createMuiTheme({
         order: 1,
         padding: `0 ${md}`,
         backgroundColor: '#EAE9EF',
+        borderRadius: '5px',
         '&:$disabled': {
           color: '#0000ff',
         },