From 449666d0a875380157ff378bdd56c8c15e958c26 Mon Sep 17 00:00:00 2001
From: mitra-deriv <64970259+mitra-deriv@users.noreply.github.com>
Date: Tue, 6 Feb 2024 17:45:30 +0800
Subject: [PATCH] fix: add prefix for classname (#7013)

---
 src/pages/help-centre/components/_side-tab.tsx          | 2 +-
 src/pages/markets/instruments/_crash-boom.tsx           | 8 ++++----
 src/pages/markets/instruments/_dex-indices.tsx          | 4 ++--
 src/pages/markets/instruments/_drift_switch_indices.tsx | 4 ++--
 src/pages/markets/instruments/_jump_indices.tsx         | 4 ++--
 src/pages/markets/instruments/_range-break.tsx          | 4 ++--
 src/pages/markets/instruments/_step-indices.tsx         | 4 ++--
 src/pages/markets/instruments/_volatility-indices.tsx   | 8 ++++----
 8 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/pages/help-centre/components/_side-tab.tsx b/src/pages/help-centre/components/_side-tab.tsx
index e5aebc5f248..dfe95fc47e7 100644
--- a/src/pages/help-centre/components/_side-tab.tsx
+++ b/src/pages/help-centre/components/_side-tab.tsx
@@ -69,7 +69,7 @@ const SideTab = ({ children, tab_header, data }: SideTabType) => {
 
     return (
         <Wrapper>
-            <div className={dclsx('visible-larger-than-tablet')}>
+            <div className={dclsx('at-visible-larger-than-tablet')}>
                 <Header max_width="38.4rem" size="3.6rem" mb="4rem">
                     <Localize translate_text={tab_header} />
                 </Header>
diff --git a/src/pages/markets/instruments/_crash-boom.tsx b/src/pages/markets/instruments/_crash-boom.tsx
index 6596af1d65b..8e43ed95ca2 100644
--- a/src/pages/markets/instruments/_crash-boom.tsx
+++ b/src/pages/markets/instruments/_crash-boom.tsx
@@ -26,7 +26,7 @@ const CrashBoom = () => {
                         mb="4x"
                         weight="bold"
                         size="small"
-                        className={dclsx('visible-larger-than-phone')}
+                        className={dclsx('at-visible-larger-than-phone')}
                     >
                         <Localize translate_text={'_t_Deriv MT5 and Deriv X:_t_'} />
                     </Typography.Paragraph>
@@ -34,7 +34,7 @@ const CrashBoom = () => {
                         mb="4x"
                         weight="bold"
                         size="xs"
-                        className={dclsx('visible-phone-only')}
+                        className={dclsx('at-visible-phone-only')}
                     >
                         <Localize translate_text={'_t_Deriv MT5 and Deriv X:_t_'} />
                     </Typography.Paragraph>
@@ -47,7 +47,7 @@ const CrashBoom = () => {
                         mt="8x"
                         weight="bold"
                         size="small"
-                        className={dclsx('visible-larger-than-phone')}
+                        className={dclsx('at-visible-larger-than-phone')}
                     >
                         <Localize translate_text={'_t_Deriv cTrader:_t_'} />
                     </Typography.Paragraph>
@@ -56,7 +56,7 @@ const CrashBoom = () => {
                         mt="8x"
                         weight="bold"
                         size="xs"
-                        className={dclsx('visible-phone-only')}
+                        className={dclsx('at-visible-phone-only')}
                     >
                         <Localize translate_text={'_t_Deriv cTrader:_t_'} />
                     </Typography.Paragraph>
diff --git a/src/pages/markets/instruments/_dex-indices.tsx b/src/pages/markets/instruments/_dex-indices.tsx
index e51686bd035..4aedc1c1a9f 100644
--- a/src/pages/markets/instruments/_dex-indices.tsx
+++ b/src/pages/markets/instruments/_dex-indices.tsx
@@ -12,7 +12,7 @@ const DexIndices = () => {
                 mb="4x"
                 weight="bold"
                 size="small"
-                className={dclsx('visible-larger-than-phone')}
+                className={dclsx('at-visible-larger-than-phone')}
             >
                 <Localize translate_text={'_t_Deriv MT5 and Deriv X:_t_'} />
             </Typography.Paragraph>
@@ -20,7 +20,7 @@ const DexIndices = () => {
                 mb="4x"
                 weight="bold"
                 size="xs"
-                className={dclsx('visible-phone-only')}
+                className={dclsx('at-visible-phone-only')}
             >
                 <Localize translate_text={'_t_Deriv MT5 and Deriv X:_t_'} />
             </Typography.Paragraph>
diff --git a/src/pages/markets/instruments/_drift_switch_indices.tsx b/src/pages/markets/instruments/_drift_switch_indices.tsx
index 3a7e05aa411..400da6c46b7 100644
--- a/src/pages/markets/instruments/_drift_switch_indices.tsx
+++ b/src/pages/markets/instruments/_drift_switch_indices.tsx
@@ -12,7 +12,7 @@ const DriftSwitchIndices = () => {
                 mb="4x"
                 weight="bold"
                 size="small"
-                className={dclsx('visible-larger-than-phone')}
+                className={dclsx('at-visible-larger-than-phone')}
             >
                 <Localize translate_text={'_t_Deriv MT5 and Deriv X:_t_'} />
             </Typography.Paragraph>
@@ -20,7 +20,7 @@ const DriftSwitchIndices = () => {
                 mb="4x"
                 weight="bold"
                 size="xs"
-                className={dclsx('visible-phone-only')}
+                className={dclsx('at-visible-phone-only')}
             >
                 <Localize translate_text={'_t_Deriv MT5 and Deriv X:_t_'} />
             </Typography.Paragraph>
diff --git a/src/pages/markets/instruments/_jump_indices.tsx b/src/pages/markets/instruments/_jump_indices.tsx
index a73e6246433..299955ff42f 100644
--- a/src/pages/markets/instruments/_jump_indices.tsx
+++ b/src/pages/markets/instruments/_jump_indices.tsx
@@ -18,7 +18,7 @@ const JumpIndices = ({ is_cfd }: JumpIndicesProps) => {
                         mb="4x"
                         weight="bold"
                         size="small"
-                        className={dclsx('visible-larger-than-phone')}
+                        className={dclsx('at-visible-larger-than-phone')}
                     >
                         <Localize translate_text={'_t_Deriv MT5 and Deriv X:_t_'} />
                     </Typography.Paragraph>
@@ -26,7 +26,7 @@ const JumpIndices = ({ is_cfd }: JumpIndicesProps) => {
                         mb="4x"
                         weight="bold"
                         size="xs"
-                        className={dclsx('visible-phone-only')}
+                        className={dclsx('at-visible-phone-only')}
                     >
                         <Localize translate_text={'_t_Deriv MT5 and Deriv X:_t_'} />
                     </Typography.Paragraph>
diff --git a/src/pages/markets/instruments/_range-break.tsx b/src/pages/markets/instruments/_range-break.tsx
index 5c1d6f401ee..ef92258281b 100644
--- a/src/pages/markets/instruments/_range-break.tsx
+++ b/src/pages/markets/instruments/_range-break.tsx
@@ -12,7 +12,7 @@ const RangeBreak = () => {
                 mb="4x"
                 weight="bold"
                 size="small"
-                className={dclsx('visible-larger-than-phone')}
+                className={dclsx('at-visible-larger-than-phone')}
             >
                 <Localize translate_text={'_t_Deriv MT5 and Deriv X:_t_'} />
             </Typography.Paragraph>
@@ -20,7 +20,7 @@ const RangeBreak = () => {
                 mb="4x"
                 weight="bold"
                 size="xs"
-                className={dclsx('visible-phone-only')}
+                className={dclsx('at-visible-phone-only')}
             >
                 <Localize translate_text={'_t_Deriv MT5 and Deriv X:_t_'} />
             </Typography.Paragraph>
diff --git a/src/pages/markets/instruments/_step-indices.tsx b/src/pages/markets/instruments/_step-indices.tsx
index 3861c1c054d..f8ca4117cdf 100644
--- a/src/pages/markets/instruments/_step-indices.tsx
+++ b/src/pages/markets/instruments/_step-indices.tsx
@@ -18,7 +18,7 @@ const StepIndices = ({ is_cfd }: StepIndicesProps) => {
                         mb="4x"
                         weight="bold"
                         size="small"
-                        className={dclsx('visible-larger-than-phone')}
+                        className={dclsx('at-visible-larger-than-phone')}
                     >
                         <Localize translate_text={'_t_Deriv MT5 and Deriv X:_t_'} />
                     </Typography.Paragraph>
@@ -26,7 +26,7 @@ const StepIndices = ({ is_cfd }: StepIndicesProps) => {
                         mb="4x"
                         weight="bold"
                         size="xs"
-                        className={dclsx('visible-phone-only')}
+                        className={dclsx('at-visible-phone-only')}
                     >
                         <Localize translate_text={'_t_Deriv MT5 and Deriv X:_t_'} />
                     </Typography.Paragraph>
diff --git a/src/pages/markets/instruments/_volatility-indices.tsx b/src/pages/markets/instruments/_volatility-indices.tsx
index 8825d2b51ea..995aa66230b 100644
--- a/src/pages/markets/instruments/_volatility-indices.tsx
+++ b/src/pages/markets/instruments/_volatility-indices.tsx
@@ -27,7 +27,7 @@ const VolatilityIndices = () => {
                         mb="4x"
                         weight="bold"
                         size="small"
-                        className={dclsx('visible-larger-than-phone')}
+                        className={dclsx('at-visible-larger-than-phone')}
                     >
                         <Localize translate_text={'_t_Deriv MT5 and Deriv X:_t_'} />
                     </Typography.Paragraph>
@@ -35,7 +35,7 @@ const VolatilityIndices = () => {
                         mb="4x"
                         weight="bold"
                         size="xs"
-                        className={dclsx('visible-phone-only')}
+                        className={dclsx('at-visible-phone-only')}
                     >
                         <Localize translate_text={'_t_Deriv MT5 and Deriv X:_t_'} />
                     </Typography.Paragraph>
@@ -49,7 +49,7 @@ const VolatilityIndices = () => {
                         mt="8x"
                         weight="bold"
                         size="small"
-                        className={dclsx('visible-larger-than-phone')}
+                        className={dclsx('at-visible-larger-than-phone')}
                     >
                         <Localize translate_text={'_t_Deriv cTrader:_t_'} />
                     </Typography.Paragraph>
@@ -58,7 +58,7 @@ const VolatilityIndices = () => {
                         mt="8x"
                         weight="bold"
                         size="xs"
-                        className={dclsx('visible-phone-only')}
+                        className={dclsx('at-visible-phone-only')}
                     >
                         <Localize translate_text={'_t_Deriv cTrader:_t_'} />
                     </Typography.Paragraph>