feat(Simulator/screens/ConnectWeb3): migrate to TailwindCSS

Author: TylerAPfledderer

src/components/Simulator/screens/ConnectWeb3/index.tsx

@@ -1,15 +1,16 @@
-import React, { useEffect, useMemo, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 import { AnimatePresence, motion } from "framer-motion"
 import {
   RiAuctionLine,
   RiFileTransferLine,
   RiPriceTag2Line,
 } from "react-icons/ri"
-import { Box, Button, Flex, Icon, Text } from "@chakra-ui/react"
 
 import type { PhoneScreenProps } from "@/lib/types"
 
-import { Image } from "@/components/Image"
+import { TwImage as Image } from "@/components/Image"
+import { Button } from "@/components/ui/buttons/Button"
+import { Flex } from "@/components/ui/flex"
 
 import { useEthPrice } from "../../../../hooks/useEthPrice"
 import {
@@ -80,36 +81,17 @@ export const ConnectWeb3 = ({ nav, ctaLabel }: PhoneScreenProps) => {
       {[0].includes(step) && <Browser />}
       {[1, 2, 3].includes(step) && (
         <Web3App displayUrl={EXAMPLE_APP_URL}>
-          <Flex
-            px={6}
-            py={{ base: 8, md: 16 }}
-            gap={{ base: 8, md: 16 }}
-            bg="background.highlight"
-            h="full"
-            direction="column"
-            textAlign="center"
-          >
-            <Text
-              as={motion.p}
-              fontSize={{ base: "xl", md: "2xl" }}
-              m={0}
+          <Flex className="bg-background.highlight h-full flex-col gap-8 px-6 py-8 text-center md:gap-16 md:py-16">
+            <motion.p
+              className="text-xl leading-[1.4] duration-700 md:text-2xl"
               {...fadeInProps}
-              transitionDuration="0.75s"
-              lineHeight={1.4}
             >
               Welcome to Web3
-              <Text as="span" display="block" mt={2} fontWeight="bold">
-                NFT Marketplace
-              </Text>
-            </Text>
-            <Text
-              as={motion.p}
-              {...fadeInProps}
-              transitionDuration="0.75s"
-              transitionDelay="0.5s"
-            >
+              <span className="mt-2 block font-bold">NFT Marketplace</span>
+            </motion.p>
+            <motion.p className="delay-500 duration-700" {...fadeInProps}>
               Connect your wallet to view your collection
-            </Text>
+            </motion.p>
           </Flex>
         </Web3App>
       )}
@@ -132,16 +114,9 @@ export const ConnectWeb3 = ({ nav, ctaLabel }: PhoneScreenProps) => {
             appName="NFT Marketplace"
             displayUrl="app.example.com"
           >
-            <Box
-              px={6}
-              py={{ base: 2, md: 6 }}
-              fontSize="lg"
-              sx={{ button: { textDecoration: "none" } }}
-            >
-              <Text fontWeight="bold" mb={4}>
-                Your collection (1)
-              </Text>
-              <Flex gap={2} mb={6}>
+            <div className="px-6 py-2 text-lg md:py-6 [&_button]:no-underline">
+              <p className="mb-4 font-bold">Your collection (1)</p>
+              <Flex className="mb-6 gap-2">
                 <Image
                   src={NFTs[0].image}
                   width={120}
@@ -153,35 +128,18 @@ export const ConnectWeb3 = ({ nav, ctaLabel }: PhoneScreenProps) => {
                   content="These are some things you could do as the owner of your NFTs"
                   side="top"
                 >
-                  <Flex
-                    direction="column"
-                    fontSize={{ base: "xs", sm: "sm" }}
-                    textAlign="start"
-                    alignItems="start"
-                    gap={1}
-                  >
-                    <Text fontWeight="bold" fontSize="md" mb="auto" ms={2}>
-                      Cool art
-                    </Text>
-                    <Button
-                      variant="link"
-                      isDisabled
-                      leftIcon={<Icon as={RiAuctionLine} fontSize="xs" />}
-                    >
+                  <Flex className="flex-col items-start gap-1 text-start text-xs sm:text-sm">
+                    <p className="mb-auto ms-2 text-md font-bold">Cool art</p>
+                    <Button variant="link" disabled>
+                      <RiAuctionLine className="text-xs" />
                       Set a price
                     </Button>
-                    <Button
-                      variant="link"
-                      isDisabled
-                      leftIcon={<Icon as={RiPriceTag2Line} fontSize="xs" />}
-                    >
+                    <Button variant="link" disabled>
+                      <RiPriceTag2Line className="text-xs" />
                       Auction item
                     </Button>
-                    <Button
-                      variant="link"
-                      isDisabled
-                      leftIcon={<Icon as={RiFileTransferLine} fontSize="xs" />}
-                    >
+                    <Button variant="link" disabled>
+                      <RiFileTransferLine className="text-xs" />
                       Transfer item
                     </Button>
                   </Flex>
@@ -192,16 +150,16 @@ export const ConnectWeb3 = ({ nav, ctaLabel }: PhoneScreenProps) => {
                 content="Try out a real Ethereum application when finished here"
                 side="top"
               >
-                <Box fontSize={{ base: "sm", md: "md" }}>
-                  <Button variant="link" isDisabled display="block">
+                <div className="text-sm md:text-md">
+                  <Button className="block" variant="link" disabled>
                     Browse other artwork
                   </Button>
-                  <Button variant="link" isDisabled>
+                  <Button variant="link" disabled>
                     Mint new NFT
                   </Button>
-                </Box>
+                </div>
               </NotificationPopover>
-            </Box>
+            </div>
           </Web3App>
         </motion.div>
       )}

src/components/ui/buttons/Button.tsx

@@ -36,7 +36,7 @@ const buttonVariants = cva(
         ),
         outline: "", // Base styling
         ghost: "border-transparent hover:shadow-none",
-        link: "border-transparent hover:shadow-none underline py-0 px-1 active:text-primary",
+        link: "border-transparent hover:shadow-none underline !min-h-0 !py-0 !px-1 active:text-primary",
       },
       size: {
         lg: "text-lg py-3 px-8 [&>svg]:text-2xl rounded-lg focus-visible:rounded-lg",
@@ -102,13 +102,18 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     },
     ref
   ) => {
+    console.log("🚀 ~ variant:", variant)
     const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {
       toId && scrollIntoView(toId)
       customEventOptions && trackCustomEvent(customEventOptions)
 
       onClick?.(e)
     }
 
+    console.log(
+      "🚀 ~ buttonVariants({ variant, size, className }):",
+      buttonVariants({ variant, size, className })
+    )
     const Comp = asChild ? Slot : "button"
     return (
       <Comp