rm redundant RTL logic from translation banners

Author: wackerow

src/components/TranslationBanner.tsx

@@ -9,14 +9,12 @@ import Emoji from "./Emoji"
 
 export interface IProps {
   shouldShow: boolean
-  isPageRightToLeft: boolean
   originalPagePath: string
   isPageContentEnglish: boolean
 }
 
 const TranslationBanner: React.FC<IProps> = ({
   shouldShow,
-  isPageRightToLeft,
   originalPagePath,
   isPageContentEnglish,
 }) => {
@@ -60,7 +58,6 @@ const TranslationBanner: React.FC<IProps> = ({
       >
         <Flex
           flexDirection="column"
-          alignItems={isPageRightToLeft ? "flex-end" : "flex-start"}
           m={4}
           mt={{ base: 10, sm: 4 }}
         >
@@ -115,7 +112,7 @@ const TranslationBanner: React.FC<IProps> = ({
         <CloseButton
           position="absolute"
           top="0"
-          insetInlineEnd={isPageRightToLeft ? "auto" : 0}
+          insetInlineEnd="0"
           margin={2}
           color="secondary"
           _hover={{

src/components/TranslationBannerLegal.tsx

@@ -14,14 +14,12 @@ import Translation from "./Translation"
 
 export interface IProps {
   shouldShow: boolean
-  isPageRightToLeft: boolean
   originalPagePath: string
 }
 
 const TranslationBannerLegal: React.FC<IProps> = ({
   shouldShow,
   originalPagePath,
-  isPageRightToLeft,
 }) => {
   // Default to isOpen being false, and let the useEffect set this.
   const [isOpen, setIsOpen] = useState(false)
@@ -61,12 +59,7 @@ const TranslationBannerLegal: React.FC<IProps> = ({
           md: "rgba(0, 0, 0, 0.16) 0px 2px 4px 0px",
         }}
       >
-        <Flex
-          direction="column"
-          align={isPageRightToLeft ? "flex-end" : "flex-start"}
-          m={4}
-          mt={{ base: 10, sm: 4 }}
-        >
+        <Flex direction="column" m={4} mt={{ base: 10, sm: 4 }}>
           <Flex
             align={{ base: "flex-start", sm: "center" }}
             flexDirection={{ base: "column-reverse", sm: "row" }}
@@ -111,7 +104,7 @@ const TranslationBannerLegal: React.FC<IProps> = ({
         <CloseButton
           position="absolute"
           top={0}
-          insetInlineEnd={isPageRightToLeft ? "auto" : 0}
+          insetInlineEnd="0"
           margin={4}
           color="secondary"
           _hover={{

src/layouts/RootLayout.tsx

@@ -3,7 +3,6 @@ import { join } from "path"
 import { useRouter } from "next/router"
 import { Container } from "@chakra-ui/react"
 
-import { Lang } from "@/lib/types"
 import { Root } from "@/lib/interfaces"
 
 import FeedbackWidget from "@/components/FeedbackWidget"
@@ -13,7 +12,6 @@ import TranslationBanner from "@/components/TranslationBanner"
 import TranslationBannerLegal from "@/components/TranslationBannerLegal"
 
 import { toPosixPath } from "@/lib/utils/relativePath"
-import { isLangRightToLeft } from "@/lib/utils/translations"
 
 import { DEFAULT_LOCALE } from "@/lib/constants"
 
@@ -40,7 +38,6 @@ export const RootLayout = ({
     (isPageTranslationOutdated ||
       (contentNotTranslated && !isPageLanguageEnglish)) &&
     !isLegal
-  const isPageRightToLeft = isLangRightToLeft(locale as Lang)
   const originalPagePath = toPosixPath(join(DEFAULT_LOCALE, asPath))
 
   return (
@@ -50,13 +47,11 @@ export const RootLayout = ({
       <TranslationBanner
         shouldShow={shouldShowTranslationBanner}
         isPageContentEnglish={contentNotTranslated}
-        isPageRightToLeft={isPageRightToLeft}
         originalPagePath={originalPagePath}
       />
 
       <TranslationBannerLegal
         shouldShow={isLegal}
-        isPageRightToLeft={isPageRightToLeft}
         originalPagePath={originalPagePath}
       />