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

---
 .../banners/deriv-products-hero/products-heading.tsx     | 4 ++--
 .../templates/navigation/template/desktop-menu/index.tsx | 4 ++--
 .../options-content/section-content-option.item.tsx      | 4 ++--
 .../options-content/single-content-option.item.tsx       | 2 +-
 .../templates/trade-platform/other-platforms/index.tsx   | 8 ++++----
 .../other-platforms/platform-card/index.tsx              | 9 +++++++--
 .../components/templates/why-trade-options/index.tsx     | 2 +-
 7 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/features/components/templates/banners/deriv-products-hero/products-heading.tsx b/src/features/components/templates/banners/deriv-products-hero/products-heading.tsx
index fd39e81a23a..b972f949d0a 100644
--- a/src/features/components/templates/banners/deriv-products-hero/products-heading.tsx
+++ b/src/features/components/templates/banners/deriv-products-hero/products-heading.tsx
@@ -17,7 +17,7 @@ const ProductsHeading = ({ title }: ProductsHeadingProps) => {
                 align={'left'}
                 pt={'4x'}
                 md={{ pt: '8x' }}
-                className="visible-larger-than-tablet"
+                className="at-visible-larger-than-tablet"
             >
                 {title.map((text, index) => (
                     <React.Fragment key={index}>
@@ -32,7 +32,7 @@ const ProductsHeading = ({ title }: ProductsHeadingProps) => {
                 align={'left'}
                 pt={'4x'}
                 md={{ pt: '8x' }}
-                className="visible-phone-and-tablet"
+                className="at-visible-phone-and-tablet"
             >
                 {title.map((text, index) => (
                     <React.Fragment key={index}>
diff --git a/src/features/components/templates/navigation/template/desktop-menu/index.tsx b/src/features/components/templates/navigation/template/desktop-menu/index.tsx
index 2df5aef28d1..7587b71e8b2 100644
--- a/src/features/components/templates/navigation/template/desktop-menu/index.tsx
+++ b/src/features/components/templates/navigation/template/desktop-menu/index.tsx
@@ -22,8 +22,8 @@ const DesktopMenu = ({ has_centered_items }: IDesktopNavbarProps) => {
             onValueChange={setActive}
             className={dclsx(
                 'navigation_root',
-                has_centered_items ? 'justify-center' : 'justify-end',
-                has_centered_items ? undefined : 'margin-right-40x',
+                has_centered_items ? 'at-justify-center' : 'at-justify-end',
+                has_centered_items ? undefined : 'at-margin-right-40x',
             )}
         >
             <NavigationMenu.List className="navigation_list">
diff --git a/src/features/components/templates/options-content/section-content-option.item.tsx b/src/features/components/templates/options-content/section-content-option.item.tsx
index 92c3b83c970..35b496dbad8 100644
--- a/src/features/components/templates/options-content/section-content-option.item.tsx
+++ b/src/features/components/templates/options-content/section-content-option.item.tsx
@@ -12,14 +12,14 @@ const SectionOptionContentItem = ({ item }: { item: OptionContentSectionItemData
             <Flex.Box gap="4x" align="center">
                 {item.icon.src && <img src={item.icon.src} alt={localize(item.icon.alt)} />}
                 {item.title && (
-                    <h4 className={dclsx('text-small')}>
+                    <h4 className={dclsx('at-text-small')}>
                         <Localize translate_text={item.title} />
                     </h4>
                 )}
             </Flex.Box>
             {item.sections.map((sectionItem) => (
                 <Flex.Box key={sectionItem.title} direction="col">
-                    <h5 className={dclsx('text-small', 'padding-block-12x')}>
+                    <h5 className={dclsx('at-text-small', 'at-padding-block-12x')}>
                         <Localize translate_text={sectionItem.title} />
                     </h5>
                     <Flex.Box direction="col" gap="6x" pb="16x">
diff --git a/src/features/components/templates/options-content/single-content-option.item.tsx b/src/features/components/templates/options-content/single-content-option.item.tsx
index 9f7ded0c691..38a06a2637c 100644
--- a/src/features/components/templates/options-content/single-content-option.item.tsx
+++ b/src/features/components/templates/options-content/single-content-option.item.tsx
@@ -12,7 +12,7 @@ const SingleOptionContentItem = ({ item }: { item: OptionContentSingleItemData }
             <Flex.Box gap="4x" pb="8x" align="center">
                 {item.icon && <img src={item.icon.src} alt={localize(item.icon.alt)} />}
                 {item.title && (
-                    <h4 className={dclsx('text-small')}>
+                    <h4 className={dclsx('at-text-small')}>
                         <Localize translate_text={item.title} />
                     </h4>
                 )}
diff --git a/src/features/components/templates/trade-platform/other-platforms/index.tsx b/src/features/components/templates/trade-platform/other-platforms/index.tsx
index 5a3f0ba2e96..d64511e1421 100644
--- a/src/features/components/templates/trade-platform/other-platforms/index.tsx
+++ b/src/features/components/templates/trade-platform/other-platforms/index.tsx
@@ -32,7 +32,7 @@ const PlatformsCarousel = ({ heading, data, ...rest }: PropsType) => {
                 <Typography.Heading as="h2" align="center" size="large" mb="8x" md={{ mb: '40x' }}>
                     <Localize translate_text={heading} />
                 </Typography.Heading>
-                <div className={dclsx('md-padding-inline-15x', slider_wrapper)}>
+                <div className={dclsx('md-at-padding-inline-15x', slider_wrapper)}>
                     <Swiper
                         speed={500}
                         slidesPerView={1}
@@ -58,7 +58,7 @@ const PlatformsCarousel = ({ heading, data, ...rest }: PropsType) => {
                             },
                         }}
                         className={dclsx(
-                            'padding-inline-5x padding-bottom-20x md-padding-bottom-10x',
+                            'at-padding-inline-5x at-padding-bottom-20x md-at-padding-bottom-10x',
                         )}
                     >
                         {data.map((slide) => (
@@ -69,7 +69,7 @@ const PlatformsCarousel = ({ heading, data, ...rest }: PropsType) => {
                     </Swiper>
                     <button
                         className={dclsx(
-                            'padding-0x slider-button-prev visible-larger-than-tablet',
+                            'at-padding-0x slider-button-prev at-visible-larger-than-tablet',
                             slider_button,
                             slider_button_prev,
                         )}
@@ -78,7 +78,7 @@ const PlatformsCarousel = ({ heading, data, ...rest }: PropsType) => {
                     </button>
                     <button
                         className={dclsx(
-                            'padding-0x slider-button-next visible-larger-than-tablet',
+                            'at-padding-0x slider-button-next at-visible-larger-than-tablet',
                             slider_button,
                             slider_button_next,
                         )}
diff --git a/src/features/components/templates/trade-platform/other-platforms/platform-card/index.tsx b/src/features/components/templates/trade-platform/other-platforms/platform-card/index.tsx
index 5ce7006b58d..6b413938fd3 100644
--- a/src/features/components/templates/trade-platform/other-platforms/platform-card/index.tsx
+++ b/src/features/components/templates/trade-platform/other-platforms/platform-card/index.tsx
@@ -33,7 +33,12 @@ const PlatformCard = ({ data: { icon, heading, paragraph, link } }: PlatformProp
             </Typography.Paragraph>
             <Link
                 url={link}
-                className={dclsx(platform_link, 'flex', 'align-items-center', 'justify-center')}
+                className={dclsx(
+                    platform_link,
+                    'at-flex',
+                    'at-align-items-center',
+                    'at-justify-center',
+                )}
                 textcolor="brand"
                 padding_block="4x"
                 padding_inline="8x"
@@ -44,7 +49,7 @@ const PlatformCard = ({ data: { icon, heading, paragraph, link } }: PlatformProp
                 <Image
                     src={Arrow}
                     alt={localize('_t_Arrow_t_')}
-                    className={dclsx('margin-left-1x')}
+                    className={dclsx('at-margin-left-1x')}
                     width={10}
                     height={10}
                 />
diff --git a/src/features/components/templates/why-trade-options/index.tsx b/src/features/components/templates/why-trade-options/index.tsx
index 3e2212dc537..64e034485d9 100644
--- a/src/features/components/templates/why-trade-options/index.tsx
+++ b/src/features/components/templates/why-trade-options/index.tsx
@@ -50,7 +50,7 @@ const WhyTradeOptions = ({ data }: { data: WhyTradeOptionsType }) => {
                         textcolor="inverted"
                         size="xxs"
                         mb="8x"
-                        className={dclsx('text-medium')}
+                        className={dclsx('at-text-medium')}
                     >
                         <Localize translate_text={data.heading2} />
                     </Typography.Heading>