From 699a5b0957479a1fc34483029565d0e986ee2d0b Mon Sep 17 00:00:00 2001
From: Hasan Mobarak <126637868+hasan-deriv@users.noreply.github.com>
Date: Wed, 17 Jan 2024 10:41:10 +0800
Subject: [PATCH] hasan/Pr 00 rtl issue fix (#6451)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* auto-pull-translation

* chore: updated cta block

* auto-pull-translation

* chore: fixed ubuntu fonts

* chore: fixed floating button bg color

* chore: updated gatsby browser

* chore: updated gatsby browser and global css file

* chore: updated global css

* chore: updated overlay css

* chore: updated tailwind config

* chore: cleanup

* chore: updated global css and gatsby-browser

* chore: added rtl classes for hero content and award images

* chore: removed rtl dir from hero section

* auto-pull-translation

* chore: moved block css to gatsby browser from global css

* chore: updated deriv packages

* chore: updated deriv packages

* auto-pull-translation

* chore: live market description link fix

* chore: updated deriv packages

* auto-pull-translation

* empty: 🚀 to redeploy and trigger build

* chore: updated deriv packages

* chore: updated fast payment animation

* chore: updated fast payment animation

* auto-pull-translation

* chore: removed unused classname

* auto-pull-translation

* auto-pull-translation

* chore: added rtl class to hero
---
 src/features/pages/home/cta/index.tsx            |  2 +-
 src/features/pages/home/fast-payment/index.tsx   |  4 ++--
 src/features/pages/home/hero/award-images.tsx    | 13 ++++++++++---
 src/features/pages/home/hero/index.tsx           | 13 ++++++++++---
 src/features/pages/home/hero/styles.module.scss  | 16 ++++++++++++++++
 .../pages/home/live-pricing-migration/index.tsx  | 12 ++++++------
 6 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/src/features/pages/home/cta/index.tsx b/src/features/pages/home/cta/index.tsx
index 651a2168bb8..53402fac60e 100644
--- a/src/features/pages/home/cta/index.tsx
+++ b/src/features/pages/home/cta/index.tsx
@@ -34,7 +34,7 @@ const CTA = () => {
     const { is_eu } = useRegion()
     return (
         <Footer.CTABlock padding image={is_eu ? EUImage : RowImage}>
-            <div className="flex h-full flex-col items-start justify-center gap-gap-3xl max-w-[328px] lg:max-w-none">
+            <div className="flex h-full flex-col items-start justify-center gap-gap-3xl">
                 <Heading.H2 className="text-solid-slate-50">
                     <Localize translate_text="_t_Join over 2.5 million online traders_t_" />
                 </Heading.H2>
diff --git a/src/features/pages/home/fast-payment/index.tsx b/src/features/pages/home/fast-payment/index.tsx
index f2cbb423e6d..9d62cdeb833 100644
--- a/src/features/pages/home/fast-payment/index.tsx
+++ b/src/features/pages/home/fast-payment/index.tsx
@@ -24,8 +24,8 @@ const FastPaymentSection: React.FC = () => {
                 cols: 'infinite',
                 cards: is_eu ? EUPaymentMethods : RowPaymentMethods,
                 sliderClass: is_eu
-                    ? 'animate-[40s_slide_linear_infinite]'
-                    : 'animate-[100s_slide_linear_infinite]',
+                    ? '!animate-[40s_slide_linear_infinite] rtl:!animate-[40s_slideRtl_linear_infinite]'
+                    : '!animate-[100s_slide_linear_infinite] rtl:!animate-[100s_slideRtl_linear_infinite]',
             }}
             disclaimer={
                 <Localize translate_text="_t_* Availability of payment methods and processing speeds may vary based on location and selected payment option_t_" />
diff --git a/src/features/pages/home/hero/award-images.tsx b/src/features/pages/home/hero/award-images.tsx
index 5b2790b416b..f1c294aaf14 100644
--- a/src/features/pages/home/hero/award-images.tsx
+++ b/src/features/pages/home/hero/award-images.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import clsx from 'clsx'
 import { StaticImage } from 'gatsby-plugin-image'
-import { hero_content_award_img } from './styles.module.scss'
-import { localize } from 'components/localization'
+import { hero_content_award_img, hero_content_award_img_rtl } from './styles.module.scss'
+import { get_lang_direction, localize } from 'components/localization'
 import useRegion from 'components/hooks/use-region'
 import { isEuDomain } from 'common/utility'
 
@@ -12,7 +12,14 @@ const HeroAwardImages = () => {
     if (isEuDomain() || is_eu) return null
 
     return (
-        <div className={clsx('flex pb-general-xl', hero_content_award_img)}>
+        <div
+            className={clsx(
+                'flex pb-general-xl',
+                hero_content_award_img,
+                hero_content_award_img_rtl,
+            )}
+            dir={get_lang_direction()}
+        >
             <StaticImage
                 src="../../../../images/migration/home/award-1.png"
                 alt={localize('_t_Best forex spreads APAC 2023 by UF Awards_t_')}
diff --git a/src/features/pages/home/hero/index.tsx b/src/features/pages/home/hero/index.tsx
index 286a7680f4e..724b37d8ae6 100644
--- a/src/features/pages/home/hero/index.tsx
+++ b/src/features/pages/home/hero/index.tsx
@@ -5,6 +5,7 @@ import { StaticImage } from 'gatsby-plugin-image'
 import {
     hero_container,
     hero_content,
+    hero_content_rtl,
     hero_content_gradient,
     hero_content_btn,
 } from './styles.module.scss'
@@ -12,7 +13,7 @@ import HeroAwardImages from './award-images'
 import HeroImage from './hero-image'
 import FloatingCta from './floating-cta'
 import Description from './description'
-import { Localize } from 'components/localization'
+import { Localize, get_lang_direction } from 'components/localization'
 import TradersHubCtaButton from 'features/components/molecules/traders-hub-cta-button'
 import { useFloatingCtaContext } from 'features/contexts/floating-cta/cta.provider'
 import { usePageLoaded } from 'components/hooks/use-page-loaded'
@@ -38,9 +39,15 @@ const HomeHero: React.FC<HomeHeroProps> = () => {
                     loading="eager"
                     style={{ position: 'absolute', inset: 0 }}
                 />
-
                 <FluidContainer className={clsx('h-full flex flex-col relative', hero_container)}>
-                    <div className={clsx('flex flex-col mb-general-2xl', hero_content)}>
+                    <div
+                        className={clsx(
+                            'flex flex-col mb-general-2xl',
+                            hero_content,
+                            hero_content_rtl,
+                        )}
+                        dir={get_lang_direction()}
+                    >
                         <Heading.H1 className="text-solid-slate-50 text-[34px] lg:text-heading-h1">
                             <Localize translate_text="_t_Trading for anyone. Anywhere. Anytime._t_" />
                         </Heading.H1>
diff --git a/src/features/pages/home/hero/styles.module.scss b/src/features/pages/home/hero/styles.module.scss
index 3532ba24f22..0ab2891f751 100644
--- a/src/features/pages/home/hero/styles.module.scss
+++ b/src/features/pages/home/hero/styles.module.scss
@@ -22,6 +22,14 @@
         margin-top: 0;
     }
 }
+.hero_content_rtl{
+    @media only screen and (min-width: 601px){
+        &[dir="rtl"] {
+            text-align: right;
+            margin-right: auto;
+        }
+    }
+}
 .hero_content_btn {
     margin-inline: auto;
     @media only screen and (min-width: 601px){
@@ -76,6 +84,14 @@
         left: 0;
     }
 }
+.hero_content_award_img_rtl {
+    @media only screen and (min-width: 601px){
+        &[dir="rtl"] {
+            right: 50%;
+            left: auto;
+        }
+    }
+}
 .hero_content_text{
     @media only screen and (min-width: 601px){
         max-width: 325px;
diff --git a/src/features/pages/home/live-pricing-migration/index.tsx b/src/features/pages/home/live-pricing-migration/index.tsx
index 12c9b0c9f8c..352a305408b 100644
--- a/src/features/pages/home/live-pricing-migration/index.tsx
+++ b/src/features/pages/home/live-pricing-migration/index.tsx
@@ -37,7 +37,7 @@ const LiveMarketSection = () => {
                         className="inline-flex items-center justify-center pt-gap-3xl"
                     >
                         <Localize translate_text="_t_See all forex pairs_t_" />
-                        <StandaloneChevronRightRegularIcon className="text-solid-slate-1400" />
+                        <StandaloneChevronRightRegularIcon className="text-solid-slate-1400 rtl:rotate-180" />
                     </CustomLink>
                 </LiveMarketCard>
                 <LiveMarketCard market="der">
@@ -53,7 +53,7 @@ const LiveMarketSection = () => {
                         className="inline-flex items-center justify-center pt-gap-3xl"
                     >
                         <Localize translate_text="_t_See all derived indices pairs_t_" />
-                        <StandaloneChevronRightRegularIcon className="text-solid-slate-1400" />
+                        <StandaloneChevronRightRegularIcon className="text-solid-slate-1400 rtl:rotate-180" />
                     </CustomLink>
                 </LiveMarketCard>
                 <LiveMarketCard market="etfs">
@@ -69,7 +69,7 @@ const LiveMarketSection = () => {
                         className="inline-flex items-center justify-center pt-gap-3xl"
                     >
                         <Localize translate_text="_t_See all ETFs pairs_t_" />
-                        <StandaloneChevronRightRegularIcon className="text-solid-slate-1400" />
+                        <StandaloneChevronRightRegularIcon className="text-solid-slate-1400 rtl:rotate-180" />
                     </CustomLink>
                 </LiveMarketCard>
                 <LiveMarketCard market={['ind', 'stk']}>
@@ -85,7 +85,7 @@ const LiveMarketSection = () => {
                         className="inline-flex items-center justify-center pt-gap-3xl"
                     >
                         <Localize translate_text="_t_See all stocks & indices pairs_t_" />
-                        <StandaloneChevronRightRegularIcon className="text-solid-slate-1400" />
+                        <StandaloneChevronRightRegularIcon className="text-solid-slate-1400 rtl:rotate-180" />
                     </CustomLink>
                 </LiveMarketCard>
                 <LiveMarketCard market="cry">
@@ -101,7 +101,7 @@ const LiveMarketSection = () => {
                         className="inline-flex items-center justify-center pt-gap-3xl"
                     >
                         <Localize translate_text="_t_See all cryptocurrencies_t_" />
-                        <StandaloneChevronRightRegularIcon className="text-solid-slate-1400" />
+                        <StandaloneChevronRightRegularIcon className="text-solid-slate-1400 rtl:rotate-180" />
                     </CustomLink>
                 </LiveMarketCard>
                 <LiveMarketCard market="com">
@@ -117,7 +117,7 @@ const LiveMarketSection = () => {
                         className="inline-flex items-center justify-center pt-gap-3xl"
                     >
                         <Localize translate_text="_t_See all commodities_t_" />
-                        <StandaloneChevronRightRegularIcon className="text-solid-slate-1400" />
+                        <StandaloneChevronRightRegularIcon className="text-solid-slate-1400 rtl:rotate-180" />
                     </CustomLink>
                 </LiveMarketCard>
             </LiveMarketBlock.Tab>