Replace icons and styles on Settings and Address Book (#2388)

Co-authored-by: Daniel Sanchez <daniel.sanchez@gnosis.pm>

src/assets/icons/trash.svg

@@ -1 +0,0 @@
-<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="#B2B5B2" transform="translate(-703 -20)"/></svg>

src/components/AppLayout/Sidebar/SafeHeader/index.tsx

@@ -11,6 +11,7 @@ import {
   ExplorerButton,
 } from '@gnosis.pm/safe-react-components'
 
+import ButtonHelper from 'src/components/ButtonHelper'
 import FlexSpacer from 'src/components/FlexSpacer'
 import { getExplorerInfo, getNetworkInfo } from 'src/config'
 import { NetworkSettings } from 'src/config/networks/network.d'
@@ -84,17 +85,6 @@ const StyledLabel = styled.div`
 const StyledText = styled(Text)`
   margin: 8px 0 16px 0;
 `
-const UnStyledButton = styled.button`
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  outline-color: ${({ theme }) => theme.colors.separator};
-  display: flex;
-  align-items: center;
-`
 
 type Props = {
   address: string | undefined
@@ -121,9 +111,9 @@ const SafeHeader = ({
         <IdenticonContainer>
           <FlexSpacer />
           <FixedIcon type="notConnected" />
-          <UnStyledButton onClick={onToggleSafeList} data-testid={TOGGLE_SIDEBAR_BTN_TESTID}>
+          <ButtonHelper onClick={onToggleSafeList} data-testid={TOGGLE_SIDEBAR_BTN_TESTID}>
             <Icon size="md" type="circleDropdown" />
-          </UnStyledButton>
+          </ButtonHelper>
         </IdenticonContainer>
       </Container>
     )
@@ -143,18 +133,18 @@ const SafeHeader = ({
         <IdenticonContainer>
           <FlexSpacer />
           <Identicon address={address} size="lg" />
-          <UnStyledButton onClick={onToggleSafeList} data-testid={TOGGLE_SIDEBAR_BTN_TESTID}>
+          <ButtonHelper onClick={onToggleSafeList} data-testid={TOGGLE_SIDEBAR_BTN_TESTID}>
             <Icon size="md" type="circleDropdown" />
-          </UnStyledButton>
+          </ButtonHelper>
         </IdenticonContainer>
 
         {/* SafeInfo */}
         <Text size="xl">{safeName}</Text>
         <StyledEthHashInfo hash={address} shortenHash={4} textSize="sm" />
         <IconContainer>
-          <UnStyledButton onClick={onReceiveClick}>
+          <ButtonHelper onClick={onReceiveClick}>
             <Icon size="sm" type="qrCode" tooltip="Show QR" />
-          </UnStyledButton>
+          </ButtonHelper>
           <CopyToClipboardBtn textToCopy={address} />
           <ExplorerButton explorerUrl={explorerUrl} />
         </IconContainer>

src/components/ButtonHelper/index.tsx

@@ -0,0 +1,28 @@
+import React, { ReactElement } from 'react'
+import styled from 'styled-components'
+
+const UnStyledButton = styled.button`
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline-color: ${({ theme }) => theme.colors.icon};
+  display: flex;
+  align-items: center;
+`
+type Props = {
+  onClick?: () => void
+  children: ReactElement
+}
+
+const ButtonHelper = ({ onClick = () => undefined, children }: Props): React.ReactElement => {
+  return (
+    <UnStyledButton onClick={onClick} type={'button'}>
+      {children}
+    </UnStyledButton>
+  )
+}
+
+export default ButtonHelper

src/routes/open/components/SafeOwnersConfirmationsForm/index.tsx

@@ -7,9 +7,8 @@ import * as React from 'react'
 import styled from 'styled-components'
 
 import { styles } from './style'
+import ButtonHelper from 'src/components/ButtonHelper'
 import { padOwnerIndex } from 'src/routes/open/utils/padOwnerIndex'
-import QRIcon from 'src/assets/icons/qrcode.svg'
-import trash from 'src/assets/icons/trash.svg'
 import { ScanQRModal } from 'src/components/ScanQRModal'
 import OpenPaper from 'src/components/Stepper/OpenPaper'
 import AddressInput from 'src/components/forms/AddressInput'
@@ -29,7 +28,6 @@ import Block from 'src/components/layout/Block'
 import Button from 'src/components/layout/Button'
 import Col from 'src/components/layout/Col'
 import Hairline from 'src/components/layout/Hairline'
-import Img from 'src/components/layout/Img'
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import {
@@ -234,18 +232,17 @@ const SafeOwnersForm = (props): React.ReactElement => {
                 />
               </Col>
               <Col center="xs" className={classes.remove} middle="xs" xs={1}>
-                <Img
+                <ButtonHelper onClick={() => openQrModal(addressName)}>
-                  alt="Scan QR"
+                  <Icon size="sm" type="qrCode" color="icon" tooltip="Scan QR" />
-                  height={20}
+                </ButtonHelper>
-                  onClick={() => {
-                    openQrModal(addressName)
-                  }}
-                  src={QRIcon}
-                />
-              </Col>
-              <Col center="xs" className={classes.remove} middle="xs" xs={1}>
-                {index > 0 && <Img alt="Delete" height={20} onClick={onRemoveRow(index)} src={trash} />}
               </Col>
+              {index > 0 && (
+                <Col center="xs" className={classes.remove} middle="xs" xs={1}>
+                  <ButtonHelper onClick={onRemoveRow(index)}>
+                    <Icon size="sm" type="delete" color="icon" tooltip="Delete" />
+                  </ButtonHelper>
+                </Col>
+              )}
             </Row>
           )
         })}

src/routes/open/components/SafeOwnersConfirmationsForm/style.ts

@@ -66,7 +66,7 @@ export const styles = createStyles({
   },
   remove: {
     height: '56px',
-    maxWidth: '50px',
+    maxWidth: '32px',
     '&:hover': {
       cursor: 'pointer',
     },

src/routes/safe/components/AddressBook/ExportEntriesModal/index.tsx

@@ -32,14 +32,6 @@ const ImageContainer = styled(Row)`
   padding: ${md} ${lg};
   justify-content: center;
 `
-const StyledButton = styled(Button)`
-  &.MuiButtonBase-root.MuiButton-root {
-    padding: 0;
-    .MuiButton-label {
-      height: 100%;
-    }
-  }
-`
 
 const InfoContainer = styled(Row)`
   background-color: ${background};
@@ -138,26 +130,19 @@ export const ExportEntriesModal = ({ isOpen, onClose }: ExportEntriesModalProps)
         </InfoContainer>
       </Modal.Body>
       <Modal.Footer withoutBorder>
-        <Row>
+        <Button size="md" variant="outlined" onClick={onClose}>
-          <Button size="md" variant="outlined" onClick={onClose}>
+          Cancel
-            Cancel
+        </Button>
-          </Button>
+        <Button color="primary" size="md" disabled={loading} onClick={error ? () => setDoRetry(true) : handleClose}>
-          <StyledButton
+          {!error ? (
-            color="primary"
+            <StyledCSVLink data={csvData} bom={true} filename={`gnosis-safe-address-book-${date}`} type="link">
-            size="md"
+              {loading && <StyledLoader color="secondaryLight" size="xs" />}
-            disabled={loading}
+              Download
-            onClick={error ? () => setDoRetry(true) : handleClose}
+            </StyledCSVLink>
-          >
+          ) : (
-            {!error ? (
+            'Retry'
-              <StyledCSVLink data={csvData} bom={true} filename={`gnosis-safe-address-book-${date}`} type="link">
+          )}
-                {loading && <StyledLoader color="secondaryLight" size="xs" />}
+        </Button>
-                Download
-              </StyledCSVLink>
-            ) : (
-              'Retry'
-            )}
-          </StyledButton>
-        </Row>
       </Modal.Footer>
     </Modal>
   )

src/routes/safe/components/AddressBook/ImportEntriesModal/index.tsx

@@ -14,7 +14,6 @@ const ImportContainer = styled.div`
   justify-content: center;
   margin: 24px;
   align-items: center;
-  /* width: 200px;*/
   min-height: 100px;
   display: flex;
 `
@@ -102,7 +101,6 @@ const ImportEntriesModal = ({ importEntryModalHandler, isOpen, onClose }: Import
               },
               dropAreaActive: {
                 borderColor: '#008C73',
-                /* borderColor: '${({ theme }) => theme.colors.primary}', */
               },
               dropFile: {
                 width: 200,
@@ -162,7 +160,7 @@ const ImportEntriesModal = ({ importEntryModalHandler, isOpen, onClose }: Import
           )}
         </InfoContainer>
       </Modal.Body>
-      <Modal.Footer>
+      <Modal.Footer withoutBorder>
         <Modal.Footer.Buttons
           cancelButtonProps={{ onClick: () => handleClose() }}
           confirmButtonProps={{

src/routes/safe/components/AddressBook/index.tsx

@@ -11,6 +11,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { styles } from './style'
 
 import { getExplorerInfo, getNetworkId } from 'src/config'
+import ButtonHelper from 'src/components/ButtonHelper'
 import Table from 'src/components/Table'
 import { cellWidth } from 'src/components/Table/TableHead'
 import Block from 'src/components/layout/Block'
@@ -49,17 +50,7 @@ const StyledButton = styled(Button)`
     margin: 0 6px 0 0;
   }
 `
-const UnStyledButton = styled.button`
+
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  outline-color: ${({ theme }) => theme.colors.icon};
-  display: flex;
-  align-items: center;
-`
 const useStyles = makeStyles(styles)
 
 interface AddressBookSelectedEntry extends AddressBookEntry {
@@ -238,7 +229,7 @@ const AddressBookTable = (): ReactElement => {
                     })}
                     <TableCell component="td">
                       <Row align="end" className={classes.actions}>
-                        <UnStyledButton
+                        <ButtonHelper
                           onClick={() => {
                             setSelectedEntry({
                               entry: row,
@@ -253,8 +244,8 @@ const AddressBookTable = (): ReactElement => {
                             tooltip="Edit entry"
                             className={granted ? classes.editEntryButton : classes.editEntryButtonNonOwner}
                           />
-                        </UnStyledButton>
+                        </ButtonHelper>
-                        <UnStyledButton
+                        <ButtonHelper
                           onClick={() => {
                             setSelectedEntry({ entry: row })
                             setDeleteEntryModalOpen(true)
@@ -267,7 +258,7 @@ const AddressBookTable = (): ReactElement => {
                             tooltip="Delete entry"
                             className={granted ? classes.removeEntryButton : classes.removeEntryButtonNonOwner}
                           />
-                        </UnStyledButton>
+                        </ButtonHelper>
                         {granted ? (
                           <StyledButton
                             color="primary"

src/routes/safe/components/AddressBook/style.ts

@@ -24,6 +24,7 @@ export const styles = createStyles({
     justifyContent: 'flex-end',
     visibility: 'hidden',
     minWidth: '100px',
+    gap: md,
   },
   noBorderBottom: {
     '& > td': {
@@ -37,26 +38,23 @@ export const styles = createStyles({
   },
   editEntryButton: {
     cursor: 'pointer',
-    marginBottom: '16px',
+    marginBottom: md,
   },
   editEntryButtonNonOwner: {
     cursor: 'pointer',
   },
   removeEntryButton: {
-    marginLeft: lg,
+    marginRight: md,
-    marginRight: lg,
+    marginBottom: md,
-    marginBottom: '16px',
     cursor: 'pointer',
   },
   removeEntryButtonDisabled: {
-    marginLeft: lg,
+    marginRight: md,
-    marginRight: lg,
+    marginBottom: md,
-    marginBottom: '16px',
     cursor: 'default',
   },
   removeEntryButtonNonOwner: {
-    marginLeft: lg,
+    marginRight: md,
-    marginRight: lg,
     cursor: 'pointer',
   },
   message: {

src/routes/safe/components/Settings/Advanced/ModulesTable.tsx

@@ -1,6 +1,5 @@
-import { Button, EthHashInfo } from '@gnosis.pm/safe-react-components'
+import { Icon, EthHashInfo } from '@gnosis.pm/safe-react-components'
 import TableContainer from '@material-ui/core/TableContainer'
-import styled from 'styled-components'
 import cn from 'classnames'
 import React from 'react'
 import { useSelector } from 'react-redux'
@@ -9,6 +8,7 @@ import { generateColumns, ModuleAddressColumn, MODULES_TABLE_ADDRESS_ID } from '
 import { RemoveModuleModal } from './RemoveModuleModal'
 import { useStyles } from './style'
 
+import ButtonHelper from 'src/components/ButtonHelper'
 import { grantedSelector } from 'src/routes/safe/container/selector'
 import { ModulePair } from 'src/logic/safe/store/models/safe'
 import Table from 'src/components/Table'
@@ -20,14 +20,6 @@ import { getExplorerInfo } from 'src/config'
 const REMOVE_MODULE_BTN_TEST_ID = 'remove-module-btn'
 const MODULES_ROW_TEST_ID = 'owners-row'
 
-const TableActionButton = styled(Button)`
-  background-color: transparent;
-
-  &:hover {
-    background-color: transparent;
-  }
-`
-
 interface ModulesTableProps {
   moduleData: ModuleAddressColumn | null
 }
@@ -94,16 +86,12 @@ export const ModulesTable = ({ moduleData }: ModulesTableProps): React.ReactElem
                       <TableCell component="td">
                         <Row align="end" className={classes.actions}>
                           {granted && (
-                            <TableActionButton
+                            <ButtonHelper
-                              size="md"
-                              iconType="delete"
-                              color="error"
-                              variant="outlined"
                               onClick={() => triggerRemoveSelectedModule(rowElement)}
                               data-testid={REMOVE_MODULE_BTN_TEST_ID}
                             >
-                              {null}
+                              <Icon size="sm" type="delete" color="error" tooltip="Remove module" />
-                            </TableActionButton>
+                            </ButtonHelper>
                           )}
                         </Row>
                       </TableCell>

src/routes/safe/components/Settings/ManageOwners/assets/icons/rename-owner.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
-    <path fill="#001428" fill-rule="nonzero" d="M11.684 2.695a.669.669 0 0 0 0-.94L10.141.195a.652.652 0 0 0-.93 0l-1.215 1.22 2.475 2.5 1.213-1.22zM0 9.502v2.5h2.474l7.297-7.38-2.474-2.5L0 9.502z"/>
-</svg>

src/routes/safe/components/Settings/ManageOwners/assets/icons/replace-owner.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="15" height="12" viewBox="0 0 15 12">
-    <path fill="#001428" fill-rule="nonzero" d="M12.1 12v-1.412H9.278V9.176h2.824V7.765l2.117 2.117L12.101 12zM5.749 0a2.824 2.824 0 1 1 0 5.647 2.824 2.824 0 0 1 0-5.647zm0 7.059c.812 0 1.588.085 2.287.24a4.265 4.265 0 0 0-.635 3.995H.1V9.882c0-1.56 2.528-2.823 5.648-2.823z"/>
-</svg>

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

@@ -1,22 +1,19 @@
 import React, { useState, useEffect, ReactElement } from 'react'
-import { EthHashInfo } from '@gnosis.pm/safe-react-components'
+import { EthHashInfo, Icon } from '@gnosis.pm/safe-react-components'
 import TableCell from '@material-ui/core/TableCell'
 import TableContainer from '@material-ui/core/TableContainer'
 import TableRow from '@material-ui/core/TableRow'
 import cn from 'classnames'
 
-import RemoveOwnerIcon from '../assets/icons/bin.svg'
-
 import { AddOwnerModal } from './AddOwnerModal'
 import { EditOwnerModal } from './EditOwnerModal'
 import { RemoveOwnerModal } from './RemoveOwnerModal'
 import { ReplaceOwnerModal } from './ReplaceOwnerModal'
-import RenameOwnerIcon from './assets/icons/rename-owner.svg'
-import ReplaceOwnerIcon from './assets/icons/replace-owner.svg'
 import { OWNERS_TABLE_ADDRESS_ID, generateColumns, getOwnerData, OwnerData } from './dataFetcher'
 import { useStyles } from './style'
 
 import { getExplorerInfo } from 'src/config'
+import ButtonHelper from 'src/components/ButtonHelper'
 import Table from 'src/components/Table'
 import { cellWidth } from 'src/components/Table/TableHead'
 import Block from 'src/components/layout/Block'
@@ -24,7 +21,6 @@ import Button from 'src/components/layout/Button'
 import Col from 'src/components/layout/Col'
 import Hairline from 'src/components/layout/Hairline'
 import Heading from 'src/components/layout/Heading'
-import Img from 'src/components/layout/Img'
 import Paragraph from 'src/components/layout/Paragraph/index'
 import Row from 'src/components/layout/Row'
 import { useAnalytics, SAFE_NAVIGATION_EVENT } from 'src/utils/googleAnalytics'
@@ -125,30 +121,18 @@ const ManageOwners = ({ granted, owners }: Props): ReactElement => {
                   ))}
                   <TableCell component="td">
                     <Row align="end" className={classes.actions}>
-                      <Img
+                      <ButtonHelper onClick={onShow('EditOwner', row)} data-testid={RENAME_OWNER_BTN_TEST_ID}>
-                        alt="Edit owner"
+                        <Icon size="sm" type="edit" color="icon" tooltip="Edit owner" />
-                        className={classes.editOwnerIcon}
+                      </ButtonHelper>
-                        onClick={onShow('EditOwner', row)}
-                        src={RenameOwnerIcon}
-                        testId={RENAME_OWNER_BTN_TEST_ID}
-                      />
                       {granted && (
                         <>
-                          <Img
+                          <ButtonHelper onClick={onShow('ReplaceOwner', row)} data-testid={REPLACE_OWNER_BTN_TEST_ID}>
-                            alt="Replace owner"
+                            <Icon size="sm" type="replaceOwner" color="icon" tooltip="Replace owner" />
-                            className={classes.replaceOwnerIcon}
+                          </ButtonHelper>
-                            onClick={onShow('ReplaceOwner', row)}
-                            src={ReplaceOwnerIcon}
-                            testId={REPLACE_OWNER_BTN_TEST_ID}
-                          />
                           {ownerData.length > 1 && (
-                            <Img
+                            <ButtonHelper onClick={onShow('RemoveOwner', row)} data-testid={REMOVE_OWNER_BTN_TEST_ID}>
-                              alt="Remove owner"
+                              <Icon size="sm" type="delete" color="error" tooltip="Remove owner" />
-                              className={classes.removeOwnerIcon}
+                            </ButtonHelper>
-                              onClick={onShow('RemoveOwner', row)}
-                              src={RemoveOwnerIcon}
-                              testId={REMOVE_OWNER_BTN_TEST_ID}
-                            />
                           )}
                         </>
                       )}

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

@@ -26,6 +26,7 @@ export const useStyles = makeStyles(
       justifyContent: 'flex-end',
       visibility: 'hidden',
       minWidth: '100px',
+      gap: '16px',
     },
     noBorderBottom: {
       '& > td': {

src/routes/safe/components/Settings/SpendingLimit/LimitsTable/index.tsx

@@ -1,10 +1,10 @@
-import { Button, Text } from '@gnosis.pm/safe-react-components'
+import { Text, Icon } from '@gnosis.pm/safe-react-components'
 import TableContainer from '@material-ui/core/TableContainer'
 import cn from 'classnames'
 import React, { ReactElement, useState } from 'react'
 import { useSelector } from 'react-redux'
-import styled from 'styled-components'
 
+import ButtonHelper from 'src/components/ButtonHelper'
 import Row from 'src/components/layout/Row'
 import { TableCell, TableRow } from 'src/components/layout/Table'
 import Table from 'src/components/Table'
@@ -22,15 +22,6 @@ import {
 } from './dataFetcher'
 import { SpentVsAmount } from './SpentVsAmount'
 
-const TableActionButton = styled(Button)`
-  background-color: transparent;
-  padding: 0;
-
-  &:hover {
-    background-color: transparent;
-  }
-`
-
 interface SpendingLimitTableProps {
   data?: SpendingLimitTable[]
 }
@@ -82,16 +73,9 @@ export const LimitsTable = ({ data }: SpendingLimitTableProps): ReactElement =>
                 <TableCell component="td">
                   <Row align="end" className={classes.actions}>
                     {granted && (
-                      <TableActionButton
+                      <ButtonHelper onClick={() => setSelectedRow(row)} data-testid="remove-limit-btn">
-                        size="md"
+                        <Icon size="sm" type="delete" color="error" tooltip="Remove limit" />
-                        iconType="delete"
+                      </ButtonHelper>
-                        color="error"
-                        variant="outlined"
-                        onClick={() => setSelectedRow(row)}
-                        data-testid="remove-action"
-                      >
-                        {null}
-                      </TableActionButton>
                     )}
                   </Row>
                 </TableCell>

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

@@ -1,4 +1,4 @@
-import { IconText, Loader } from '@gnosis.pm/safe-react-components'
+import { IconText, Loader, Icon } from '@gnosis.pm/safe-react-components'
 import { LoadingContainer } from 'src/components/LoaderContainer'
 import Badge from '@material-ui/core/Badge'
 import { makeStyles } from '@material-ui/core/styles'
@@ -13,14 +13,12 @@ import ManageOwners from './ManageOwners'
 import { RemoveSafeModal } from './RemoveSafeModal'
 import SafeDetails from './SafeDetails'
 import ThresholdSettings from './ThresholdSettings'
-import RemoveSafeIcon from './assets/icons/bin.svg'
 import { styles } from './style'
 
 import Block from 'src/components/layout/Block'
 import ButtonLink from 'src/components/layout/ButtonLink'
 import Col from 'src/components/layout/Col'
 import Hairline from 'src/components/layout/Hairline'
-import Img from 'src/components/layout/Img'
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import Span from 'src/components/layout/Span'
@@ -67,7 +65,7 @@ const Settings: React.FC = () => {
           <>
             <ButtonLink className={classes.removeSafeBtn} color="error" onClick={onShow('RemoveSafe')} size="lg">
               <Span className={classes.links}>Remove Safe</Span>
-              <Img alt="Trash Icon" className={classes.removeSafeIcon} src={RemoveSafeIcon} />
+              <Icon size="sm" type="delete" color="error" tooltip="Remove Safe" />
             </ButtonLink>
             <RemoveSafeModal isOpen={showRemoveSafe} onClose={onHide('RemoveSafe')} />
           </>

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

@@ -127,6 +127,7 @@ export const styles = createStyles({
   },
   links: {
     textDecoration: 'underline',
+    marginRight: '6px',
     '&:hover': {
       cursor: 'pointer',
     },