From a6a78875f4d7ab43a4f6ce757fc767f488b95cc0 Mon Sep 17 00:00:00 2001
From: baystef <daramola.adebayo@yahoo.com>
Date: Sat, 25 Jan 2025 17:39:34 +0100
Subject: [PATCH 1/2] refactor(community): migrate community page to
 tailwind/shadcn

---
 src/pages/community.tsx | 243 +++++++++++-----------------------------
 src/styles/global.css   |   6 +
 tailwind.config.ts      |   7 ++
 3 files changed, 76 insertions(+), 180 deletions(-)

diff --git a/src/pages/community.tsx b/src/pages/community.tsx
index 795146ca5e5..a69d8b6a56b 100644
--- a/src/pages/community.tsx
+++ b/src/pages/community.tsx
@@ -1,31 +1,25 @@
+import { BaseHTMLAttributes } from "react"
 import { GetStaticProps } from "next"
 import { useTranslation } from "next-i18next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
-import {
-  Box,
-  Flex,
-  HeadingProps,
-  SimpleGrid,
-  Text,
-  useTheme,
-} from "@chakra-ui/react"
 
 import { BasePageProps, ChildOnlyProp, Lang } from "@/lib/types"
 import { ICard, IGetInvolvedCard } from "@/lib/interfaces"
 
 import ActionCard from "@/components/ActionCard"
-import ButtonLink, { ButtonLinkProps } from "@/components/Buttons/ButtonLink"
 import Callout from "@/components/Callout"
 import Card from "@/components/Card"
 import FeedbackCard from "@/components/FeedbackCard"
 import { HubHero } from "@/components/Hero"
 import type { HubHeroProps } from "@/components/Hero/HubHero"
-import { Image } from "@/components/Image"
+import { TwImage } from "@/components/Image"
 import MainArticle from "@/components/MainArticle"
-import OldHeading from "@/components/OldHeading"
 import PageMetadata from "@/components/PageMetadata"
+import { ButtonLink, ButtonLinkProps } from "@/components/ui/buttons/Button"
 import { Divider } from "@/components/ui/divider"
+import { Flex } from "@/components/ui/flex"
 
+import { cn } from "@/lib/utils/cn"
 import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
 import { getLocaleTimestamp } from "@/lib/utils/time"
@@ -65,50 +59,29 @@ export const getStaticProps = (async ({ locale }) => {
 }) satisfies GetStaticProps<BasePageProps>
 
 const CardContainer = ({ children }: ChildOnlyProp) => {
-  return (
-    <Flex wrap="wrap" mx={-4}>
-      {children}
-    </Flex>
-  )
+  return <Flex className="-mx-4 flex-wrap">{children}</Flex>
 }
 
 const Content = ({ children }: ChildOnlyProp) => {
-  return (
-    <Box py={4} px={8} w="full">
-      {children}
-    </Box>
-  )
+  return <div className="w-full px-8 py-4">{children}</div>
 }
 
 const Page = ({ children }: ChildOnlyProp) => {
   return (
-    <Flex
-      as={MainArticle}
-      direction="column"
-      alignItems="center"
-      w="full"
-      mx="auto"
-    >
-      {children}
+    <Flex asChild className="mx-auto w-full flex-col items-center">
+      <MainArticle>{children}</MainArticle>
     </Flex>
   )
 }
 
 const ButtonRow = ({ children }: ChildOnlyProp) => {
-  return (
-    <Flex alignItems="flex-start" direction={{ base: "column", md: "row" }}>
-      {children}
-    </Flex>
-  )
+  return <Flex className="flex-col items-start md:flex-row">{children}</Flex>
 }
 
 const StyledButtonLink = ({ children, ...props }: ButtonLinkProps) => {
   return (
     <ButtonLink
-      mt={{ base: 4, md: 0 }}
-      ms={{ base: 0, md: 2 }}
-      display="flex"
-      alignItems="center"
+      className="ms-0 mt-4 flex items-center md:ms-2 md:mt-0"
       {...props}
     >
       {children}
@@ -118,55 +91,42 @@ const StyledButtonLink = ({ children, ...props }: ButtonLinkProps) => {
 
 const RowReverse = ({ children }: ChildOnlyProp) => {
   return (
-    <Flex
-      direction={{ base: "column-reverse", lg: "row-reverse" }}
-      alignItems={{ base: "center", lg: "normal" }}
-    >
+    <Flex className="flex-col-reverse items-center lg:flex-row-reverse lg:items-stretch">
       {children}
     </Flex>
   )
 }
 
 const ImageContainer = ({ children }: ChildOnlyProp) => {
-  return (
-    <Flex h="full" w={{ base: "75%", lg: "full" }}>
-      {children}
-    </Flex>
-  )
+  return <Flex className="h-full w-3/4 lg:w-full">{children}</Flex>
 }
 
 const Subtitle = ({ children }: ChildOnlyProp) => {
-  return (
-    <Text mb={8} fontSize={{ base: "md", sm: "xl" }} lineHeight={1.4}>
-      {children}
-    </Text>
-  )
+  return <p className="mb-8 text-md sm:text-xl">{children}</p>
 }
 
 const FeatureContent = ({ children }: ChildOnlyProp) => {
   return (
-    <Flex
-      direction="column"
-      boxSize="full"
-      justifyContent="center"
-      p={{ base: 8, lg: 24 }}
-    >
+    <Flex className="h-full w-full flex-col justify-center p-8 lg:p-24">
       {children}
     </Flex>
   )
 }
 
-const H2 = ({ children, ...props }: HeadingProps) => {
+const H2 = ({
+  children,
+  className,
+  ...props
+}: BaseHTMLAttributes<HTMLHeadingElement>) => {
   return (
-    <OldHeading fontSize={{ base: "2xl", md: "2rem" }} mt={0} {...props}>
+    <h2 className={cn("mb-8 mt-0 text-2xl md:text-3xl", className)} {...props}>
       {children}
-    </OldHeading>
+    </h2>
   )
 }
 
 const CommunityPage = () => {
   const { t } = useTranslation("page-community")
-  const theme = useTheme()
 
   const cards: Array<ICard> = [
     {
@@ -232,20 +192,9 @@ const CommunityPage = () => {
       />
       <HubHero {...heroContent} />
       <Divider />
-      <Flex
-        bg="homeBoxTurquoise"
-        alignItems="center"
-        direction="row-reverse"
-        py={{ base: 8, lg: 0 }}
-        ps={{ base: 0, lg: 8 }}
-        w="full"
-        h={{ base: "full", lg: "720px" }}
-        mt="-1px"
-        borderBottom="1px solid"
-        borderColor="text"
-      >
+      <Flex className="-mt-px h-full w-full flex-row-reverse items-center border-b border-b-border-high-contrast bg-home-box-turquoise py-8 ps-0 lg:h-[720px] lg:py-0 lg:ps-8">
         <Content>
-          <Flex direction="column" alignItems="center" mb={8}>
+          <Flex className="mb-8 flex-col items-center">
             <H2>{t("page-community-why-get-involved-title")}</H2>
           </Flex>
           <CardContainer>
@@ -265,39 +214,26 @@ const CommunityPage = () => {
           </CardContainer>
         </Content>
       </Flex>
-      <Box
-        w="full"
-        pb={16}
-        bg="grayBackground"
-        boxShadow={`inset 0px 0px 0px ${theme.colors.tableItemBoxShadow}`}
-      >
-        <Box py={4} px={{ base: 4, lg: 8 }} w="full">
-          <Flex
-            direction={{ base: "column-reverse", md: "row" }}
-            alignItems="center"
-            mb={{ base: 0, m: 12 }}
-            mt={{ base: 0, m: 4 }}
-          >
-            <Box p={{ base: 0, sm: 8, lg: 24 }} boxSize="full">
+      <div className="w-full bg-background-highlight pb-16 shadow-table-item-box">
+        <div className="w-full px-4 py-4 lg:px-8">
+          <Flex className="mb-0 mt-0 flex-col-reverse items-center md:m-12 md:mt-4 md:flex-row">
+            <div className="h-full w-full p-0 sm:p-8 lg:p-24">
               <H2 id="get-involved">
                 {t("page-community-get-involved-title")}
               </H2>
               <Subtitle>
                 {t("page-community-get-involved-description")}
               </Subtitle>
-            </Box>
+            </div>
             <ImageContainer>
-              <Image
+              <TwImage
+                className="-my-4 object-cover"
                 src={developersEthBlockImg}
                 alt={t("page-community-get-involved-image-alt")}
-                style={{
-                  objectFit: "cover",
-                }}
-                my={-4}
               />
             </ImageContainer>
           </Flex>
-          <SimpleGrid columns={{ base: 1, lg: 2 }} spacing={{ base: 8, lg: 0 }}>
+          <div className="grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-0">
             {cards.map((card, idx) => (
               <ActionCard
                 className="m-0 flex-col rounded-sm border lg:m-4"
@@ -310,22 +246,10 @@ const CommunityPage = () => {
                 alt={card.alt}
               />
             ))}
-          </SimpleGrid>
-        </Box>
-      </Box>
-      <Flex
-        bg="homeBoxTurquoise"
-        alignItems="center"
-        direction={{ base: "column-reverse", lg: "row-reverse" }}
-        ps={{ base: 0, lg: 8 }}
-        py={{ base: 8, lg: 0 }}
-        w="full"
-        h={{ base: "full", lg: "720px" }}
-        mt="-1px"
-        borderTop="1px solid"
-        borderBottom="1px solid"
-        borderColor="text"
-      >
+          </div>
+        </div>
+      </div>
+      <Flex className="-mt-px h-full w-full flex-col-reverse items-center border-y border-y-border-high-contrast bg-home-box-turquoise py-8 ps-0 lg:h-[720px] lg:flex-row-reverse lg:py-0 lg:ps-8">
         <RowReverse>
           <FeatureContent>
             <H2>{t("page-community-open-source")}</H2>
@@ -344,35 +268,18 @@ const CommunityPage = () => {
             </ButtonRow>
           </FeatureContent>
           <ImageContainer>
-            <Image
+            <TwImage
+              className="object-cover"
               src={whatIsEthereumImg}
               alt={t("page-community-open-source-image-alt")}
-              style={{
-                objectFit: "cover",
-              }}
             />
           </ImageContainer>
         </RowReverse>
       </Flex>
-      <Flex
-        bg="homeBoxPink"
-        alignItems="center"
-        direction={{ base: "column-reverse", lg: "row-reverse" }}
-        ps={{ base: 0, lg: 8 }}
-        py={{ base: 8, lg: 0 }}
-        h={{ base: "full", lg: "720px" }}
-        w="full"
-        mt="-1px"
-        borderTop="1px solid"
-        borderBottom="1px solid"
-        borderColor="text"
-      >
-        <Flex
-          direction={{ base: "column-reverse", lg: "row" }}
-          alignItems="center"
-        >
+      <Flex className="-mt-px h-full w-full flex-col-reverse items-center border-y border-y-border-high-contrast bg-home-box-pink py-8 ps-0 lg:h-[720px] lg:flex-row-reverse lg:py-0 lg:ps-8">
+        <Flex className="flex-col-reverse items-center lg:flex-row">
           <FeatureContent>
-            <Flex direction="column" justifyContent="center">
+            <Flex className="flex-col justify-center">
               <H2>{t("page-community-contribute")}</H2>
               <Subtitle>{t("page-community-contribute-description")}</Subtitle>
               <ButtonRow>
@@ -390,94 +297,70 @@ const CommunityPage = () => {
             </Flex>
           </FeatureContent>
           <ImageContainer>
-            <Image
+            <TwImage
+              className="object-cover"
               src={financeTransparentImg}
               alt={t("page-index-internet-image-alt")}
-              style={{
-                objectFit: "cover",
-              }}
             />
           </ImageContainer>
         </Flex>
       </Flex>
-      <Flex
-        bg="homeBoxPurple"
-        alignItems="center"
-        direction={{ base: "column-reverse", lg: "row" }}
-        h={{ base: "full", lg: "720px" }}
-        w="full"
-        mt="-1px"
-        borderTop="1px solid"
-        borderBottom="1px solid"
-        borderColor="text"
-      >
+      <Flex className="-mt-px h-full w-full flex-col-reverse items-center border-y border-y-border-high-contrast bg-home-box-purple lg:h-[720px] lg:flex-row">
         <RowReverse>
           <FeatureContent>
             <H2>{t("page-community-support")}</H2>
             <Subtitle>{t("page-community-support-description")}</Subtitle>
-            <Box>
+            <div>
               <ButtonLink href="/community/support/">
                 {t("page-community-support-button")}
               </ButtonLink>
-            </Box>
+            </div>
           </FeatureContent>
           <ImageContainer>
-            <Image
+            <TwImage
+              className="object-cover"
               src={hackathonTransparentImg}
               alt={t("page-community-support-alt")}
-              style={{
-                objectFit: "cover",
-              }}
             />
           </ImageContainer>
         </RowReverse>
       </Flex>
       <Divider />
-      <Flex
-        direction={{ base: "column", lg: "row" }}
-        alignItems={{ base: "felx-start", lg: "center" }}
-        w="full"
-        py={4}
-        px={8}
-      >
-        <Box flex="0 0 50%" maxW={{ base: "full", md: "75%" }} mb={6}>
-          <OldHeading fontSize={{ base: "2xl", md: "2rem" }}>
+      <Flex className="w-full flex-col items-start px-8 py-4 lg:flex-row lg:items-center">
+        <div className="mb-6 max-w-full flex-[0_0_50%] md:max-w-[75%]">
+          <h2 className="mb-8 mt-12 text-2xl md:text-3xl">
             {t("page-community-try-ethereum")}
-          </OldHeading>
-        </Box>
+          </h2>
+        </div>
       </Flex>
       <Content>
         <CardContainer>
-          <Box
-            as={Callout}
-            flex="1 1 416px"
-            minH="full"
+          <Callout
+            className="min-h-full flex-[1_1_416px]"
             image={ethImg}
             titleKey="page-community:page-community-get-eth-title"
             alt={t("page-community-get-eth-alt")}
             descriptionKey="page-community:page-community-get-eth-description"
           >
-            <Box>
+            <div>
               <ButtonLink href="/get-eth/">
                 {t("page-community-get-eth")}
               </ButtonLink>
-            </Box>
-          </Box>
-          <Box
-            as={Callout}
-            flex="1 1 416px"
-            minH="full"
+            </div>
+          </Callout>
+          <Callout
+            className="min-h-full flex-[1_1_416px]"
             image={dogeComputerImg}
             titleKey="page-community:page-community-explore-dapps-title"
             alt={t("page-community-explore-dapps-alt")}
             descriptionKey="page-community:page-community-explore-dapps-description"
           >
-            <Box>
+            <div>
               <ButtonLink href="/dapps/">
                 {t("page-community-explore-dapps")}
               </ButtonLink>
-            </Box>
-          </Box>
+            </div>
+          </Callout>
         </CardContainer>
       </Content>
       <FeedbackCard />
diff --git a/src/styles/global.css b/src/styles/global.css
index 029638072df..e5f81817086 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -43,6 +43,9 @@
       rgba(145, 234, 228, 0.2) 100%
     );
     --search-background: var(--background);
+    --home-box-turquoise: #ccfcff;
+    --home-box-pink: #ffe5f9;
+    --home-box-purple: #e8e8ff;
   }
 
   [data-theme="dark"] {
@@ -71,6 +74,9 @@
       rgba(134, 253, 232, 0.08) 100%
     );
     --search-background: #4c4c4c;
+    --home-box-turquoise: #293233;
+    --home-box-pink: #332027;
+    --home-box-purple: #212131;
   }
 }
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 1d0e1f871de..511f96c027d 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -218,6 +218,13 @@ const config = {
           "red-fill": "var(--staking-red-fill)",
         },
 
+        //temporary
+        "home-box": {
+          turquoise: "var(--home-box-turquoise)",
+          pink: "var(--home-box-pink)",
+          purple: "var(--home-box-purple)",
+        },
+
         /** @deprecated */
         "switch-background": "hsla(var(--switch-background))", // TODO: Migrate
         "tooltip-shadow": "var(--tooltip-shadow)",

From a7a9829435a76143fad8547f585e7faf644ba13e Mon Sep 17 00:00:00 2001
From: baystef <daramola.adebayo@yahoo.com>
Date: Mon, 3 Feb 2025 10:09:52 +0100
Subject: [PATCH 2/2] refactor(styling): update to inline styling for custom
 colors

---
 src/pages/community.tsx | 8 ++++----
 src/styles/global.css   | 6 ------
 tailwind.config.ts      | 7 -------
 3 files changed, 4 insertions(+), 17 deletions(-)

diff --git a/src/pages/community.tsx b/src/pages/community.tsx
index a69d8b6a56b..18cb380cc7d 100644
--- a/src/pages/community.tsx
+++ b/src/pages/community.tsx
@@ -192,7 +192,7 @@ const CommunityPage = () => {
       />
       <HubHero {...heroContent} />
       <Divider />
-      <Flex className="-mt-px h-full w-full flex-row-reverse items-center border-b border-b-border-high-contrast bg-home-box-turquoise py-8 ps-0 lg:h-[720px] lg:py-0 lg:ps-8">
+      <Flex className="-mt-px h-full w-full flex-row-reverse items-center border-b border-b-border-high-contrast bg-[#ccfcff] py-8 ps-0 lg:h-[720px] lg:py-0 lg:ps-8 dark:bg-[#293233]">
         <Content>
           <Flex className="mb-8 flex-col items-center">
             <H2>{t("page-community-why-get-involved-title")}</H2>
@@ -249,7 +249,7 @@ const CommunityPage = () => {
           </div>
         </div>
       </div>
-      <Flex className="-mt-px h-full w-full flex-col-reverse items-center border-y border-y-border-high-contrast bg-home-box-turquoise py-8 ps-0 lg:h-[720px] lg:flex-row-reverse lg:py-0 lg:ps-8">
+      <Flex className="-mt-px h-full w-full flex-col-reverse items-center border-y border-y-border-high-contrast bg-[#ccfcff] py-8 ps-0 lg:h-[720px] lg:flex-row-reverse lg:py-0 lg:ps-8 dark:bg-[#293233]">
         <RowReverse>
           <FeatureContent>
             <H2>{t("page-community-open-source")}</H2>
@@ -276,7 +276,7 @@ const CommunityPage = () => {
           </ImageContainer>
         </RowReverse>
       </Flex>
-      <Flex className="-mt-px h-full w-full flex-col-reverse items-center border-y border-y-border-high-contrast bg-home-box-pink py-8 ps-0 lg:h-[720px] lg:flex-row-reverse lg:py-0 lg:ps-8">
+      <Flex className="-mt-px h-full w-full flex-col-reverse items-center border-y border-y-border-high-contrast bg-[#ffe5f9] py-8 ps-0 lg:h-[720px] lg:flex-row-reverse lg:py-0 lg:ps-8 dark:bg-[#332027]">
         <Flex className="flex-col-reverse items-center lg:flex-row">
           <FeatureContent>
             <Flex className="flex-col justify-center">
@@ -305,7 +305,7 @@ const CommunityPage = () => {
           </ImageContainer>
         </Flex>
       </Flex>
-      <Flex className="-mt-px h-full w-full flex-col-reverse items-center border-y border-y-border-high-contrast bg-home-box-purple lg:h-[720px] lg:flex-row">
+      <Flex className="-mt-px h-full w-full flex-col-reverse items-center border-y border-y-border-high-contrast bg-[#e8e8ff] lg:h-[720px] lg:flex-row dark:bg-[#212131]">
         <RowReverse>
           <FeatureContent>
             <H2>{t("page-community-support")}</H2>
diff --git a/src/styles/global.css b/src/styles/global.css
index e5f81817086..029638072df 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -43,9 +43,6 @@
       rgba(145, 234, 228, 0.2) 100%
     );
     --search-background: var(--background);
-    --home-box-turquoise: #ccfcff;
-    --home-box-pink: #ffe5f9;
-    --home-box-purple: #e8e8ff;
   }
 
   [data-theme="dark"] {
@@ -74,9 +71,6 @@
       rgba(134, 253, 232, 0.08) 100%
     );
     --search-background: #4c4c4c;
-    --home-box-turquoise: #293233;
-    --home-box-pink: #332027;
-    --home-box-purple: #212131;
   }
 }
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 511f96c027d..1d0e1f871de 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -218,13 +218,6 @@ const config = {
           "red-fill": "var(--staking-red-fill)",
         },
 
-        //temporary
-        "home-box": {
-          turquoise: "var(--home-box-turquoise)",
-          pink: "var(--home-box-pink)",
-          purple: "var(--home-box-purple)",
-        },
-
         /** @deprecated */
         "switch-background": "hsla(var(--switch-background))", // TODO: Migrate
         "tooltip-shadow": "var(--tooltip-shadow)",