From 0fdef4fd72106cfcb5e849dab70b123061c8bfe0 Mon Sep 17 00:00:00 2001
From: hasan-deriv <abuhasan@deriv.com>
Date: Mon, 25 Dec 2023 15:27:55 +0800
Subject: [PATCH] chore: updated class names in pages components

Signed-off-by: hasan-deriv <abuhasan@deriv.com>
---
 .../pages/ctrader-manage/ctrader-manage.tsx        |  4 ++--
 .../pages/deriv-ctrader/how-to-start/index.tsx     |  4 ++--
 src/features/pages/options/turbo/index.tsx         |  2 +-
 src/features/pages/options/vanilla/index.tsx       |  2 +-
 src/features/pages/p2p/availability/platform.tsx   | 14 +++++++-------
 src/features/pages/p2p/hero/content.tsx            |  4 ++--
 src/features/pages/p2p/steps/item.tsx              |  4 ++--
 .../partners/deriv-prime/commercial-plan/data.tsx  |  4 ++--
 .../connectivity-reliability-item.tsx              |  2 +-
 .../deriv-prime/get-in-touch/contact-form.tsx      |  4 ++--
 .../pages/partners/deriv-prime/hero/index.tsx      |  4 ++--
 .../partners/deriv-prime/meet-us-there/index.tsx   |  2 +-
 12 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/features/pages/ctrader-manage/ctrader-manage.tsx b/src/features/pages/ctrader-manage/ctrader-manage.tsx
index dae1288b68f..34ff6da4764 100644
--- a/src/features/pages/ctrader-manage/ctrader-manage.tsx
+++ b/src/features/pages/ctrader-manage/ctrader-manage.tsx
@@ -31,8 +31,8 @@ const CtraderManage = ({
                     </Typography.Heading>
                     {steps && (
                         <Flex.Box direction="row" gap={'15x'} padding="10x" align="center">
-                            <div className="visible-phone-only">{image_url_mobile}</div>
-                            <div className="visible-larger-than-phone">{image_url}</div>
+                            <div className="at-visible-phone-only">{image_url_mobile}</div>
+                            <div className="at-visible-larger-than-phone">{image_url}</div>
                             <Flex.Box gap={'5x'} direction="col" justify="center">
                                 {steps.map((step) => (
                                     <Typography.Paragraph key={step.id}>
diff --git a/src/features/pages/deriv-ctrader/how-to-start/index.tsx b/src/features/pages/deriv-ctrader/how-to-start/index.tsx
index 7fea8c796c5..dd9210b9be9 100644
--- a/src/features/pages/deriv-ctrader/how-to-start/index.tsx
+++ b/src/features/pages/deriv-ctrader/how-to-start/index.tsx
@@ -19,7 +19,7 @@ const HowToStartCTrader = () => {
                 />
             </Typography.Heading>
 
-            <div className="visible-phone-and-tablet">
+            <div className="at-visible-phone-and-tablet">
                 <TabStepper
                     is_ctrader
                     tab={tab}
@@ -27,7 +27,7 @@ const HowToStartCTrader = () => {
                     items={trading_platform_start[`${tab}_mobile`]}
                 />
             </div>
-            <div className="visible-larger-than-tablet">
+            <div className="at-visible-larger-than-tablet">
                 <TabStepper
                     is_ctrader
                     tab={tab}
diff --git a/src/features/pages/options/turbo/index.tsx b/src/features/pages/options/turbo/index.tsx
index bb46d880548..a45b78f3757 100644
--- a/src/features/pages/options/turbo/index.tsx
+++ b/src/features/pages/options/turbo/index.tsx
@@ -37,7 +37,7 @@ const TurboOptions = () => {
                 }}
                 className={why_turbo_section}
             >
-                <h3 className={dclsx('text-small')}>
+                <h3 className={dclsx('at-text-small')}>
                     <Localize translate_text="_t_Why traders choose turbo options_t_" />
                 </h3>
                 <Typography.Paragraph size="small">
diff --git a/src/features/pages/options/vanilla/index.tsx b/src/features/pages/options/vanilla/index.tsx
index 3733e0dedef..fe58f1f2fcf 100644
--- a/src/features/pages/options/vanilla/index.tsx
+++ b/src/features/pages/options/vanilla/index.tsx
@@ -36,7 +36,7 @@ const VanillaOptions = () => {
                 }}
                 className={why_vanilla_section}
             >
-                <h4 className={dclsx('text-small')}>
+                <h4 className={dclsx('at-text-small')}>
                     <Localize translate_text="_t_Why traders choose vanilla options_t_" />
                 </h4>
                 <Typography.Paragraph size="small">
diff --git a/src/features/pages/p2p/availability/platform.tsx b/src/features/pages/p2p/availability/platform.tsx
index e15a33c82bc..681ddc3e689 100644
--- a/src/features/pages/p2p/availability/platform.tsx
+++ b/src/features/pages/p2p/availability/platform.tsx
@@ -31,14 +31,14 @@ const DP2Platform = ({ item }: { item: PlatformType }) => {
                 alt="icon"
                 width={48}
                 height={48}
-                className="visible-phone-and-tablet"
+                className="at-visible-phone-and-tablet"
             />
             <Image
                 src={item.mobile_icon_src}
                 alt="icon"
                 width={64}
                 height={64}
-                className="visible-larger-than-tablet"
+                className="at-visible-larger-than-tablet"
             />
 
             <Typography.Heading as="h3" size="xs" mt="8x" mb="16x">
@@ -51,12 +51,12 @@ const DP2Platform = ({ item }: { item: PlatformType }) => {
                         mb="12x"
                         textcolor="black"
                         md={{ mb: '16x' }}
-                        className={dclsx('text-xlarge')}
+                        className={dclsx('at-text-xlarge')}
                         key={list_item.text}
                     >
                         {list_item?.link_in_mobile ? (
                             <>
-                                <Typography.Base as="span" className="visible-larger-than-phone">
+                                <Typography.Base as="span" className="at-visible-larger-than-phone">
                                     <Localize
                                         translate_text={list_item.text}
                                         components={list_item.components}
@@ -66,7 +66,7 @@ const DP2Platform = ({ item }: { item: PlatformType }) => {
                                     as="span"
                                     onClick={handleExternalLink}
                                     textcolor="brand"
-                                    className="visible-phone-only"
+                                    className="at-visible-phone-only"
                                 >
                                     <Localize translate_text={list_item.text} />
                                 </Typography.Base>
@@ -87,11 +87,11 @@ const DP2Platform = ({ item }: { item: PlatformType }) => {
                     <LinkButton.Primary
                         url={item.button.url}
                         size="medium"
-                        className="visible-larger-than-phone"
+                        className="at-visible-larger-than-phone"
                     >
                         <Localize translate_text={item.button.text} />
                     </LinkButton.Primary>
-                    <Button.Primary onClick={handleExternalLink} className="visible-phone-only">
+                    <Button.Primary onClick={handleExternalLink} className="at-visible-phone-only">
                         <Localize translate_text={item.button.text} />
                     </Button.Primary>
                 </>
diff --git a/src/features/pages/p2p/hero/content.tsx b/src/features/pages/p2p/hero/content.tsx
index b7291adb024..846077031a3 100644
--- a/src/features/pages/p2p/hero/content.tsx
+++ b/src/features/pages/p2p/hero/content.tsx
@@ -16,8 +16,8 @@ const DP2HeroContent = () => {
             basis="6-12"
             dir={get_lang_direction()}
         >
-            <div className="visible-phone-and-tablet">{banner_content.logo_mobile}</div>
-            <div className="visible-larger-than-tablet">{banner_content.logo_desktop}</div>
+            <div className="at-visible-phone-and-tablet">{banner_content.logo_mobile}</div>
+            <div className="at-visible-larger-than-tablet">{banner_content.logo_desktop}</div>
             <Typography.Heading as="h1" size={is_mobile ? 'large' : 'xxxl'}>
                 <Localize translate_text={banner_content.heading} />
             </Typography.Heading>
diff --git a/src/features/pages/p2p/steps/item.tsx b/src/features/pages/p2p/steps/item.tsx
index 8b2c3e94165..d9e4102f7f9 100644
--- a/src/features/pages/p2p/steps/item.tsx
+++ b/src/features/pages/p2p/steps/item.tsx
@@ -25,14 +25,14 @@ const DP2StepItem = ({ item }: IStepItemProps) => {
             className={step_item}
         >
             <Flex.Box
-                className={dclsx(mobile_icon, 'visible-phone-and-tablet')}
+                className={dclsx(mobile_icon, 'at-visible-phone-and-tablet')}
                 justify="center"
                 align="center"
             >
                 <Image src={item.mobile_icon_src} alt="Icon" />
             </Flex.Box>
             <Flex.Box
-                className={dclsx(desktop_icon, 'visible-larger-than-tablet')}
+                className={dclsx(desktop_icon, 'at-visible-larger-than-tablet')}
                 justify="center"
                 align="center"
             >
diff --git a/src/features/pages/partners/deriv-prime/commercial-plan/data.tsx b/src/features/pages/partners/deriv-prime/commercial-plan/data.tsx
index a652c221451..7861135551f 100644
--- a/src/features/pages/partners/deriv-prime/commercial-plan/data.tsx
+++ b/src/features/pages/partners/deriv-prime/commercial-plan/data.tsx
@@ -29,7 +29,7 @@ export const data: Data[] = [
         monthly_requirement: (
             <Localize
                 translate_text="_t_0 - 15 million <0>(Crypto)</0>_t_"
-                components={[<span key={0} className={dclsx('typography-color-light')} />]}
+                components={[<span key={0} className={dclsx('at-typography-color-light')} />]}
             />
         ),
         fee_per_million: <Localize translate_text="_t_5.5 bps / 0.055%_t_" />,
@@ -38,7 +38,7 @@ export const data: Data[] = [
         monthly_requirement: (
             <Localize
                 translate_text="_t_> 15 million <0>(Crypto)</0>_t_"
-                components={[<span key={0} className={dclsx('typography-color-light')} />]}
+                components={[<span key={0} className={dclsx('at-typography-color-light')} />]}
             />
         ),
         fee_per_million: <Localize translate_text="_t_5 bps / 0.05%_t_" />,
diff --git a/src/features/pages/partners/deriv-prime/connectivity-reliability/connectivity-reliability-item.tsx b/src/features/pages/partners/deriv-prime/connectivity-reliability/connectivity-reliability-item.tsx
index 6d6b63b73ab..d2caa590683 100644
--- a/src/features/pages/partners/deriv-prime/connectivity-reliability/connectivity-reliability-item.tsx
+++ b/src/features/pages/partners/deriv-prime/connectivity-reliability/connectivity-reliability-item.tsx
@@ -15,7 +15,7 @@ const ConnectivityReliabilityItem = ({ item }: ConnectivityReliabilityItemProps)
     return (
         <Flex.Box direction="col" align="center" gap="4x">
             <Image src={item.icon_src} width={48} height={48} alt={localize(item.alt)} />
-            <Typography.Heading className={dclsx('text-medium')} as="h3" textcolor="inverted">
+            <Typography.Heading className={dclsx('at-text-medium')} as="h3" textcolor="inverted">
                 <Localize translate_text={item.title} />
             </Typography.Heading>
             <Flex.Item className={item_box}>
diff --git a/src/features/pages/partners/deriv-prime/get-in-touch/contact-form.tsx b/src/features/pages/partners/deriv-prime/get-in-touch/contact-form.tsx
index ac4ce5c3ad2..54b0b8ca57c 100644
--- a/src/features/pages/partners/deriv-prime/get-in-touch/contact-form.tsx
+++ b/src/features/pages/partners/deriv-prime/get-in-touch/contact-form.tsx
@@ -140,7 +140,7 @@ const ContactFormGetInTouch = () => {
                 </Flex.Box>
                 <Flex.Item>
                     <Typography.Paragraph
-                        className={'visible-phone-only'}
+                        className={'at-visible-phone-only'}
                         size={'xs'}
                         textcolor={get_form_bottom_message?.color}
                     >
@@ -148,7 +148,7 @@ const ContactFormGetInTouch = () => {
                     </Typography.Paragraph>
 
                     <Typography.Paragraph
-                        className={'visible-larger-than-phone'}
+                        className={'at-visible-larger-than-phone'}
                         size={'small'}
                         textcolor={get_form_bottom_message?.color}
                     >
diff --git a/src/features/pages/partners/deriv-prime/hero/index.tsx b/src/features/pages/partners/deriv-prime/hero/index.tsx
index 389d3131256..5c5674a809d 100644
--- a/src/features/pages/partners/deriv-prime/hero/index.tsx
+++ b/src/features/pages/partners/deriv-prime/hero/index.tsx
@@ -30,7 +30,7 @@ const Hero = () => {
                     formats={['avif', 'webp', 'auto']}
                     style={{ height: '100%' }}
                     objectPosition="center"
-                    className={dclsx('visible-larger-than-tablet')}
+                    className={dclsx('at-visible-larger-than-tablet')}
                 />
                 <StaticImage
                     src="../../../../../images/common/deriv-prime/hero-mobile.png"
@@ -42,7 +42,7 @@ const Hero = () => {
                     placeholder="blurred"
                     formats={['avif', 'webp', 'auto']}
                     style={{ height: '100%' }}
-                    className={dclsx('visible-phone-and-tablet')}
+                    className={dclsx('at-visible-phone-and-tablet')}
                 />
             </div>
             <Flex.Box
diff --git a/src/features/pages/partners/deriv-prime/meet-us-there/index.tsx b/src/features/pages/partners/deriv-prime/meet-us-there/index.tsx
index 9205a4d7dd8..10744e677f2 100644
--- a/src/features/pages/partners/deriv-prime/meet-us-there/index.tsx
+++ b/src/features/pages/partners/deriv-prime/meet-us-there/index.tsx
@@ -10,7 +10,7 @@ import { Divider } from 'components/elements'
 const MeetUsThere = () => {
     return (
         <>
-            <Divider className="visible-larger-than-tablet" />
+            <Divider className="at-visible-larger-than-tablet" />
             <FlexBox.Box
                 container={'fluid'}
                 direction={'col'}