Hubert / fixing fontsizes and inputs staging (#277)

Author: hubert-deriv

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

@@ -45,6 +45,7 @@
 [data-state~="responsive.mobileS"] {
   .apiGuideImage {
     overflow: auto;
+    justify-content: unset;
     img {
       width: 90rem;
     }

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

@@ -1,6 +1,6 @@
 .apiGuideTable {
   width: 75%;
-  border-radius: 1.6rem;
+  border-radius: 4px;
   overflow: hidden;
   border: 1px solid var(--gray-02);
   th {

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

@@ -6,7 +6,7 @@
   right: 40px;
   z-index: 10;
   box-sizing: border-box;
-  padding: 1rem;
+  padding: 1.6rem;
   margin: 0 auto 30px;
   .navigatorContent {
     display: flex;
@@ -26,7 +26,7 @@
         background-color: var(--gray-01);
       }
       &.navigatorSubLink {
-        margin-left: 0.5rem;
+        margin-left: 0.8rem;
       }
     }
   }

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

@@ -1,15 +1,18 @@
 .manageApps {
     display: none;
+
     table {
         border-spacing: 0;
         width: 100%;
         padding: 0 5rem;
     }
+
     thead {
         background-color: var(--gray-02);
         height: 5rem;
         text-align: var(--text-align-left);
     }
+
     th,
     td {
         padding: 1.6rem;
@@ -18,18 +21,22 @@
         overflow: hidden;
         text-overflow: ellipsis;
     }
+
     td:last-child,
     th:last-child {
         white-space: nowrap;
         padding: 0 1rem;
     }
+
     td:first-child,
     th:first-child {
         padding-left: 3.2rem;
     }
+
     tbody tr:nth-child(even) {
         background-color: var(--gray-03);
     }
+
     td:nth-child(2n + 3) {
         display: flex;
         flex-wrap: wrap;
@@ -84,6 +91,7 @@
 
 .tooltip {
     position: relative;
+
     .tooltipText {
         visibility: hidden;
         width: 13rem;
@@ -102,6 +110,7 @@
         margin-left: -5.5rem;
         opacity: 0;
         transition: opacity 1s;
+
         &::after {
             content: '';
             position: absolute;
@@ -113,8 +122,10 @@
             border-color: var(--border-normal) transparent transparent transparent;
         }
     }
+
     &:hover {
         transform: translateY(-2px);
+
         .tooltipText {
             visibility: visible;
             opacity: 1;
@@ -126,9 +137,10 @@
     border: 0.16rem solid #d6dadb;
     border-radius: 0.4rem;
     padding: 0.32rem 0.32rem;
-    font-size: 1.1rem;
+    font-size: var(--text-size-xxs);
 }
+
 .adminScope {
     border: 0.1rem solid var(--teal-01);
     color: var(--teal-01);
-}
+}

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

@@ -68,6 +68,10 @@ fieldset .customTextInput:last-child {
         align-items: var(--text-align-center);
         justify-content: var(--text-align-center);
         width: 80%;
+        input[type='number'],
+        input[type='text'] {
+            height: 40px;
+        }
         input[type='number'] {
             appearance: none;
             &::-webkit-outer-spin-button,
@@ -215,6 +219,7 @@ input[type='checkbox'] {
         height: 1.1rem;
         border-radius: 2px;
         transition: background-color 0.25s, border-color 0.25s;
+        top: 3px;
         z-index: 1;
     }
     input:checked + .customCheckbox {

src/components/app-registration/AppRegistration/AppRegistrationForm/AppRegistrationForm.tsx

@@ -65,7 +65,11 @@ export default function AppRegistrationForm() {
                     <fieldset>
                         <div className={styles.formHeaderContainer}>
                             <h4 className={styles.registerFormHeader}>App information</h4>
-                            <div className={styles.description}>Paste your API token with the admin scope here.</div>
+                            <div className={styles.description}>
+                                <span>
+                                    Paste your API token with the admin scope here.
+                                </span>
+                            </div>
                         </div>
                         <div className='api-token-wrapper'>
                             <div className={styles.customTextInput} id='custom-text-input'>
@@ -121,8 +125,10 @@ export default function AppRegistrationForm() {
                             <div className={styles.formHeaderContainer}>
                                 <h4 className={styles.registerFormHeader}>Markup</h4>
                                 <div className={styles.description}>
-                                    You can earn commission by adding a markup to the price of each trade. Enter your
-                                    markup percentage here.
+                                    <span>
+                                        You can earn commission by adding a markup to the price of each trade. Enter your
+                                        markup percentage here.
+                                    </span>
                                 </div>
                             </div>
                             <div className='input-container'>
@@ -166,8 +172,10 @@ export default function AppRegistrationForm() {
                             <div className={styles.formHeaderContainer}>
                                 <h4 className={styles.registerFormHeader}>OAuth details</h4>
                                 <div className={styles.description}>
-                                    This allows clients to log in to your app using their Deriv accounts without an API
-                                    token.
+                                    <span>
+                                        This allows clients to log in to your app using their Deriv accounts without an API
+                                        token.
+                                    </span>
                                 </div>
                             </div>
                             <div className='input-container'>
@@ -233,7 +241,11 @@ export default function AppRegistrationForm() {
                             <div>
                                 <div className={styles.formHeaderContainer}>
                                     <h4 className={styles.registerFormHeader}>Scope of authorisation</h4>
-                                    <div className={styles.description}>Select the scope for your app:</div>
+                                    <div className={styles.description}>
+                                        <span>
+                                            Select the scope for your app:
+                                        </span>
+                                    </div>
                                 </div>
                             </div>
                             <div className={styles.scopesField}>

src/components/app-registration/AppRegistration/RegisterAppTabs/RegisteredAppTabs.tsx

@@ -8,14 +8,14 @@ export default function RegisteredAppTabs() {
         id="register_button"
         className="register-button"
       >
-        Register your application
+        <label>Register your application</label>
       </button>
       <button
         onClick={() => send("MANAGE_TOGGLE_TAB")}
         id="manage_button"
         className="manage-button"
       >
-        Manage existing applications
+        <label>Manage existing applications</label>
       </button>
     </div>
   );

src/components/docs/Docs/Sidebar/Sidebar.module.scss

@@ -185,6 +185,9 @@
             opacity: unset;
             font-size: var(--text-size-xs);
             color: var(--text-01);
+            > span {
+                font-size: var(--text-size-xs);
+            }
         }
         .dropdownList {
             margin-top: 1.6rem;

src/components/global/Modal/Modal.tsx

@@ -32,7 +32,11 @@ export default function Modal({
         {type === "success" && <div className={styles.modalImageSuccess} />}
         {type === "warning" && <div className={styles.modalImageWarning} />}
         <div className={styles.modalTitle}>{title}</div>
-        <div className={styles.modalDescription}>{description}</div>
+        <div className={styles.modalDescription}>
+          <span>
+            {description}
+          </span>
+        </div>
       </div>
       <div className={styles.modalFooter}>
         <Button type="secondary" onClick={onSecondaryButtonClick}>