feat(Simulator/screens/Slider): migrate to Tailwind

Author: TylerAPfledderer

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

@@ -1,112 +1,75 @@
-import React from "react"
+import { type ReactNode } from "react"
 import { motion } from "framer-motion"
 import { PiCheckThin } from "react-icons/pi"
-import { Box, Flex, Grid, Icon, Text, TextProps } from "@chakra-ui/react"
+
+import { HStack, VStack } from "@/components/ui/flex"
 
 import { EthGlyphIcon } from "../../icons"
 
-type SliderProps = Pick<TextProps, "children"> & {
+type SliderProps = {
   isConnected: boolean
   displayUrl: string
+  children: ReactNode
 }
 export const Slider = ({ isConnected, displayUrl, children }: SliderProps) => {
-  const ICON_SIZE = "4.5rem" as const
   return (
     <>
-      <Box
+      <motion.div
         key="backdrop"
-        as={motion.div}
-        position="absolute"
-        inset={0}
-        bg="blackAlpha.300"
-        backdropFilter="blur(2px)"
+        className="absolute inset-0 bg-black/15 backdrop-blur-[2px]"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
       />
       <motion.div
         key="slider"
-        style={{ position: "absolute", height: "360px", width: "100%" }}
+        className="absolute h-[360px] w-full"
         initial={{ bottom: "-100%" }}
         animate={{ bottom: 0 }}
         exit={{ bottom: "-100%" }}
         transition={{ duration: 0.75, ease: "easeOut" }}
         data-testid="slider-box"
       >
-        <Flex
-          direction="column"
-          alignItems="center"
-          px={6}
-          py={8}
-          h="full"
-          w="full"
-          bg="background.base"
-          borderTopRadius="2xl"
-        >
+        <VStack className="size-full gap-0 rounded-t-2xl bg-background px-6 py-8">
           {isConnected ? (
-            <Flex direction="column" alignItems="center" pt={8} gap={4}>
+            <VStack className="gap-4 pt-8">
               <motion.div
                 key="checkmark"
                 initial={{ scale: 0 }}
                 animate={{ scale: 1 }}
                 transition={{ type: "spring", delay: 0.25 }}
               >
-                <Icon
-                  as={PiCheckThin}
-                  w={ICON_SIZE}
-                  h={ICON_SIZE}
-                  transform="rotate(-10deg)"
-                />
+                <PiCheckThin className="-rotate-[10deg] text-[4.5rem]" />
               </motion.div>
               <motion.div
                 key="text"
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
                 transition={{ delay: 0.15 }}
               >
-                <Text textAlign="center" px={{ base: 4, md: 8 }}>
+                <p className="px-4 text-center md:px-8">
                   You&apos;re logged in!
-                </Text>
+                </p>
               </motion.div>
-            </Flex>
+            </VStack>
           ) : (
             <>
-              <Text textAlign="center" fontWeight="bold" fontSize="lg" mb={4}>
+              <p className="mb-4 text-center text-lg font-bold">
                 Connect account?
-              </Text>
+              </p>
               {/* URL Pill */}
-              <Flex
-                bg="blackAlpha.200"
-                px={2}
-                py={1}
-                borderRadius="full"
-                fontSize="xs"
-                alignItems="center"
-                gap={2}
-                mb={6}
-              >
-                <Grid
-                  borderRadius="full"
-                  bg="body.base"
-                  w={5}
-                  h={5}
-                  placeItems="center"
-                >
-                  <Icon
-                    as={EthGlyphIcon}
-                    color="background.base"
-                    fontSize="sm"
-                  />
-                </Grid>
-                <Text mb={0} me={0.5}>
-                  {displayUrl}
-                </Text>
-              </Flex>
+              <HStack className="mb-6 rounded-full bg-black/5 px-2 py-1 text-xs">
+                <div className="grid size-5 place-items-center rounded-full bg-body">
+                  {/* TODO: Remove important flags and `size` class when icon is migrated */}
+                  <EthGlyphIcon className="!size-[1em] !text-sm !text-background" />
+                </div>
+                <p className="me-0.5">{displayUrl}</p>
+              </HStack>
               {/* Information */}
-              <Text>{children}</Text>
+              <p>{children}</p>
             </>
           )}
-        </Flex>
+        </VStack>
       </motion.div>
     </>
   )

src/components/Simulator/screens/ConnectWeb3/__stories__/Slider.stories.tsx

@@ -9,7 +9,7 @@ const meta = {
   component: SliderComponent,
   decorators: [
     (Story) => (
-      <div className="relative h-[500px] w-[322px]">
+      <div className="relative h-[500px] w-[322px] overflow-hidden">
         <Story />
       </div>
     ),