From e17f26d4583cc263e2139ce51bd6d03aab6ee59f Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Mon, 5 Aug 2024 22:21:53 -0400
Subject: [PATCH 1/3] refactor(layout/static): convert layout to ShadCN

---
 src/layouts/Static.tsx | 47 ++++++++++++++----------------------------
 1 file changed, 15 insertions(+), 32 deletions(-)

diff --git a/src/layouts/Static.tsx b/src/layouts/Static.tsx
index b111623d0be..d1a737a9be3 100644
--- a/src/layouts/Static.tsx
+++ b/src/layouts/Static.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from "next/router"
-import { Box, Flex, type HeadingProps, Icon } from "@chakra-ui/react"
+import { type HeadingProps } from "@chakra-ui/react"
 
 import type { ChildOnlyProp, Lang } from "@/lib/types"
 import type { MdPageContent, StaticFrontmatter } from "@/lib/interfaces"
@@ -25,12 +25,12 @@ import {
   Heading4 as MdHeading4,
 } from "@/components/MdComponents"
 import MeetupList from "@/components/MeetupList"
-import Text from "@/components/OldText"
 import SocialListItem from "@/components/SocialListItem"
 import TableOfContents from "@/components/TableOfContents"
 import { TranslatathonBanner } from "@/components/Translatathon/TranslatathonBanner"
 import Translation from "@/components/Translation"
 import TranslationChartImage from "@/components/TranslationChartImage"
+import { Flex, Stack } from "@/components/ui/flex"
 import UpcomingEventsList from "@/components/UpcomingEventsList"
 
 import { getEditPath } from "@/lib/utils/editPath"
@@ -62,7 +62,6 @@ export const staticComponents = {
   EnergyConsumptionChart,
   GlossaryDefinition,
   GlossaryTooltip,
-  Icon,
   Link,
   Logo,
   MatomoOptOut,
@@ -93,19 +92,14 @@ export const StaticLayout = ({
   const absoluteEditPath = getEditPath(slug)
 
   return (
-    <Box w="full">
+    <div className="w-full">
       <TranslatathonBanner pathname={asPath} />
       <DevconGrantsBanner pathname={asPath} />
       <Flex
-        justifyContent="space-between"
-        w="full"
-        mx="auto"
-        mb={16}
-        p={8}
-        pt={{ base: 8, lg: 16 }}
+        className="mx-auto mb-16 w-full justify-between p-8 lg:pt-16"
         dir={contentNotTranslated ? "ltr" : "unset"}
       >
-        <Box w="full">
+        <div className="w-full">
           {slug === "/guides/" ? (
             <HubHero
               heroImg={GuideHeroImage}
@@ -114,31 +108,20 @@ export const StaticLayout = ({
               description={frontmatter.description}
             />
           ) : (
-            <>
-              <Breadcrumbs slug={slug} mb="8" />
+            <Stack className="gap-8">
+              <Breadcrumbs slug={slug} />
 
-              <Text
-                color="text200"
+              <p
+                className="text-sm text-[#666] dark:text-[#b2b2b2]"
                 dir={isLangRightToLeft(locale as Lang) ? "rtl" : "ltr"}
               >
                 <Translation id="page-last-updated" />:{" "}
                 {lastEditLocaleTimestamp}
-              </Text>
-            </>
+              </p>
+            </Stack>
           )}
 
-          <Box
-            as={MainArticle}
-            maxW="container.md"
-            w="full"
-            sx={{
-              ".citation": {
-                p: {
-                  color: "text200",
-                },
-              },
-            }}
-          >
+          <MainArticle className="max-w-3xl">
             <TableOfContents
               position="relative"
               zIndex={2}
@@ -150,8 +133,8 @@ export const StaticLayout = ({
             {children}
 
             <FeedbackCard isArticle />
-          </Box>
-        </Box>
+          </MainArticle>
+        </div>
         <TableOfContents
           editPath={absoluteEditPath}
           items={tocItems}
@@ -159,6 +142,6 @@ export const StaticLayout = ({
           hideEditButton={!!frontmatter.hideEditButton}
         />
       </Flex>
-    </Box>
+    </div>
   )
 }

From e66bdbbe6b83e47a5210d70b96497c0317207fc0 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Wed, 14 Aug 2024 22:26:01 -0400
Subject: [PATCH 2/3] refactor(layouts/static): apply custom ShadCN link

---
 src/layouts/Static.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/Static.tsx b/src/layouts/Static.tsx
index d1a737a9be3..f5e9d8aeb7f 100644
--- a/src/layouts/Static.tsx
+++ b/src/layouts/Static.tsx
@@ -14,7 +14,6 @@ import GlossaryDefinition from "@/components/Glossary/GlossaryDefinition"
 import GlossaryTooltip from "@/components/Glossary/GlossaryTooltip"
 import { HubHero } from "@/components/Hero"
 import NetworkUpgradeSummary from "@/components/History/NetworkUpgradeSummary"
-import Link from "@/components/Link"
 import Logo from "@/components/Logo"
 import MainArticle from "@/components/MainArticle"
 import MatomoOptOut from "@/components/MatomoOptOut"
@@ -31,6 +30,7 @@ import { TranslatathonBanner } from "@/components/Translatathon/TranslatathonBan
 import Translation from "@/components/Translation"
 import TranslationChartImage from "@/components/TranslationChartImage"
 import { Flex, Stack } from "@/components/ui/flex"
+import Link from "@/components/ui/Link"
 import UpcomingEventsList from "@/components/UpcomingEventsList"
 
 import { getEditPath } from "@/lib/utils/editPath"

From 50ade1344fe362991c65b3fa56061319fa5ff946 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Wed, 21 Aug 2024 15:03:51 +0200
Subject: [PATCH 3/3] Update src/layouts/Static.tsx

---
 src/layouts/Static.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/Static.tsx b/src/layouts/Static.tsx
index f5e9d8aeb7f..5f13e30e780 100644
--- a/src/layouts/Static.tsx
+++ b/src/layouts/Static.tsx
@@ -112,7 +112,7 @@ export const StaticLayout = ({
               <Breadcrumbs slug={slug} />
 
               <p
-                className="text-sm text-[#666] dark:text-[#b2b2b2]"
+                className="text-body-medium"
                 dir={isLangRightToLeft(locale as Lang) ? "rtl" : "ltr"}
               >
                 <Translation id="page-last-updated" />:{" "}