From 7e9316544a1edb79f148695b456aeae7475f9c34 Mon Sep 17 00:00:00 2001
From: Agrim Jain <agrim@regentmarkets.com>
Date: Mon, 24 Jun 2024 14:48:41 +0400
Subject: [PATCH] chore: fix the color by using text quill

---
 .../components/templates/footer/index.tsx     | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/themes/gatsby-theme-deriv/src/features/components/templates/footer/index.tsx b/themes/gatsby-theme-deriv/src/features/components/templates/footer/index.tsx
index 017247e4c99..90347f965cf 100644
--- a/themes/gatsby-theme-deriv/src/features/components/templates/footer/index.tsx
+++ b/themes/gatsby-theme-deriv/src/features/components/templates/footer/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import Cookies from 'js-cookie'
 import { Footer } from '@deriv-com/blocks'
-import { qtJoin } from '@deriv/quill-design'
+import { qtJoin, Text } from '@deriv/quill-design'
 import {
     EuFooterNavData,
     RowFooterNavData,
@@ -19,6 +19,7 @@ import useThirdPartyFlags from 'components/hooks/use-third-party-flags'
 import { getLocationPathname } from 'common/utility'
 import useRegion from 'components/hooks/use-region'
 import useBuildVariant from 'features/hooks/use-build-variant'
+import { Localize } from 'components/localization'
 // import { socialIconROW, socialIconEU, socialIconCareer } from './validate-social-icons-data'
 
 const overrideWithLang = (buttons, lang) =>
@@ -60,10 +61,10 @@ export const MainFooter = () => {
         const socialIconCareer = filterSocialIcons(career_social_media_icons, socialButtonsCareers)
         const socialIconCPA = filterSocialIcons(cpa_social_media_icons, socialButtonsCPA)
 
-        const region_buttons = region === "eu" ? socialIconEU : is_cpa_plan ? socialIconCPA : socialIconROW
+        const region_buttons = region === 'eu' ? socialIconEU : is_cpa_plan ? socialIconCPA : socialIconROW
         const buttons = is_career ? socialIconCareer : region_buttons
         setSocialButtons(overrideWithLang(buttons, lang))
-        setWarnText(region !== "eu" && !is_cpa_plan ? warnText : null)
+        setWarnText(region !== 'eu' && !is_cpa_plan ? warnText : null)
     }, [
         lang,
         region,
@@ -77,14 +78,21 @@ export const MainFooter = () => {
 
     return (
         <Footer.FooterBlock
-            warningText={warn_text}
+            warningText={warn_text && (
+                <Text className={`text-solid-slate-600 ${region !== 'eu' && !is_cpa_plan ? 'additional-warning-classname' : ''}`} size="sm">
+                    <Localize
+                        translate_text={warn_text}
+                        values={{ loss_percent: 'some_value' }} // Replace 'some_value' with the appropriate value
+                    />
+                </Text>
+            )}
             socialButtons={social_buttons}
             banner={DerivGoBanner}
             awards={IIPAward}
             descriptionContent={DescriptionContent}
-            className={qtJoin((region === "eu" || is_cpa_plan) && 'mb-[120px] lg:mb-[80px]')}
+            className={qtJoin((region === 'eu' || is_cpa_plan) && 'mb-[120px] lg:mb-[80px]')}
         >
-            <Footer.MainNavContent items={region === "eu" ? EuFooterNavData : RowFooterNavData} cols="six" />
+            <Footer.MainNavContent items={region === 'eu' ? EuFooterNavData : RowFooterNavData} cols='six' />
         </Footer.FooterBlock>
     )
 }