Skip to content

Commit 3d52dd4

Browse files
kien-ngokien-ngo
committed
[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 -->
1 parent 24ff6f2 commit 3d52dd4

File tree

18 files changed

+64
-100
lines changed

18 files changed

+64
-100
lines changed

‎apps/dashboard/.eslintrc.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ module.exports = {
5555
"FormErrorMessage",
5656
"MenuGroup",
5757
"MenuItem",
58+
"VStack",
5859
// also the types
5960
"ButtonProps",
6061
"BadgeProps",

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ import {
2323
Select,
2424
Stack,
2525
type UseDisclosureReturn,
26-
VStack,
2726
useDisclosure,
2827
} from "@chakra-ui/react";
2928
import { useQuery } from "@tanstack/react-query";
@@ -341,7 +340,7 @@ const ReceiveFundsModal = ({
341340
<ModalHeader>Receive Funds</ModalHeader>
342341
<ModalCloseButton />
343342
<ModalBody>
344-
<VStack spacing={4} pb={8}>
343+
<div className="flex flex-col gap-4 pb-8">
345344
<Text w="full" textAlign="left">
346345
Fund this address or QR code:
347346
</Text>
@@ -355,7 +354,7 @@ const ReceiveFundsModal = ({
355354
rounded="lg"
356355
w={200}
357356
/>
358-
</VStack>
357+
</div>
359358
</ModalBody>
360359
</ModalContent>
361360
</Modal>

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

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Flex, Icon, VStack } from "@chakra-ui/react";
1+
import { Flex, Icon } from "@chakra-ui/react";
22
import { ImMagicWand } from "@react-icons/all-files/im/ImMagicWand";
33
import { ChakraNextImage } from "components/Image";
44
import { useTrack } from "hooks/analytics/useTrack";
@@ -15,17 +15,7 @@ export const HackathonEarnFooter = ({
1515
const trackEvent = useTrack();
1616

1717
return (
18-
<VStack
19-
bg='url("/assets/hackathon/footer-bg.png")'
20-
bgSize="cover"
21-
bgRepeat="no-repeat"
22-
bgPosition="center"
23-
w="100%"
24-
py={20}
25-
gap={10}
26-
borderTopRadius="50px"
27-
px={6}
28-
>
18+
<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">
2919
<ChakraNextImage
3020
src={require("../../../public/assets/landingpage/earnxtw.svg")}
3121
alt="Hackathon"
@@ -108,6 +98,6 @@ export const HackathonEarnFooter = ({
10898
Submission
10999
</LinkButton>
110100
</Flex>
111-
</VStack>
101+
</div>
112102
);
113103
};

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

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Flex, Icon, VStack } from "@chakra-ui/react";
1+
import { Flex, Icon } from "@chakra-ui/react";
22
import { ImMagicWand } from "@react-icons/all-files/im/ImMagicWand";
33
import { ChakraNextImage } from "components/Image";
44
import { useTrack } from "hooks/analytics/useTrack";
@@ -15,17 +15,7 @@ export const HackathonFooter = ({
1515
const trackEvent = useTrack();
1616

1717
return (
18-
<VStack
19-
bg='url("/assets/hackathon/footer-bg.png")'
20-
bgSize="cover"
21-
bgRepeat="no-repeat"
22-
bgPosition="center"
23-
w="100%"
24-
py={20}
25-
gap={10}
26-
borderTopRadius="50px"
27-
px={6}
28-
>
18+
<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">
2919
<ChakraNextImage
3020
src={require("../../../public/assets/landingpage/thirdwebw.svg")}
3121
alt="hackathon-partner"
@@ -104,6 +94,6 @@ export const HackathonFooter = ({
10494
Submission
10595
</LinkButton>
10696
</Flex>
107-
</VStack>
97+
</div>
10898
);
10999
};

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Flex, SimpleGrid, VStack } from "@chakra-ui/react";
1+
import { Flex, SimpleGrid } from "@chakra-ui/react";
22
import { Heading, Text, TrackedLink } from "tw-components";
33
import { MaskedAvatar } from "tw-components/masked-avatar";
44

@@ -35,7 +35,7 @@ export const Judges = ({ TRACKING_CATEGORY }: JudgesProps) => {
3535
];
3636

3737
return (
38-
<VStack spacing={8} position="relative">
38+
<div className="gap-8 relative flex flex-col">
3939
<Heading size="title.2xl">Judges</Heading>
4040
<SimpleGrid
4141
columns={{ base: 1, lg: 4 }}
@@ -71,6 +71,6 @@ export const Judges = ({ TRACKING_CATEGORY }: JudgesProps) => {
7171
</Flex>
7272
))}
7373
</SimpleGrid>
74-
</VStack>
74+
</div>
7575
);
7676
};

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Flex, SimpleGrid, VStack } from "@chakra-ui/react";
1+
import { Flex, SimpleGrid } from "@chakra-ui/react";
22
import { Heading, Text } from "tw-components";
33
import { MaskedAvatar } from "tw-components/masked-avatar";
44

@@ -27,7 +27,7 @@ export const JudgesEarn = () => {
2727
];
2828

2929
return (
30-
<VStack spacing={8} position="relative">
30+
<div className="flex flex-col gap-8 relative">
3131
<Heading size="title.2xl">Judges</Heading>
3232
<SimpleGrid
3333
columns={{ base: 1, lg: 4 }}
@@ -52,6 +52,6 @@ export const JudgesEarn = () => {
5252
</Flex>
5353
))}
5454
</SimpleGrid>
55-
</VStack>
55+
</div>
5656
);
5757
};

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Avatar, Flex, VStack } from "@chakra-ui/react";
1+
import { Avatar, Flex } from "@chakra-ui/react";
22
import { Heading, Text, TrackedLink } from "tw-components";
33

44
interface AvatarShowcaseProps {
@@ -18,7 +18,7 @@ export const AvatarShowcase: React.FC<AvatarShowcaseProps> = ({
1818
trackingCategory,
1919
}) => {
2020
return (
21-
<VStack spacing={12}>
21+
<div className="flex flex-col gap-12">
2222
<Heading size="title.2xl">{title}</Heading>
2323
<Flex
2424
maxW="container.md"
@@ -68,6 +68,6 @@ export const AvatarShowcase: React.FC<AvatarShowcaseProps> = ({
6868
</Flex>
6969
))}
7070
</Flex>
71-
</VStack>
71+
</div>
7272
);
7373
};

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
2-
import { Flex, FocusLock, VStack } from "@chakra-ui/react";
2+
import { Flex, FocusLock } from "@chakra-ui/react";
33
import { AccountForm } from "components/settings/Account/AccountForm";
44
import { useState } from "react";
55
import { useActiveWallet, useDisconnect } from "thirdweb/react";
@@ -60,7 +60,7 @@ const OnboardingGeneral: React.FC<OnboardingGeneralProps> = ({
6060
onDuplicateError={onDuplicate}
6161
/>
6262

63-
<VStack justifyContent="center" w="full" gap={2}>
63+
<div className="flex flex-col justify-center w-full gap-2">
6464
{!existing ? (
6565
<>
6666
<Button
@@ -94,7 +94,7 @@ const OnboardingGeneral: React.FC<OnboardingGeneralProps> = ({
9494
I don&apos;t have an account
9595
</Button>
9696
)}
97-
</VStack>
97+
</div>
9898
</Flex>
9999
</FocusLock>
100100
);

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { cn } from "@/lib/utils";
12
import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
23
import {
34
AccountStatus,
@@ -6,7 +7,7 @@ import {
67
useApiKeys,
78
} from "@3rdweb-sdk/react/hooks/useApi";
89
import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
9-
import { Flex, HStack, VStack, useBreakpointValue } from "@chakra-ui/react";
10+
import { Flex, HStack, useBreakpointValue } from "@chakra-ui/react";
1011
import { ChakraNextImage } from "components/Image";
1112
import { OPSponsoredChains } from "constants/chains";
1213
import { useTrack } from "hooks/analytics/useTrack";
@@ -273,11 +274,11 @@ export const OnboardingSteps: React.FC<OnboardingStepsProps> = ({
273274
overflow="hidden"
274275
className="bg-muted/50"
275276
>
276-
<VStack
277-
gap={2}
278-
alignItems="flex-start"
279-
p={6}
280-
w={rightImageDark && !isMobile ? "60%" : "100%"}
277+
<div
278+
className={cn(
279+
"gap-2 flex flex-col items-start p-6",
280+
rightImageDark && !isMobile ? "w-[60%]" : "w-full",
281+
)}
281282
>
282283
<Heading size="title.sm">{title}</Heading>
283284
<Text>{description}</Text>
@@ -308,7 +309,7 @@ export const OnboardingSteps: React.FC<OnboardingStepsProps> = ({
308309
</Button>
309310
)}
310311
</HStack>
311-
</VStack>
312+
</div>
312313
{rightImageDark && !isMobile && theme === "dark" && (
313314
<ChakraNextImage src={rightImageDark} alt={""} w="50%" priority />
314315
)}

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { VStack } from "@chakra-ui/react";
21
import { Heading, Text } from "tw-components";
32

43
interface OnboardingTitleProps {
@@ -11,14 +10,14 @@ export const OnboardingTitle: React.FC<OnboardingTitleProps> = ({
1110
description,
1211
}) => {
1312
return (
14-
<VStack alignItems="flex-start" gap={3}>
13+
<div className="flex flex-col gap-3 items-start">
1514
<Heading size="title.sm">{heading}</Heading>
1615

1716
{description && (
1817
<Text size="body.md" fontWeight="medium">
1918
{description}
2019
</Text>
2120
)}
22-
</VStack>
21+
</div>
2322
);
2423
};

0 commit comments

Comments
 (0)