Merge pull request #14683 from ethereum/card-shadcn

feat: migrate Card to tailwind

Author: pettinarip

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-background-highlight",
+      "border border-solid",
+      "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

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

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"
   />
 )
 

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>

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}

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}

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)",
-      }}
     />
   )
 }

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}
   />
 )

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}
   />
 )

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>
 )
@@ -447,8 +439,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")}
                 >