fix: add titles

safe-global · Jun 22, 2023 · 1e77815 · 1e77815
1 parent c9aac5b
commit 1e77815
Showing 1 changed file with 36 additions and 15 deletions.
diff --git a/src/components/tx-flow/flows/AddOwner/ReviewOwner.tsx b/src/components/tx-flow/flows/AddOwner/ReviewOwner.tsx
@@ -55,34 +55,55 @@ export const ReviewOwner = ({ params }: { params: AddOwnerFlowProps | ReplaceOwn
 
   return (
     <SignOrExecuteForm onSubmit={addAddressBookEntryAndSubmit}>
-      <Paper sx={{ backgroundColor: ({ palette }) => palette.background.main, p: '12px' }}>
-        <EthHashInfo name={addressBook[safeAddress]} address={safeAddress} shortAddress={false} />
-      </Paper>
+      <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 the owner
           </Box>
 
-          <Paper sx={{ backgroundColor: ({ palette }) => palette.warning.background, p: '12px' }}>
-            <EthHashInfo
-              name={params.removedOwner.name}
-              address={params.removedOwner.address}
-              shortAddress={false}
-              showCopyButton
-              hasExplorer
-            />
-          </Paper>
+          <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>
-      <Paper sx={{ backgroundColor: ({ palette }) => palette.info.background, p: '12px' }}>
-        <EthHashInfo name={newOwner.name} address={newOwner.address} shortAddress={false} showCopyButton hasExplorer />
-      </Paper>
+      <div>
+        <Typography variant="body2" color="text.secondary" mb={0.5}>
+          New owner
+        </Typography>
+        <Paper sx={{ backgroundColor: ({ palette }) => palette.info.background, p: '12px' }}>
+          <EthHashInfo
+            name={newOwner.name}
+            address={newOwner.address}
+            shortAddress={false}
+            showCopyButton
+            hasExplorer
+          />
+        </Paper>
+      </div>
       <Divider className={commonCss.nestedDivider} />
       <Box>
         <Typography variant="body2">Any transaction requires the confirmation of:</Typography>