diff --git a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/index.jsx b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/index.jsx index e573fba9..13bb9c83 100644 --- a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/index.jsx +++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/index.jsx @@ -5,7 +5,8 @@ import { List } from 'immutable' import { withStyles } from '@material-ui/core/styles' import Close from '@material-ui/icons/Close' import IconButton from '@material-ui/core/IconButton' -import OpenInNew from '@material-ui/icons/OpenInNew' +import EtherscanBtn from '~/components/EtherscanBtn' +import CopyBtn from '~/components/CopyBtn' import Paragraph from '~/components/layout/Paragraph' import Row from '~/components/layout/Row' import GnoForm from '~/components/forms/GnoForm' @@ -17,24 +18,16 @@ import Hairline from '~/components/layout/Hairline' import Field from '~/components/forms/Field' import TextField from '~/components/forms/TextField' import Identicon from '~/components/Identicon' -import Link from '~/components/layout/Link' -import { getEtherScanLink } from '~/logic/wallets/getWeb3' import { type Owner } from '~/routes/safe/store/models/owner' import { composeValidators, required, minMaxLength, uniqueAddress, } from '~/components/forms/validator' import { styles } from './style' -import { secondary } from '~/theme/variables' export const REPLACE_OWNER_NAME_INPUT_TEST_ID = 'replace-owner-name-input' export const REPLACE_OWNER_ADDRESS_INPUT_TEST_ID = 'replace-owner-address-testid' export const REPLACE_OWNER_NEXT_BTN_TEST_ID = 'replace-owner-next-btn' -const openIconStyle = { - height: '16px', - color: secondary, -} - const formMutators = { setOwnerAddress: (args, state, utils) => { utils.changeValue(state, 'ownerAddress', () => args[0]) @@ -96,16 +89,11 @@ const OwnerForm = ({ {ownerName} - + {ownerAddress} - - - + + diff --git a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/style.js b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/style.js index 9a0e2ce3..ada4bbaf 100644 --- a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/style.js +++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/style.js @@ -16,6 +16,9 @@ export const styles = () => ({ marginLeft: '20px', lineHeight: 'normal', }, + address: { + marginRight: sm, + }, manage: { fontSize: '24px', }, diff --git a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.jsx b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.jsx index 07ab5583..f15e5183 100644 --- a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.jsx +++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.jsx @@ -3,11 +3,11 @@ import React from 'react' import { List } from 'immutable' import classNames from 'classnames' import { withStyles } from '@material-ui/core/styles' -import OpenInNew from '@material-ui/icons/OpenInNew' import Close from '@material-ui/icons/Close' import IconButton from '@material-ui/core/IconButton' +import EtherscanBtn from '~/components/EtherscanBtn' +import CopyBtn from '~/components/CopyBtn' import Identicon from '~/components/Identicon' -import Link from '~/components/layout/Link' import Paragraph from '~/components/layout/Paragraph' import Row from '~/components/layout/Row' import Col from '~/components/layout/Col' @@ -15,17 +15,10 @@ import Button from '~/components/layout/Button' import Block from '~/components/layout/Block' import Hairline from '~/components/layout/Hairline' import type { Owner } from '~/routes/safe/store/models/owner' -import { getEtherScanLink } from '~/logic/wallets/getWeb3' -import { secondary } from '~/theme/variables' import { styles } from './style' export const REPLACE_OWNER_SUBMIT_BTN_TEST_ID = 'replace-owner-submit-btn' -const openIconStyle = { - height: '16px', - color: secondary, -} - type Props = { onClose: () => void, classes: Object, @@ -50,165 +43,150 @@ const ReviewRemoveOwner = ({ onClickBack, threshold, onSubmit, -}: Props) => { - const handleSubmit = () => { - onSubmit() - } - - return ( - <> - - +}: Props) => ( + <> + + Replace owner - - 2 of 2 - - - - - - - - - - - - Details - - - - - Safe name - - - {safeName} - - - - - Any transaction requires the confirmation of: - - - {`${threshold} out of ${owners.size} owner(s)`} - - - - - - + + 2 of 2 + + + + + + + + + + - {owners.size} - {' '} - Safe owner(s) + Details - - - {owners.map( - (owner) => owner.address !== ownerAddress && ( - - - - - - - - - {owner.name} + + + + Safe name + + + {safeName} + + + + + Any transaction requires the confirmation of: + + + {`${threshold} out of ${owners.size} owner(s)`} + + + + + + + + {`${owners.size} Safe owner(s)`} + + + + {owners.map( + (owner) => owner.address !== ownerAddress && ( + + + + + + + + + {owner.name} + + + + {owner.address} - - - {owner.address} - - - - - + + - - - - - ), - )} - - + + + + + + ), + )} + + REMOVING OWNER ↓ - - - - - - - - - - - {ownerName} + + + + + + + + + + + {ownerName} + + + + {ownerAddress} - - - {ownerAddress} - - - - - + + - - - - + + + + + ADDING NEW OWNER ↓ - - - - - - - - - - - {values.ownerName} + + + + + + + + + + + {values.ownerName} + + + + {values.ownerAddress} - - - {values.ownerAddress} - - - - - + + - - - - - - - - - - + + + + + - - ) -} + + + + + + + +) export default withStyles(styles)(ReviewRemoveOwner) diff --git a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.js b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.js index 6c3ccc01..20d796e5 100644 --- a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.js +++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.js @@ -22,6 +22,9 @@ export const styles = () => ({ manage: { fontSize: '24px', }, + address: { + marginRight: sm, + }, closeIcon: { height: '35px', width: '35px',