chore: added rtl classes for hero content and award images

binary-com · Jan 5, 2024 · fa75d71 · fa75d71
1 parent 6390ba3
commit fa75d71
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 7 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 w-1/2 ml-auto rtl:ml-50 rtl:mr-auto">
+            <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/hero/award-images.tsx b/src/features/pages/home/hero/award-images.tsx
@@ -1,12 +1,19 @@
 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'
 
 const HeroAwardImages = () => {
     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_img,
     hero_img_eu,
     hero_content_text,
     hero_content_btn,
 } from './styles.module.scss'
 import HeroAwardImages from './award-images'
-import { Localize } from 'components/localization'
+import { Localize, get_lang_direction } from 'components/localization'
 import useRegion from 'components/hooks/use-region'
 import TradersHubCtaButton from 'features/components/molecules/traders-hub-cta-button'
 
@@ -25,7 +26,10 @@ const HomeHero: React.FC<HomeHeroProps> = () => {
     const { is_eu } = useRegion()
 
     return (
-        <Section className="h-[calc(100vh-136px)] min-h-[587px] relative isolate overflow-hidden">
+        <Section
+            className="h-[calc(100vh-136px)] min-h-[587px] relative isolate overflow-hidden"
+            dir="rtl"
+        >
             <StaticImage
                 src="../../../../images/migration/home/home_hero_bg.png"
                 alt="hero bg image"
@@ -37,7 +41,10 @@ const HomeHero: React.FC<HomeHeroProps> = () => {
             />
 
             <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;