From e0fec7212beaadb1da665c906d9d7755904ae548 Mon Sep 17 00:00:00 2001
From: Usame Algan <usame@safe.global>
Date: Wed, 5 Jul 2023 16:16:10 +0200
Subject: [PATCH] fix: Adjust decoded tx ui

---
 .../TxData/DecodedData/Multisend/index.tsx        | 13 ++++++++-----
 .../DecodedData/Multisend/styles.module.css       | 15 +++++++++++++++
 .../TxData/DecodedData/SingleTxDecoded/index.tsx  |  2 +-
 .../tx-flow/common/TxStatusWidget/index.tsx       |  2 +-
 .../common/TxStatusWidget/styles.module.css       |  4 ++--
 5 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/components/transactions/TxDetails/TxData/DecodedData/Multisend/index.tsx b/src/components/transactions/TxDetails/TxData/DecodedData/Multisend/index.tsx
index b592b371c6..add01e86ad 100644
--- a/src/components/transactions/TxDetails/TxData/DecodedData/Multisend/index.tsx
+++ b/src/components/transactions/TxDetails/TxData/DecodedData/Multisend/index.tsx
@@ -7,6 +7,7 @@ import type { AccordionProps } from '@mui/material/Accordion/Accordion'
 import SingleTxDecoded from '@/components/transactions/TxDetails/TxData/DecodedData/SingleTxDecoded'
 import { Box, Button, Divider, Stack } from '@mui/material'
 import css from './styles.module.css'
+import classnames from 'classnames'
 
 type MultisendProps = {
   txData?: TransactionData
@@ -17,16 +18,18 @@ type MultisendProps = {
 const MultisendActionsHeader = ({
   setOpen,
   amount,
+  compact = false,
 }: {
   setOpen: Dispatch<SetStateAction<Record<number, boolean> | undefined>>
   amount: number
+  compact?: boolean
 }) => {
   const onClickAll = (expanded: boolean) => () => {
     setOpen(Array(amount).fill(expanded))
   }
 
   return (
-    <div className={css.actionsHeader}>
+    <div className={classnames(css.actionsHeader, { [css.compactHeader]: compact })}>
       All actions
       <Stack direction="row" divider={<Divider className={css.divider} />}>
         <Button onClick={onClickAll(true)} variant="text">
@@ -78,9 +81,9 @@ export const Multisend = ({
 
   return (
     <>
-      <MultisendActionsHeader setOpen={setOpenMap} amount={multiSendTransactions.length} />
+      <MultisendActionsHeader setOpen={setOpenMap} amount={multiSendTransactions.length} compact={compact} />
 
-      <Box display="flex" flexDirection="column" gap={compact ? 1 : undefined}>
+      <Box display="flex" flexDirection="column" className={compact ? css.compact : ''}>
         {multiSendTransactions.map(({ dataDecoded, data, value, to, operation }, index) => {
           const onChange: AccordionProps['onChange'] = (_, expanded) => {
             setOpenMap((prev) => ({
@@ -101,8 +104,8 @@ export const Multisend = ({
               }}
               txData={txData}
               showDelegateCallWarning={showDelegateCallWarning}
-              actionTitle={`Action ${index + 1}`}
-              variant="elevation"
+              actionTitle={`${index + 1}`}
+              variant={compact ? 'outlined' : 'elevation'}
               expanded={openMap?.[index] ?? false}
               onChange={onChange}
             />
diff --git a/src/components/transactions/TxDetails/TxData/DecodedData/Multisend/styles.module.css b/src/components/transactions/TxDetails/TxData/DecodedData/Multisend/styles.module.css
index 4d10e8bcdf..866c7c672f 100644
--- a/src/components/transactions/TxDetails/TxData/DecodedData/Multisend/styles.module.css
+++ b/src/components/transactions/TxDetails/TxData/DecodedData/Multisend/styles.module.css
@@ -8,6 +8,10 @@
   align-items: center;
 }
 
+.compactHeader {
+  border: 0;
+}
+
 .actionsHeader button {
   padding-left: 18px;
   padding-right: 18px;
@@ -18,3 +22,14 @@
   margin-bottom: 14px;
   border: 1px solid var(--color-border-light);
 }
+
+.compact > div:first-child {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.compact > div ~ div {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  margin-top: -1px !important;
+}
diff --git a/src/components/transactions/TxDetails/TxData/DecodedData/SingleTxDecoded/index.tsx b/src/components/transactions/TxDetails/TxData/DecodedData/SingleTxDecoded/index.tsx
index 3ab4eaae20..2f2b0eafde 100644
--- a/src/components/transactions/TxDetails/TxData/DecodedData/SingleTxDecoded/index.tsx
+++ b/src/components/transactions/TxDetails/TxData/DecodedData/SingleTxDecoded/index.tsx
@@ -57,7 +57,7 @@ export const SingleTxDecoded = ({
     <Accordion variant={variant} expanded={expanded} onChange={onChange}>
       <AccordionSummary expandIcon={<ExpandMoreIcon />}>
         <div className={css.summary}>
-          <CodeIcon />
+          <CodeIcon color="border" fontSize="small" />
           <Typography>{actionTitle}</Typography>
           <Typography ml="8px">
             <b>{method}</b>
diff --git a/src/components/tx-flow/common/TxStatusWidget/index.tsx b/src/components/tx-flow/common/TxStatusWidget/index.tsx
index 4b96fe1c5d..0b1a183967 100644
--- a/src/components/tx-flow/common/TxStatusWidget/index.tsx
+++ b/src/components/tx-flow/common/TxStatusWidget/index.tsx
@@ -44,7 +44,7 @@ const TxStatusWidget = ({
   return (
     <Paper>
       <div className={css.header}>
-        <SafeLogo width={32} height={32} />
+        <SafeLogo width={32} height={32} className={css.logo} />
         <Typography variant="h6" fontWeight="700" className={css.title}>
           Transaction status
         </Typography>
diff --git a/src/components/tx-flow/common/TxStatusWidget/styles.module.css b/src/components/tx-flow/common/TxStatusWidget/styles.module.css
index 7698615415..89000d2395 100644
--- a/src/components/tx-flow/common/TxStatusWidget/styles.module.css
+++ b/src/components/tx-flow/common/TxStatusWidget/styles.module.css
@@ -71,8 +71,8 @@
   }
 
   .logo {
-    width: 16px;
-    height: 16px;
+    width: 24px;
+    height: 24px;
     margin-left: 16px;
   }