Spacing fixes on OnboardingGeneral component

Author: MananTank

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

@@ -1,5 +1,4 @@
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
-import { Flex, FocusLock } from "@chakra-ui/react";
 import { AccountForm } from "components/settings/Account/AccountForm";
 import { useState } from "react";
 import { useActiveWallet, useDisconnect } from "thirdweb/react";
@@ -33,7 +32,7 @@ const OnboardingGeneral: React.FC<OnboardingGeneralProps> = ({
   }
 
   return (
-    <FocusLock>
+    <div>
       <TitleAndDescription
         heading={
           !existing
@@ -43,7 +42,9 @@ const OnboardingGeneral: React.FC<OnboardingGeneralProps> = ({
         description="Start building web3 apps and games, faster."
       />
 
-      <Flex flexDir="column" gap={4}>
+      <div className="h-6" />
+
+      <div className="flex flex-col gap-4">
         <AccountForm
           showSubscription={!existing}
           hideName={existing}
@@ -95,8 +96,8 @@ const OnboardingGeneral: React.FC<OnboardingGeneralProps> = ({
             </Button>
           )}
         </div>
-      </Flex>
-    </FocusLock>
+      </div>
+    </div>
   );
 };
 

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

@@ -1,6 +1,7 @@
+import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/utils";
 import { type Account, useUpdateAccount } from "@3rdweb-sdk/react/hooks/useApi";
-import { Flex, FormControl, Input } from "@chakra-ui/react";
+import { Flex, FormControl } from "@chakra-ui/react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ManageBillingButton } from "components/settings/Account/Billing/ManageButton";
 import { useTrack } from "hooks/analytics/useTrack";
@@ -132,15 +133,13 @@ export const AccountForm: React.FC<AccountFormProps> = ({
     <form onSubmit={handleSubmit}>
       <div
         className={cn(
-          "w-full items-start rounded-xl bg-background",
+          "flex w-full flex-col items-start rounded-xl bg-background",
           horizontal ? "gap-6" : "gap-8",
           padded ? "border border-border p-6" : "p-0",
         )}
       >
-        <Flex
-          gap={horizontal ? 4 : 8}
-          flexDir={horizontal ? "row" : "column"}
-          w="full"
+        <div
+          className={cn("flex w-full", horizontal ? "gap-4" : "flex-col gap-6")}
         >
           <FormControl
             isRequired
@@ -217,7 +216,7 @@ export const AccountForm: React.FC<AccountFormProps> = ({
               <Text>Subscribe to new features and key product updates</Text>
             </Checkbox>
           )}
-        </Flex>
+        </div>
 
         <div
           className={cn(