From f54ea4bf0cc4c9184f618904b71d8261004d2c3d Mon Sep 17 00:00:00 2001
From: Joe Chen <jiajuncjoe@gmail.com>
Date: Sun, 2 Feb 2025 21:33:51 +0800
Subject: [PATCH 1/3] Migrate CallToContribute/index.tsx to Shadcn

---
 src/components/CallToContribute/index.tsx | 61 +++++------------------
 1 file changed, 13 insertions(+), 48 deletions(-)

diff --git a/src/components/CallToContribute/index.tsx b/src/components/CallToContribute/index.tsx
index b79a85d43af..9db781e45ed 100644
--- a/src/components/CallToContribute/index.tsx
+++ b/src/components/CallToContribute/index.tsx
@@ -1,15 +1,15 @@
 import React, { ReactNode } from "react"
 import { FaGithub } from "react-icons/fa"
-import { Flex, FlexProps, Icon } from "@chakra-ui/react"
+import { FlexProps } from "@chakra-ui/react"
 
 import { ChildOnlyProp } from "@/lib/types"
 
-import { ButtonLink } from "@/components/Buttons"
-import InlineLink from "@/components/Link"
-import OldHeading from "@/components/OldHeading"
-import Text from "@/components/OldText"
 import Translation from "@/components/Translation"
 
+import { ButtonLink } from "../ui/buttons/Button"
+import { Flex } from "../ui/flex"
+import InlineLink from "../ui/Link"
+
 export type CallToContributeProps = {
   editPath: string
 }
@@ -19,47 +19,22 @@ const ContentColumn = (props: {
   hideBelow?: FlexProps["hideBelow"]
 }) => (
   <Flex
-    direction="column"
-    flexGrow={1}
-    flexShrink={1}
-    flexBasis="50%"
-    p={4}
-    color="text"
-    textAlign={{ base: "center", lg: "start" }}
+    className="flex-1 basis-1/2 flex-col p-4 text-body lg:text-start"
     {...props}
   />
 )
 
 const DescriptionParagraph = ({ children }: ChildOnlyProp) => (
-  <Text lineHeight="140%" color="text" fontFamily="monospace">
-    {children}
-  </Text>
+  <p className="mb-6 font-monospace leading-xs text-body">{children}</p>
 )
 
 const CallToContribute = ({ editPath }: CallToContributeProps) => {
   return (
-    <Flex
-      as="aside"
-      bg="ednBackground"
-      align="center"
-      mt={8}
-      border="1px"
-      borderColor="primary.base"
-      borderRadius="base"
-      boxShadow="inset 0 -2px 0 0 var(--eth-colors-primary400)"
-    >
+    <aside className="mt-8 items-center rounded-md border border-b-4 border-primary border-b-primary bg-background-highlight">
       <ContentColumn>
-        <OldHeading
-          as="h2"
-          fontFamily="monospace"
-          textTransform="uppercase"
-          p={1}
-          fontSize="2rem"
-          lineHeight={1.4}
-          mt={0}
-        >
+        <h2 className="mb-8 mt-0 p-1 font-monospace uppercase leading-xs">
           <Translation id="page-developers-docs:page-calltocontribute-title" />
-        </OldHeading>
+        </h2>
         <DescriptionParagraph>
           <Translation id="page-developers-docs:page-calltocontribute-desc-1" />
         </DescriptionParagraph>
@@ -78,22 +53,12 @@ const CallToContribute = ({ editPath }: CallToContributeProps) => {
             <Translation id="page-developers-docs:page-calltocontribute-link-2" />
           </InlineLink>{" "}
         </DescriptionParagraph>
-        <ButtonLink
-          href={editPath}
-          leftIcon={
-            <Icon
-              fill="background.base"
-              w={6}
-              h={6}
-              as={FaGithub}
-              name="github"
-            />
-          }
-        >
+        <ButtonLink href={editPath}>
+          <FaGithub className="h-6 w-6" />
           <Translation id="page-developers-docs:page-calltocontribute-span" />
         </ButtonLink>
       </ContentColumn>
-    </Flex>
+    </aside>
   )
 }
 

From 0177235dd0f5eb668c0211981865521844df6da3 Mon Sep 17 00:00:00 2001
From: Joe Chen <jiajuncjoe@gmail.com>
Date: Sun, 2 Feb 2025 21:37:33 +0800
Subject: [PATCH 2/3] Correct className

---
 src/components/CallToContribute/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CallToContribute/index.tsx b/src/components/CallToContribute/index.tsx
index 9db781e45ed..3cbbd4595a3 100644
--- a/src/components/CallToContribute/index.tsx
+++ b/src/components/CallToContribute/index.tsx
@@ -30,7 +30,7 @@ const DescriptionParagraph = ({ children }: ChildOnlyProp) => (
 
 const CallToContribute = ({ editPath }: CallToContributeProps) => {
   return (
-    <aside className="mt-8 items-center rounded-md border border-b-4 border-primary border-b-primary bg-background-highlight">
+    <aside className="mt-8 items-center rounded-md border border-b-4 border-primary bg-background-highlight">
       <ContentColumn>
         <h2 className="mb-8 mt-0 p-1 font-monospace uppercase leading-xs">
           <Translation id="page-developers-docs:page-calltocontribute-title" />

From b05baae822a1d2c8d0c6985dd67a24edf9c0c3b8 Mon Sep 17 00:00:00 2001
From: Joe Chen <jiajuncjoe@gmail.com>
Date: Sun, 2 Feb 2025 21:45:42 +0800
Subject: [PATCH 3/3] Remove chakra import

---
 src/components/CallToContribute/index.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/CallToContribute/index.tsx b/src/components/CallToContribute/index.tsx
index 3cbbd4595a3..3a25b805b35 100644
--- a/src/components/CallToContribute/index.tsx
+++ b/src/components/CallToContribute/index.tsx
@@ -1,6 +1,5 @@
-import React, { ReactNode } from "react"
+import React from "react"
 import { FaGithub } from "react-icons/fa"
-import { FlexProps } from "@chakra-ui/react"
 
 import { ChildOnlyProp } from "@/lib/types"
 
@@ -14,10 +13,7 @@ export type CallToContributeProps = {
   editPath: string
 }
 
-const ContentColumn = (props: {
-  children: ReactNode
-  hideBelow?: FlexProps["hideBelow"]
-}) => (
+const ContentColumn = (props: ChildOnlyProp) => (
   <Flex
     className="flex-1 basis-1/2 flex-col p-4 text-body lg:text-start"
     {...props}