Adding custom trash icon when remvoing owners #73

src/routes/open/assets/trash.svg

@@ -0,0 +1 @@
+<svg height="15" viewBox="0 0 12 15" width="12" xmlns="http://www.w3.org/2000/svg"><path d="m703.53289 23.5644311.452749 9.0623595c0 1.0249793.847907 1.8557283 1.894311 1.8557283h6.257594c1.046419 0 1.894311-.8307646 1.894311-1.8557283l.435591-9.0623595zm11.464047-.6426824c.001838-.382297.003063-.4080344.003063-.4337561 0-.9961836-.589984-1.5432721-1.381539-1.5432721l-2.203756.0024506c0-.5232018-.510952-.9471711-1.033543-.9471711h-2.743441c-.523202 0-1.050701.4239536-1.050701.9471711l-2.205481-.0024506c-.874256 0-1.381539.6665691-1.381539 1.5432721 0 .0257311.000613.0514638.003063.4337561h11.994636zm-4.101047 3.0240279c0-.2891812.234036-.5232019.52259-.5232019.289181 0 .523202.2340364.523202.5232019v5.9923776c0 .2891811-.234036.5232018-.523202.5232018-.288554 0-.52259-.2340363-.52259-.5232018zm-2.418783 0c0-.2891812.234036-.5232019.523202-.5232019.288554 0 .52259.2340364.52259.5232019v5.9923776c0 .2891811-.234036.5232018-.52259.5232018-.289181 0-.523202-.2340363-.523202-.5232018zm-2.417528 0c0-.2891812.234648-.5232019.523201-.5232019.289182 0 .523202.2340364.523202.5232019v5.9923776c0 .2891811-.234036.5232018-.523202.5232018-.288553 0-.523201-.2340363-.523201-.5232018z" fill="#a2a8ba" transform="translate(-703 -20)"/></svg>

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

@@ -7,9 +7,8 @@ import { required, composeValidators, uniqueAddress, mustBeEthereumAddress } fro
 import Block from '~/components/layout/Block'
 import Button from '~/components/layout/Button'
 import Row from '~/components/layout/Row'
+import Img from '~/components/layout/Img'
 import Col from '~/components/layout/Col'
-import IconButton from '@material-ui/core/IconButton'
-import Delete from '@material-ui/icons/Delete'
 import InputAdornment from '@material-ui/core/InputAdornment'
 import CheckCircle from '@material-ui/icons/CheckCircle'
 import { getOwnerNameBy, getOwnerAddressBy } from '~/routes/open/components/fields'
@@ -19,6 +18,8 @@ import { getAccountsFrom } from '~/routes/open/utils/safeDataExtractor'
 import Hairline from '~/components/layout/Hairline'
 import { md, lg, sm } from '~/theme/variables'
 
+const trash = require('../../assets/trash.svg')
+
 type Props = {
   classes: Object,
   otherAccounts: string[],
@@ -57,6 +58,14 @@ const styles = () => ({
     color: '#03AE60',
     height: '20px',
   },
+  remove: {
+    height: '56px',
+    marginTop: '12px',
+    maxWidth: '50px',
+    '&:hover': {
+      cursor: 'pointer',
+    },
+  },
 })
 
 const getAddressValidators = (addresses: string[], position: number) => {
@@ -159,12 +168,9 @@ class SafeOwners extends React.Component<Props, State> {
                     text="Owner Address"
                   />
                 </Col>
-                <Col xs={1} center="xs" middle="xs">
+                <Col xs={1} center="xs" middle="xs" className={classes.remove}>
                   { index > 0 &&
-                    <IconButton aria-label="Delete" onClick={this.onRemoveRow(index)} className={classes.trash}>
+                    <Img src={trash} height={20} alt="Delete" onClick={this.onRemoveRow(index)} />
-                      <Delete />
-                      {/* <Img className={classes.logo} src={dot} height={14} alt="Network" /> */}
-                    </IconButton>
                   }
                 </Col>
               </Row>