Merge pull request #14226 from kushagrasarathe/migrateHorizontalCard

feat: migrate HorizontalCard to tailwind

src/components/HorizontalCard.tsx

@@ -1,35 +1,37 @@
 import React, { ReactNode } from "react"
-import { Box, Flex, FlexProps } from "@chakra-ui/react"
 
 import { cn } from "@/lib/utils/cn"
 
 import Emoji from "./Emoji"
-import Text from "./OldText"
 
-export type HorizontalCardProps = Omit<FlexProps, "title"> & {
+export interface HorizontalCardProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
   emoji: string
+  emojiClassName?: string
   title?: ReactNode
   description: ReactNode
+  children?: ReactNode
 }
 
 const HorizontalCard = ({
   emoji,
+  emojiClassName,
   title,
   description,
   children,
   className,
-  ...rest
-}: HorizontalCardProps) => (
-  <Flex borderRadius="base" {...rest}>
-    <Emoji className={cn("text-5xl", className)} text={emoji} />
-    <Box flexGrow="0" flexShrink="1" flexBasis="75%" ms="8">
-      <Text fontSize="lg">{title}</Text>
-      <Text mt="-4" mb="2">
-        {description}
-      </Text>
-      <>{children}</>
-    </Box>
-  </Flex>
-)
+  ...props
+}: HorizontalCardProps) => {
+  return (
+    <div className={cn("flex items-center gap-8", className)} {...props}>
+      <Emoji text={emoji} className={cn("text-5xl", emojiClassName)} />
+      <div className="flex-shrink flex-grow-0 basis-3/4 space-y-2">
+        <p className="text-lg">{title}</p>
+        <p>{description}</p>
+        {children}
+      </div>
+    </div>
+  )
+}
 
 export default HorizontalCard

src/components/Stat/index.tsx

@@ -56,4 +56,4 @@ const Stat = ({ tooltipProps, value, label, isError }: StatProps) => {
   )
 }
 
-export default Stat
+export default Stat

src/pages/eth.tsx

@@ -34,6 +34,7 @@ import { StandaloneQuizWidget } from "@/components/Quiz/QuizWidget"
 import Translation from "@/components/Translation"
 import { Divider } from "@/components/ui/divider"
 
+import { cn } from "@/lib/utils/cn"
 import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
 import { getLocaleTimestamp } from "@/lib/utils/time"
@@ -212,9 +213,12 @@ const CardContainer = (props: FlexProps) => (
 )
 
 const TokenCard = (props: ComponentProps<typeof HorizontalCard>) => (
-  <HorizontalCard minW="full" my={2} mx={0} borderRadius={0} {...props} />
+  <HorizontalCard
+    className={cn("mx-0 my-2 min-w-full rounded-none", props.className)}
+    emojiClassName="text-[5rem]"
+    {...props}
+  />
 )
-
 const TextDivider = () => (
   <Box
     w="10%"
@@ -554,7 +558,6 @@ const EthPage = () => {
               emoji={token.emoji}
               title={token.title}
               description={token.description}
-              className="text-[5rem]"
             />
           ))}
         </RightColumn>

src/pages/gas.tsx

@@ -298,8 +298,6 @@ const GasPage = () => {
                   key={benefit.emoji}
                   emoji={benefit.emoji}
                   description={benefit.description}
-                  className="text-5xl"
-                  align="center"
                 />
               </Box>
             ))}

src/pages/stablecoins.tsx

@@ -456,17 +456,21 @@ const StablecoinsPage = ({ markets, marketsHasError }) => {
           me={{ base: 0, lg: 8 }}
           mb={8}
         >
-          <Box w="full" margin={{ base: "auto 0", lg: "0 2rem 0" }}>
+          <Flex
+            w="full"
+            margin={{ base: "auto 0", lg: "0 2rem 0" }}
+            direction="column"
+            gap={2}
+          >
             {tokens.map((token, index) => (
               <Box key={index} minWidth="full" my={2}>
                 <HorizontalCard
                   emoji={token.emoji}
                   description={token.description}
-                  className="text-5xl"
                 />
               </Box>
             ))}
-          </Box>
+          </Flex>
           <GhostCard className="me-0 mt-16 max-w-[640px] lg:me-8 lg:mt-2">
             <Emoji text=":pizza:" className="text-5xl" />
             <H3>{t("page-stablecoins-bitcoin-pizza")}</H3>

src/pages/wallets/index.tsx

@@ -117,11 +117,8 @@ export const StyledCard = (props: ComponentPropsWithRef<typeof Card>) => (
 )
 const ChecklistItem = (props: HorizontalCardProps) => (
   <HorizontalCard
-    border={0}
-    display="flex"
-    className="text-2xl"
-    alignItems="flex-start"
-    mb={4}
+    emojiClassName="text-2xl"
+    className="items-start"
     {...props}
   />
 )
@@ -359,19 +356,14 @@ const WalletsPage = () => {
         <RightColumn mt={{ base: 12, lg: 0 }}>
           <H2>{t("page-wallets-types")}</H2>
           <Text>{t("page-wallets-types-desc")}</Text>
-          <Box>
+          <Box className="flex flex-col gap-2">
             {types.map((type, idx) => (
               <HorizontalCard
-                minWidth="100%"
-                marginTop={2}
-                marginBottom={2}
-                ms={0}
-                me={0}
                 key={idx}
                 emoji={type.emoji}
                 description={type.description}
-                className="text-[2.5rem]"
-                alignItems="center"
+                className="my-0.5 w-[100%]"
+                emojiClassName="text-[2.5rem]"
               />
             ))}
           </Box>
@@ -447,7 +439,7 @@ const WalletsPage = () => {
           <Box lineHeight={1.4} mb={6} color="text300">
             <Translation id="page-wallets:page-wallets-stay-safe-desc" />
           </Box>
-          <Box>
+          <Flex direction="column" gap={4}>
             <ChecklistItem
               key="0"
               emoji=":white_check_mark:"
@@ -480,7 +472,7 @@ const WalletsPage = () => {
               title={t("page-wallets-triple-check")}
               description={t("page-wallets-triple-check-desc")}
             />
-          </Box>
+          </Flex>
         </LeftColumn>
         <RightColumn mt={{ base: 12, lg: 0 }}>
           <H2>{t("page-wallets-tips")}</H2>