fix mui helper text styles 👿

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

@@ -10,7 +10,9 @@ import OpenPaper from '~/components/Stepper/OpenPaper'
 import Col from '~/components/layout/Col'
 import Row from '~/components/layout/Row'
 import Paragraph from '~/components/layout/Paragraph'
-import { sm, md, lg, border, secondary, background } from '~/theme/variables'
+import {
+  sm, md, lg, border, secondary, background,
+} from '~/theme/variables'
 import Hairline from '~/components/layout/Hairline'
 import { openAddressInEtherScan } from '~/logic/wallets/getWeb3'
 import { FIELD_NAME, FIELD_CONFIRMATIONS, getNumOwnersFrom } from '../fields'
@@ -112,16 +114,20 @@ const ReviewComponent = ({ values, classes, network }: Props) => {
           </Block>
           <Hairline />
           {names.map((name, index) => (
-            <React.Fragment key={`name${(index)}`}>
+            <React.Fragment key={`name${index}`}>
               <Row className={classes.owner}>
                 <Col xs={1} align="center">
                   <Identicon address={addresses[index]} diameter={32} />
                 </Col>
                 <Col xs={11}>
                   <Block className={classNames(classes.name, classes.userName)}>
-                    <Paragraph size="lg" noMargin >{name}</Paragraph>
+                    <Paragraph size="lg" noMargin>
+                      {name}
+                    </Paragraph>
                     <Block align="center" className={classes.user}>
-                      <Paragraph size="md" color="disabled" noMargin>{addresses[index]}</Paragraph>
+                      <Paragraph size="md" color="disabled" noMargin>
+                        {addresses[index]}
+                      </Paragraph>
                       <OpenInNew
                         className={classes.open}
                         style={openIconStyle}
@@ -138,7 +144,7 @@ const ReviewComponent = ({ values, classes, network }: Props) => {
       </Row>
       <Row className={classes.info} align="center">
         <Paragraph noMargin color="primary" size="md">
-          {'You\'re about to create a new Safe.'}
+          {"You're about to create a new Safe."}
         </Paragraph>
         <Paragraph noMargin color="primary" size="md">
           Make sure you have enough ETH in your wallet client to fund this transaction.
@@ -158,5 +164,4 @@ const Review = ({ network }: LayoutProps) => (controls: React$Node, { values }:
   </React.Fragment>
 )
 
-
 export default Review

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

@@ -3,10 +3,14 @@ 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 Row from '~/components/layout/Row'
+import Col from '~/components/layout/Col'
+import Img from '~/components/layout/Img'
 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 TokenPlaceholder from '~/routes/safe/components/Balances/assets/token_placeholder.svg'
 import { styles } from './style'
 
 class AddCustomToken extends Component {
@@ -24,7 +28,7 @@ class AddCustomToken extends Component {
         </Paragraph>
         <GnoForm onSubmit={this.handleSubmit}>
           {(submitting: boolean, validating: boolean, ...rest: any) => (
-            <Block className={classes.inputContainer}>
+            <Block className={classes.formContainer}>
               <Field
                 name="tokenAddress"
                 component={TextField}
@@ -32,7 +36,34 @@ class AddCustomToken extends Component {
                 validate={composeValidators(required, mustBeEthereumAddress)}
                 placeholder="Token contract address*"
                 text="Token contract address*"
+                className={classes.addressInput}
               />
+              <Row>
+                <Col xs={6} layout="column">
+                  <Field
+                    name="tokenSymbol"
+                    component={TextField}
+                    type="text"
+                    validate={composeValidators(required, mustBeEthereumAddress)}
+                    placeholder="Token symbol*"
+                    text="Token symbol"
+                    className={classes.addressInput}
+                  />
+                  <Field
+                    name="tokenDecimals"
+                    component={TextField}
+                    type="text"
+                    validate={composeValidators(required, mustBeEthereumAddress)}
+                    placeholder="Token decimals*"
+                    text="Token decimals*"
+                    className={classes.addressInput}
+                  />
+                </Col>
+                <Col xs={6} layout="column" align="center">
+                  <Paragraph>Token Image</Paragraph>
+                  <Img src={TokenPlaceholder} alt="Token image" height={100} />
+                </Col>
+              </Row>
             </Block>
           )}
         </GnoForm>

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

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

src/theme/mui.js

@@ -106,8 +106,8 @@ export default createMuiTheme({
         fontFamily: 'Roboto Mono, monospace',
         fontSize: '12px',
         padding: `0 0 0 ${md}`,
-        position: 'relative',
+        position: 'absolute',
-        top: '20px',
+        top: '9px',
         color: secondary,
         order: 0,
         marginTop: '0px',