Skip to content

Commit eb8638e

Browse files
committed
Spacing fixes on OnboardingGeneral component (#4891)
## Problem solved Short description of the bug fixed or feature added <!-- start pr-codex --> --- ## PR-Codex overview This PR focuses on refactoring the layout of the `OnboardingGeneral` and `AccountForm` components by replacing `FocusLock` and `Flex` components with `div` elements, enhancing the structure and styling of the components. ### Detailed summary - Replaced `<FocusLock>` with `<div>` in `OnboardingGeneral`. - Changed `<Flex>` to `<div className="flex flex-col gap-4">` in `OnboardingGeneral`. - Updated `<Flex>` to `<div className={cn("flex w-full", ...)}> ` in `AccountForm`. - Modified closing tags from `</Flex>` to `</div>` in both components. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
1 parent a6f85ac commit eb8638e

File tree

2 files changed

+12
-12
lines changed

2 files changed

+12
-12
lines changed

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
2-
import { Flex, FocusLock } from "@chakra-ui/react";
32
import { AccountForm } from "components/settings/Account/AccountForm";
43
import { useState } from "react";
54
import { useActiveWallet, useDisconnect } from "thirdweb/react";
@@ -33,7 +32,7 @@ const OnboardingGeneral: React.FC<OnboardingGeneralProps> = ({
3332
}
3433

3534
return (
36-
<FocusLock>
35+
<div>
3736
<TitleAndDescription
3837
heading={
3938
!existing
@@ -43,7 +42,9 @@ const OnboardingGeneral: React.FC<OnboardingGeneralProps> = ({
4342
description="Start building web3 apps and games, faster."
4443
/>
4544

46-
<Flex flexDir="column" gap={4}>
45+
<div className="h-6" />
46+
47+
<div className="flex flex-col gap-4">
4748
<AccountForm
4849
showSubscription={!existing}
4950
hideName={existing}
@@ -95,8 +96,8 @@ const OnboardingGeneral: React.FC<OnboardingGeneralProps> = ({
9596
</Button>
9697
)}
9798
</div>
98-
</Flex>
99-
</FocusLock>
99+
</div>
100+
</div>
100101
);
101102
};
102103

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

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
import { Input } from "@/components/ui/input";
12
import { cn } from "@/lib/utils";
23
import { type Account, useUpdateAccount } from "@3rdweb-sdk/react/hooks/useApi";
3-
import { Flex, FormControl, Input } from "@chakra-ui/react";
4+
import { Flex, FormControl } from "@chakra-ui/react";
45
import { zodResolver } from "@hookform/resolvers/zod";
56
import { ManageBillingButton } from "components/settings/Account/Billing/ManageButton";
67
import { useTrack } from "hooks/analytics/useTrack";
@@ -132,15 +133,13 @@ export const AccountForm: React.FC<AccountFormProps> = ({
132133
<form onSubmit={handleSubmit}>
133134
<div
134135
className={cn(
135-
"w-full items-start rounded-xl bg-background",
136+
"flex w-full flex-col items-start rounded-xl bg-background",
136137
horizontal ? "gap-6" : "gap-8",
137138
padded ? "border border-border p-6" : "p-0",
138139
)}
139140
>
140-
<Flex
141-
gap={horizontal ? 4 : 8}
142-
flexDir={horizontal ? "row" : "column"}
143-
w="full"
141+
<div
142+
className={cn("flex w-full", horizontal ? "gap-4" : "flex-col gap-6")}
144143
>
145144
<FormControl
146145
isRequired
@@ -217,7 +216,7 @@ export const AccountForm: React.FC<AccountFormProps> = ({
217216
<Text>Subscribe to new features and key product updates</Text>
218217
</Checkbox>
219218
)}
220-
</Flex>
219+
</div>
221220

222221
<div
223222
className={cn(

0 commit comments

Comments
 (0)