fix(send-tx): update transaction success dialog layout

packages/yoroi-extension/app/components/transfer/SuccessPage.js

@@ -1,5 +1,5 @@
 // @flow
-import type { Node } from 'react';
+import type { ComponentType, Node } from 'react';
 import { Component } from 'react';
 import { observer } from 'mobx-react';
 import { intlShape } from 'react-intl';
@@ -8,6 +8,9 @@ import Dialog from '../widgets/Dialog';
 import DialogCloseButton from '../widgets/DialogCloseButton';
 import LoadingSpinner from '../widgets/LoadingSpinner';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
+import { Typography } from '@mui/material';
+import { withLayout } from '../../styles/context/layout';
+import type { InjectedLayoutProps } from '../../styles/context/layout';
 
 type Props = {|
   +title: string,
@@ -20,8 +23,7 @@ type Props = {|
 |};
 
 @observer
-export default class SuccessPage extends Component<Props> {
-
+class SuccessPage extends Component<Props & InjectedLayoutProps> {
   static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = {
     intl: intlShape.isRequired
   };
@@ -31,7 +33,7 @@ export default class SuccessPage extends Component<Props> {
   };
 
   render(): Node {
-    const { title, text } = this.props;
+    const { title, text, isRevampLayout } = this.props;
 
     const actions = this.props.closeInfo == null
       ? undefined
@@ -48,17 +50,28 @@ export default class SuccessPage extends Component<Props> {
         closeOnOverlayClick={false}
         onClose={this.props.closeInfo ? this.props.closeInfo.onClose : undefined}
         className={styles.dialog}
-        closeButton={this.props.closeInfo ? (<DialogCloseButton />) : undefined}
+        closeButton={this.props.closeInfo ? <DialogCloseButton /> : undefined}
       >
         <div className={styles.component}>
           <div>
             <div className={styles.successImg} />
-            <div className={styles.title}>
+            <Typography
+              variant="body1"
+              color={isRevampLayout ? 'primary' : 'secondary.300'}
+              textAlign="center"
+              mt="16px"
+              fontWeight={500}
+            >
               {title}
-            </div>
-            <div className={styles.text}>
+            </Typography>
+            <Typography
+              variant="body2"
+              color="gray.900"
+              textAlign="center"
+              mt="4px"
+            >
               {text}
-            </div>
+            </Typography>
             {this.props.closeInfo == null && (
               <div className={styles.spinnerSection}>
                 <LoadingSpinner />
@@ -70,3 +83,5 @@ export default class SuccessPage extends Component<Props> {
     );
   }
 }
+
+export default (withLayout(SuccessPage): ComponentType<Props>);

packages/yoroi-extension/app/components/transfer/SuccessPage.scss

@@ -4,25 +4,6 @@
   align-items: center;
   justify-content: center;
 
-  .title {
-    color: var(--yoroi-palette-secondary-300);
-    text-transform: uppercase;
-    height: 19px;
-    font-weight: 500;
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 19px;
-    text-align: center;
-  }
-
-  .text {
-    color: var(--yoroi-palette-gray-800);
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 22px;
-    text-align: center;
-  }
-
   .spinnerSection {
     margin-top: 12px;
     margin-bottom: 5px;
@@ -37,6 +18,7 @@
     width: 252px;
     height: 194px;
     margin: auto;
+    margin-top: 30px;
   }
 }
 :global(.YoroiModern):global(.YoroiShelley) .component, :global(.YoroiRevamp):global(.YoroiShelley) .component {

packages/yoroi-extension/app/components/wallet/send/TransactionSuccessDialog.js

@@ -4,49 +4,67 @@ import type { Node } from 'react';
 import { Component } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
-import SuccessPage from '../../transfer/SuccessPage';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
+import Dialog from '../../widgets/Dialog';
+import { Stack, Typography } from '@mui/material';
+import DialogCloseButton from '../../widgets/DialogCloseButton';
+import { ReactComponent as SuccessImg } from '../../../assets/images/transfer-success.inline.svg';
 
 const messages = defineMessages({
   title: {
     id: 'wallet.transaction.success.title',
-    defaultMessage: '!!!Successfully sent',
+    defaultMessage: '!!!Transaction submitted',
   },
   buttonLabel: {
     id: 'wallet.transaction.success.button.label',
-    defaultMessage: '!!!Transaction page',
+    defaultMessage: '!!!Go To Transactions',
   },
   explanation: {
     id: 'wallet.transaction.success.explanation',
-    defaultMessage: '!!!Track the status of the transaction from the Transactions page',
-  }
+    defaultMessage: '!!!Check this transaction in the list of wallet transactions',
+  },
 });
 
 type Props = {|
-  +onClose: void => PossiblyAsync<void>;
+  +onClose: void => PossiblyAsync<void>,
   +classicTheme: boolean,
 |};
 
 @observer
 export default class TransactionSuccessDialog extends Component<Props> {
-
-  static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = {
+  static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
     intl: intlShape.isRequired,
   };
 
   render(): Node {
     const { intl } = this.context;
 
     return (
-      <SuccessPage
+      <Dialog
         title={intl.formatMessage(messages.title)}
-        text={intl.formatMessage(messages.explanation)}
-        classicTheme={this.props.classicTheme}
-        closeInfo={{
-          onClose: this.props.onClose,
-          closeLabel: intl.formatMessage(messages.buttonLabel),
-        }}
-      />
+        actions={[
+          {
+            label: intl.formatMessage(messages.buttonLabel),
+            onClick: this.props.onClose,
+            primary: true,
+          },
+        ]}
+        onClose={this.props.onClose}
+        closeButton={<DialogCloseButton />}
+      >
+        <Stack alignItems="center">
+          <SuccessImg />
+          <Typography
+            color="gray.700"
+            fontWeight={500}
+            mt="16px"
+            textAlign="center"
+            maxWidth="400px"
+          >
+            {intl.formatMessage(messages.explanation)}
+          </Typography>
+        </Stack>
+      </Dialog>
     );
   }
 }