chore: design fix

src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx

@@ -1,7 +1,7 @@
-import React, { useMemo } from 'react';
-import { TModalActionButton } from '@deriv/ui/dist/types/src/components/core/modal/types';
-import { Modal } from '@deriv/ui';
+import React from 'react';
+import { Button, Modal } from '@deriv/ui';
 import useAppManager from '@site/src/hooks/useAppManager';
+import styles from './register-app-dialog-success.module.scss';
 
 interface IRegisterAppDialogSuccessProps {
   onClose: () => void;
@@ -10,44 +10,33 @@ interface IRegisterAppDialogSuccessProps {
 export const RegisterAppDialogSuccess = ({ onClose }: IRegisterAppDialogSuccessProps) => {
   const { updateCurrentTab } = useAppManager();
 
-  const actionButtons: TModalActionButton[] = useMemo(
-    () => [
-      {
-        id: 0,
-        text: 'Join our Telegram Community',
-        color: 'primary',
-        onClick: () => {
-          updateCurrentTab('MANAGE_APPS');
-          window.open('https://t.me/deriv_apps', '_blank');
-          onClose();
-        },
-      },
-      {
-        id: 1,
-        text: 'Got it',
-        color: 'secondary',
-        onClick: () => {
-          onClose();
-        },
-      },
-    ],
-    [onClose, updateCurrentTab],
-  );
+  const onSuccessfulClick = () => {
+    updateCurrentTab('MANAGE_APPS');
+    window.open('https://t.me/deriv_apps', '_blank');
+    onClose();
+  };
 
   return (
     <Modal defaultOpen>
       <Modal.Portal>
         <div className='modal-overlay'>
           <Modal.Overlay />
-          <Modal.DialogContent
-            title='Success!'
-            content={
-              'You have successfully registered your application. You can now start using Deriv API.'
-            }
-            action_buttons={actionButtons}
-            has_close_button
-            should_prevent_close_on_click_outside
-          />
+          <Modal.PageContent has_close_button className={styles.wrapper}>
+            <div className={styles.modal}>
+              <img src='/img/register_success.svg' />
+              <h4 className={styles.title}>Success!</h4>
+              <p>You have successfully registered your application.</p>
+              <p>You can now start using Deriv API</p>
+            </div>
+            <div className={styles.buttonWrapper}>
+              <Button color='secondary' onClick={onClose} className={styles.btn}>
+                Got it
+              </Button>
+              <Button color='primary' onClick={onSuccessfulClick} className={styles.btn}>
+                Join our Telegram Community
+              </Button>
+            </div>
+          </Modal.PageContent>
         </div>
       </Modal.Portal>
     </Modal>

src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss

@@ -0,0 +1,37 @@
+@use 'src/styles/utility' as *;
+
+.wrapper {
+  width: rem(44);
+}
+
+.modal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: rem(0.8) rem(2.4) 0;
+  font-size: rem(1.4);
+  line-height: rem(2);
+  @media (max-width: 992px) {
+    padding: 0 0 0 rem(1.6);
+  }
+
+  .title {
+    font-weight: bold;
+  }
+  .iconWrapper {
+    background-image: url(/img/register_success.svg);
+  }
+}
+
+.buttonWrapper {
+  display: flex;
+  justify-content: flex-end;
+  padding: rem(2.4);
+  gap: rem(0.8);
+
+  .btn {
+    padding: rem(1) rem(1.6);
+    border-radius: rem(1.5);
+  }
+}