fix: styling and markdown issues

deriv-com · May 22, 2024 · 4a25b33 · 4a25b33
1 parent 786f254
commit 4a25b33
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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