Merge pull request #158 from ahmed-deriv/ahmed/DAPI-777/fix--register…

…-app-link-styling ahmed/DAPI-777/fix--register-app-link-styling
deriv-com · Oct 21, 2024 · 73ac42f · 73ac42f
2 parents 155a111 + 0c3adb3
commit 73ac42f
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 13 deletions.
diff --git a/src/features/dashboard/components/app-form/app-form.module.scss b/src/features/dashboard/components/app-form/app-form.module.scss
@@ -191,6 +191,10 @@ fieldset .customTextInput:last-child {
   @media screen and (min-width: 992px) {
     font-size: rem(1.4);
   }
+
+  a:hover {
+    color: var(--component-textIcon-normal-prominent);
+  }
 }
 
 .buttons {

diff --git a/src/features/dashboard/components/app-form/app-form.tsx b/src/features/dashboard/components/app-form/app-form.tsx
@@ -17,6 +17,7 @@ import useAppManager from '@site/src/hooks/useAppManager';
 import { appRegisterSchema, appEditSchema, IRegisterAppForm } from '../../types';
 import RestrictionsAppname from '../restrictions-appname';
 import styles from './app-form.module.scss';
+import { Link } from '@deriv-com/quill-ui';
 
 
 type TAppFormProps = {
@@ -175,9 +176,8 @@ const AppForm = ({
               )}
               <div>
                 <div
-                  className={`${styles.helperMargin} ${styles.customTextInput} ${
-                    error_border_active ? styles.errorAppname : ''
-                  }`}
+                  className={`${styles.helperMargin} ${styles.customTextInput} ${error_border_active ? styles.errorAppname : ''
+                    }`}
                   id='custom-text-input'
                   onChange={(e) => {
                     setInputValue((e.target as HTMLInputElement).value);
@@ -407,17 +407,15 @@ const AppForm = ({
             </div>
             <div className={styles.termsOfConditionRegister}>
               <span>
-                {translate({ message: `By registering your application, you acknowledge that you‘ve read and accepted the Deriv API`})} {' '}
+                {translate({ message: `By registering your application, you acknowledge that you‘ve read and accepted the Deriv API` })} {' '}
               </span>
-              <a
+              <Link
                 href='https://deriv.com/tnc/business-partners-api-user.pdf'
                 target='_blank'
                 rel='noreferrer'
               >
-                <span>
-                  <Translate>terms and conditions</Translate>
-                </span>
-              </a>
+                <Translate>terms and conditions</Translate>
+              </Link>
             </div>
             {renderButtons && <div className={styles.submit_container}>{renderButtons()}</div>}
           </div>

diff --git a/src/features/dashboard/components/app-register/app-register.scss b/src/features/dashboard/components/app-register/app-register.scss
@@ -72,6 +72,10 @@
         top: -4px;
       }
     }
+
+    &__link:hover {
+      color: var(--component-textIcon-normal-prominent);
+    }
   }
 }
 

diff --git a/src/features/dashboard/components/app-register/app-register.tsx b/src/features/dashboard/components/app-register/app-register.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Translate, { translate } from '@docusaurus/Translate';
-import { Button, Text } from '@deriv-com/quill-ui';
+import { Button, Link, Text } from '@deriv-com/quill-ui';
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import CustomCheckbox from '@site/src/components/CustomCheckbox';
@@ -22,13 +22,14 @@ const TermsAndConditions: React.FC<TTermsAndConditionsProps> = ({ register }) =>
         <label htmlFor='tnc_approval' className='app-register-container__tnc__label'>
           <Text>
             {translate({ message: `By registering your application, you acknowledge that you‘ve read and accepted the Deriv API`})} {' '}
-            <a
+            <Link
               href='https://deriv.com/tnc/business-partners-api-user.pdf'
               target='_blank'
               rel='noreferrer'
+              className='app-register-container__tnc__link'
             >
-              <span><Translate>terms and conditions</Translate></span>
-            </a>
+              <Translate>terms and conditions</Translate>
+            </Link>
           </Text>
         </label>
       </CustomCheckbox>

diff --git a/src/features/dashboard/manage-dashboard/manage-dashboard.scss b/src/features/dashboard/manage-dashboard/manage-dashboard.scss
@@ -4,4 +4,8 @@
 
 .breadcrumbs-wrapper {
   padding: 1rem 0;
+
+  a, a:active, a:visited {
+    text-decoration: none;
+  }
 }