From 7f1479f24377b3485107419ae0f85a925c82e054 Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Tue, 14 Jan 2025 22:26:56 -0700
Subject: [PATCH] feat: migrate Card to tailwind

---
 src/components/Card/index.tsx     | 50 +++++++++++++++++--------------
 src/components/Trilemma/index.tsx |  4 +--
 src/layouts/md/Translatathon.tsx  |  3 +-
 src/pages/bug-bounty.tsx          |  4 +--
 src/pages/community.tsx           |  6 +---
 src/pages/dapps.tsx               |  2 +-
 src/pages/developers/index.tsx    | 14 +--------
 src/pages/eth.tsx                 |  6 +---
 src/pages/gas.tsx                 |  5 +---
 src/pages/learn.tsx               | 13 ++------
 src/pages/roadmap/vision.tsx      |  8 +----
 src/pages/staking/index.tsx       |  8 +----
 src/pages/wallets/index.tsx       |  6 +---
 src/pages/what-is-ethereum.tsx    |  5 +---
 src/styles/semantic-tokens.css    |  6 ++++
 tailwind.config.ts                |  2 ++
 16 files changed, 51 insertions(+), 91 deletions(-)

diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
index 27be3528caa..c1b7e914e14 100644
--- a/src/components/Card/index.tsx
+++ b/src/components/Card/index.tsx
@@ -1,40 +1,44 @@
 import { ReactNode } from "react"
-import { Heading, Stack, StackProps, Text } from "@chakra-ui/react"
 
 import Emoji from "@/components/Emoji"
 
-export type CardProps = Omit<StackProps, "children" | "title"> & {
+import { cn } from "@/lib/utils/cn"
+
+export type CardProps = {
   children?: ReactNode
   emoji?: string
   title?: ReactNode
   description?: ReactNode
+  className?: string
 }
 
-const Card = ({ emoji, title, description, children, ...props }: CardProps) => (
-  <Stack
-    spacing="4"
-    justifyContent="space-between"
-    bg="ednBackground"
-    borderRadius="sm"
-    border="1px"
-    borderStyle="solid"
-    borderColor="lightBorder"
-    p="6"
+const Card = ({
+  emoji,
+  title,
+  description,
+  children,
+  className,
+  ...props
+}: CardProps) => (
+  <div
+    className={cn(
+      "flex flex-col justify-between space-y-4",
+      "rounded-sm bg-ednBackground",
+      "border border-solid border-lightBorder",
+      "p-6",
+      className
+    )}
     {...props}
   >
-    <Stack spacing="4">
+    <div className="flex flex-col space-y-4">
       {emoji && <Emoji className="text-5xl leading-none" text={emoji} />}
-      <Stack spacing="8">
-        {title && (
-          <Heading as="h3" fontSize="2xl">
-            {title}
-          </Heading>
-        )}
-        {description && <Text>{description}</Text>}
-      </Stack>
-    </Stack>
+      <div className="flex flex-col space-y-8">
+        {title && <h3 className="text-2xl leading-[1.4]">{title}</h3>}
+        {description && <p>{description}</p>}
+      </div>
+    </div>
     {children}
-  </Stack>
+  </div>
 )
 
 export default Card
diff --git a/src/components/Trilemma/index.tsx b/src/components/Trilemma/index.tsx
index 011519bf985..af0602b3a4c 100644
--- a/src/components/Trilemma/index.tsx
+++ b/src/components/Trilemma/index.tsx
@@ -35,11 +35,11 @@ const Trilemma = () => {
             {t("page-roadmap-vision-trilemma-modal-tip")}:
           </p>
         </VStack>
-        <Card {...cardDetail} minH="300px" hideBelow="lg" mt="6" />
+        <Card {...cardDetail} className="mt-6 hidden min-h-[300px] lg:block" />
       </Stack>
       <Sheet open={mobileModalOpen} onOpenChange={handleModalClose}>
         <SheetContent side="bottom" className="rounded-t-[16px]">
-          <Card {...cardDetail} background="none" border="none" my="8" />
+          <Card {...cardDetail} className="my-8 border-none bg-transparent" />
           <SheetClose className="absolute right-3 top-5">
             <span className="sr-only">Close</span>
             <svg
diff --git a/src/layouts/md/Translatathon.tsx b/src/layouts/md/Translatathon.tsx
index fb7194b4820..a52ad42e7ce 100644
--- a/src/layouts/md/Translatathon.tsx
+++ b/src/layouts/md/Translatathon.tsx
@@ -75,8 +75,7 @@ const EmojiCard = ({ emoji, title, description }) => (
     emoji={emoji}
     title={title}
     description={description}
-    flex="1 1 30%"
-    p={6}
+    className="flex-[1_1_30%] p-6"
   />
 )
 
diff --git a/src/pages/bug-bounty.tsx b/src/pages/bug-bounty.tsx
index eac617b89b3..895a1ab6bde 100644
--- a/src/pages/bug-bounty.tsx
+++ b/src/pages/bug-bounty.tsx
@@ -254,7 +254,7 @@ const StyledCardContainer = (props: ChildOnlyProp) => (
 )
 
 const StyledCard = ({ children, ...props }) => (
-  <Card flex="1 1 464px" m="4" p="6" justifyContent="flex-start" {...props}>
+  <Card className="m-4 flex-[1_1_464px] justify-start p-6" {...props}>
     {children}
   </Card>
 )
@@ -473,7 +473,7 @@ const BugBountiesPage = () => {
         title={t("page-upgrades-bug-bounty-meta-title")}
         description={t("page-upgrades-bug-bounty-meta-description")}
       />
-      { /* TODO: Remove on the 25th of January */ }
+      {/* TODO: Remove on the 25th of January */}
       <BugBountyBanner />
       <Content>
         <HeroCard>
diff --git a/src/pages/community.tsx b/src/pages/community.tsx
index 795146ca5e5..051ba9166a9 100644
--- a/src/pages/community.tsx
+++ b/src/pages/community.tsx
@@ -251,11 +251,7 @@ const CommunityPage = () => {
           <CardContainer>
             {whyGetInvolvedCards.map((card, idx) => (
               <Card
-                m={4}
-                p={6}
-                flex="1 0 30%"
-                minW="280px"
-                maxW={{ base: "full", md: "46%", lg: "31%" }}
+                className="m-4 min-w-[280px] max-w-full flex-[1_0_30%] p-6 md:max-w-[46%] lg:max-w-[31%]"
                 key={idx}
                 emoji={card.emoji}
                 title={card.title}
diff --git a/src/pages/dapps.tsx b/src/pages/dapps.tsx
index fa98a65cb3f..1caf83c655b 100644
--- a/src/pages/dapps.tsx
+++ b/src/pages/dapps.tsx
@@ -1821,7 +1821,7 @@ const DappsPage = () => {
                 {(categories[selectedCategory].benefits || []).map(
                   (art, idx) => (
                     <Card
-                      textAlign="center"
+                      className="text-center"
                       key={idx}
                       emoji={art.emoji}
                       title={art.title}
diff --git a/src/pages/developers/index.tsx b/src/pages/developers/index.tsx
index 5747e9ee063..9e58898b9ce 100644
--- a/src/pages/developers/index.tsx
+++ b/src/pages/developers/index.tsx
@@ -10,7 +10,6 @@ import {
   SimpleGrid,
   Stack,
   TextProps,
-  useColorModeValue,
 } from "@chakra-ui/react"
 
 import { BasePageProps, ChildOnlyProp, Lang } from "@/lib/types"
@@ -115,21 +114,10 @@ const IntroColumn = (props: ChildOnlyProp) => (
 )
 
 const StyledCard = (props: CardProps) => {
-  const tableBoxShadow = useColorModeValue("tableBox.light", "tableBox.dark")
-
   return (
     <Card
-      boxShadow={tableBoxShadow}
-      m={4}
-      p={6}
+      className={`m-4 p-6 shadow-[0px_1px_3px_rgba(0,0,0,0.1)] transition-transform duration-100 hover:scale-105 hover:rounded hover:bg-background-highlight hover:shadow-[0px_8px_17px_rgba(0,0,0,0.15)] dark:shadow-[0px_1px_3px_rgba(60,60,60,0.1)]`}
       {...props}
-      _hover={{
-        borderRadius: "4px",
-        boxShadow: "0px 8px 17px rgba(0, 0, 0, 0.15)",
-        background: "tableBackgroundHover",
-        transition: "transform 0.1s",
-        transform: "scale(1.02)",
-      }}
     />
   )
 }
diff --git a/src/pages/eth.tsx b/src/pages/eth.tsx
index 9a71d8da556..c4f162a44cd 100644
--- a/src/pages/eth.tsx
+++ b/src/pages/eth.tsx
@@ -78,11 +78,7 @@ const Intro = (props: ChildOnlyProp) => (
 
 const StyledCard = (props: ComponentProps<typeof Card>) => (
   <Card
-    m={4}
-    p={6}
-    flex="1 0 30%"
-    minW="280px"
-    maxW={{ base: "full", md: "46%", lg: "31%" }}
+    className="m-4 min-w-[280px] max-w-full flex-[1_0_30%] p-6 md:max-w-[46%] lg:max-w-[31%]"
     {...props}
   />
 )
diff --git a/src/pages/gas.tsx b/src/pages/gas.tsx
index 68755473ea9..3bd01704209 100644
--- a/src/pages/gas.tsx
+++ b/src/pages/gas.tsx
@@ -70,10 +70,7 @@ const Page = (props: FlexProps) => (
 
 export const StyledCard = (props: ComponentPropsWithRef<typeof Card>) => (
   <Card
-    flex="1 1 30%"
-    minW="280px"
-    maxW={{ base: "full", lg: "46%" }}
-    p={6}
+    className="min-w-[280px] max-w-full flex-[1_0_30%] p-6 md:max-w-[46%]"
     {...props}
   />
 )
diff --git a/src/pages/learn.tsx b/src/pages/learn.tsx
index 64dba595f93..47bf7135f15 100644
--- a/src/pages/learn.tsx
+++ b/src/pages/learn.tsx
@@ -49,15 +49,7 @@ import whatIsEth from "@/public/images/what-is-ethereum.png"
 
 // TODO: Migrate the original Card component before updating this
 const Card = ({ children, ...props }: OriginalCardProps) => (
-  <OriginalCard
-    justifyContent="space-between"
-    sx={{
-      h3: {
-        mt: 0,
-      },
-    }}
-    {...props}
-  >
+  <OriginalCard className="justify-between [&_h3]:mt-0" {...props}>
     {children}
   </OriginalCard>
 )
@@ -454,8 +446,7 @@ const LearnPage = () => {
                   </>
                 </Card>
                 <Card
-                  justifyContent="start"
-                  bg="cardGradient"
+                  className="justify-start bg-gradient-main"
                   title={t("emerging-use-cases-title")}
                   description={t("emerging-use-cases-description")}
                 >
diff --git a/src/pages/roadmap/vision.tsx b/src/pages/roadmap/vision.tsx
index b0812af391d..84af95eaf85 100644
--- a/src/pages/roadmap/vision.tsx
+++ b/src/pages/roadmap/vision.tsx
@@ -89,13 +89,7 @@ const ProblemCardContainer = (props: ChildOnlyProp) => {
 
 const CentreCard = (props: ComponentPropsWithRef<typeof Card>) => (
   <Card
-    flex="1 1 30%"
-    minW="240px"
-    m={4}
-    page-upgrades-proof-stake-link
-    p={6}
-    border={0}
-    textAlign="center"
+    className="m-4 min-w-[240px] flex-[1_1_30%] border-0 p-6 text-center"
     {...props}
   />
 )
diff --git a/src/pages/staking/index.tsx b/src/pages/staking/index.tsx
index 93b5a7b8b4b..135fbe8ec2a 100644
--- a/src/pages/staking/index.tsx
+++ b/src/pages/staking/index.tsx
@@ -108,13 +108,7 @@ const StyledCard = (props: {
     emoji={props.emoji}
     key={props.key}
     description={props.description}
-    sx={{
-      justifyContent: "flex-start",
-      h3: {
-        fontWeight: "700",
-        margin: "0 0 1rem",
-      },
-    }}
+    className="justify-start [&_h3]:mb-1 [&_h3]:mt-0 [&_h3]:font-bold"
   >
     {props.children}
   </Card>
diff --git a/src/pages/wallets/index.tsx b/src/pages/wallets/index.tsx
index 6ff5f83dc11..cddc9e1dd3a 100644
--- a/src/pages/wallets/index.tsx
+++ b/src/pages/wallets/index.tsx
@@ -107,11 +107,7 @@ const CardContainer = (props: BoxProps) => (
 
 export const StyledCard = (props: ComponentPropsWithRef<typeof Card>) => (
   <Card
-    flex="1 1 30%"
-    minW="280px"
-    maxW={{ base: "full", md: "46%", lg: "31%" }}
-    m={4}
-    p={6}
+    className="m-4 min-w-[280px] max-w-full flex-1 p-6 md:max-w-[46%] lg:max-w-[31%]"
     {...props}
   />
 )
diff --git a/src/pages/what-is-ethereum.tsx b/src/pages/what-is-ethereum.tsx
index 4e29ce31a5e..77072f8279f 100644
--- a/src/pages/what-is-ethereum.tsx
+++ b/src/pages/what-is-ethereum.tsx
@@ -384,10 +384,7 @@ const WhatIsEthereumPage = ({
                         emoji={card.emoji}
                         title={card.title}
                         description={card.description}
-                        flex="1 1 30%"
-                        minW="240px"
-                        m={4}
-                        p={6}
+                        className="m-4 min-w-[240px] flex-[1_1_30%] p-6"
                       />
                     ))}
                   </CardContainer>
diff --git a/src/styles/semantic-tokens.css b/src/styles/semantic-tokens.css
index 16342c17b26..6cc14df035c 100644
--- a/src/styles/semantic-tokens.css
+++ b/src/styles/semantic-tokens.css
@@ -126,6 +126,9 @@
     --staking-blue-fill: #f1fcf5;
     --staking-red: #a0524c;
     --staking-red-fill: #f8fbf9;
+
+    --edn-background: #f7f7f7;
+    --light-border: #ececec;
   }
 
   /* Dark mode token declarations */
@@ -224,5 +227,8 @@
     --staking-blue-fill: #2b352f;
     --staking-red: #d6bbb9;
     --staking-red-fill: #313432;
+
+    --edn-background: #1a1a1a;
+    --light-border: #404040;
   }
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 1d0e1f871de..b063ef96867 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -145,6 +145,8 @@ const config = {
         },
 
         disabled: "hsla(var(--disabled))",
+        ednBackground: "var(--edn-background)",
+        lightBorder: "var(--light-border)",
 
         background: {
           DEFAULT: "hsla(var(--background))",