Merge pull request #14045 from kushagrasarathe/migrateGhostCard

feat: migrate GhostCard to tailwind

Author: pettinarip

src/components/GhostCard.tsx

@@ -1,37 +1,31 @@
 import React from "react"
-import { Box, BoxProps } from "@chakra-ui/react"
 
-export type GhostCardProps = BoxProps
+import { cn } from "@/lib/utils/cn"
 
-const GhostCard = ({ children, ...rest }: GhostCardProps) => (
-  <Box position="relative" alignSelf="stretch" {...rest}>
-    <Box
-      zIndex="hide"
-      position="absolute"
-      backgroundColor="ghostCardGhost"
-      bottom="2"
-      insetInlineStart="2"
-      border="1px solid"
-      borderColor="border"
-      borderRadius="2px"
-      height="full"
-      width="full"
-    />
-    <Box
-      className="ghost-card-base"
-      height="full"
-      width="full"
-      borderRadius="2px"
-      zIndex={2}
-      padding="6"
-      background="ghostCardBackground"
-      border="1px solid"
-      borderColor="border"
-      textAlign="start"
-    >
-      {children}
-    </Box>
-  </Box>
-)
+import { Card } from "./ui/card"
+
+interface GhostCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode
+}
+
+const GhostCard: React.FC<GhostCardProps> = ({
+  children,
+  className,
+  ...props
+}) => {
+  return (
+    <div className={cn("relative self-stretch", className)}>
+      <div className="absolute bottom-2 left-2 z-hide h-full w-full rounded-sm border-border-high-contrast bg-background-medium" />
+      <Card
+        className={cn(
+          "text-card-foreground z-10 h-full w-full rounded-sm border bg-background-highlight p-6 text-left"
+        )}
+        {...props}
+      >
+        {children}
+      </Card>
+    </div>
+  )
+}
 
 export default GhostCard

src/pages/dapps.tsx

@@ -1854,15 +1854,7 @@ const DappsPage = () => {
       </FullWidthContainer>
       <Content>
         <ImageContainer id="what-are-dapps">
-          <GhostCard
-            mt={2}
-            sx={{
-              ".ghost-card-base": {
-                display: "flex",
-                justifyContent: "center",
-              },
-            }}
-          >
+          <GhostCard className="mt-2 flex items-center">
             <Image
               bgSize="cover"
               bgRepeat="no-repeat"

src/pages/gas.tsx

@@ -273,12 +273,7 @@ const GasPage = () => {
               </InlineLink>
             </Text>
           </Box>
-          <GhostCard
-            flex="40%"
-            maxW="640px"
-            alignSelf="center"
-            mt={{ base: 16, lg: 2 }}
-          >
+          <GhostCard className="mt-16 max-w-[640px] self-center md:w-2/5 lg:mt-2">
             <Emoji text=":cat:" className="text-5xl" />
             <H3>{t("page-gas-attack-of-the-cryptokitties-header")}</H3>
             <Text>{t("page-gas-attack-of-the-cryptokitties-text")}</Text>

src/pages/stablecoins.tsx

@@ -467,11 +467,7 @@ const StablecoinsPage = ({ markets, marketsHasError }) => {
               </Box>
             ))}
           </Box>
-          <GhostCard
-            maxW="640px"
-            me={{ base: 0, lg: 8 }}
-            mt={{ base: 16, lg: 2 }}
-          >
+          <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>
             <Text>{t("page-stablecoins-bitcoin-pizza-body")} </Text>