[TX flow] style: offchain messages info boxes styles (#2134)

* style: adjust success and info box styles * adjust msgSigners style * style margins in the info elements * clean up redundant variable * test: update tx builder URL
safe-global · Jun 20, 2023 · 23bbb96 · 23bbb96
1 parent c270f11
commit 23bbb96
Show file tree

Hide file tree

Showing 10 changed files with 61 additions and 44 deletions.
diff --git a/public/images/common/check.svg b/public/images/common/check.svg
diff --git a/public/images/notifications/info.svg b/public/images/notifications/info.svg
diff --git a/src/components/safe-messages/InfoBox/index.tsx b/src/components/safe-messages/InfoBox/index.tsx
@@ -5,25 +5,28 @@ 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
 }): ReactElement => {
   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
@@ -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;
@@ -19,12 +18,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/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 }}>
           <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>

diff --git 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;

diff --git 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}>
@@ -213,21 +213,26 @@ 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
+          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.'
@@ -245,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/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>
   )

diff --git 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;
 }
 

diff --git a/src/tests/pages/apps-share.test.tsx b/src/tests/pages/apps-share.test.tsx
@@ -108,7 +108,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',
         },
       },