hasan/Pr 00 rtl issue fix (#6451)

* 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
binary-com · Jan 17, 2024 · 699a5b0 · 699a5b0
1 parent dc38893
commit 699a5b0
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -5,14 +5,15 @@ import { StaticImage } from 'gatsby-plugin-image'
 import {
     hero_container,
     hero_content,
+    hero_content_rtl,
     hero_content_gradient,
     hero_content_btn,
 } from './styles.module.scss'
 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
@@ -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
@@ -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>