fix: update owner management styles (#2174)

safe-global · Jun 27, 2023 · df5730d · df5730d
1 parent 367eea6
commit df5730d
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 96 deletions.
diff --git a/public/images/common/minus.svg b/public/images/common/minus.svg
diff --git a/public/images/settings/setup/rectangle.svg b/public/images/settings/setup/rectangle.svg
diff --git a/src/components/tx-flow/flows/AddOwner/ReviewOwner.tsx b/src/components/tx-flow/flows/AddOwner/ReviewOwner.tsx
@@ -2,7 +2,6 @@ import { useContext, useEffect } from 'react'
 import { Typography, Divider, Box, SvgIcon, Paper } from '@mui/material'
 
 import SignOrExecuteForm from '@/components/tx/SignOrExecuteForm'
-import useAddressBook from '@/hooks/useAddressBook'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { trackEvent, SETTINGS_EVENTS } from '@/services/analytics'
 import { createSwapOwnerTx, createAddOwnerTx } from '@/services/tx/tx-sender'
@@ -18,9 +17,8 @@ import commonCss from '@/components/tx-flow/common/styles.module.css'
 
 export const ReviewOwner = ({ params }: { params: AddOwnerFlowProps | ReplaceOwnerFlowProps }) => {
   const dispatch = useAppDispatch()
-  const addressBook = useAddressBook()
   const { setSafeTx, setSafeTxError } = useContext(SafeTxContext)
-  const { safe, safeAddress } = useSafeInfo()
+  const { safe } = useSafeInfo()
   const { chainId } = safe
   const { newOwner, removedOwner, threshold } = params
 
@@ -55,55 +53,28 @@ export const ReviewOwner = ({ params }: { params: AddOwnerFlowProps | ReplaceOwn
 
   return (
     <SignOrExecuteForm onSubmit={addAddressBookEntryAndSubmit}>
-      <div>
-        <Typography variant="body2" color="text.secondary" mb={0.5}>
-          Selected Safe Account
-        </Typography>
-        <Paper sx={{ backgroundColor: ({ palette }) => palette.background.main, p: '12px' }}>
-          <EthHashInfo name={addressBook[safeAddress]} address={safeAddress} shortAddress={false} />
-        </Paper>
-      </div>
       {params.removedOwner && (
-        <>
-          <Box display="flex" alignItems="center" gap={2} mx="auto">
-            <SvgIcon component={MinusIcon} inheritViewBox fontSize="small" />
-            Remove owner
-          </Box>
-
-          <div>
-            <Typography variant="body2" color="text.secondary" mb={0.5}>
-              Previous owner
-            </Typography>
-            <Paper sx={{ backgroundColor: ({ palette }) => palette.warning.background, p: '12px' }}>
-              <EthHashInfo
-                name={params.removedOwner.name}
-                address={params.removedOwner.address}
-                shortAddress={false}
-                showCopyButton
-                hasExplorer
-              />
-            </Paper>
-          </div>
-        </>
-      )}
-      <Box display="flex" alignItems="center" gap={2} mx="auto">
-        <SvgIcon component={PlusIcon} inheritViewBox fontSize="small" />
-        Add new owner
-      </Box>
-      <div>
-        <Typography variant="body2" color="text.secondary" mb={0.5}>
-          New owner
-        </Typography>
-        <Paper sx={{ backgroundColor: ({ palette }) => palette.info.background, p: '12px' }}>
+        <Paper sx={{ backgroundColor: ({ palette }) => palette.warning.background, p: 2 }}>
+          <Typography color="text.secondary" mb={2} display="flex" alignItems="center">
+            <SvgIcon component={MinusIcon} inheritViewBox fontSize="small" sx={{ mr: 1 }} />
+            Previous owner
+          </Typography>
           <EthHashInfo
-            name={newOwner.name}
-            address={newOwner.address}
+            name={params.removedOwner.name}
+            address={params.removedOwner.address}
             shortAddress={false}
             showCopyButton
             hasExplorer
           />
         </Paper>
-      </div>
+      )}
+      <Paper sx={{ backgroundColor: ({ palette }) => palette.success.background, p: 2 }}>
+        <Typography color="text.secondary" mb={2} display="flex" alignItems="center">
+          <SvgIcon component={PlusIcon} inheritViewBox fontSize="small" sx={{ mr: 1 }} />
+          New owner
+        </Typography>
+        <EthHashInfo name={newOwner.name} address={newOwner.address} shortAddress={false} showCopyButton hasExplorer />
+      </Paper>
       <Divider className={commonCss.nestedDivider} />
       <Box>
         <Typography variant="body2">Any transaction requires the confirmation of:</Typography>

diff --git a/src/components/tx-flow/flows/RemoveOwner/ReviewRemoveOwner.tsx b/src/components/tx-flow/flows/RemoveOwner/ReviewRemoveOwner.tsx
@@ -8,12 +8,11 @@ import useAddressBook from '@/hooks/useAddressBook'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { trackEvent, SETTINGS_EVENTS } from '@/services/analytics'
 import { createRemoveOwnerTx } from '@/services/tx/tx-sender'
-import RectangleIcon from '@/public/images/settings/setup/rectangle.svg'
+import MinusIcon from '@/public/images/common/minus.svg'
 import { SafeTxContext } from '../../SafeTxProvider'
 import type { RemoveOwnerFlowProps } from '.'
 
 import commonCss from '@/components/tx-flow/common/styles.module.css'
-import css from './styles.module.css'
 
 export const ReviewRemoveOwner = ({ params }: { params: RemoveOwnerFlowProps }): ReactElement => {
   const addressBook = useAddressBook()
@@ -34,40 +33,19 @@ export const ReviewRemoveOwner = ({ params }: { params: RemoveOwnerFlowProps }):
 
   return (
     <SignOrExecuteForm onSubmit={onFormSubmit}>
-      <div className={css.addresses}>
-        <div>
-          <Typography variant="body2" color="text.secondary" mb={0.5}>
-            Selected Safe Account
-          </Typography>
-          <Paper sx={{ backgroundColor: ({ palette }) => palette.background.main }} className={css.address}>
-            <EthHashInfo
-              address={safeAddress}
-              name={addressBook[safeAddress]}
-              shortAddress={false}
-              showCopyButton
-              hasExplorer
-            />
-          </Paper>
-        </div>
-        <div className={css.action}>
-          <SvgIcon component={RectangleIcon} inheritViewBox fontSize="small" />
-          Remove the owner
-        </div>
-        <div>
-          <Typography variant="body2" color="text.secondary" mb={0.5}>
-            Selected owner
-          </Typography>
-          <Paper sx={{ backgroundColor: ({ palette }) => palette.warning.background }} className={css.address}>
-            <EthHashInfo
-              address={removedOwner.address}
-              name={addressBook[removedOwner.address]}
-              shortAddress={false}
-              showCopyButton
-              hasExplorer
-            />
-          </Paper>
-        </div>
-      </div>
+      <Paper sx={{ backgroundColor: ({ palette }) => palette.warning.background, p: 2 }}>
+        <Typography color="text.secondary" mb={2} display="flex" alignItems="center">
+          <SvgIcon component={MinusIcon} inheritViewBox fontSize="small" sx={{ mr: 1 }} />
+          Selected owner
+        </Typography>
+        <EthHashInfo
+          address={removedOwner.address}
+          name={addressBook[removedOwner.address]}
+          shortAddress={false}
+          showCopyButton
+          hasExplorer
+        />
+      </Paper>
       <Divider className={commonCss.nestedDivider} />
       <Box m={1}>
         <Typography variant="body2" color="text.secondary" mb={0.5}>

diff --git a/src/components/tx-flow/flows/RemoveOwner/styles.module.css b/src/components/tx-flow/flows/RemoveOwner/styles.module.css
@@ -1,17 +1,6 @@
-.addresses {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  margin-top: var(--space-1);
-}
-
 .action {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 20px;
 }
-
-.address {
-  padding: 13px var(--space-2);
-}