From aa35dfd4c8ef9ae05a00d24844d7a0fac4658e13 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Fri, 10 Jan 2025 14:29:39 +0100
Subject: [PATCH] Refactor: less css in tx summary

---
 .../transactions/TxSummary/index.tsx          | 82 ++++---------------
 .../transactions/TxSummary/styles.module.css  |  2 +
 2 files changed, 19 insertions(+), 65 deletions(-)

diff --git a/apps/web/src/components/transactions/TxSummary/index.tsx b/apps/web/src/components/transactions/TxSummary/index.tsx
index a29e92db02..dcfe22bdb8 100644
--- a/apps/web/src/components/transactions/TxSummary/index.tsx
+++ b/apps/web/src/components/transactions/TxSummary/index.tsx
@@ -50,57 +50,31 @@ const TxSummary = ({ item, isConflictGroup, isBulkGroup }: TxSummaryProps): Reac
       id={tx.id}
     >
       {nonce !== undefined && !isConflictGroup && !isBulkGroup && (
-        <Box
-          data-testid="nonce"
-          className={css.nonce}
-          sx={{
-            gridArea: 'nonce',
-          }}
-        >
+        <Box data-testid="nonce" className={css.nonce} gridArea="nonce">
           {nonce}
         </Box>
       )}
+
       {(isImitationTransaction || !isTrusted) && (
-        <Box
-          data-testid="warning"
-          sx={{
-            gridArea: 'nonce',
-          }}
-        >
+        <Box data-testid="warning" gridArea="nonce">
           <MaliciousTxWarning withTooltip={!isImitationTransaction} />
         </Box>
       )}
-      <Box
-        data-testid="tx-type"
-        sx={{
-          gridArea: 'type',
-        }}
-      >
+
+      <Box data-testid="tx-type" gridArea="type">
         <TxType tx={tx} />
       </Box>
-      <Box
-        data-testid="tx-info"
-        sx={{
-          gridArea: 'info',
-        }}
-      >
+
+      <Box data-testid="tx-info" gridArea="info">
         <TxInfo info={tx.txInfo} />
       </Box>
-      <Box
-        data-testid="tx-date"
-        className={css.date}
-        sx={{
-          gridArea: 'date',
-        }}
-      >
+
+      <Box data-testid="tx-date" className={css.date} gridArea="date">
         <DateTime value={tx.timestamp} />
       </Box>
+
       {isQueue && executionInfo && (
-        <Box
-          sx={{
-            gridArea: 'confirmations',
-          }}
-        >
+        <Box gridArea="confirmations">
           {executionInfo.confirmationsSubmitted > 0 || isPending ? (
             <TxConfirmations
               submittedConfirmations={executionInfo.confirmationsSubmitted}
@@ -111,37 +85,15 @@ const TxSummary = ({ item, isConflictGroup, isBulkGroup }: TxSummaryProps): Reac
           )}
         </Box>
       )}
-      {isQueue && expiredSwap ? (
-        <Box
-          className={css.status}
-          sx={{
-            gridArea: 'status',
-            justifyContent: 'flex-end',
-            display: 'flex',
-          }}
-        >
-          <StatusLabel status="expired" />
-        </Box>
-      ) : !isQueue || isPending ? (
-        <Box
-          className={css.status}
-          sx={{
-            gridArea: 'status',
-            justifyContent: 'flex-end',
-            display: 'flex',
-          }}
-        >
-          <TxStatusLabel tx={tx} />
+
+      {(!isQueue || expiredSwap || isPending) && (
+        <Box className={css.status} gridArea="status">
+          {isQueue && expiredSwap ? <StatusLabel status="expired" /> : <TxStatusLabel tx={tx} />}
         </Box>
-      ) : (
-        ''
       )}
+
       {isQueue && !expiredSwap && (
-        <Box
-          sx={{
-            gridArea: 'actions',
-          }}
-        >
+        <Box gridArea="actions">
           <QueueActions tx={tx} />
         </Box>
       )}
diff --git a/apps/web/src/components/transactions/TxSummary/styles.module.css b/apps/web/src/components/transactions/TxSummary/styles.module.css
index bba12e11e3..122d2ab7c2 100644
--- a/apps/web/src/components/transactions/TxSummary/styles.module.css
+++ b/apps/web/src/components/transactions/TxSummary/styles.module.css
@@ -56,6 +56,8 @@
 
 .gridContainer .status {
   margin-right: var(--space-3);
+  display: flex;
+  justify-content: flex-end;
 }
 
 .date {