add display for all safes checkbox

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

@@ -7,6 +7,7 @@ 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 Checkbox from '~/components/forms/Checkbox'
 import GnoForm from '~/components/forms/GnoForm'
 import TextField from '~/components/forms/TextField'
 import { composeValidators, required, mustBeEthereumAddress } from '~/components/forms/validator'
@@ -23,7 +24,7 @@ class AddCustomToken extends Component {
 
     return (
       <React.Fragment>
-        <Paragraph noMargin className={classes.title} size="lg">
+        <Paragraph noMargin className={classes.title} weight="bolder" size="lg">
           Add custom token
         </Paragraph>
         <GnoForm onSubmit={this.handleSubmit}>
@@ -58,9 +59,15 @@ class AddCustomToken extends Component {
                     text="Token decimals*"
                     className={classes.addressInput}
                   />
+                  <Block align="left">
+                    <Field name="showForAllSafes" component={Checkbox} type="checkbox" className={classes.checkbox} />
+                    <Paragraph weight="bolder" size="md" className={classes.checkboxLabel}>
+                      Display token for all safes
+                    </Paragraph>
+                  </Block>
                 </Col>
                 <Col xs={6} layout="column" align="center">
-                  <Paragraph>Token Image</Paragraph>
+                  <Paragraph className={classes.tokenImageHeading}>Token Image</Paragraph>
                   <Img src={TokenPlaceholder} alt="Token image" height={100} />
                 </Col>
               </Row>

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

@@ -1,10 +1,9 @@
 // @flow
-import { lg, bolderFont } from '~/theme/variables'
+import { lg } from '~/theme/variables'
 
 export const styles = () => ({
   title: {
     padding: `${lg} 20px 20px`,
-    fontWeight: bolderFont,
     fontSize: '16px',
   },
   formContainer: {
@@ -13,4 +12,15 @@ export const styles = () => ({
   addressInput: {
     marginBottom: '15px',
   },
+  tokenImageHeading: {
+    margin: '0 0 15px',
+  },
+  checkbox: {
+    padding: '0 7px 0 0',
+    width: '18px',
+    height: '18px',
+  },
+  checkboxLabel: {
+    letterSpacing: '-0.5px',
+  },
 })