From b9b239e0e3c98c1dcdb61904b235e907ac2eca2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= Date: Mon, 7 Jun 2021 11:57:36 -0300 Subject: [PATCH] Replace icons and styles on Settings and Address Book (#2388) Co-authored-by: Daniel Sanchez --- src/assets/icons/trash.svg | 1 - .../AppLayout/Sidebar/SafeHeader/index.tsx | 24 ++++------- src/components/ButtonHelper/index.tsx | 28 +++++++++++++ .../SafeOwnersConfirmationsForm/index.tsx | 25 +++++------ .../SafeOwnersConfirmationsForm/style.ts | 2 +- .../AddressBook/ExportEntriesModal/index.tsx | 41 ++++++------------- .../AddressBook/ImportEntriesModal/index.tsx | 4 +- .../safe/components/AddressBook/index.tsx | 21 +++------- .../safe/components/AddressBook/style.ts | 16 ++++---- .../Settings/Advanced/ModulesTable.tsx | 22 +++------- .../assets/icons/rename-owner.svg | 3 -- .../assets/icons/replace-owner.svg | 3 -- .../Settings/ManageOwners/index.tsx | 38 +++++------------ .../components/Settings/ManageOwners/style.ts | 1 + .../SpendingLimit/LimitsTable/index.tsx | 26 +++--------- src/routes/safe/components/Settings/index.tsx | 6 +-- src/routes/safe/components/Settings/style.ts | 1 + 17 files changed, 99 insertions(+), 163 deletions(-) delete mode 100644 src/assets/icons/trash.svg create mode 100644 src/components/ButtonHelper/index.tsx delete mode 100644 src/routes/safe/components/Settings/ManageOwners/assets/icons/rename-owner.svg delete mode 100644 src/routes/safe/components/Settings/ManageOwners/assets/icons/replace-owner.svg diff --git a/src/assets/icons/trash.svg b/src/assets/icons/trash.svg deleted file mode 100644 index 7abd44bf..00000000 --- a/src/assets/icons/trash.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/AppLayout/Sidebar/SafeHeader/index.tsx b/src/components/AppLayout/Sidebar/SafeHeader/index.tsx index fad57d55..617c6c48 100644 --- a/src/components/AppLayout/Sidebar/SafeHeader/index.tsx +++ b/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 = ({ - + - + ) @@ -143,18 +133,18 @@ const SafeHeader = ({ - + - + {/* SafeInfo */} {safeName} - + - + diff --git a/src/components/ButtonHelper/index.tsx b/src/components/ButtonHelper/index.tsx new file mode 100644 index 00000000..897eb275 --- /dev/null +++ b/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 ( + + {children} + + ) +} + +export default ButtonHelper diff --git a/src/routes/open/components/SafeOwnersConfirmationsForm/index.tsx b/src/routes/open/components/SafeOwnersConfirmationsForm/index.tsx index d5a868c1..4b4a7704 100644 --- a/src/routes/open/components/SafeOwnersConfirmationsForm/index.tsx +++ b/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 => { /> - Scan QR { - openQrModal(addressName) - }} - src={QRIcon} - /> - - - {index > 0 && Delete} + openQrModal(addressName)}> + + + {index > 0 && ( + + + + + + )} ) })} diff --git a/src/routes/open/components/SafeOwnersConfirmationsForm/style.ts b/src/routes/open/components/SafeOwnersConfirmationsForm/style.ts index c6c11306..b9319240 100644 --- a/src/routes/open/components/SafeOwnersConfirmationsForm/style.ts +++ b/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', }, diff --git a/src/routes/safe/components/AddressBook/ExportEntriesModal/index.tsx b/src/routes/safe/components/AddressBook/ExportEntriesModal/index.tsx index 32535f6e..7360e853 100644 --- a/src/routes/safe/components/AddressBook/ExportEntriesModal/index.tsx +++ b/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) - - - setDoRetry(true) : handleClose} - > - {!error ? ( - - {loading && } - Download - - ) : ( - 'Retry' - )} - - + + ) diff --git a/src/routes/safe/components/AddressBook/ImportEntriesModal/index.tsx b/src/routes/safe/components/AddressBook/ImportEntriesModal/index.tsx index 94e3308f..7203b8fc 100644 --- a/src/routes/safe/components/AddressBook/ImportEntriesModal/index.tsx +++ b/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 )} - + handleClose() }} confirmButtonProps={{ diff --git a/src/routes/safe/components/AddressBook/index.tsx b/src/routes/safe/components/AddressBook/index.tsx index 5d9dee7b..79b7cf44 100644 --- a/src/routes/safe/components/AddressBook/index.tsx +++ b/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 => { })} - { setSelectedEntry({ entry: row, @@ -253,8 +244,8 @@ const AddressBookTable = (): ReactElement => { tooltip="Edit entry" className={granted ? classes.editEntryButton : classes.editEntryButtonNonOwner} /> - - + { setSelectedEntry({ entry: row }) setDeleteEntryModalOpen(true) @@ -267,7 +258,7 @@ const AddressBookTable = (): ReactElement => { tooltip="Delete entry" className={granted ? classes.removeEntryButton : classes.removeEntryButtonNonOwner} /> - + {granted ? ( td': { @@ -37,26 +38,23 @@ export const styles = createStyles({ }, editEntryButton: { cursor: 'pointer', - marginBottom: '16px', + marginBottom: md, }, editEntryButtonNonOwner: { cursor: 'pointer', }, removeEntryButton: { - marginLeft: lg, - marginRight: lg, - marginBottom: '16px', + marginRight: md, + marginBottom: md, cursor: 'pointer', }, removeEntryButtonDisabled: { - marginLeft: lg, - marginRight: lg, - marginBottom: '16px', + marginRight: md, + marginBottom: md, cursor: 'default', }, removeEntryButtonNonOwner: { - marginLeft: lg, - marginRight: lg, + marginRight: md, cursor: 'pointer', }, message: { diff --git a/src/routes/safe/components/Settings/Advanced/ModulesTable.tsx b/src/routes/safe/components/Settings/Advanced/ModulesTable.tsx index fb01d33c..d37f6e42 100644 --- a/src/routes/safe/components/Settings/Advanced/ModulesTable.tsx +++ b/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 {granted && ( - triggerRemoveSelectedModule(rowElement)} data-testid={REMOVE_MODULE_BTN_TEST_ID} > - {null} - + + )} diff --git a/src/routes/safe/components/Settings/ManageOwners/assets/icons/rename-owner.svg b/src/routes/safe/components/Settings/ManageOwners/assets/icons/rename-owner.svg deleted file mode 100644 index ba8ed544..00000000 --- a/src/routes/safe/components/Settings/ManageOwners/assets/icons/rename-owner.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/routes/safe/components/Settings/ManageOwners/assets/icons/replace-owner.svg b/src/routes/safe/components/Settings/ManageOwners/assets/icons/replace-owner.svg deleted file mode 100644 index da8479bf..00000000 --- a/src/routes/safe/components/Settings/ManageOwners/assets/icons/replace-owner.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/routes/safe/components/Settings/ManageOwners/index.tsx b/src/routes/safe/components/Settings/ManageOwners/index.tsx index 11a57934..b75d9088 100644 --- a/src/routes/safe/components/Settings/ManageOwners/index.tsx +++ b/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 => { ))} - Edit owner + + + {granted && ( <> - Replace owner + + + {ownerData.length > 1 && ( - Remove owner + + + )} )} diff --git a/src/routes/safe/components/Settings/ManageOwners/style.ts b/src/routes/safe/components/Settings/ManageOwners/style.ts index bf2e2bb6..1184330b 100644 --- a/src/routes/safe/components/Settings/ManageOwners/style.ts +++ b/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': { diff --git a/src/routes/safe/components/Settings/SpendingLimit/LimitsTable/index.tsx b/src/routes/safe/components/Settings/SpendingLimit/LimitsTable/index.tsx index c5d8ee2e..5a6f9fd6 100644 --- a/src/routes/safe/components/Settings/SpendingLimit/LimitsTable/index.tsx +++ b/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 => {granted && ( - setSelectedRow(row)} - data-testid="remove-action" - > - {null} - + setSelectedRow(row)} data-testid="remove-limit-btn"> + + )} diff --git a/src/routes/safe/components/Settings/index.tsx b/src/routes/safe/components/Settings/index.tsx index 2b311540..d91f1970 100644 --- a/src/routes/safe/components/Settings/index.tsx +++ b/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 = () => { <> Remove Safe - Trash Icon + diff --git a/src/routes/safe/components/Settings/style.ts b/src/routes/safe/components/Settings/style.ts index 14019764..7ee0e0b9 100644 --- a/src/routes/safe/components/Settings/style.ts +++ b/src/routes/safe/components/Settings/style.ts @@ -127,6 +127,7 @@ export const styles = createStyles({ }, links: { textDecoration: 'underline', + marginRight: '6px', '&:hover': { cursor: 'pointer', },