Merge pull request #121 from agrim-deriv/Agrim/popup-fix

fix: popup
deriv-com · Sep 26, 2024 · 8517e2f · 8517e2f
2 parents a46ca48 + 337601c
commit 8517e2f
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 30 deletions.
diff --git a/src/features/dashboard/components/ApiTokenTable/DeleteTokenDialog/index.tsx b/src/features/dashboard/components/ApiTokenTable/DeleteTokenDialog/index.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useContext } from 'react';
 import { TTokenType } from '@site/src/types';
-import { Modal } from '@deriv-com/quill-ui';
+import { Modal, Heading, Text } from '@deriv-com/quill-ui';
 import { StandaloneTrashRegularIcon } from '@deriv/quill-icons';
 import useDeviceType from '@site/src/hooks/useDeviceType';
 import { ApiTokenContext } from '@site/src/contexts/api-token/api-token.context';
@@ -47,8 +47,8 @@ const DeleteTokenDialog = ({ token, onClose, isOpen }: TDeleteTokenDialogProps)
         <StandaloneTrashRegularIcon fill='#C40000' iconSize='2xl' />
       </div>
       <div className='modal__content'>
-        <h4>{translate({ message: 'Delete token' })}</h4>
-        <p>{translate({ message: 'Are you sure you want to delete this token?' })}</p>
+        <Heading.H4>{translate({ message: 'Delete token' })}</Heading.H4>
+        <Text>{translate({ message: 'Are you sure you want to delete this token?' })}</Text>
       </div>
     </Modal>
   );

diff --git a/src/features/dashboard/components/Dialogs/DeleteAppDialog/index.tsx b/src/features/dashboard/components/Dialogs/DeleteAppDialog/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal } from '@deriv-com/quill-ui';
+import { Modal, Heading, Text } from '@deriv-com/quill-ui';
 import { StandaloneTrashRegularIcon } from '@deriv/quill-icons';
 import useDeviceType from '@site/src/hooks/useDeviceType';
 import { useDeleteApp } from '../../../hooks/useDeleteApp';
@@ -38,12 +38,12 @@ const DeleteAppDialog = ({ appId, onClose }: TDeleteAppDialogProps) => {
         <StandaloneTrashRegularIcon fill='#C40000' iconSize='2xl' />
       </div>
       <div className='modal__content'>
-        <h4>
+        <Heading.H4>
           <Translate>Delete app</Translate>
-        </h4>
-        <p>
+        </Heading.H4>
+        <Text>
           <Translate>Are you sure you want to delete this app?</Translate>
-        </p>
+        </Text>
       </div>
     </Modal>
   );

diff --git a/src/features/dashboard/components/Modals/AppRegisterSuccessModal/index.tsx b/src/features/dashboard/components/Modals/AppRegisterSuccessModal/index.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import useAppManager from '@site/src/hooks/useAppManager';
-import { Heading, Modal } from '@deriv-com/quill-ui';
+import { Heading, Modal, Text } from '@deriv-com/quill-ui';
 import { StandaloneCircleCheckRegularIcon } from '@deriv/quill-icons';
 import useDeviceType from '@site/src/hooks/useDeviceType';
 import '../../Dialogs/DeleteAppDialog/delete-app-dialog.scss';
 import useDisableScroll from '../../../hooks/useDisableScroll';
+import Translate from '@docusaurus/Translate';
 
 interface IAppRegisterSuccessModalProps {
   onConfigure: () => void;
@@ -39,20 +40,36 @@ export const AppRegisterSuccessModal = ({
       <div className='modal__icon' style={{ background: 'var(--core-color-solid-green-100)' }}>
         <StandaloneCircleCheckRegularIcon fill='#007A22' iconSize='2xl' />
       </div>
-      <div className='modal__text'>
-        <h3 className='modal__header'>Application registered successfully!</h3>
-        <div className='modal__content' style={{ textAlign: 'left', padding: '0px 0px' }}>
-          <span>
-            Ready to take the next step?
-            <br></br>Optimise your app&apos;s capabilities by:
-            <ul>
-              <li>Creating an API token to use with your application.</li>
-              <li>Adding OAuth authentication in your app.</li>
-              <li>Selecting the scopes of OAuth authorisation for your app.</li>
-            </ul>
-            <div>Note: You can make these changes later through the dashboard.</div>
-          </span>
-        </div>
+      <div className='modal__content'>
+        <Heading.H4>
+          <Translate>Application registered successfully!</Translate>
+        </Heading.H4>
+        <Text>
+          <Translate>Ready to take the next step?</Translate>
+        </Text>
+        <Text>
+          <Translate>Optimise your app&apos;s capabilities by:</Translate>
+        </Text>
+        <ul>
+          <li>
+            <Text>
+              <Translate>Creating an API token to use with your application.</Translate>
+            </Text>
+          </li>
+          <li>
+            <Text>
+              <Translate>Adding OAuth authentication in your app.</Translate>
+            </Text>
+          </li>
+          <li>
+            <Text>
+              <Translate>Selecting the scopes of OAuth authorisation for your app.</Translate>
+            </Text>
+          </li>
+        </ul>
+        <Text>
+          <Translate>Note: You can make these changes later through the dashboard.</Translate>
+        </Text>
       </div>
     </Modal>
   );

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -249,13 +249,6 @@ div[class*='sidebarViewport'] {
 
   h4 {
     margin-bottom: 32px;
-    color: var(--core-color-solid-slate-1400);
-    font-size: 18px;
-  }
-
-  p {
-    color: var(--core-color-opacity-black-600);
-    font-size: 14px;
   }
 
   ul {