Improve Safe settings styles

src/components/Footer/index.scss

@@ -7,6 +7,7 @@
   align-items: center;
   border: solid 0.5px $border;
   background-color: white;
+  margin-top: 50px;
 }
 
 @media only screen and (max-width: $(screenXs)px) {

src/routes/safe/components/Settings/ManageOwners/dataFetcher.js

@@ -40,7 +40,6 @@ export const generateColumns = () => {
     order: false,
     disablePadding: false,
     label: 'Address',
-    width: 350,
     custom: false,
     align: 'left',
   }
@@ -50,7 +49,6 @@ export const generateColumns = () => {
     order: false,
     disablePadding: false,
     label: '',
-    align: 'right',
     custom: true,
   }
 

src/routes/safe/components/Settings/ManageOwners/index.jsx

@@ -27,6 +27,9 @@ import {
 } from './dataFetcher'
 import { sm, boldFont } from '~/theme/variables'
 import { styles } from './style'
+import ReplaceOwnerIcon from './assets/icons/replace-owner.svg'
+import RenameOwnerIcon from './assets/icons/rename-owner.svg'
+import RemoveOwnerIcon from '../assets/icons/bin.svg'
 
 const controlsStyle = {
   backgroundColor: 'white',
@@ -52,15 +55,26 @@ type Action = 'AddOwner' | 'EditOwner' | 'ReplaceOwner' | 'RemoveOwner'
 
 class ManageOwners extends React.Component<Props, State> {
   state = {
+    selectedOwnerAddress: undefined,
+    selectedOwnerName: undefined,
     showAddOwner: false,
+    showRemoveOwner: false,
   }
 
-  onShow = (action: Action) => () => {
+  onShow = (action: Action, row?: Object) => () => {
-    this.setState(() => ({ [`show${action}`]: true }))
+    this.setState({
+      [`show${action}`]: true,
+      selectedOwnerAddress: row && row.address,
+      selectedOwnerName: row && row.name,
+    })
   }
 
   onHide = (action: Action) => () => {
-    this.setState(() => ({ [`show${action}`]: false }))
+    this.setState({
+      [`show${action}`]: false,
+      selectedOwnerAddress: undefined,
+      selectedOwnerName: undefined,
+    })
   }
 
   render() {
@@ -74,9 +88,15 @@ class ManageOwners extends React.Component<Props, State> {
       userAddress,
       createTransaction,
     } = this.props
-    const { showAddOwner } = this.state
+    const {
+      showAddOwner,
+      showRemoveOwner,
+      selectedOwnerName,
+      selectedOwnerAddress
+    } = this.state
 
     const columns = generateColumns()
+    const autoColumns = columns.filter(c => !c.custom)
     const ownerData = getOwnerData(owners)
 
     return (
@@ -85,7 +105,6 @@ class ManageOwners extends React.Component<Props, State> {
           <Paragraph noMargin className={classes.title} size="lg" weight="bolder">
             Manage Safe Owners
           </Paragraph>
-
           <Table
             label="owners"
             columns={columns}
@@ -96,28 +115,16 @@ class ManageOwners extends React.Component<Props, State> {
           >
             {(sortedData: Array<OwnerRow>) => sortedData.map((row: any, index: number) => (
               <TableRow tabIndex={-1} key={index} className={classes.hide}>
-                {columns.map((column: Column) => (
+                {autoColumns.map((column: Column) => (
                   <TableCell key={column.id} style={cellWidth(column.width)} align={column.align} component="td">
                     {column.id === OWNERS_TABLE_ADDRESS_ID ? <OwnerAddressTableCell address={row[column.id]} /> : row[column.id]}
                   </TableCell>
                 ))}
                 <TableCell component="td">
                   <Row align="end" className={classes.actions}>
-                    <Button
+                    <img className={classes.editOwnerIcon} src={RenameOwnerIcon} onClick={this.onShow('EditOwner', row)} />
-                      onClick={this.onShow('EditOwner')}
+                    <img className={classes.replaceOwnerIcon} src={ReplaceOwnerIcon} onClick={this.onShow('ReplaceOwner', row)} />
-                    >
+                    <img className={classes.removeOwnerIcon} src={RemoveOwnerIcon} onClick={this.onShow('RemoveOwner', row)} />
-                      Edit
-                    </Button>
-                    <Button
-                      onClick={this.onShow('ReplaceOwner')}
-                    >
-                      Replace
-                    </Button>
-                    <Button
-                      onClick={this.onShow('RemoveOwner')}
-                    >
-                      Remove
-                    </Button>
                   </Row>
                 </TableCell>
               </TableRow>

src/routes/safe/components/Settings/ManageOwners/style.js

@@ -26,4 +26,15 @@ export const styles = () => ({
     justifyContent: 'flex-end',
     visibility: 'hidden',
   },
+  editOwnerIcon: {
+    cursor: 'pointer',
+  },
+  replaceOwnerIcon: {
+    marginLeft: lg,
+    cursor: 'pointer',
+  },
+  removeOwnerIcon: {
+    marginLeft: lg,
+    cursor: 'pointer',
+  },
 })

src/routes/safe/components/Settings/index.jsx

@@ -16,6 +16,7 @@ import UpdateSafeName from './UpdateSafeName'
 import ManageOwners from './ManageOwners'
 import actions, { type Actions } from './actions'
 import { styles } from './style'
+import RemoveSafeIcon from './assets/icons/bin.svg'
 
 type State = {
   showRemoveSafe: boolean,
@@ -80,8 +81,11 @@ class Settings extends React.Component<Props, State> {
             </Paragraph>
           </Col>
           <Col xs={6} end="sm">
-            <Paragraph noMargin size="md" color="error" className={classes.links} onClick={this.onShow('RemoveSafe')}>
+            <Paragraph noMargin size="md" color="error" onClick={this.onShow('RemoveSafe')}>
-              Remove Safe
+              <Paragraph noMargin className={cn(classes.links, classes.removeSafeText)}>
+                Remove Safe
+              </Paragraph>
+              <img className={classes.removeSafeIcon} src={RemoveSafeIcon} />
             </Paragraph>
             <RemoveSafeModal
               onClose={this.onHide('RemoveSafe')}

src/routes/safe/components/Settings/style.js

@@ -39,4 +39,14 @@ export const styles = (theme: Object) => ({
       cursor: 'pointer',
     },
   },
+  removeSafeText: {
+    height: '16px',
+    lineHeight: '16px',
+    paddingRight: sm,
+    float: 'left',
+  },
+  removeSafeIcon: {
+    height: '16px',
+    cursor: 'pointer',
+  },
 })