From 6285b393165fe1f942a1dbb3d2f83d0fae1e5bf2 Mon Sep 17 00:00:00 2001
From: prince-deriv <prince@deriv.com>
Date: Wed, 15 Nov 2023 16:19:14 +0400
Subject: [PATCH] fix: faq image padding and faq pages header padding

---
 .../help-center/sections/answers/index.tsx    |  1 +
 .../sections/search/components.tsx            | 11 ++++++-
 .../lib/help-center/sections/search/data.tsx  | 29 ++++++++++++-------
 3 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/libs/templates/src/lib/help-center/sections/answers/index.tsx b/libs/templates/src/lib/help-center/sections/answers/index.tsx
index 7fdcde3a2..0591c4774 100644
--- a/libs/templates/src/lib/help-center/sections/answers/index.tsx
+++ b/libs/templates/src/lib/help-center/sections/answers/index.tsx
@@ -22,6 +22,7 @@ const AnswerSection = ({ header, questions, answers }: FAQDataType) => {
         content={{
           data: accordionItems,
         }}
+        className="p-general-none"
       />
     </Section>
   );
diff --git a/libs/templates/src/lib/help-center/sections/search/components.tsx b/libs/templates/src/lib/help-center/sections/search/components.tsx
index f6764a48e..f3c80fea8 100644
--- a/libs/templates/src/lib/help-center/sections/search/components.tsx
+++ b/libs/templates/src/lib/help-center/sections/search/components.tsx
@@ -1,4 +1,9 @@
-import { CustomLink, CustomLinkProps } from '@deriv-com/components';
+import {
+  CustomLink,
+  CustomLinkProps,
+  OptimizedImage,
+  OptimizedImageProps,
+} from '@deriv-com/components';
 import { Text, qtMerge, BodyTypographyProps } from '@deriv/quill-design';
 import { PropsWithChildren, ReactNode } from 'react';
 
@@ -74,3 +79,7 @@ export const FaqList = ({
     ))}
   </ul>
 );
+
+export const FaqImage = ({ ...otherProps }: OptimizedImageProps) => (
+  <OptimizedImage className="p-general-md" {...otherProps} />
+);
diff --git a/libs/templates/src/lib/help-center/sections/search/data.tsx b/libs/templates/src/lib/help-center/sections/search/data.tsx
index 0a3afe358..267ab2503 100644
--- a/libs/templates/src/lib/help-center/sections/search/data.tsx
+++ b/libs/templates/src/lib/help-center/sections/search/data.tsx
@@ -1,9 +1,16 @@
-import { CardContent, OptimizedImage } from '@deriv-com/components';
+import { CardContent } from '@deriv-com/components';
 
 import { FAQDataType } from '../../types';
 
 import { cardSetting, faqCardsMaxItems } from './types';
-import { FaqBox, FaqLink, FaqList, FaqText, generateFaqs } from './components';
+import {
+  FaqBox,
+  FaqLink,
+  FaqList,
+  FaqText,
+  FaqImage,
+  generateFaqs,
+} from './components';
 
 export const FAQData: FAQDataType[] = [
   {
@@ -834,7 +841,7 @@ export const FAQData: FAQDataType[] = [
                   On the <strong>Trader’s Hub</strong>, hit{' '}
                   <strong>Open</strong> next to your Deriv MT5 account.
                 </FaqText>
-                <OptimizedImage
+                <FaqImage
                   imageName="help-centre/faq/deriv-mt5-open.png"
                   alt="MT5 Open"
                   width={568}
@@ -843,7 +850,7 @@ export const FAQData: FAQDataType[] = [
               </FaqBox>,
               <FaqBox>
                 <FaqText>Hit the pencil icon next the password.</FaqText>
-                <OptimizedImage
+                <FaqImage
                   imageName="help-centre/faq/hit-the-pencil.png"
                   alt="MT5 Pencil"
                   width={568}
@@ -855,7 +862,7 @@ export const FAQData: FAQDataType[] = [
                   In the next screen, hit Change password under Deriv MT5
                   password.
                 </FaqText>
-                <OptimizedImage
+                <FaqImage
                   imageName="help-centre/faq/deriv-mt5-password.png"
                   alt="MT5 Password"
                   width={568}
@@ -864,7 +871,7 @@ export const FAQData: FAQDataType[] = [
               </FaqBox>,
               <FaqBox>
                 <FaqText>Hit the pencil icon next the password.</FaqText>
-                <OptimizedImage
+                <FaqImage
                   imageName="help-centre/faq/hit-the-pencil.png"
                   alt="MT5 Pencil"
                   width={568}
@@ -876,7 +883,7 @@ export const FAQData: FAQDataType[] = [
                   Hit Confirm and follow the on-screen instructions to change
                   your Deriv MT5 password.
                 </FaqText>
-                <OptimizedImage
+                <FaqImage
                   imageName="help-centre/faq/hit-confirm.png"
                   alt="Hit Confirm"
                   width={568}
@@ -927,7 +934,7 @@ export const FAQData: FAQDataType[] = [
                   On the <strong>Trader’s Hub</strong>, hit{' '}
                   <strong>Open</strong> next to your Deriv MT5 account.
                 </FaqText>
-                <OptimizedImage
+                <FaqImage
                   imageName="help-centre/faq/deriv-mt5-open.png"
                   alt="MT5 Open"
                   width={568}
@@ -937,7 +944,7 @@ export const FAQData: FAQDataType[] = [
               </FaqBox>,
               <FaqBox>
                 <FaqText>Hit the pencil icon next to the password.</FaqText>
-                <OptimizedImage
+                <FaqImage
                   imageName="help-centre/faq/hit-the-pencil.png"
                   alt="MT5 Pencil"
                   width={568}
@@ -948,7 +955,7 @@ export const FAQData: FAQDataType[] = [
                 <FaqText>
                   On the next screen, select <strong>Investor password.</strong>
                 </FaqText>
-                <OptimizedImage
+                <FaqImage
                   imageName="help-centre/faq/investor-password.png"
                   alt="Investor Password"
                   width={568}
@@ -972,7 +979,7 @@ export const FAQData: FAQDataType[] = [
             Hit <strong>Open</strong> next to your Deriv MT5 account and find
             the server below the broker name.
           </FaqText>
-          <OptimizedImage
+          <FaqImage
             imageName="help-centre/faq/deriv-mt5-server.png"
             alt="MT5 Server"
             width={568}