Skip to content

Commit 46acf33

Browse files
kien-ngokien-ngo
committed
[Dashboard] Remove more Flex (#4784)
## Problem solved Short description of the bug fixed or feature added <!-- start pr-codex --> --- ## PR-Codex overview This PR focuses on replacing instances of the `Flex` component with `div` elements styled with Tailwind CSS classes. This change aims to standardize layout styling across various components in the application. ### Detailed summary - Replaced `Flex` with `div` and added Tailwind CSS classes for layout. - Updated components in files like `GraphicContainer.tsx`, `contract-functions.tsx`, `engine-overview.tsx`, and others. - Maintained existing functionality while improving styling consistency. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
1 parent 10a84d2 commit 46acf33

File tree

19 files changed

+64
-71
lines changed

19 files changed

+64
-71
lines changed

‎apps/dashboard/src/components/FTUX/components/GraphicContainer.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export const GraphicContainer: React.FC<SlideStateProps> = ({
2222

2323
return (
2424
<div className="relative aspect-[16/9] w-full md:aspect-square">
25+
{/* @to be completed */}
2526
<Center
2627
as={motion.div}
2728
initial={`slide-${slideIndex}`}

‎apps/dashboard/src/components/buttons/MismatchButton.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import { useDashboardEVMChainId } from "@3rdweb-sdk/react";
1616
import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
1717
import {
1818
Box,
19-
Flex,
2019
Icon,
2120
Popover,
2221
PopoverArrow,
@@ -446,12 +445,12 @@ const MismatchNotice: React.FC<{
446445
}, [chain?.name, isMobile]);
447446

448447
return (
449-
<Flex direction="column" gap={4}>
448+
<div className="flex flex-col gap-4">
450449
<Heading size="label.lg">
451-
<Flex gap={2} align="center">
450+
<div className="flex flex-row items-center gap-2">
452451
<Icon boxSize={6} as={AiOutlineWarning} />
453452
<span>Network Mismatch</span>
454-
</Flex>
453+
</div>
455454
</Heading>
456455

457456
<Text>
@@ -487,7 +486,7 @@ const MismatchNotice: React.FC<{
487486
Please manually switch the network in your wallet.
488487
</Text>
489488
)}
490-
</Flex>
489+
</div>
491490
);
492491
};
493492

‎apps/dashboard/src/components/buttons/TransactionButton.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -203,12 +203,12 @@ const ExternalApprovalNotice: React.FC<ExternalApprovalNoticeProps> = ({
203203
if (walletId === "global.safe") {
204204
const isChainIdSupported = chainId in CHAIN_ID_TO_GNOSIS;
205205
return (
206-
<Flex direction="column" gap={4}>
206+
<div className="flex flex-col gap-4">
207207
<Heading size="label.lg">
208-
<Flex gap={2} align="center">
208+
<div className="flex flex-row items-center gap-2">
209209
<Icon color="primary.500" boxSize={6} as={FiInfo} />
210210
<span>Execute Transaction</span>
211-
</Flex>
211+
</div>
212212
</Heading>
213213
<Text>
214214
You will need to execute this transaction in your Safe to continue.
@@ -233,17 +233,17 @@ const ExternalApprovalNotice: React.FC<ExternalApprovalNoticeProps> = ({
233233
>
234234
Go To Safe
235235
</LinkButton>
236-
</Flex>
236+
</div>
237237
);
238238
}
239239
if (walletId === "walletConnect") {
240240
return (
241-
<Flex direction="column" gap={4}>
241+
<div className="flex flex-col gap-4">
242242
<Heading size="label.lg">
243-
<Flex gap={2} align="center">
243+
<div className="flex flex-row items-center gap-2">
244244
<Icon color="primary.500" boxSize={6} as={FiInfo} />
245245
<span>Approve Transaction</span>
246-
</Flex>
246+
</div>
247247
</Heading>
248248
<Text>
249249
You will need to approve this transaction in your connected wallet.
@@ -255,7 +255,7 @@ const ExternalApprovalNotice: React.FC<ExternalApprovalNoticeProps> = ({
255255
action will continue automatically.
256256
</Text>
257257
)}
258-
</Flex>
258+
</div>
259259
);
260260
}
261261

‎apps/dashboard/src/components/chain-validation/index.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import {
22
Code,
3-
Flex,
43
FormControl,
54
Icon,
65
Input,
@@ -67,7 +66,7 @@ const ChainValidation: React.FC = () => {
6766

6867
return (
6968
<Card maxW="xl">
70-
<Flex direction="column" gap={6}>
69+
<div className="flex flex-col gap-6">
7170
<FormControl gap={6}>
7271
<FormLabel>RPC URL</FormLabel>
7372
<InputGroup gap={2}>
@@ -177,7 +176,7 @@ const ChainValidation: React.FC = () => {
177176
</Table>
178177
</TableContainer>
179178
)}
180-
</Flex>
179+
</div>
181180
</Card>
182181
);
183182
};

‎apps/dashboard/src/components/connect/Carousel.tsx‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import "react-responsive-carousel/lib/styles/carousel.min.css";
2-
import { Box, Flex, SimpleGrid } from "@chakra-ui/react";
2+
import { Box, SimpleGrid } from "@chakra-ui/react";
33
import { ChakraNextImage } from "components/Image";
44
import { useTrack } from "hooks/analytics/useTrack";
55
import { useCallback, useEffect, useState } from "react";
@@ -68,12 +68,7 @@ const Carousel = ({ TRACKING_CATEGORY }: { TRACKING_CATEGORY: string }) => {
6868
}, [selectedShowCaseIdx, canAnimate]);
6969

7070
return (
71-
<Flex
72-
flexDir={{ base: "column", md: "row" }}
73-
gap={{ base: "24px", md: 0 }}
74-
alignItems="stretch"
75-
w="full"
76-
>
71+
<div className="flex w-full flex-col items-stretch gap-6 md:flex-row md:gap-0">
7772
<Box
7873
w="full"
7974
display={{ base: "flex", md: "none" }}
@@ -153,7 +148,7 @@ const Carousel = ({ TRACKING_CATEGORY }: { TRACKING_CATEGORY: string }) => {
153148
);
154149
})}
155150
</SimpleGrid>
156-
<Flex width="full" maxW="786px">
151+
<div className="flex w-full max-w-[786px] flex-row">
157152
{showcaseImages.map((img, idx) => (
158153
<ChakraNextImage
159154
// biome-ignore lint/suspicious/noArrayIndexKey: FIXME
@@ -175,8 +170,8 @@ const Carousel = ({ TRACKING_CATEGORY }: { TRACKING_CATEGORY: string }) => {
175170
priority
176171
/>
177172
))}
178-
</Flex>
179-
</Flex>
173+
</div>
174+
</div>
180175
);
181176
};
182177

‎apps/dashboard/src/components/contract-components/publisher/edit-profile.tsx‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
import { useThirdwebClient } from "@/constants/thirdweb.client";
44
import {
55
Box,
6-
Flex,
76
FormControl,
87
Icon,
98
Input,
@@ -177,10 +176,10 @@ export const EditProfile: React.FC<EditProfileProps> = ({
177176
>
178177
<FormControl isInvalid={!!errors.avatar}>
179178
<FormLabel>
180-
<Flex gap={2}>
179+
<div className="flex flex-row gap-2">
181180
<Icon as={BiImage} boxSize={4} />
182181
Avatar
183-
</Flex>
182+
</div>
184183
</FormLabel>
185184
<Box width={{ base: "auto", md: "250px" }}>
186185
<FileInput
@@ -200,10 +199,10 @@ export const EditProfile: React.FC<EditProfileProps> = ({
200199
</FormControl>
201200
<FormControl isInvalid={!!errors.bio}>
202201
<FormLabel>
203-
<Flex gap={2}>
202+
<div className="flex flex-row gap-2">
204203
<Icon as={HiPencilAlt} boxSize={4} />
205204
Bio
206-
</Flex>
205+
</div>
207206
</FormLabel>
208207
<Textarea
209208
{...register("bio")}
@@ -214,10 +213,10 @@ export const EditProfile: React.FC<EditProfileProps> = ({
214213
</FormControl>
215214
<FormControl isInvalid={!!errors.github}>
216215
<FormLabel>
217-
<Flex gap={2}>
216+
<div className="flex flex-row gap-2">
218217
<Icon as={SiGithub} boxSize={4} />
219218
GitHub
220-
</Flex>
219+
</div>
221220
</FormLabel>
222221
<Input
223222
{...register("github")}
@@ -227,10 +226,10 @@ export const EditProfile: React.FC<EditProfileProps> = ({
227226
</FormControl>
228227
<FormControl isInvalid={!!errors.twitter}>
229228
<FormLabel>
230-
<Flex gap={2}>
229+
<div className="flex flex-row gap-2">
231230
<Icon as={SiTwitter} boxSize={4} />
232231
Twitter
233-
</Flex>
232+
</div>
234233
</FormLabel>
235234
<Input
236235
{...register("twitter")}
@@ -240,10 +239,10 @@ export const EditProfile: React.FC<EditProfileProps> = ({
240239
</FormControl>
241240
<FormControl isInvalid={!!errors.website}>
242241
<FormLabel>
243-
<Flex gap={2}>
242+
<div className="flex flex-row gap-2">
244243
<Icon as={FiGlobe} boxSize={4} />
245244
Website
246-
</Flex>
245+
</div>
247246
</FormLabel>
248247
<Input
249248
{...register("website")}
@@ -253,10 +252,10 @@ export const EditProfile: React.FC<EditProfileProps> = ({
253252
</FormControl>
254253
<FormControl isInvalid={!!errors.discord}>
255254
<FormLabel>
256-
<Flex gap={2}>
255+
<div className="flex flex-row gap-2">
257256
<Icon as={SiDiscord} boxSize={4} />
258257
Discord
259-
</Flex>
258+
</div>
260259
</FormLabel>
261260
<Input
262261
{...register("discord")}

‎apps/dashboard/src/components/contract-functions/contract-functions.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,9 +93,9 @@ export const ContractFunctionsOverview: React.FC<ContractFunctionsOverview> = ({
9393
) : null}
9494
{abi && (
9595
<TabPanel>
96-
<Flex direction="column" gap={6}>
96+
<div className="flex flex-col gap-6">
9797
<CodeOverview abi={abi} noSidebar />
98-
</Flex>
98+
</div>
9999
</TabPanel>
100100
)}
101101
{(sources || abi) && (

‎apps/dashboard/src/components/custom-contract/contract-header/metadata-header.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
154154
</Text>
155155
</Skeleton>
156156
)}
157-
<Flex gap={2}>
157+
<div className="flex flex-row gap-2">
158158
<AddressCopyButton size="xs" address={address} />
159159
{validBlockExplorers?.map((validBlockExplorer) => (
160160
<LinkButton
@@ -178,7 +178,7 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
178178
{e.name}
179179
</LinkButton>
180180
))}
181-
</Flex>
181+
</div>
182182
</Flex>
183183
</Flex>
184184
);

‎apps/dashboard/src/components/engine/overview/engine-overview.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,10 +71,10 @@ export const EngineOverview: React.FC<EngineOverviewProps> = ({
7171
</Text>
7272
</Flex>
7373

74-
<Flex gap={2}>
74+
<div className="flex flex-row gap-2">
7575
<ImportBackendWalletButton instanceUrl={instanceUrl} />
7676
<CreateBackendWalletButton instanceUrl={instanceUrl} />
77-
</Flex>
77+
</div>
7878
</Flex>
7979

8080
<Flex flexDirection="row-reverse">

‎apps/dashboard/src/components/engine/permissions/add-keypair-button.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ export const AddKeypairButton: React.FC<AddKeypairButtonProps> = ({
130130
<ModalBody as={Flex} flexDir="column" gap={8}>
131131
<FormControl>
132132
<Stack>
133-
<Flex gap={2}>
133+
<div className="flex flex-row gap-2">
134134
<Text>Create a private key using:</Text>
135135
<Select
136136
w="fit-content"
@@ -156,7 +156,7 @@ export const AddKeypairButton: React.FC<AddKeypairButtonProps> = ({
156156
</option>
157157
))}
158158
</Select>
159-
</Flex>
159+
</div>
160160

161161
<CodeBlock
162162
fontSize="small"

0 commit comments

Comments
 (0)