[Dashboard] Remove VStack (#4748)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to replace the `VStack` components with `div` elements styled using Tailwind CSS classes for layout consistency and improved accessibility.

### Detailed summary
- Replaced `VStack` with `div` in multiple components for layout consistency
- Used Tailwind CSS classes for styling and spacing
- Improved accessibility and readability of the codebase

> The following files were skipped due to too many changes: `apps/dashboard/src/components/settings/Account/AccountForm.tsx`, `apps/dashboard/src/components/settings/Account/Usage.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

apps/dashboard/.eslintrc.js

@@ -55,6 +55,7 @@ module.exports = {
               "FormErrorMessage",
               "MenuGroup",
               "MenuItem",
+              "VStack",
               // also the types
               "ButtonProps",
               "BadgeProps",

apps/dashboard/src/components/engine/overview/backend-wallets-table.tsx

@@ -23,7 +23,6 @@ import {
   Select,
   Stack,
   type UseDisclosureReturn,
-  VStack,
   useDisclosure,
 } from "@chakra-ui/react";
 import { useQuery } from "@tanstack/react-query";
@@ -341,7 +340,7 @@ const ReceiveFundsModal = ({
         <ModalHeader>Receive Funds</ModalHeader>
         <ModalCloseButton />
         <ModalBody>
-          <VStack spacing={4} pb={8}>
+          <div className="flex flex-col gap-4 pb-8">
             <Text w="full" textAlign="left">
               Fund this address or QR code:
             </Text>
@@ -355,7 +354,7 @@ const ReceiveFundsModal = ({
               rounded="lg"
               w={200}
             />
-          </VStack>
+          </div>
         </ModalBody>
       </ModalContent>
     </Modal>

apps/dashboard/src/components/hackathon/HacakthonEarnFooter.tsx

@@ -1,4 +1,4 @@
-import { Flex, Icon, VStack } from "@chakra-ui/react";
+import { Flex, Icon } from "@chakra-ui/react";
 import { ImMagicWand } from "@react-icons/all-files/im/ImMagicWand";
 import { ChakraNextImage } from "components/Image";
 import { useTrack } from "hooks/analytics/useTrack";
@@ -15,17 +15,7 @@ export const HackathonEarnFooter = ({
   const trackEvent = useTrack();
 
   return (
-    <VStack
-      bg='url("/assets/hackathon/footer-bg.png")'
-      bgSize="cover"
-      bgRepeat="no-repeat"
-      bgPosition="center"
-      w="100%"
-      py={20}
-      gap={10}
-      borderTopRadius="50px"
-      px={6}
-    >
+    <div className="flex flex-col items-center bg-[url('/assets/hackathon/footer-bg.png')] bg-cover bg-no-repeat bg-center w-full py-20 gap-10 rounded-t-[50px] px-6">
       <ChakraNextImage
         src={require("../../../public/assets/landingpage/earnxtw.svg")}
         alt="Hackathon"
@@ -108,6 +98,6 @@ export const HackathonEarnFooter = ({
           Submission
         </LinkButton>
       </Flex>
-    </VStack>
+    </div>
   );
 };

apps/dashboard/src/components/hackathon/HackathonFooter.tsx

@@ -1,4 +1,4 @@
-import { Flex, Icon, VStack } from "@chakra-ui/react";
+import { Flex, Icon } from "@chakra-ui/react";
 import { ImMagicWand } from "@react-icons/all-files/im/ImMagicWand";
 import { ChakraNextImage } from "components/Image";
 import { useTrack } from "hooks/analytics/useTrack";
@@ -15,17 +15,7 @@ export const HackathonFooter = ({
   const trackEvent = useTrack();
 
   return (
-    <VStack
-      bg='url("/assets/hackathon/footer-bg.png")'
-      bgSize="cover"
-      bgRepeat="no-repeat"
-      bgPosition="center"
-      w="100%"
-      py={20}
-      gap={10}
-      borderTopRadius="50px"
-      px={6}
-    >
+    <div className="flex flex-col items-center bg-[url('/assets/hackathon/footer-bg.png')] bg-cover bg-no-repeat bg-center w-full py-20 gap-10 rounded-t-[50px] px-6">
       <ChakraNextImage
         src={require("../../../public/assets/landingpage/thirdwebw.svg")}
         alt="hackathon-partner"
@@ -104,6 +94,6 @@ export const HackathonFooter = ({
           Submission
         </LinkButton>
       </Flex>
-    </VStack>
+    </div>
   );
 };

apps/dashboard/src/components/hackathon/Judges.tsx

@@ -1,4 +1,4 @@
-import { Flex, SimpleGrid, VStack } from "@chakra-ui/react";
+import { Flex, SimpleGrid } from "@chakra-ui/react";
 import { Heading, Text, TrackedLink } from "tw-components";
 import { MaskedAvatar } from "tw-components/masked-avatar";
 
@@ -35,7 +35,7 @@ export const Judges = ({ TRACKING_CATEGORY }: JudgesProps) => {
   ];
 
   return (
-    <VStack spacing={8} position="relative">
+    <div className="gap-8 relative flex flex-col">
       <Heading size="title.2xl">Judges</Heading>
       <SimpleGrid
         columns={{ base: 1, lg: 4 }}
@@ -71,6 +71,6 @@ export const Judges = ({ TRACKING_CATEGORY }: JudgesProps) => {
           </Flex>
         ))}
       </SimpleGrid>
-    </VStack>
+    </div>
   );
 };

apps/dashboard/src/components/hackathon/JudgesEarn.tsx

@@ -1,4 +1,4 @@
-import { Flex, SimpleGrid, VStack } from "@chakra-ui/react";
+import { Flex, SimpleGrid } from "@chakra-ui/react";
 import { Heading, Text } from "tw-components";
 import { MaskedAvatar } from "tw-components/masked-avatar";
 
@@ -27,7 +27,7 @@ export const JudgesEarn = () => {
   ];
 
   return (
-    <VStack spacing={8} position="relative">
+    <div className="flex flex-col gap-8 relative">
       <Heading size="title.2xl">Judges</Heading>
       <SimpleGrid
         columns={{ base: 1, lg: 4 }}
@@ -52,6 +52,6 @@ export const JudgesEarn = () => {
           </Flex>
         ))}
       </SimpleGrid>
-    </VStack>
+    </div>
   );
 };

apps/dashboard/src/components/hackathon/common/AvatarShowcase.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Flex, VStack } from "@chakra-ui/react";
+import { Avatar, Flex } from "@chakra-ui/react";
 import { Heading, Text, TrackedLink } from "tw-components";
 
 interface AvatarShowcaseProps {
@@ -18,7 +18,7 @@ export const AvatarShowcase: React.FC<AvatarShowcaseProps> = ({
   trackingCategory,
 }) => {
   return (
-    <VStack spacing={12}>
+    <div className="flex flex-col gap-12">
       <Heading size="title.2xl">{title}</Heading>
       <Flex
         maxW="container.md"
@@ -68,6 +68,6 @@ export const AvatarShowcase: React.FC<AvatarShowcaseProps> = ({
           </Flex>
         ))}
       </Flex>
-    </VStack>
+    </div>
   );
 };

apps/dashboard/src/components/onboarding/General.tsx

@@ -1,5 +1,5 @@
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
-import { Flex, FocusLock, VStack } from "@chakra-ui/react";
+import { Flex, FocusLock } from "@chakra-ui/react";
 import { AccountForm } from "components/settings/Account/AccountForm";
 import { useState } from "react";
 import { useActiveWallet, useDisconnect } from "thirdweb/react";
@@ -60,7 +60,7 @@ const OnboardingGeneral: React.FC<OnboardingGeneralProps> = ({
           onDuplicateError={onDuplicate}
         />
 
-        <VStack justifyContent="center" w="full" gap={2}>
+        <div className="flex flex-col justify-center w-full gap-2">
           {!existing ? (
             <>
               <Button
@@ -94,7 +94,7 @@ const OnboardingGeneral: React.FC<OnboardingGeneralProps> = ({
               I don&apos;t have an account
             </Button>
           )}
-        </VStack>
+        </div>
       </Flex>
     </FocusLock>
   );

apps/dashboard/src/components/onboarding/Steps.tsx

@@ -1,3 +1,4 @@
+import { cn } from "@/lib/utils";
 import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
 import {
   AccountStatus,
@@ -6,7 +7,7 @@ import {
   useApiKeys,
 } from "@3rdweb-sdk/react/hooks/useApi";
 import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
-import { Flex, HStack, VStack, useBreakpointValue } from "@chakra-ui/react";
+import { Flex, HStack, useBreakpointValue } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { OPSponsoredChains } from "constants/chains";
 import { useTrack } from "hooks/analytics/useTrack";
@@ -273,11 +274,11 @@ export const OnboardingSteps: React.FC<OnboardingStepsProps> = ({
       overflow="hidden"
       className="bg-muted/50"
     >
-      <VStack
-        gap={2}
-        alignItems="flex-start"
-        p={6}
-        w={rightImageDark && !isMobile ? "60%" : "100%"}
+      <div
+        className={cn(
+          "gap-2 flex flex-col items-start p-6",
+          rightImageDark && !isMobile ? "w-[60%]" : "w-full",
+        )}
       >
         <Heading size="title.sm">{title}</Heading>
         <Text>{description}</Text>
@@ -308,7 +309,7 @@ export const OnboardingSteps: React.FC<OnboardingStepsProps> = ({
             </Button>
           )}
         </HStack>
-      </VStack>
+      </div>
       {rightImageDark && !isMobile && theme === "dark" && (
         <ChakraNextImage src={rightImageDark} alt={""} w="50%" priority />
       )}

apps/dashboard/src/components/onboarding/Title.tsx

@@ -1,4 +1,3 @@
-import { VStack } from "@chakra-ui/react";
 import { Heading, Text } from "tw-components";
 
 interface OnboardingTitleProps {
@@ -11,14 +10,14 @@ export const OnboardingTitle: React.FC<OnboardingTitleProps> = ({
   description,
 }) => {
   return (
-    <VStack alignItems="flex-start" gap={3}>
+    <div className="flex flex-col gap-3 items-start">
       <Heading size="title.sm">{heading}</Heading>
 
       {description && (
         <Text size="body.md" fontWeight="medium">
           {description}
         </Text>
       )}
-    </VStack>
+    </div>
   );
 };

apps/dashboard/src/components/settings/Account/AccountForm.tsx

@@ -1,12 +1,6 @@
+import { cn } from "@/lib/utils";
 import { type Account, useUpdateAccount } from "@3rdweb-sdk/react/hooks/useApi";
-import {
-  Flex,
-  FormControl,
-  HStack,
-  Input,
-  VStack,
-  useColorModeValue,
-} from "@chakra-ui/react";
+import { Flex, FormControl, HStack, Input } from "@chakra-ui/react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ManageBillingButton } from "components/settings/Account/Billing/ManageButton";
 import { useTrack } from "hooks/analytics/useTrack";
@@ -61,8 +55,6 @@ export const AccountForm: React.FC<AccountFormProps> = ({
     showSubscription && !!account.email?.length,
   );
   const trackEvent = useTrack();
-  const bg = useColorModeValue("backgroundCardHighlight", "transparent");
-
   const form = useForm<AccountValidationSchema>({
     resolver: zodResolver(accountValidationSchema),
     defaultValues: {
@@ -138,15 +130,12 @@ export const AccountForm: React.FC<AccountFormProps> = ({
 
   return (
     <form onSubmit={handleSubmit}>
-      <VStack
-        alignItems="flex-start"
-        w="full"
-        gap={horizontal ? 6 : 8}
-        borderRadius="xl"
-        borderColor="borderColor"
-        borderWidth={padded ? 1 : 0}
-        bg={bg}
-        p={padded ? 6 : 0}
+      <div
+        className={cn(
+          "items-start w-full rounded-xl bg-background",
+          horizontal ? "gap-6" : "gap-8",
+          padded ? "border border-border p-6" : "p-0",
+        )}
       >
         <Flex
           gap={horizontal ? 4 : 8}
@@ -252,7 +241,7 @@ export const AccountForm: React.FC<AccountFormProps> = ({
             </Button>
           )}
         </HStack>
-      </VStack>
+      </div>
     </form>
   );
 };

apps/dashboard/src/components/settings/Account/Billing/Period.tsx

@@ -2,7 +2,6 @@ import type {
   Account,
   UsageBillableByService,
 } from "@3rdweb-sdk/react/hooks/useApi";
-import { VStack } from "@chakra-ui/react";
 import { format } from "date-fns/format";
 import { useMemo } from "react";
 import { Text } from "tw-components";
@@ -38,7 +37,7 @@ export const BillingPeriod: React.FC<BillingPeriodProps> = ({
   }
 
   return (
-    <VStack alignItems={{ base: "flex-start", lg: "flex-end" }} gap={1}>
+    <div className="items-start lg:items-end flex flex-col gap-1">
       <Text size="body.md" as="span">
         Current billing period:
         <Text as="span" color="bgBlack" pl={2} fontWeight="medium">
@@ -60,6 +59,6 @@ export const BillingPeriod: React.FC<BillingPeriodProps> = ({
           {totalUsd}
         </Text>
       </Text>
-    </VStack>
+    </div>
   );
 };

apps/dashboard/src/components/settings/Account/Usage.tsx

@@ -1,5 +1,5 @@
 import type { UsageBillableByService } from "@3rdweb-sdk/react/hooks/useApi";
-import { SimpleGrid, Spinner, VStack } from "@chakra-ui/react";
+import { SimpleGrid, Spinner } from "@chakra-ui/react";
 import { useMemo } from "react";
 import { Heading, Text } from "tw-components";
 import { toNumber, toPercent, toSize } from "utils/number";
@@ -111,11 +111,11 @@ export const Usage: React.FC<UsageProps> = ({
   }, [usageData]);
 
   return (
-    <VStack gap={8} w="full">
+    <div className="flex flex-col gap-8 w-full">
       {usagePending && <Spinner size="sm" />}
       {!usagePending && (
-        <VStack w="full" gap={12}>
-          <VStack alignItems="flex-start" gap={6} w="full">
+        <div className="flex flex-col gap-12 w-full">
+          <div className="flex flex-col gap-6 w-full items-start">
             <Heading as="h4" size="title.sm">
               Infrastructure
             </Heading>
@@ -141,9 +141,9 @@ export const Usage: React.FC<UsageProps> = ({
                 tooltip="Storage pinning usage is calculated by GB per file size."
               />
             </SimpleGrid>
-          </VStack>
+          </div>
 
-          <VStack alignItems="flex-start" gap={6} w="full">
+          <div className="w-full gap-8 flex flex-col">
             <Heading as="h4" size="title.sm">
               Wallets
             </Heading>
@@ -159,9 +159,9 @@ export const Usage: React.FC<UsageProps> = ({
                 tooltip="Email wallet (with managed recovery code) usage is calculated by monthly active wallets (i.e. active as defined by at least 1 user log-in via email or social within the billing period month)."
               />
             </SimpleGrid>
-          </VStack>
+          </div>
 
-          <VStack alignItems="flex-start" gap={6} w="full">
+          <div className="w-full gap-8 flex flex-col">
             <Heading as="h4" size="title.sm">
               Payments
             </Heading>
@@ -177,9 +177,9 @@ export const Usage: React.FC<UsageProps> = ({
                 tooltip="(Gasless, Paymaster, Bundler) usage is calculated by sponsored network fees."
               />
             </SimpleGrid>
-          </VStack>
-        </VStack>
+          </div>
+        </div>
       )}
-    </VStack>
+    </div>
   );
 };