Merge pull request #81 from shafin-deriv/shafin/DAPI-578/chore-fix-tr…

…anslation-issues-2

Shafin/dapi 578/chore fix translation issues 2

docs/intro.md

@@ -17,31 +17,34 @@ keywords:
 description: Get an overview of the available Deriv API code examples and languages, and how to use it to create your trading app.
 ---
 
+```mdx-code-block
+import Link from '@docusaurus/Link';
 import RenderOfficialContents from '@site/src/components/RenderOfficialContents';
+```
 
 Our Documentation is divided in several sections:
 
 <RenderOfficialContents>
   <ul>
     <li>
-      <a href='category/core-concepts'>Core concepts</a>
+      <Link href='/docs/category/core-concepts'>Core concepts</Link>
     </li>
     <li>
-      <a href='category/code-examples'>Code examples</a>
+      <Link href='/docs/category/code-examples'>Code examples</Link>
     </li>
     <li>
-      <a href='category/languages'>Languages</a>
+      <Link href='/docs/category/languages'>Languages</Link>
     </li>
     <li>
-      <a href='category/guides'>Guides</a>
+      <Link href='/docs/category/guides'>Guides</Link>
     </li>
     <li>
-      <a href='setting-up-a-deriv-application'>Setting up a deriv app</a>
+      <Link href='/docs/setting-up-a-deriv-application'>Setting up a deriv app</Link>
     </li>
   </ul>
   <ul>
     <li>
-      <a href='category/code-examples'>Code examples</a>
+      <Link href='/docs/category/code-examples'>Code examples</Link>
     </li>
   </ul>
 </RenderOfficialContents>
@@ -51,21 +54,21 @@ Our Documentation is divided in several sections:
 </RenderOfficialContents>
 
 <RenderOfficialContents>
-    Have a look at the <a href='category/core-concepts'>Core concepts</a> pages and take your
+    Have a look at the <Link href='/docs/category/core-concepts'>Core concepts</Link> pages and take your
     time to read through it. These concepts will help you get familiar with our WebSocket server api
     and how to use it more efficiently. They are not related to any of our frameworks or libraries.
 </RenderOfficialContents>
 
 <RenderOfficialContents>
-    When you read through the <a href='category/core-concepts'>Core concepts</a> page, you can
+    When you read through the <Link href='/docs/category/core-concepts'>Core concepts</Link> page, you can
     start choosing your implementation approach based on the language, framework or library you want
     to use in your application.
 </RenderOfficialContents>
 
 <h4>Code Examples</h4>
 
 If you want to know how you can implement our API within your code, then we suggest to have a look
-at our <a href='category/code-examples'>Code examples</a>. These code examples come in
+at our <Link href='/docs/category/code-examples'>Code examples</Link>. These code examples come in
 `CodeSandboxes`. This allows you to easily fork the code examples and experiment with them for
 personal use. For now we only have JavaScript code examples, but, we plan to add more examples
 that are created with different languages, frameworks and libraries in the near future.
@@ -76,7 +79,7 @@ that are created with different languages, frameworks and libraries in the near
 
 <RenderOfficialContents>
     When using our code examples, we also suggest to have a look at our{' '}
-    <a href='category/languages'>Languages</a> section. Here, we describe in detail how you
+    <Link href='/docs/category/languages'>Languages</Link> section. Here, we describe in detail how you
     can setup your personal project properly to make use of our API. This will surely come helpful
     when you try to integrate some of our code examples in your own project.
 </RenderOfficialContents>
@@ -88,7 +91,7 @@ that are created with different languages, frameworks and libraries in the near
 <RenderOfficialContents>
     If you want to know for example how you can `monetize your application` or how to create a
     `secure way for users to log in` to your application, then we provide a handful of{' '}
-    <a href='category/guides'>Guides</a> that can assist you with that.
+    <Link href='/docs/category/guides'>Guides</Link> that can assist you with that.
 </RenderOfficialContents>
 
 <RenderOfficialContents>
@@ -98,5 +101,5 @@ that are created with different languages, frameworks and libraries in the near
 <RenderOfficialContents>
     If you want to know more about the essentials that are needed to setup your own application,
     then have a look at the{' '}
-    <a href='setting-up-a-deriv-application'>Setting up a Deriv application</a> section.
+    <Link href='/docs/setting-up-a-deriv-application'>Setting up a Deriv application</Link> section.
 </RenderOfficialContents>

docs/setting-up-a-deriv-application.md

@@ -14,11 +14,15 @@ keywords:
 description: A step-by-step guide on creating your Deriv API token and building your trading application with the help of our trading API. Learn more.
 ---
 
+```mdx-code-block
+import Link from '@docusaurus/Link';
+```
+
 #### Deriv account
 
-If you don't have a Deriv account yet, you can easily create one by visiting our signup page or using the <a href="api-explorer#new_account_virtual" target="_blank" rel="noopener noreferrer">new_account_virtual</a> API call. It's completely free. And if you have an account already, please log in using your account details. To avoid any accidental loss of funds during testing, we recommend using your demo account instead of a real account.
+If you don't have a Deriv account yet, you can easily create one by visiting our signup page or using the <Link href="/api-explorer#new_account_virtual" target="_blank" rel="noopener noreferrer">new_account_virtual</Link> API call. It's completely free. And if you have an account already, please log in using your account details. To avoid any accidental loss of funds during testing, we recommend using your demo account instead of a real account.
 
-To earn markup, get a Deriv real account to receive your monthly earnings. You can also create a real account using <a href="api-explorer#new_account_real" target="_blank" rel="noopener noreferrer">new_account_real</a> or <a href="api-explorer#new_account_maltainvest" target="_blank" rel="noopener noreferrer">new_account_maltainvest</a> API calls.
+To earn markup, get a Deriv real account to receive your monthly earnings. You can also create a real account using <Link href="/api-explorer#new_account_real" target="_blank" rel="noopener noreferrer">new_account_real</Link> or <Link href="/api-explorer#new_account_maltainvest" target="_blank" rel="noopener noreferrer">new_account_maltainvest</Link> API calls.
 
 :::caution
 To create Deriv applications, you'll need an API token with the Admin scope for the account you wish to use for your application.
@@ -34,7 +38,7 @@ To create a new API token, follow these steps:
 2. Provide a name for your token
 3. Click **Create**
 
-Alternatively, you can create an API token via the <a href="api-explorer#api_token" target="_blank" rel="noopener noreferrer">api_token</a> API call.
+Alternatively, you can create an API token via the <Link href="/api-explorer#api_token" target="_blank" rel="noopener noreferrer">api_token</Link> API call.
 
 :::caution
 You need a token with the `Admin` scope to create an application.

src/components/Footer/Footer.module.scss

@@ -17,6 +17,7 @@
     display: flex;
     flex-direction: row;
     gap: rem(9.6);
+    max-width: 1264px;
   }
 
   .FooterLogo {
@@ -31,7 +32,6 @@
   .Section1 {
     display: flex;
     flex-direction: column;
-    width: 120px;
     height: 100px;
     margin-bottom: rem(4.8);
   }
@@ -112,7 +112,6 @@
     border: 1px solid #ddd;
     padding: 16px;
     border-radius: rem(2.4);
-    width: 320px !important;
   }
 
   .EmailButton {
@@ -137,6 +136,7 @@
   @media (max-width: 1090px) {
     .FooterSection {
       gap: rem(1.8);
+      max-width: 1030px;
     }
   }
 

src/features/Home/ClientLibraries/ClientLibraries.module.scss

@@ -67,3 +67,9 @@
     }
   }
 }
+
+@media screen and (max-width: 400px) {
+  .Link {
+    max-width: 260px;
+  }
+}

src/features/Home/ClientLibraries/ClientLibraries.tsx

@@ -35,10 +35,12 @@ export const ClientLibraries = () => {
               target='_blank'
             >
               <img src='/img/js.svg'></img>
-              <label>
-                <Translate>Go to the JavaScript library</Translate>
-              </label>
-              <img className={styles.LibraryChevron} src='/img/library-chevron.svg' />
+              <div className={styles.Link}>
+                <label>
+                  <Translate>Go to the JavaScript library</Translate>
+                </label>
+                <img className={styles.LibraryChevron} src='/img/library-chevron.svg' />
+              </div>
             </a>
           </div>
           <div className={styles.LogoAndLink}>
@@ -49,10 +51,12 @@ export const ClientLibraries = () => {
               target='_blank'
             >
               <img src='/img/py.svg'></img>
-              <label>
-                <Translate>Go to the Python library</Translate>
-              </label>
-              <img className={styles.LibraryChevron} src='/img/library-chevron.svg' />
+              <div className={styles.Link}>
+                <label>
+                  <Translate>Go to the Python library</Translate>
+                </label>
+                <img className={styles.LibraryChevron} src='/img/library-chevron.svg' />
+              </div>
             </a>
           </div>
           <div className={styles.LogoAndLink}>
@@ -63,10 +67,12 @@ export const ClientLibraries = () => {
               target='_blank'
             >
               <img src='/img/flutter.svg'></img>
-              <label>
-                <Translate>Go to the Flutter library</Translate>
-              </label>
-              <img className={styles.LibraryChevron} src='/img/library-chevron.svg' />
+              <div className={styles.Link}>
+                <label>
+                  <Translate>Go to the Flutter library</Translate>
+                </label>
+                <img className={styles.LibraryChevron} src='/img/library-chevron.svg' />
+              </div>
             </a>
           </div>
         </nav>

src/hooks/useDynamicImportJSON/index.tsx

@@ -1,15 +1,16 @@
 import { useHistory, useLocation } from '@docusaurus/router';
+import { translate } from '@docusaurus/Translate';
 import { TInfo } from '@site/src/types';
 import { playground_requests } from '@site/src/utils/playground_requests';
 import { useCallback, useEffect, useState } from 'react';
 
 const useDynamicImportJSON = () => {
   const [text_data, setTextData] = useState({
     request: '',
-    selected_value: 'Select API Call - Version 3',
+    selected_value: translate({ message: 'Select API Call - Version 3' }),
     name: null,
   });
-  const [selected, setSelected] = useState('Select API Call - Version 3');
+  const [selected, setSelected] = useState(translate({ message: 'Select API Call - Version 3' }));
   const [response_info, setResponseInfo] = useState({});
   const [request_info, setRequestInfo] = useState<TInfo>({});
   const history = useHistory();

src/styles/index.scss

@@ -153,6 +153,7 @@ h6 {
 h1,
 h2 {
   font-family: var(--ubuntu-font-family);
+  hyphens: auto;
 }
 
 html,