Hubert / Update index scss (#279)

Author: hubert-deriv

src/components/api-guide/ApiGuide/ApiGuide.jsx

@@ -18,7 +18,7 @@ export default function ApiGuide() {
                 <h1>API guide</h1>
                 {isMobile && <RenderOfficialDomainContents Component={Navigator} />}
                 <div className={styles.textBlock}>
-                    <h2 id='what-is-api'>What is API?</h2>
+                    <h2 id='what-is-an-api'>What is an API?</h2>
                     <p>
                         API stands for Application Programming Interface - a software that allows 2 or more computer
                         programs to communicate with each other. These 2 programs are usually referred to as server and
@@ -70,7 +70,7 @@ export default function ApiGuide() {
                     <div className={styles.apiGuideImage}>
                         <img src={howAPIWorksUrl} alt='How API works' loading='lazy' />
                     </div>
-                    <h3>Client libraries</h3>
+                    <h4>Client libraries</h4>
                     <p>
                         {' '}
                         Client libraries are pre-written pieces of code that can be used to send API calls instead of

src/components/api-guide/ApiGuide/ApiGuideTable/ApiGuideTable.module.scss

@@ -10,7 +10,7 @@
   }
   td {
     padding: 2.4rem 3.2rem;
-    box-shadow: inset 0 -1px 0 var(--gray-15);
+    box-shadow: inset 0 -0.1rem 0 var(--gray-15);
   }
 }
 

src/components/api-guide/ApiGuide/DerivGuideContent/DerivGuideContent.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { InlineCode } from '../../../global/InlineCode/InlineCode';
 import ApiGuideTable from '../ApiGuideTable/ApiGuideTable';
 import CodeBlockSingleLanguage from '../../../global/CodeBlock/CodeBlockSingleLanguage';
 import styles from '../ApiGuide.module.scss';
@@ -79,7 +80,7 @@ export const DerivGuideContent = () => {
                         Client's stake with the markup = 1.07 USD + (2 USD x 2%) = <b>1.11 USD</b>
                     </li>
                 </ul>
-                <h3>Conditions of using the Deriv API</h3>
+                <h4>Conditions of using the Deriv API</h4>
                 <p>
                     The Deriv API is free of charge and is subject to our{' '}
                     <a href='https://deriv.com/terms-and-conditions'>terms and conditions</a> and{' '}
@@ -120,7 +121,7 @@ export const DerivGuideContent = () => {
                     For more information on how to write a client using WebSockets, visit this{' '}
                     <a href='/docs/'>guide</a>.
                 </p>
-                <h2 id='json'>JSON</h2>
+                <h3 id='json'>JSON</h3>
                 <p>
                     JavaScript Object Notation (JSON) is a data format based on JavaScript. However, it is completely
                     language-independent, and can be used by any modern programming language. JSON has a good balance
@@ -156,7 +157,7 @@ export const DerivGuideContent = () => {
             <div className={styles.apiCodeBlock}>
                 <CodeBlockSingleLanguage lang='json' content={statusContent} />
             </div>
-            <h2 id='json-schemas'>JSON Schemas</h2>
+            <h3 id='json-schemas'>JSON Schemas</h3>
             <p>
                 JSON Schema is a defined format for the JSON messages used to describe their structure to Deriv API
                 users. In a nutshell, it’s a standardised way of explaining what a JSON request should look like using
@@ -186,12 +187,12 @@ export const DerivGuideContent = () => {
                 <img src={showJSONSchemaImg} alt='API Guide' loading='lazy' />
             </div>
             <p>The JSON Schema also forms the documentation for the API Explorer.</p>
-            <h2 id='authorisation'>Authorisation</h2>
+            <h3 id='authorisation'>Authorisation</h3>
             <p>
                 Third-party developers can authorise calls to the API in two different ways: via API token or via
                 OAuth2.
             </p>
-            <h3>API token</h3>
+            <h4>API token</h4>
             <p>
                 An API token is a unique identifier of a client that requests access from a server. It's the simplest
                 way of authorisation.
@@ -223,7 +224,7 @@ export const DerivGuideContent = () => {
                 Please bear in mind that the API token can be used with any app, so both your app and your clients need
                 to keep it secure.
             </p>
-            <h3>OAuth2</h3>
+            <h4>OAuth2</h4>
             <p>
                 OAuth stands for Open Authorisation - a protocol that allows a client access resources hosted on a
                 server on behalf of the user without revealing the credentials.
@@ -245,7 +246,7 @@ export const DerivGuideContent = () => {
             <div className={styles.apiGuideImage}>
                 <img src={howOauthWorksImg} alt='API Guide' loading='lazy' />
             </div>
-            <h2>What do you need to do to use OAuth authorisation for Deriv API?</h2>
+            <h3>What do you need to do to use OAuth authorisation for Deriv API?</h3>
             <ul>
                 <li>
                     <p>
@@ -270,10 +271,11 @@ export const DerivGuideContent = () => {
                 will have arguments added to it with the user's session tokens, and will look similar to this:
             </p>
             <p>
-                <code className='inline-code'>
-                    https://mywebsite.com/redirect/?acct1=cr799393& token1=a1-f7pnteezo4jzhpxclctizt27hyeot&cur1=usd&
-                    acct2=vrtc1859315& token2=a1clwe3vfuuus5kraceykdsoqm4snfq& cur2=usd&state=
-                </code>
+                <InlineCode>
+                    https://&#91;YOUR_WEBSITE_URL&#93;/redirect/?acct1=cr799393&
+                    token1=a1-f7pnteezo4jzhpxclctizt27hyeot&cur1=usd& acct2=vrtc1859315&
+                    token2=a1clwe3vfuuus5kraceykdsoqm4snfq& cur2=usd&state=
+                </InlineCode>
             </p>
             <p>In the parameters of the URL you will see all the accounts and the session token for each account.</p>
             <ul>

src/components/api-guide/ApiGuide/Navigator/Navigator.module.scss

@@ -3,25 +3,25 @@
   flex-direction: column;
   width: 100%;
   background-color: var(--gray-06);
-  right: 40px;
+  right: 4rem;
   z-index: 10;
   box-sizing: border-box;
   padding: 1.6rem;
-  margin: 0 auto 30px;
+  margin: 0 auto 3rem;
   .navigatorContent {
     display: flex;
     flex-direction: column;
     height: 0;
     overflow: hidden;
     transition: height 0.3s ease-in-out;
     &.opened {
-      height: 370px;
+      height: 37rem;
     }
     .navigatorLink {
-      line-height: 26px;
-      font-size: 12px;
+      line-height: 2.6rem;
+      font-size: var(--text-size-xxs);
       color: var(--gray-05);
-      padding: 4px 0;
+      padding: 0.4rem 0;
       &:hover {
         background-color: var(--gray-01);
       }
@@ -36,22 +36,22 @@
     align-items: center;
     justify-content: space-between;
     .navigatorTitle {
-      font-size: 18px;
+      font-size: var(--text-size-xsm);
       margin: 0;
       &.bold {
         font-weight: 700;
       }
     }
     .arrow {
-      background-size: 22px;
+      background-size: 2.2rem;
       background-position: center;
       background-repeat: no-repeat;
       cursor: pointer;
       background-image: url(/img/arrow_up.svg);
       transform: rotate(-180deg);
       transition: transform 0.2s;
-      width: 22px;
-      height: 22px;
+      width: 2.2rem;
+      height: 2.2rem;
       &.down {
         transform: rotate(0deg);
       }
@@ -61,14 +61,14 @@
 
 [data-state~="responsive.mobileTablet"] {
   .navigator {
-    width: 650px;
+    width: 65rem;
   }
 }
 
 [data-state*="responsive.desktop"] {
   .navigator {
-    max-width: 270px;
-    width: 270px;
+    max-width: 27rem;
+    width: 27rem;
     position: fixed;
   }
 }

src/components/api-guide/ApiGuide/Navigator/Navigator.tsx

@@ -13,8 +13,8 @@ export default function Navigator() {
                 />
             </div>
             <div className={`${styles.navigatorContent} ${is_closed ? '' : styles.opened}`}>
-                <a className={styles.navigatorLink} href='#what-is-api'>
-                    What is API?
+                <a className={styles.navigatorLink} href='#what-is-an-api'>
+                    What is an API?
                 </a>
                 <a className={styles.navigatorLink} href='#the-deriv-api'>
                     The Deriv API

src/components/app-registration/AppManagement/AppManagement.module.scss

@@ -10,18 +10,24 @@
     thead {
         background-color: var(--gray-02);
         height: 5rem;
-        text-align: var(--text-align-left);
     }
 
     th,
     td {
+        text-align: var(--text-align-left);
         padding: 1.6rem;
         min-width: 12rem;
         max-width: 20rem;
         overflow: hidden;
         text-overflow: ellipsis;
     }
 
+    td:nth-child(3) {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.64rem;
+    }
+
     td:last-child,
     th:last-child {
         white-space: nowrap;
@@ -36,12 +42,6 @@
     tbody tr:nth-child(even) {
         background-color: var(--gray-03);
     }
-
-    td:nth-child(2n + 3) {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.64rem;
-    }
 }
 
 [data-state~='registration.logged_in.manage_tab'] .manageApps {
@@ -85,7 +85,7 @@
 
 .appActions {
     display: flex;
-    justify-content: var(--text-align-center);
+    justify-content: var(--text-align-left);
     margin: 3rem;
 }
 
@@ -100,7 +100,7 @@
         border-radius: 4px;
         color: var(--app-registration-tab-active-font);
         text-align: var(--text-align-center);
-        border-radius: 6px;
+        border-radius: 4px;
         padding: 0.5rem 0;
         position: absolute;
         z-index: 1;
@@ -124,7 +124,7 @@
     }
 
     &:hover {
-        transform: translateY(-2px);
+        transform: translateY(-0.2rem);
 
         .tooltipText {
             visibility: visible;
@@ -134,13 +134,13 @@
 }
 
 .scope {
-    border: 0.16rem solid #d6dadb;
-    border-radius: 0.4rem;
-    padding: 0.32rem 0.32rem;
-    font-size: var(--text-size-xxs);
+    border: 1.6px solid var(--border-normal);
+    border-radius: 4px;
+    padding: 0.24rem 0.24rem;
+    font-size: 1.1rem;
 }
 
 .adminScope {
-    border: 0.1rem solid var(--teal-01);
+    border: 1.6px solid var(--teal-01);
     color: var(--teal-01);
 }

src/components/app-registration/AppRegistration/AppRegistration.scss

@@ -2,13 +2,12 @@
   display: none;
 }
 
-.app-registration-header .form-title {
-  font-size: var(--text-size-xm);
-}
-
-.app-registration-header .form-title,
-.app-registration-header .form-subtitle {
-  text-align: var(--text-align-center);
+.app-registration-header {
+  padding: 0 2rem;
+  .form-title,
+  .form-subtitle {
+    text-align: var(--text-align-center);
+  }
 }
 
 /* add delete.svg icon to app-remove-btn */
@@ -83,7 +82,7 @@
   height: auto;
   background-color: var(--white);
   border-radius: 16px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
   justify-content: space-between;
 }
 
@@ -166,7 +165,7 @@
   background-color: var(--white);
   color: black;
   font-weight: var(--text-weight-bold);
-  border: 1px solid #999999;
+  border: 0.1rem solid var(--gray-05);
   height: 4rem;
   border-radius: 4px;
   padding: 1rem 1.6rem 1rem 1.6rem;
@@ -200,6 +199,7 @@ fieldset {
   width: 80%;
   margin: 0 auto;
   border: none;
+
   .first {
     margin-top: 2rem;
   }
@@ -257,8 +257,7 @@ fieldset {
   display: none;
 }
 
-[data-state~="registration.logged_in.manage_tab.loadingApps.empty"]
-  .no-apps-wrapper {
+[data-state~="registration.logged_in.manage_tab.loadingApps.empty"] .no-apps-wrapper {
   display: inline-block;
   visibility: visible;
 }
@@ -318,7 +317,7 @@ fieldset {
   width: 100%;
   right: 0;
   top: 0;
-  bottom: -1px;
+  bottom: -0.1rem;
 }
 
 [data-state~="registration.logged_in.update_mode"] .register-app {
@@ -346,8 +345,7 @@ fieldset {
 }
 
 /*  display register-app when [data-state] success */
-[data-state~="registration.logged_in.register_tab.unfolded_form.submitting_registration.registration_success"]
-  .registration-dialog {
+[data-state~="registration.logged_in.register_tab.unfolded_form.submitting_registration.registration_success"] .registration-dialog {
   display: flex;
 }
 
@@ -387,10 +385,11 @@ fieldset {
 
 [data-state~="responsive.mobileL"],
 [data-state~="responsive.mobileTablet"],
-[data-state*="responsive.desktop"] { 
+[data-state*="responsive.desktop"] {
   .dialog {
     width: 38.5rem;
   }
+
   .dialog-delete,
   .dialog-update {
     width: 32rem;
@@ -447,4 +446,4 @@ fieldset {
   .expandable-form .register-app-button {
     padding: 1.2rem 2rem;
   }
-}
+}