fix HorizontalCard

Author: pettinarip

src/components/HorizontalCard.tsx

@@ -1,6 +1,8 @@
 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"
 
@@ -15,10 +17,11 @@ const HorizontalCard = ({
   title,
   description,
   children,
+  className,
   ...rest
 }: HorizontalCardProps) => (
   <Flex borderRadius="base" {...rest}>
-    <Emoji className="text-5xl" text={emoji} />
+    <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">

src/pages/eth.tsx

@@ -558,7 +558,7 @@ const EthPage = () => {
               emoji={token.emoji}
               title={token.title}
               description={token.description}
-              emojiSize={5}
+              className="text-[5rem]"
             />
           ))}
         </RightColumn>

src/pages/gas.tsx

@@ -306,7 +306,7 @@ const GasPage = () => {
                   key={benefit.emoji}
                   emoji={benefit.emoji}
                   description={benefit.description}
-                  emojiSize={3}
+                  className="text-5xl"
                   align="center"
                 />
               </Box>

src/pages/stablecoins.tsx

@@ -458,7 +458,7 @@ const StablecoinsPage = ({ markets, marketsHasError }) => {
                 <HorizontalCard
                   emoji={token.emoji}
                   description={token.description}
-                  emojiSize={3}
+                  className="text-5xl"
                 />
               </Box>
             ))}

src/pages/wallets/index.tsx

@@ -118,7 +118,7 @@ const ChecklistItem = (props: HorizontalCardProps) => (
   <HorizontalCard
     border={0}
     display="flex"
-    emojiSize={1.5}
+    className="text-2xl"
     alignItems="flex-start"
     mb={4}
     {...props}
@@ -352,7 +352,7 @@ const WalletsPage = () => {
                 key={idx}
                 emoji={type.emoji}
                 description={type.description}
-                emojiSize={2.5}
+                className="text-[2.5rem]"
                 alignItems="center"
               />
             ))}