From 4a25b338d14ed333ce45e658d28036dfa124c8d3 Mon Sep 17 00:00:00 2001
From: shafin-deriv <shafin@regentmarkets.com>
Date: Wed, 22 May 2024 16:23:29 +0800
Subject: [PATCH] fix: styling and markdown issues

---
 docs/core-concepts/websocket/index.md            |  4 ++--
 docusaurus.config.js                             |  9 ++++++---
 .../Home/WaysToEarn/WaysToEarn.module.scss       | 11 +++++++----
 src/features/Home/WaysToEarn/WaysToEarn.tsx      | 16 ++++++++++------
 4 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/docs/core-concepts/websocket/index.md b/docs/core-concepts/websocket/index.md
index f6a267787..7be3aca7f 100644
--- a/docs/core-concepts/websocket/index.md
+++ b/docs/core-concepts/websocket/index.md
@@ -144,5 +144,5 @@ Sec-WebSocket-Accept: rG8wsswmHTJ85lJgAE3M5RTmcCE=
 
 ## References
 
-- ** [WebSockets APIs - MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket)**
-- ** [WebSocket - Javascript Info](https://javascript.info/websocket)**
+- **[WebSockets APIs - MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket)**
+- **[WebSocket - Javascript Info](https://javascript.info/websocket)**
diff --git a/docusaurus.config.js b/docusaurus.config.js
index ede3c7091..252f0920e 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -1,6 +1,8 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
-const prismReactRenderer = require('prism-react-renderer');
+const { themes } = require('prism-react-renderer');
+const lightTheme = themes.nightOwlLight;
+const darkTheme = themes.vsDark;
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -125,8 +127,9 @@ const config = {
         ],
       },
       prism: {
-        theme: prismReactRenderer?.themes?.nightOwlLight,
-        darkTheme: prismReactRenderer?.themes?.vsDark,
+        theme: lightTheme,
+        darkTheme: darkTheme,
+        additionalLanguages: ['bash', 'diff', 'json'],
       },
       liveCodeBlock: {
         /**
diff --git a/src/features/Home/WaysToEarn/WaysToEarn.module.scss b/src/features/Home/WaysToEarn/WaysToEarn.module.scss
index 3b4625497..ca3d135da 100644
--- a/src/features/Home/WaysToEarn/WaysToEarn.module.scss
+++ b/src/features/Home/WaysToEarn/WaysToEarn.module.scss
@@ -35,10 +35,13 @@
       .Margin {
         margin: 0;
       }
-      img {
-        width: auto;
-        height: rem(3.2);
-        margin-right: rem(1);
+      p {
+        width: 92%;
+      }
+      .WaysImg {
+        width: 32px;
+        height: auto;
+        margin-right: 8px;
       }
 
       @media screen and (max-width: 992px) {
diff --git a/src/features/Home/WaysToEarn/WaysToEarn.tsx b/src/features/Home/WaysToEarn/WaysToEarn.tsx
index 9027b5404..840bca29e 100644
--- a/src/features/Home/WaysToEarn/WaysToEarn.tsx
+++ b/src/features/Home/WaysToEarn/WaysToEarn.tsx
@@ -2,6 +2,10 @@ import React from 'react';
 import { Badge, Text } from '@deriv/ui';
 import styles from './WaysToEarn.module.scss';
 
+const CheckIcon = () => {
+  return <img src='/img/checklist-icon-red.svg' className={styles.WaysImg} />;
+};
+
 export const WaysToEarn = () => {
   return (
     <article className={styles.WaysContainer} data-testid='ways-to-earn'>
@@ -14,11 +18,11 @@ export const WaysToEarn = () => {
         <section>
           <article className={styles.Ways}>
             <Badge
-              icon_src='/img/checklist-icon-red.svg'
+              prefix_icon={<CheckIcon />}
               label='regular'
               size='large'
               spacing='loose'
-              visiblity='icon-and-label'
+              visibility='icon-and-label'
             >
               <Text type='paragraph-1' className={styles.Margin}>
                 Register your app with Deriv, and add a percentage markup to the contract prices to
@@ -28,11 +32,11 @@ export const WaysToEarn = () => {
           </article>
           <article className={styles.Ways}>
             <Badge
-              icon_src='/img/checklist-icon-red.svg'
+              prefix_icon={<CheckIcon />}
               label='regular'
               size='large'
               spacing='loose'
-              visiblity='icon-and-label'
+              visibility='icon-and-label'
             >
               <Text type='paragraph-1' className={styles.Margin}>
                 Sign up as an affiliate, build your app, and get commissions on trades completed via
@@ -42,11 +46,11 @@ export const WaysToEarn = () => {
           </article>
           <article className={styles.Ways}>
             <Badge
-              icon_src='/img/checklist-icon-red.svg'
+              prefix_icon={<CheckIcon />}
               label='regular'
               size='large'
               spacing='loose'
-              visiblity='icon-and-label'
+              visibility='icon-and-label'
             >
               <Text type='paragraph-1' className={styles.Margin}>
                 Sign up as a payment agent, build your own custom payment website, and use our API