From b5c9f0426172b0646d365312d17a1d9199aeb43f Mon Sep 17 00:00:00 2001
From: Diogo Soares <diogo.lsoares@gmail.com>
Date: Tue, 20 Jun 2023 12:59:28 +0200
Subject: [PATCH 1/5] style: adjust success and info box styles

---
 public/images/common/check.svg                       |  4 ++++
 public/images/notifications/info.svg                 |  2 +-
 src/components/safe-messages/InfoBox/index.tsx       | 11 +++++++----
 .../safe-messages/InfoBox/styles.module.css          | 10 ++++++----
 .../tx-flow/flows/SignMessage/SignMessage.tsx        |  5 +++--
 src/components/tx/SuccessMessage/index.tsx           | 12 +++++-------
 6 files changed, 26 insertions(+), 18 deletions(-)
 create mode 100644 public/images/common/check.svg

diff --git a/public/images/common/check.svg b/public/images/common/check.svg
new file mode 100644
index 0000000000..cfe44936f4
--- /dev/null
+++ b/public/images/common/check.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.99917 12.6694C5.82184 12.6694 5.65251 12.5994 5.52784 12.4741L1.52851 8.4721C1.26784 8.21144 1.26784 7.78944 1.52851 7.52944C1.78917 7.26877 2.21051 7.26877 2.47117 7.52944L5.99917 11.0601L13.5272 3.53144C13.7878 3.27077 14.2092 3.27077 14.4698 3.53144C14.7305 3.7921 14.7305 4.21344 14.4698 4.4741L6.47051 12.4741C6.34584 12.5994 6.17651 12.6694 5.99917 12.6694Z" fill="currentColor"/>
+<path d="M5.99917 12.6694V12.6694C5.82184 12.6694 5.65251 12.5994 5.52784 12.4741L1.52851 8.4721C1.26784 8.21144 1.26784 7.78944 1.52851 7.52944C1.78917 7.26877 2.21051 7.26877 2.47117 7.52944L5.99917 11.0601L13.5272 3.53144C13.7878 3.27077 14.2092 3.27077 14.4698 3.53144C14.7305 3.7921 14.7305 4.21344 14.4698 4.4741L6.47051 12.4741C6.34584 12.5994 6.17651 12.6694 5.99917 12.6694" stroke="currentColor"/>
+</svg>
diff --git a/public/images/notifications/info.svg b/public/images/notifications/info.svg
index d979abad58..85b63fd090 100644
--- a/public/images/notifications/info.svg
+++ b/public/images/notifications/info.svg
@@ -1,4 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
 <rect x="11" y="10" width="2" height="8" rx="1"/>
 <path d="M12 5.75C12.6904 5.75 13.25 6.30964 13.25 7C13.25 7.69036 12.6904 8.25 12 8.25C11.3096 8.25 10.75 7.69036 10.75 7C10.75 6.30964 11.3096 5.75 12 5.75Z"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12Z"/>
diff --git a/src/components/safe-messages/InfoBox/index.tsx b/src/components/safe-messages/InfoBox/index.tsx
index b644c68d5a..21a22a5c6c 100644
--- a/src/components/safe-messages/InfoBox/index.tsx
+++ b/src/components/safe-messages/InfoBox/index.tsx
@@ -5,10 +5,12 @@ import InfoIcon from '@/public/images/notifications/info.svg'
 import css from './styles.module.css'
 
 const InfoBox = ({
+  title,
   message,
   children,
   className,
 }: {
+  title: string
   message: string
   children: ReactNode
   className?: string
@@ -16,14 +18,15 @@ const InfoBox = ({
   return (
     <div className={classNames(css.container, className)}>
       <div className={css.message}>
-        <SvgIcon component={InfoIcon} color="info" inheritViewBox fontSize="small" />
+        <SvgIcon component={InfoIcon} color="info" inheritViewBox fontSize="medium" />
         <div>
-          <Typography variant="body2" component="span">
-            {message}
+          <Typography variant="subtitle1" fontWeight="bold">
+            {title}
           </Typography>
+          <Typography variant="body2">{message}</Typography>
         </div>
       </div>
-      <Divider sx={{ marginRight: -2, marginLeft: -2 }} />
+      <Divider className={css.divider} />
       <div>{children}</div>
     </div>
   )
diff --git a/src/components/safe-messages/InfoBox/styles.module.css b/src/components/safe-messages/InfoBox/styles.module.css
index 2de4715456..1c6764419e 100644
--- a/src/components/safe-messages/InfoBox/styles.module.css
+++ b/src/components/safe-messages/InfoBox/styles.module.css
@@ -19,12 +19,14 @@
   text-decoration: underline;
 }
 
-.message svg {
-  margin-top: 4px;
-}
-
 .details {
   margin-top: var(--space-1);
   color: var(--color-primary-light);
   word-break: break-word;
 }
+
+.divider {
+  margin-right: calc(-1 * var(--space-2));
+  margin-left: calc(-1 * var(--space-2));
+  border-color: var(--color-info-light);
+}
diff --git a/src/components/tx-flow/flows/SignMessage/SignMessage.tsx b/src/components/tx-flow/flows/SignMessage/SignMessage.tsx
index 5339a56348..3bf06c1074 100644
--- a/src/components/tx-flow/flows/SignMessage/SignMessage.tsx
+++ b/src/components/tx-flow/flows/SignMessage/SignMessage.tsx
@@ -115,8 +115,8 @@ const AlreadySignedByOwnerMessage = ({ hasSigned }: { hasSigned: boolean }) => {
   }
   return (
     <SuccessMessage>
-      <Grid container direction="row">
-        <Grid item xs>
+      <Grid container direction="row" justifyContent="space-between">
+        <Grid item xs={7}>
           Your connected wallet has already signed this message.
         </Grid>
         <Grid item xs={4}>
@@ -228,6 +228,7 @@ const SignMessage = ({ onClose, message, safeAppId, requestId }: ProposeProps |
         <AlreadySignedByOwnerMessage hasSigned={hasSigned} />
 
         <InfoBox
+          title="Collect all the confirmations"
           message={
             requestId
               ? 'Please keep this modal open until all signers confirm this message. Closing the modal will abort the signing request.'
diff --git a/src/components/tx/SuccessMessage/index.tsx b/src/components/tx/SuccessMessage/index.tsx
index ee11f65e92..9f3ce22916 100644
--- a/src/components/tx/SuccessMessage/index.tsx
+++ b/src/components/tx/SuccessMessage/index.tsx
@@ -1,20 +1,18 @@
 import { type ReactElement, type ReactNode } from 'react'
 import { Typography, SvgIcon } from '@mui/material'
 import classNames from 'classnames'
-import SuccessIcon from '@/public/images/notifications/success.svg'
+import CheckIcon from '@/public/images/common/check.svg'
 import css from './styles.module.css'
 
 const SuccessMessage = ({ children, className }: { children: ReactNode; className?: string }): ReactElement => {
   return (
     <div className={classNames(css.container, className)}>
       <div className={css.message}>
-        <SvgIcon component={SuccessIcon} color="success" inheritViewBox fontSize="small" />
+        <SvgIcon component={CheckIcon} color="success" inheritViewBox fontSize="small" />
 
-        <div>
-          <Typography variant="body2" component="span">
-            {children}
-          </Typography>
-        </div>
+        <Typography variant="body2" width="100%">
+          {children}
+        </Typography>
       </div>
     </div>
   )

From f8f248d7d41226ccee416df32ece3ab63e9a6a1a Mon Sep 17 00:00:00 2001
From: Diogo Soares <diogo.lsoares@gmail.com>
Date: Tue, 20 Jun 2023 13:21:22 +0200
Subject: [PATCH 2/5] adjust msgSigners style

---
 src/components/safe-messages/MsgSigners/index.tsx         | 2 +-
 src/components/safe-messages/MsgSigners/styles.module.css | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/safe-messages/MsgSigners/index.tsx b/src/components/safe-messages/MsgSigners/index.tsx
index 045a1602bd..10c4d47992 100644
--- a/src/components/safe-messages/MsgSigners/index.tsx
+++ b/src/components/safe-messages/MsgSigners/index.tsx
@@ -79,7 +79,7 @@ export const MsgSigners = ({
         </ListItem>
       )}
       <ListItem>
-        <ListItemIcon>
+        <ListItemIcon sx={{ backgroundColor: backgroundColor }}>
           <Signed />
         </ListItemIcon>
         <ListItemText primaryTypographyProps={{ fontWeight: 700 }}>
diff --git a/src/components/safe-messages/MsgSigners/styles.module.css b/src/components/safe-messages/MsgSigners/styles.module.css
index 7a6581ed4a..7d4aa34ecf 100644
--- a/src/components/safe-messages/MsgSigners/styles.module.css
+++ b/src/components/safe-messages/MsgSigners/styles.module.css
@@ -30,6 +30,11 @@
   padding-right: 0;
 }
 
+.signers :global .MuiListItemText-root {
+  margin-top: var(--space-1);
+  margin-bottom: var(--space-1);
+}
+
 .signers :global .MuiListItemIcon-root {
   color: var(--color-primary-main);
   justify-content: center;

From 9f90e3a4232fe2f0e6525ad3c9b6217bfbab1eb0 Mon Sep 17 00:00:00 2001
From: Diogo Soares <diogo.lsoares@gmail.com>
Date: Tue, 20 Jun 2023 13:32:47 +0200
Subject: [PATCH 3/5] style margins in the info elements

---
 .../safe-messages/InfoBox/styles.module.css   |  1 -
 .../tx-flow/flows/SignMessage/SignMessage.tsx | 44 +++++++++++--------
 .../tx/SuccessMessage/styles.module.css       |  1 -
 3 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/src/components/safe-messages/InfoBox/styles.module.css b/src/components/safe-messages/InfoBox/styles.module.css
index 1c6764419e..ae24d95400 100644
--- a/src/components/safe-messages/InfoBox/styles.module.css
+++ b/src/components/safe-messages/InfoBox/styles.module.css
@@ -1,7 +1,6 @@
 .container {
   background-color: var(--color-info-background);
   padding: var(--space-2);
-  margin: var(--space-2) 0;
   border-radius: 4px;
   display: flex;
   flex-direction: column;
diff --git a/src/components/tx-flow/flows/SignMessage/SignMessage.tsx b/src/components/tx-flow/flows/SignMessage/SignMessage.tsx
index 3bf06c1074..fdc8b39ed5 100644
--- a/src/components/tx-flow/flows/SignMessage/SignMessage.tsx
+++ b/src/components/tx-flow/flows/SignMessage/SignMessage.tsx
@@ -213,18 +213,22 @@ const SignMessage = ({ onClose, message, safeAppId, requestId }: ProposeProps |
   }, [onClose, ongoingMessage, requestId])
 
   return (
-    <TxCard>
-      <CardContent>
-        <DialogHeader threshold={safe.threshold} />
+    <>
+      <TxCard>
+        <CardContent>
+          <DialogHeader threshold={safe.threshold} />
 
-        <Typography fontWeight={700} mb={1}>
-          Message: <CopyButton text={decodedMessageAsString} />
-        </Typography>
-        <DecodedMsg message={decodedMessage} isInModal />
+          <Typography fontWeight={700} mb={1}>
+            Message: <CopyButton text={decodedMessageAsString} />
+          </Typography>
+          <DecodedMsg message={decodedMessage} isInModal />
 
-        <MessageHashField label="SafeMessage" hashValue={safeMessageMessage} />
-        <MessageHashField label="SafeMessage hash" hashValue={safeMessageHash} />
+          <MessageHashField label="SafeMessage" hashValue={safeMessageMessage} />
+          <MessageHashField label="SafeMessage hash" hashValue={safeMessageHash} />
+        </CardContent>
+      </TxCard>
 
+      <TxCard>
         <AlreadySignedByOwnerMessage hasSigned={hasSigned} />
 
         <InfoBox
@@ -246,17 +250,19 @@ const SignMessage = ({ onClose, message, safeAppId, requestId }: ProposeProps |
         <WrongChainWarning />
 
         <MessageDialogError isOwner={isOwner} submitError={submitError} />
-      </CardContent>
+      </TxCard>
 
-      <CardActions>
-        {/* TODO: Remove this Cancel button once we can figure out how to move the logic outside */}
-        <Button onClick={handleClose}>Cancel</Button>
-        <Button variant="contained" color="primary" onClick={onSign} disabled={isDisabled}>
-          Sign
-        </Button>
-      </CardActions>
-      <ConfirmationDialog open={showCloseTooltip} onCancel={() => setShowCloseTooltip(false)} onClose={onClose} />
-    </TxCard>
+      <TxCard>
+        <CardActions>
+          {/* TODO: Remove this Cancel button once we can figure out how to move the logic outside */}
+          <Button onClick={handleClose}>Cancel</Button>
+          <Button variant="contained" color="primary" onClick={onSign} disabled={isDisabled}>
+            Sign
+          </Button>
+        </CardActions>
+        <ConfirmationDialog open={showCloseTooltip} onCancel={() => setShowCloseTooltip(false)} onClose={onClose} />
+      </TxCard>
+    </>
   )
 }
 
diff --git a/src/components/tx/SuccessMessage/styles.module.css b/src/components/tx/SuccessMessage/styles.module.css
index 7ae0ce6c58..418cdcdea6 100644
--- a/src/components/tx/SuccessMessage/styles.module.css
+++ b/src/components/tx/SuccessMessage/styles.module.css
@@ -1,7 +1,6 @@
 .container {
   background-color: var(--color-success-background);
   padding: var(--space-2);
-  margin: var(--space-2) 0;
   border-radius: 4px;
 }
 

From 4cd16f3b79d5083abedc7d6ed6807c7cf110d700 Mon Sep 17 00:00:00 2001
From: Diogo Soares <diogo.lsoares@gmail.com>
Date: Tue, 20 Jun 2023 15:31:09 +0200
Subject: [PATCH 4/5] clean up redundant variable

---
 src/components/safe-messages/MsgSigners/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/safe-messages/MsgSigners/index.tsx b/src/components/safe-messages/MsgSigners/index.tsx
index 10c4d47992..a0e0c59938 100644
--- a/src/components/safe-messages/MsgSigners/index.tsx
+++ b/src/components/safe-messages/MsgSigners/index.tsx
@@ -79,7 +79,7 @@ export const MsgSigners = ({
         </ListItem>
       )}
       <ListItem>
-        <ListItemIcon sx={{ backgroundColor: backgroundColor }}>
+        <ListItemIcon sx={{ backgroundColor }}>
           <Signed />
         </ListItemIcon>
         <ListItemText primaryTypographyProps={{ fontWeight: 700 }}>
@@ -92,7 +92,7 @@ export const MsgSigners = ({
       {!hideConfirmations &&
         confirmations.map(({ owner }) => (
           <ListItem key={owner.value} sx={{ py: 0 }}>
-            <ListItemIcon sx={{ backgroundColor: backgroundColor }}>
+            <ListItemIcon sx={{ backgroundColor }}>
               <Dot />
             </ListItemIcon>
             <ListItemText>
@@ -115,7 +115,7 @@ export const MsgSigners = ({
       {showMissingSignatures &&
         missingConfirmations.map((_, idx) => (
           <ListItem key={`skeleton${idx}`} sx={{ py: 0 }}>
-            <ListItemIcon sx={{ backgroundColor: backgroundColor }}>
+            <ListItemIcon sx={{ backgroundColor }}>
               <SvgIcon component={CircleOutlinedIcon} className={css.dot} color="border" fontSize="small" />
             </ListItemIcon>
             <ListItemText>
@@ -130,7 +130,7 @@ export const MsgSigners = ({
         ))}
       {isConfirmed && (
         <ListItem>
-          <ListItemIcon sx={{ backgroundColor: backgroundColor }}>
+          <ListItemIcon sx={{ backgroundColor }}>
             <Dot />
           </ListItemIcon>
           <ListItemText>Confirmed</ListItemText>

From 4093b9f7ac92b82194bd162d4d22328a7a2da0bc Mon Sep 17 00:00:00 2001
From: Diogo Soares <diogo.lsoares@gmail.com>
Date: Tue, 20 Jun 2023 15:55:51 +0200
Subject: [PATCH 5/5] test: update tx builder URL

---
 src/tests/pages/apps-share.test.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/tests/pages/apps-share.test.tsx b/src/tests/pages/apps-share.test.tsx
index 119013a185..710394aff2 100644
--- a/src/tests/pages/apps-share.test.tsx
+++ b/src/tests/pages/apps-share.test.tsx
@@ -19,7 +19,7 @@ describe('Share Safe App Page', () => {
     render(<ShareSafeApp />, {
       routerProps: {
         query: {
-          appUrl: 'https://apps.gnosis-safe.io/tx-builder/',
+          appUrl: 'https://apps-portal.safe.global/tx-builder/',
           chain: 'eth',
         },
       },
@@ -38,7 +38,7 @@ describe('Share Safe App Page', () => {
         expect(
           screen.getByText('Compose custom contract interactions and batch them into a single transaction'),
         ).toBeInTheDocument()
-        expect(screen.getByText('https://apps.gnosis-safe.io/tx-builder')).toBeInTheDocument()
+        expect(screen.getByText('https://apps-portal.safe.global/tx-builder')).toBeInTheDocument()
       },
       { timeout: FETCH_TIMEOUT },
     )
@@ -48,7 +48,7 @@ describe('Share Safe App Page', () => {
     render(<ShareSafeApp />, {
       routerProps: {
         query: {
-          appUrl: 'https://apps.gnosis-safe.io/tx-builder/',
+          appUrl: 'https://apps-portal.safe.global/tx-builder/',
           chain: 'eth',
         },
       },
@@ -73,7 +73,7 @@ describe('Share Safe App Page', () => {
     render(<ShareSafeApp />, {
       routerProps: {
         query: {
-          appUrl: 'https://apps.gnosis-safe.io/tx-builder/',
+          appUrl: 'https://apps-portal.safe.global/tx-builder/',
           chain: 'eth',
         },
       },
@@ -107,7 +107,7 @@ describe('Share Safe App Page', () => {
     render(<ShareSafeApp />, {
       routerProps: {
         query: {
-          appUrl: 'https://apps.gnosis-safe.io/tx-builder/',
+          appUrl: 'https://apps-portal.safe.global/tx-builder/',
           chain: 'rin',
         },
       },
@@ -145,7 +145,7 @@ describe('Share Safe App Page', () => {
     render(<ShareSafeApp />, {
       routerProps: {
         query: {
-          appUrl: 'https://apps.gnosis-safe.io/tx-builder/',
+          appUrl: 'https://apps-portal.safe.global/tx-builder/',
           chain: 'eth',
         },
       },