From 9eb198f3e8a59f5365e7ba877a5321649adee881 Mon Sep 17 00:00:00 2001
From: iamacook <aaron@safe.global>
Date: Wed, 26 Jul 2023 19:11:55 +0200
Subject: [PATCH] fix: centralise flow + reduce success screen width

---
 .../common/TxModalDialog/styles.module.css    |  5 ++
 .../tx-flow/common/TxLayout/index.tsx         | 48 ++++++++++---------
 .../tx-flow/common/TxLayout/styles.module.css |  9 +++-
 .../tx-flow/common/TxStatusWidget/index.tsx   |  4 +-
 .../common/TxStatusWidget/styles.module.css   | 13 +++--
 src/components/tx-flow/flows/NewTx/index.tsx  |  2 +-
 .../tx-flow/flows/SuccessScreen/index.tsx     |  3 +-
 7 files changed, 49 insertions(+), 35 deletions(-)

diff --git a/src/components/common/TxModalDialog/styles.module.css b/src/components/common/TxModalDialog/styles.module.css
index 30ad5e0157..cc5941f166 100644
--- a/src/components/common/TxModalDialog/styles.module.css
+++ b/src/components/common/TxModalDialog/styles.module.css
@@ -38,6 +38,7 @@
 .close {
   color: var(--color-border-main);
   padding: var(--space-1);
+  background-color: var(--color-border-light);
 }
 
 .paper {
@@ -76,6 +77,10 @@
     background-color: var(--color-background-paper);
   }
 
+  .close {
+    background-color: unset;
+  }
+
   .close svg {
     font-size: 1.5rem;
   }
diff --git a/src/components/tx-flow/common/TxLayout/index.tsx b/src/components/tx-flow/common/TxLayout/index.tsx
index 652f633055..733ad21b77 100644
--- a/src/components/tx-flow/common/TxLayout/index.tsx
+++ b/src/components/tx-flow/common/TxLayout/index.tsx
@@ -92,28 +92,29 @@ const TxLayout = ({
     <SafeTxProvider>
       <TxInfoProvider>
         <TxSecurityProvider>
-          <Container className={css.container}>
-            <Grid container alignItems="center" justifyContent="center">
-              <Grid item container xs={12}>
-                <Grid item xs={12} md={7} className={css.titleWrapper}>
-                  <Typography variant="h3" component="div" fontWeight="700" className={css.title}>
-                    {title}
-                  </Typography>
-
-                  <ChainIndicator inline />
-                </Grid>
-                <IconButton
-                  className={css.statusButton}
-                  aria-label="Transaction status"
-                  size="large"
-                  onClick={toggleStatus}
-                >
-                  <SafeLogo width={16} height={16} />
-                </IconButton>
-              </Grid>
-
-              <Grid item container xs={12} gap={3}>
+          <>
+            {/* Header status button */}
+            <IconButton
+              className={css.statusButton}
+              aria-label="Transaction status"
+              size="large"
+              onClick={toggleStatus}
+            >
+              <SafeLogo width={16} height={16} />
+            </IconButton>
+
+            <Container className={css.container}>
+              <Grid container gap={3} justifyContent="center">
+                {/* Main content */}
                 <Grid item xs={12} md={7}>
+                  <div className={css.titleWrapper}>
+                    <Typography variant="h3" component="div" fontWeight="700" className={css.title}>
+                      {title}
+                    </Typography>
+
+                    <ChainIndicator inline />
+                  </div>
+
                   <Paper className={css.header}>
                     <Box className={css.progressBar}>
                       <ProgressBar value={progress} />
@@ -133,6 +134,7 @@ const TxLayout = ({
                   </div>
                 </Grid>
 
+                {/* Sidebar */}
                 <Grid item xs={12} md={4} className={classnames(css.widget, { [css.active]: statusVisible })}>
                   {statusVisible && (
                     <TxStatusWidget
@@ -151,8 +153,8 @@ const TxLayout = ({
                   </Box>
                 </Grid>
               </Grid>
-            </Grid>
-          </Container>
+            </Container>
+          </>
         </TxSecurityProvider>
       </TxInfoProvider>
     </SafeTxProvider>
diff --git a/src/components/tx-flow/common/TxLayout/styles.module.css b/src/components/tx-flow/common/TxLayout/styles.module.css
index 504c07542d..5ff2454e6a 100644
--- a/src/components/tx-flow/common/TxLayout/styles.module.css
+++ b/src/components/tx-flow/common/TxLayout/styles.module.css
@@ -11,7 +11,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: var(--space-3);
+  /* Remove height of progress bar */
+  padding: calc(var(--space-3) - 6px) var(--space-3) var(--space-3);
   border-bottom: 1px solid var(--color-border-light);
 }
 
@@ -103,6 +104,11 @@
   margin-bottom: var(--space-2);
 }
 
+.widget {
+  /* Height of transaction type title */
+  margin-top: 46px;
+}
+
 @media (max-width: 899.95px) {
   .widget {
     position: absolute;
@@ -111,6 +117,7 @@
     width: 100%;
     height: 100%;
     z-index: -1;
+    margin-top: unset;
   }
 
   .widget.active {
diff --git a/src/components/tx-flow/common/TxStatusWidget/index.tsx b/src/components/tx-flow/common/TxStatusWidget/index.tsx
index a702265558..d3fce261e0 100644
--- a/src/components/tx-flow/common/TxStatusWidget/index.tsx
+++ b/src/components/tx-flow/common/TxStatusWidget/index.tsx
@@ -47,8 +47,8 @@ const TxStatusWidget = ({
   return (
     <Paper>
       <div className={css.header}>
-        <SafeLogo width={32} height={32} className={css.logo} />
-        <Typography variant="h6" fontWeight="700" className={css.title}>
+        <Typography fontWeight="700" display="flex" alignItems="center" gap={1}>
+          <SafeLogo width={16} height={16} className={css.logo} />
           Transaction status
         </Typography>
         <IconButton className={css.close} aria-label="close" onClick={handleClose} size="small">
diff --git a/src/components/tx-flow/common/TxStatusWidget/styles.module.css b/src/components/tx-flow/common/TxStatusWidget/styles.module.css
index 80817f9cd0..3408f2bace 100644
--- a/src/components/tx-flow/common/TxStatusWidget/styles.module.css
+++ b/src/components/tx-flow/common/TxStatusWidget/styles.module.css
@@ -1,13 +1,12 @@
 .header {
-  padding: var(--space-3);
+  padding: var(--space-4) var(--space-3);
   display: flex;
   flex-direction: column;
-  align-items: center;
   gap: var(--space-1);
 }
 
 .content {
-  padding: var(--space-3);
+  padding: var(--space-2);
 }
 
 .status {
@@ -83,11 +82,11 @@
     margin-left: 16px;
   }
 
-  .title {
-    font-size: 16px;
-  }
-
   .close {
     display: flex;
   }
+
+  .content {
+    padding: var(--space-3);
+  }
 }
diff --git a/src/components/tx-flow/flows/NewTx/index.tsx b/src/components/tx-flow/flows/NewTx/index.tsx
index 55e85333ef..ab0c615eb0 100644
--- a/src/components/tx-flow/flows/NewTx/index.tsx
+++ b/src/components/tx-flow/flows/NewTx/index.tsx
@@ -23,7 +23,7 @@ const NewTxMenu = () => {
 
   return (
     <Container className={css.container}>
-      <Grid container>
+      <Grid container justifyContent="center">
         {/* Alignment of `TxLayout` */}
         <Grid item xs={12} md={11} display="flex" flexDirection="column">
           <ChainIndicator inline className={css.chain} />
diff --git a/src/components/tx-flow/flows/SuccessScreen/index.tsx b/src/components/tx-flow/flows/SuccessScreen/index.tsx
index 550b7d0f90..641a0b51d1 100644
--- a/src/components/tx-flow/flows/SuccessScreen/index.tsx
+++ b/src/components/tx-flow/flows/SuccessScreen/index.tsx
@@ -51,8 +51,9 @@ export const SuccessScreen = ({ txId }: { txId: string }) => {
       disableGutters
       sx={{
         textAlign: 'center',
+        maxWidth: `${900 - 75}px`, // md={11}
       }}
-      maxWidth="md"
+      maxWidth={false}
     >
       <div className={css.row}>
         <StatusMessage status={status} error={error} />