[Dashboard] Remove HStack (#4749)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces changes to replace `HStack` with `div` using flex classes in various components for better styling consistency.

### Detailed summary
- Replaced `HStack` with `div` using flex classes in multiple components for styling consistency.

> The following files were skipped due to too many changes: `apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx`

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

<!-- end pr-codex -->

Author: kien-ngo

apps/dashboard/.eslintrc.js

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

apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/UsagePage.tsx

@@ -2,7 +2,6 @@
 
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { useAccount, useAccountUsage } from "@3rdweb-sdk/react/hooks/useApi";
-import { HStack } from "@chakra-ui/react";
 import { BillingPeriod } from "components/settings/Account/Billing/Period";
 import { BillingPlan } from "components/settings/Account/Billing/Plan";
 import { Usage } from "components/settings/Account/Usage";
@@ -24,14 +23,10 @@ export const SettingsUsagePage = () => {
     <div className="flex flex-col gap-8">
       <div className="flex flex-col">
         <h1 className="font-semibold text-3xl tracking-tight mb-2">Usage</h1>
-        <HStack
-          justifyContent="space-between"
-          flexDir={{ base: "column", lg: "row" }}
-          alignItems={{ base: "flex-start", lg: "center" }}
-        >
+        <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center">
           <BillingPlan account={account} />
           <BillingPeriod account={account} usage={usageQuery.data} />
-        </HStack>
+        </div>
       </div>
 
       <Usage usage={usageQuery.data} usagePending={usageQuery.isPending} />

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

@@ -7,7 +7,7 @@ import {
   useApiKeys,
 } from "@3rdweb-sdk/react/hooks/useApi";
 import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
-import { Flex, HStack, useBreakpointValue } from "@chakra-ui/react";
+import { Flex, useBreakpointValue } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { OPSponsoredChains } from "constants/chains";
 import { useTrack } from "hooks/analytics/useTrack";
@@ -282,7 +282,7 @@ export const OnboardingSteps: React.FC<OnboardingStepsProps> = ({
       >
         <Heading size="title.sm">{title}</Heading>
         <Text>{description}</Text>
-        <HStack mt={4} alignItems="center">
+        <div className="flex flex-row mt-4 items-center">
           {isLoggedIn ? (
             <Button
               size="sm"
@@ -308,7 +308,7 @@ export const OnboardingSteps: React.FC<OnboardingStepsProps> = ({
               Skip
             </Button>
           )}
-        </HStack>
+        </div>
       </div>
       {rightImageDark && !isMobile && theme === "dark" && (
         <ChakraNextImage src={rightImageDark} alt={""} w="50%" priority />

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

@@ -1,6 +1,6 @@
 import { cn } from "@/lib/utils";
 import { type Account, useUpdateAccount } from "@3rdweb-sdk/react/hooks/useApi";
-import { Flex, FormControl, HStack, Input } from "@chakra-ui/react";
+import { Flex, FormControl, 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";
@@ -219,9 +219,11 @@ export const AccountForm: React.FC<AccountFormProps> = ({
           )}
         </Flex>
 
-        <HStack
-          justifyContent={showBillingButton ? "space-between" : "flex-end"}
-          w="full"
+        <div
+          className={cn(
+            "flex flex-row w-full",
+            showBillingButton ? "justify-between" : "justify-end",
+          )}
         >
           {showBillingButton && <ManageBillingButton account={account} />}
 
@@ -240,7 +242,7 @@ export const AccountForm: React.FC<AccountFormProps> = ({
               {buttonText}
             </Button>
           )}
-        </HStack>
+        </div>
       </div>
     </form>
   );

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

@@ -6,7 +6,6 @@ import {
   AlertDialogHeader,
   AlertDialogOverlay,
   Flex,
-  HStack,
   Icon,
   Menu,
   MenuButton,
@@ -65,10 +64,13 @@ export const BillingDowngradeDialog: React.FC<BillingDowngradeDialogProps> = ({
                 </Text>
                 <Flex flexDir="column" gap={2}>
                   {oldPlanFeatures.map((feat) => (
-                    <HStack key={Array.isArray(feat) ? feat[0] : feat}>
+                    <div
+                      className="flex flex-row"
+                      key={Array.isArray(feat) ? feat[0] : feat}
+                    >
                       <Icon as={FiX} boxSize={4} color="red.500" />
                       <Text>{Array.isArray(feat) ? feat[0] : feat}</Text>
-                    </HStack>
+                    </div>
                   ))}
                 </Flex>
               </Flex>
@@ -123,7 +125,7 @@ export const BillingDowngradeDialog: React.FC<BillingDowngradeDialogProps> = ({
           </AlertDialogBody>
 
           <AlertDialogFooter>
-            <HStack alignItems="center" gap={3}>
+            <div className="flex flex-row items-center gap-3">
               <Button
                 onClick={() =>
                   onConfirm(feedback === "other" ? otherFeedback : feedback)
@@ -140,7 +142,7 @@ export const BillingDowngradeDialog: React.FC<BillingDowngradeDialogProps> = ({
               <Button ref={cancelRef} onClick={onClose} size="sm">
                 Keep {oldPlan} plan
               </Button>
-            </HStack>
+            </div>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialogOverlay>

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

@@ -1,4 +1,4 @@
-import { Flex, HStack, Icon } from "@chakra-ui/react";
+import { Flex, Icon } from "@chakra-ui/react";
 import { FiAlertCircle, FiCheckCircle, FiInfo } from "react-icons/fi";
 import { Badge, Heading, Text } from "tw-components";
 
@@ -17,7 +17,7 @@ export const BillingHeader: React.FC<BillingHeaderProps> = ({
         Billing Info
       </Heading>
 
-      <HStack>
+      <div className="flex flex-row">
         <Text size="body.md">
           Manage your payment methods, billing information and invoices.
         </Text>
@@ -29,7 +29,7 @@ export const BillingHeader: React.FC<BillingHeaderProps> = ({
           py={1.5}
           textTransform="capitalize"
         >
-          <HStack as="span">
+          <span className="flex flex-row">
             <Icon
               as={
                 validPayment
@@ -53,9 +53,9 @@ export const BillingHeader: React.FC<BillingHeaderProps> = ({
                   ? "Needs verification"
                   : "Invalid payment"}
             </Text>
-          </HStack>
+          </span>
         </Badge>
-      </HStack>
+      </div>
     </Flex>
   );
 };

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

@@ -1,5 +1,5 @@
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
-import { Flex, HStack } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 import { Badge, Text, TrackedLink } from "tw-components";
 import { PLANS } from "utils/pricing";
 
@@ -20,7 +20,7 @@ export const BillingPlan: React.FC<BillingPlanProps> = ({
 }) => {
   return (
     <Flex direction={direction} gap={3}>
-      <HStack>
+      <div className="flex flex-row">
         <Text color={titleColor} size={titleSize}>
           Your current plan is
         </Text>
@@ -33,9 +33,9 @@ export const BillingPlan: React.FC<BillingPlanProps> = ({
         >
           {PLANS[account.plan as keyof typeof PLANS].title}
         </Badge>
-      </HStack>
+      </div>
 
-      <HStack>
+      <div className="flex flex-row">
         {description && <Text>{description}</Text>}
 
         <TrackedLink
@@ -48,7 +48,7 @@ export const BillingPlan: React.FC<BillingPlanProps> = ({
             Learn more
           </Text>
         </TrackedLink>
-      </HStack>
+      </div>
     </Flex>
   );
 };

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

@@ -1,5 +1,5 @@
 import { useAccount, useAccountCredits } from "@3rdweb-sdk/react/hooks/useApi";
-import { Flex, HStack } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 import { Badge, Card, Heading, Text } from "tw-components";
 import { PLANS } from "utils/pricing";
 import { CreditsItem } from "./CreditsItem";
@@ -17,7 +17,7 @@ export const BillingPlanCard = () => {
 
   return (
     <Card as={Flex} flexDir="column" gap={2}>
-      <HStack>
+      <div className="flex flex-row">
         <Heading size="title.xs">Your current plan is</Heading>
         <Badge
           borderRadius="md"
@@ -28,7 +28,7 @@ export const BillingPlanCard = () => {
         >
           {PLANS[account.plan as keyof typeof PLANS].title}
         </Badge>
-      </HStack>
+      </div>
 
       <Flex flexDir="column" gap={4}>
         <Text size="body.md" />

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

@@ -6,7 +6,7 @@ import {
   AccountStatus,
   useUpdateAccountPlan,
 } from "@3rdweb-sdk/react/hooks/useApi";
-import { Flex, HStack, Icon, useDisclosure } from "@chakra-ui/react";
+import { Flex, Icon, useDisclosure } from "@chakra-ui/react";
 import { StepsCard } from "components/dashboard/StepsCard";
 import { OnboardingModal } from "components/onboarding/Modal";
 import { AccountForm } from "components/settings/Account/AccountForm";
@@ -141,7 +141,7 @@ export const Billing: React.FC<BillingProps> = ({ account }) => {
     return [
       {
         title: (
-          <HStack justifyContent="space-between">
+          <div className="flex flex-row justify-between">
             <Heading
               size="label.md"
               opacity={!stepsCompleted.account ? 1 : 0.6}
@@ -161,7 +161,7 @@ export const Billing: React.FC<BillingProps> = ({ account }) => {
                 Edit
               </Button>
             )}
-          </HStack>
+          </div>
         ),
         description:
           "This information will be used for billing notifications and invoices.",
@@ -288,10 +288,10 @@ export const Billing: React.FC<BillingProps> = ({ account }) => {
         color="blue.500"
         isExternal
       >
-        <HStack alignItems="center" gap={2}>
+        <div className="flex flex-row items-center gap-2">
           <Text color="blue.500">Learn more about thirdweb&apos;s pricing</Text>
           <Icon as={FiExternalLink} />
-        </HStack>
+        </div>
       </TrackedLink>
 
       {downgradePlan && (