Merge pull request #14546 from ameeetgaikwad/TranslationBanner

refactor: migrated TransaltionBanner

src/components/TranslationBanner.tsx

@@ -1,13 +1,16 @@
 import { useEffect, useState } from "react"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
-import { Box, CloseButton, Flex, Heading, useToken } from "@chakra-ui/react"
+import { MdClose } from "react-icons/md"
 
 import type { Lang } from "@/lib/types"
 
+import { Button, ButtonLink } from "@/components/ui/buttons/Button"
+import { Flex } from "@/components/ui/flex"
+
+import { cn } from "@/lib/utils/cn"
 import { isLangRightToLeft } from "@/lib/utils/translations"
 
-import { ButtonLink } from "./Buttons"
 import Emoji from "./Emoji"
 
 export type TranslationBannerProps = {
@@ -22,7 +25,6 @@ const TranslationBanner = ({
   isPageContentEnglish,
 }: TranslationBannerProps) => {
   const [isOpen, setIsOpen] = useState(shouldShow)
-  const [textColor] = useToken("colors", ["text"])
   const { t } = useTranslation("common")
   const { locale } = useRouter()
   const dir = isLangRightToLeft(locale! as Lang) ? "rtl" : "ltr"
@@ -40,90 +42,57 @@ const TranslationBanner = ({
     : "translation-banner-body-update"
 
   return (
-    <Box
-      as="aside"
-      display={isOpen ? "block" : "none"}
-      bottom={{ base: 0, md: 8 }}
-      insetInlineEnd={{ base: 0, md: 8 }}
-      position="fixed"
-      zIndex="banner"
+    <aside
+      className={cn(
+        "fixed bottom-0 end-0 z-popover rounded bg-background-highlight md:bottom-8 md:end-8",
+        isOpen ? "block" : "hidden"
+      )}
       dir={dir}
     >
-      <Flex
-        p="1rem"
-        maxH="100%"
-        maxW={{ base: "100%", md: "600px" }}
-        bg="infoBanner"
-        color="black300"
-        justify="space-between"
-        boxShadow={{
-          base: `0px -4px 10px 0px ${textColor} 10%`,
-          md: "rgba(0, 0, 0, 0.16) 0px 2px 4px 0px",
-        }}
-        borderRadius="sm"
-      >
-        <Flex flexDirection="column" m={4} mt={{ base: 10, sm: 4 }}>
-          <Flex
-            align={{ base: "flex-start", sm: "center" }}
-            mb={4}
-            flexDirection={{ base: "column-reverse", sm: "row" }}
-          >
-            <Heading
-              as="h3"
-              fontSize="2xl"
-              fontWeight="700"
-              lineHeight="100%"
-              my="0"
-            >
-              {t(headerTextId)}
-            </Heading>
+      <div className="relative max-h-full max-w-full p-4 shadow-md md:max-w-[600px]">
+        <Flex className="m-4 mt-10 flex-col gap-4 sm:mt-4">
+          <Flex className="flex-col-reverse items-start sm:flex-row sm:items-center">
+            <h3 className="leading-none md:text-2xl">{t(headerTextId)}</h3>
             <Emoji
               text=":globe_showing_asia_australia:"
               className="mb-4 ms-2 text-2xl sm:mb-auto"
             />
           </Flex>
           <p>{t(bodyTextId)}</p>
-          <Flex
-            align={{ base: "flex-start", sm: "center" }}
-            flexDirection={{ base: "column", sm: "row" }}
-          >
-            <Box>
+          <Flex className="flex-col items-start sm:flex-row sm:items-center">
+            <div>
               <ButtonLink href="/contributing/translation-program/">
                 {t("translation-banner-button-translate-page")}
               </ButtonLink>
-            </Box>
+            </div>
             {/* Todo: Reimplement once fixed */}
             {/* Issue: https://github.com/ethereum/ethereum-org-website/issues/12292 */}
             {/* {!isPageContentEnglish && (
-              <Box>
-                <ButtonLink
-                  href={originalPagePath}
+              <div>
+                <Button
+                  asChild
                   variant="outline"
-                  ms={{ base: 0, sm: 2 }}
-                  mt={{ base: 2, sm: 0 }}
-                  borderColor="#333333"
-                  color="#333333"
-                  lang={DEFAULT_LOCALE}
+                  className="ms-0 sm:ms-2 mt-2 sm:mt-0 border-neutral-900 text-neutral-900"
                 >
-                  {t("translation-banner-button-see-english")}
-                </ButtonLink>
-              </Box>
+                  <a href={originalPagePath} lang={DEFAULT_LOCALE}>
+                    {t("translation-banner-button-see-english")}
+                  </a>
+                </Button>
+              </div>
             )} */}
           </Flex>
         </Flex>
-        <CloseButton
-          position="absolute"
-          top="0"
-          insetInlineEnd="0"
-          margin={2}
-          color="secondary"
-          _hover={{
-            color: "primary.base",
-          }}
+        <Button
+          variant="ghost"
+          size="sm"
+          className="absolute end-0 top-0 m-2 hover:text-primary"
           onClick={() => setIsOpen(false)}
-        />
-      </Flex>
-    </Box>
+        >
+          <MdClose className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </Button>
+      </div>
+    </aside>
   )
 }