status-im
/
safe-react
mirror of https://github.com/status-im/safe-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Co-authored-by: Daniel Sanchez <daniel.sanchez@gnosis.pm>
This commit is contained in:
Agustín Longoni 2021-06-07 11:57:36 -03:00 committed by GitHub
parent 5165653f71
commit b9b239e0e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 99 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/icons/trash.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

24
src/components/AppLayout/Sidebar/SafeHeader/index.tsx
View File

@ -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>

28
src/components/ButtonHelper/index.tsx Normal file
View File

@ -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

25
src/routes/open/components/SafeOwnersConfirmationsForm/index.tsx
View File

@ -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
alt="Scan QR"
height={20}
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} />}
<ButtonHelper onClick={() => openQrModal(addressName)}>
<Icon size="sm" type="qrCode" color="icon" tooltip="Scan QR" />
</ButtonHelper>
</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>
)
})}

2
src/routes/open/components/SafeOwnersConfirmationsForm/style.ts
View File

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

41
src/routes/safe/components/AddressBook/ExportEntriesModal/index.tsx
View File

@ -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}>
Cancel
</Button>
<StyledButton
color="primary"
size="md"
disabled={loading}
onClick={error ? () => setDoRetry(true) : handleClose}
>
{!error ? (
<StyledCSVLink data={csvData} bom={true} filename={`gnosis-safe-address-book-${date}`} type="link">
{loading && <StyledLoader color="secondaryLight" size="xs" />}
Download
</StyledCSVLink>
) : (
'Retry'
)}
</StyledButton>
</Row>
<Button size="md" variant="outlined" onClick={onClose}>
Cancel
</Button>
<Button color="primary" size="md" disabled={loading} onClick={error ? () => setDoRetry(true) : handleClose}>
{!error ? (
<StyledCSVLink data={csvData} bom={true} filename={`gnosis-safe-address-book-${date}`} type="link">
{loading && <StyledLoader color="secondaryLight" size="xs" />}
Download
</StyledCSVLink>
) : (
'Retry'
)}
</Button>
</Modal.Footer>
</Modal>
)

4
src/routes/safe/components/AddressBook/ImportEntriesModal/index.tsx
View File

@ -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={{

21
src/routes/safe/components/AddressBook/index.tsx
View File

@ -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>
<UnStyledButton
</ButtonHelper>
<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"

16
src/routes/safe/components/AddressBook/style.ts
View File

@ -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: 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: {

22
src/routes/safe/components/Settings/Advanced/ModulesTable.tsx
View File

@ -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
size="md"
iconType="delete"
color="error"
variant="outlined"
<ButtonHelper
onClick={() => triggerRemoveSelectedModule(rowElement)}
data-testid={REMOVE_MODULE_BTN_TEST_ID}
>
{null}
</TableActionButton>
<Icon size="sm" type="delete" color="error" tooltip="Remove module" />
</ButtonHelper>
)}
</Row>
</TableCell>

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

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 291 B

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

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 370 B

38
src/routes/safe/components/Settings/ManageOwners/index.tsx
View File

@ -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
alt="Edit owner"
className={classes.editOwnerIcon}
onClick={onShow('EditOwner', row)}
src={RenameOwnerIcon}
testId={RENAME_OWNER_BTN_TEST_ID}
/>
<ButtonHelper onClick={onShow('EditOwner', row)} data-testid={RENAME_OWNER_BTN_TEST_ID}>
<Icon size="sm" type="edit" color="icon" tooltip="Edit owner" />
</ButtonHelper>
{granted && (
<>
<Img
alt="Replace owner"
className={classes.replaceOwnerIcon}
onClick={onShow('ReplaceOwner', row)}
src={ReplaceOwnerIcon}
testId={REPLACE_OWNER_BTN_TEST_ID}
/>
<ButtonHelper onClick={onShow('ReplaceOwner', row)} data-testid={REPLACE_OWNER_BTN_TEST_ID}>
<Icon size="sm" type="replaceOwner" color="icon" tooltip="Replace owner" />
</ButtonHelper>
{ownerData.length > 1 && (
<Img
alt="Remove owner"
className={classes.removeOwnerIcon}
onClick={onShow('RemoveOwner', row)}
src={RemoveOwnerIcon}
testId={REMOVE_OWNER_BTN_TEST_ID}
/>
<ButtonHelper onClick={onShow('RemoveOwner', row)} data-testid={REMOVE_OWNER_BTN_TEST_ID}>
<Icon size="sm" type="delete" color="error" tooltip="Remove owner" />
</ButtonHelper>
)}
</>
)}

1
src/routes/safe/components/Settings/ManageOwners/style.ts
View File

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

26
src/routes/safe/components/Settings/SpendingLimit/LimitsTable/index.tsx
View File

@ -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
size="md"
iconType="delete"
color="error"
variant="outlined"
onClick={() => setSelectedRow(row)}
data-testid="remove-action"
>
{null}
</TableActionButton>
<ButtonHelper onClick={() => setSelectedRow(row)} data-testid="remove-limit-btn">
<Icon size="sm" type="delete" color="error" tooltip="Remove limit" />
</ButtonHelper>
)}
</Row>
</TableCell>

6
src/routes/safe/components/Settings/index.tsx
View File

@ -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')} />
</>

1
src/routes/safe/components/Settings/style.ts
View File

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