Merge pull request #13834 from ethereum/home-rtl

Homepage RTL patches
ethereum · Sep 10, 2024 · 6f443d6 · 6f443d6
2 parents a19f8f3 + cbe25f4
commit 6f443d6
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 11 deletions.
diff --git a/src/components/Homepage/useHome.ts b/src/components/Homepage/useHome.ts
@@ -3,7 +3,7 @@ import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { FaDiscord, FaGithub, FaXTwitter } from "react-icons/fa6"
 
-import type { EventCardProps, Lang } from "@/lib/types"
+import type { EventCardProps } from "@/lib/types"
 import type { CodeExample } from "@/lib/interfaces"
 
 import { useBentoBox } from "@/components/Homepage/useBentoBox"
@@ -16,8 +16,8 @@ import TryAppsIcon from "@/components/icons/phone-homescreen.svg"
 import RoadmapSign from "@/components/icons/roadmap-sign.svg"
 import Whitepaper from "@/components/icons/whitepaper.svg"
 
+import { cn } from "@/lib/utils/cn"
 import { isValidDate } from "@/lib/utils/date"
-import { isLangRightToLeft } from "@/lib/utils/translations"
 
 import events from "@/data/community-events.json"
 import CreateWalletContent from "@/data/CreateWallet"
@@ -27,6 +27,7 @@ import { GITHUB_REPO_URL } from "@/lib/constants"
 import SimpleDomainRegistryContent from "!!raw-loader!@/data/SimpleDomainRegistry.sol"
 import SimpleTokenContent from "!!raw-loader!@/data/SimpleToken.sol"
 import SimpleWalletContent from "!!raw-loader!@/data/SimpleWallet.sol"
+import { useRtlFlip } from "@/hooks/useRtlFlip"
 
 export const useHome = () => {
   const { t } = useTranslation(["common", "page-index"])
@@ -37,7 +38,7 @@ export const useHome = () => {
 
   const bentoItems = useBentoBox()
 
-  const dir = isLangRightToLeft(locale as Lang) ? "rtl" : "ltr"
+  const { direction, isRtl } = useRtlFlip()
 
   const toggleCodeExample = (id: number): void => {
     setActiveCode(id)
@@ -106,7 +107,10 @@ export const useHome = () => {
       description: t("page-index:page-index-cta-dapps-description"),
       href: "/dapps/",
       Svg: TryAppsIcon,
-      className: "text-accent-c hover:text-accent-c-hover",
+      className: cn(
+        "text-accent-c hover:text-accent-c-hover",
+        isRtl && "[&_svg]:-scale-x-100"
+      ),
     },
   ]
 
@@ -129,11 +133,13 @@ export const useHome = () => {
     {
       label: t("page-index:page-index-popular-topics-whitepaper"),
       Svg: Whitepaper,
+      className: cn(isRtl && "[&_svg]:-scale-x-100"),
       href: "/whitepaper/",
     },
     {
       label: t("page-index:page-index-popular-topics-roadmap"),
       Svg: RoadmapSign,
+      className: cn(isRtl && "[&_svg]:-scale-x-100"),
       href: "/roadmap/",
     },
   ]
@@ -188,7 +194,7 @@ export const useHome = () => {
     t,
     locale,
     asPath,
-    dir,
+    dir: direction,
     isModalOpen,
     setModalOpen,
     activeCode,

diff --git a/src/components/ui/Link.tsx b/src/components/ui/Link.tsx
@@ -50,7 +50,7 @@ export const BaseLink = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
   ref
 ) {
   const { asPath } = useRouter()
-  const { flipForRtl } = useRtlFlip()
+  const { twFlipForRtl } = useRtlFlip()
 
   if (!href) {
     console.warn("Link component is missing href prop")
@@ -102,9 +102,10 @@ export const BaseLink = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
         <VisuallyHidden>(opens in a new tab)</VisuallyHidden>
         {!hideArrow && (
           <RxExternalLink
-            className={cn("-me-1 inline h-6 w-6 p-1 align-middle", {
-              transform: flipForRtl,
-            })}
+            className={cn(
+              "-me-1 inline h-6 w-6 p-1 align-middle",
+              twFlipForRtl
+            )}
           />
         )}
       </a>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -313,12 +313,15 @@ const HomePage = ({
                   {t("page-index:page-index-popular-topics-header")}
                 </h3>
                 <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2">
-                  {popularTopics.map(({ label, Svg, href }) => (
+                  {popularTopics.map(({ label, Svg, href, className }) => (
                     <SvgButtonLink
                       key={label}
                       Svg={Svg}
                       href={href}
-                      className="text-accent-b hover:text-accent-b-hover [&>:first-child]:flex-row"
+                      className={cn(
+                        "text-accent-b hover:text-accent-b-hover [&>:first-child]:flex-row",
+                        className
+                      )}
                     >
                       <p className="text-start text-xl font-bold text-body group-hover:underline">
                         {label}