Merge pull request #106 from gnosis/bug/input-spacings

BUG: input spacings

src/routes/load/components/DetailsForm/index.jsx

@@ -26,6 +26,7 @@ const styles = () => ({
   root: {
     display: 'flex',
     maxWidth: '460px',
+    marginTop: '12px',
   },
   check: {
     color: '#03AE60',
@@ -82,9 +83,8 @@ const Details = ({ classes, errors }: Props) => (
   <React.Fragment>
     <Block margin="sm">
       <Paragraph noMargin size="md" color="primary">
-        Adding an existing Safe only requires the Safe address. Optionally you can give it a name.
-        In case your connected client is not the owner of the Safe, the interface will essentially provide you a
-        read-only view.
+        Adding an existing Safe only requires the Safe address. Optionally you can give it a name. In case your
+        connected client is not the owner of the Safe, the interface will essentially provide you a read-only view.
       </Paragraph>
     </Block>
     <Block className={classes.root}>
@@ -101,13 +101,15 @@ const Details = ({ classes, errors }: Props) => (
       <Field
         name={FIELD_LOAD_ADDRESS}
         component={TextField}
-        inputAdornment={noErrorsOn(FIELD_LOAD_ADDRESS, errors) && {
+        inputAdornment={
+          noErrorsOn(FIELD_LOAD_ADDRESS, errors) && {
             endAdornment: (
               <InputAdornment position="end">
                 <CheckCircle className={classes.check} />
               </InputAdornment>
             ),
-        }}
+          }
+        }
         type="text"
         validate={composeValidators(required, mustBeEthereumAddress)}
         placeholder="Safe Address*"
@@ -127,5 +129,4 @@ const DetailsPage = () => (controls: React$Node, { errors }: Object) => (
   </React.Fragment>
 )
 
-
 export default DetailsPage

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

@@ -3,7 +3,9 @@ import * as React from 'react'
 import { withStyles } from '@material-ui/core/styles'
 import Field from '~/components/forms/Field'
 import TextField from '~/components/forms/TextField'
-import { required, composeValidators, uniqueAddress, mustBeEthereumAddress, noErrorsOn } from '~/components/forms/validator'
+import {
+  required, composeValidators, uniqueAddress, mustBeEthereumAddress, noErrorsOn,
+} from '~/components/forms/validator'
 import Block from '~/components/layout/Block'
 import Button from '~/components/layout/Button'
 import Row from '~/components/layout/Row'
@@ -98,10 +100,10 @@ class SafeOwners extends React.Component<Props, State> {
   }
 
   onRemoveRow = (index: number) => () => {
-    const { values } = this.props
+    const { values, updateInitialProps } = this.props
     const { numOwners } = this.state
     const initialValues = calculateValuesAfterRemoving(index, numOwners, values)
-    this.props.updateInitialProps(initialValues)
+    updateInitialProps(initialValues)
 
 
     this.setState(state => ({
@@ -132,7 +134,7 @@ class SafeOwners extends React.Component<Props, State> {
           <Col xs={8}>ADDRESS</Col>
         </Row>
         <Hairline />
-        <Block margin="md">
+        <Block margin="md" padding="md">
           { [...Array(Number(numOwners))].map((x, index) => {
             const addressName = getOwnerAddressBy(index)
 
@@ -167,8 +169,8 @@ class SafeOwners extends React.Component<Props, State> {
                   />
                 </Col>
                 <Col xs={1} center="xs" middle="xs" className={classes.remove}>
-                  { index > 0 &&
-                    <Img src={trash} height={20} alt="Delete" onClick={this.onRemoveRow(index)} />
+                  { index > 0
+                    && <Img src={trash} height={20} alt="Delete" onClick={this.onRemoveRow(index)} />
                   }
                 </Col>
               </Row>