Skip to content

Commit 509c798

Browse files
kien-ngokien-ngo
committed
[Dashboard] Remove <Stack /> (2) (#4830)
## Problem solved Short description of the bug fixed or feature added <!-- start pr-codex --> --- ## PR-Codex overview This PR primarily focuses on replacing instances of the `Stack` component with `div` elements styled using Tailwind CSS classes, enhancing the layout while maintaining functionality across various components in the dashboard application. ### Detailed summary - Replaced `<Stack>` with `<div className="flex flex-col gap-X">` in multiple components for consistent styling. - Updated `spacing` properties to `gap` for better alignment with Tailwind CSS practices. - Maintained functionality across components such as `PermissionEditor`, `EventsFeedItem`, and various modal dialogs. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
1 parent 8ea9420 commit 509c798

File tree

16 files changed

+46
-57
lines changed

16 files changed

+46
-57
lines changed

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ import {
2121
ModalHeader,
2222
ModalOverlay,
2323
Select,
24-
Stack,
2524
type UseDisclosureReturn,
2625
useDisclosure,
2726
} from "@chakra-ui/react";
@@ -273,7 +272,7 @@ const EditModal = ({
273272
<ModalHeader>Update Backend Wallet</ModalHeader>
274273
<ModalCloseButton />
275274
<ModalBody>
276-
<Stack spacing={4}>
275+
<div className="flex flex-col gap-4">
277276
<FormControl>
278277
<FormLabel>Wallet Address</FormLabel>
279278
<Text>{backendWallet.address}</Text>
@@ -287,7 +286,7 @@ const EditModal = ({
287286
placeholder="Enter a description for this backend wallet"
288287
/>
289288
</FormControl>
290-
</Stack>
289+
</div>
291290
</ModalBody>
292291

293292
<ModalFooter as={Flex} gap={3}>
@@ -424,7 +423,7 @@ const SendFundsModal = ({
424423
<ModalHeader>Send Funds</ModalHeader>
425424
<ModalCloseButton />
426425
<ModalBody>
427-
<Stack spacing={4}>
426+
<div className="flex flex-col gap-4">
428427
<FormControl>
429428
<FormLabel>From</FormLabel>
430429
<Text fontFamily="mono">{fromWallet.address}</Text>
@@ -495,7 +494,7 @@ const SendFundsModal = ({
495494
<Text>{chain?.name}</Text>
496495
</Flex>
497496
</FormControl>
498-
</Stack>
497+
</div>
499498
</ModalBody>
500499

501500
<ModalFooter as={Flex} gap={3}>

‎apps/dashboard/src/components/engine/overview/create-backend-wallet-button.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import {
1414
ModalFooter,
1515
ModalHeader,
1616
ModalOverlay,
17-
Stack,
1817
useDisclosure,
1918
} from "@chakra-ui/react";
2019
import { useTrack } from "hooks/analytics/useTrack";
@@ -84,7 +83,7 @@ export const CreateBackendWalletButton: React.FC<
8483
<ModalHeader>Create {walletType} wallet</ModalHeader>
8584
<ModalCloseButton />
8685
<ModalBody>
87-
<Stack spacing={4}>
86+
<div className="flex flex-col gap-4">
8887
<FormControl>
8988
<FormLabel>Wallet Type</FormLabel>
9089
<Text>{walletType}</Text>
@@ -97,7 +96,7 @@ export const CreateBackendWalletButton: React.FC<
9796
{...form.register("label")}
9897
/>
9998
</FormControl>
100-
</Stack>
99+
</div>
101100
</ModalBody>
102101

103102
<ModalFooter as={Flex} gap={3}>

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
ModalFooter,
1111
ModalHeader,
1212
ModalOverlay,
13-
Stack,
1413
Step,
1514
StepIndicator,
1615
StepSeparator,
@@ -219,7 +218,7 @@ const CancelTransactionButton = ({
219218
<ModalContent className="!bg-background rounded-lg border border-border">
220219
<ModalHeader>Cancel Transaction</ModalHeader>
221220
<ModalBody>
222-
<Stack gap={4}>
221+
<div className="flex flex-col gap-4">
223222
<Text>Are you sure you want to cancel this transaction?</Text>
224223
<FormControl>
225224
<FormLabel>Queue ID</FormLabel>
@@ -255,7 +254,7 @@ const CancelTransactionButton = ({
255254
If this transaction is already submitted, it may complete before
256255
the cancellation is submitted.
257256
</Text>
258-
</Stack>
257+
</div>
259258
</ModalBody>
260259

261260
<ModalFooter as={Flex} gap={3}>

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
DrawerHeader,
1010
Flex,
1111
FormControl,
12-
Stack,
1312
Tooltip,
1413
type UseDisclosureReturn,
1514
useDisclosure,
@@ -373,7 +372,7 @@ const TransactionDetailsDrawer = ({
373372
),
374373
}}
375374
>
376-
<Stack spacing={4}>
375+
<div className="flex flex-col gap-4">
377376
<FormControl>
378377
<FormLabel>Queue ID</FormLabel>
379378
<Text>{transaction.queueId}</Text>
@@ -524,7 +523,7 @@ const TransactionDetailsDrawer = ({
524523
</FormControl>
525524

526525
<Collapse in={advancedTxDetailsDisclosure.isOpen}>
527-
<Stack spacing={4}>
526+
<div className="flex flex-col gap-4">
528527
{transaction.nonce && (
529528
<FormControl>
530529
<div className="flex flex-row">
@@ -588,7 +587,7 @@ const TransactionDetailsDrawer = ({
588587
</LinkButton>
589588
</FormControl>
590589
)}
591-
</Stack>
590+
</div>
592591
</Collapse>
593592

594593
<Button
@@ -604,7 +603,7 @@ const TransactionDetailsDrawer = ({
604603
</Button>
605604
</>
606605
)}
607-
</Stack>
606+
</div>
608607
</Drawer>
609608
);
610609
};

‎apps/dashboard/src/components/engine/permissions/access-tokens-table.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import {
1515
ModalFooter,
1616
ModalHeader,
1717
ModalOverlay,
18-
Stack,
1918
type UseDisclosureReturn,
2019
useDisclosure,
2120
} from "@chakra-ui/react";
@@ -190,7 +189,7 @@ const EditModal = ({
190189
<ModalHeader>Update Access Token</ModalHeader>
191190
<ModalCloseButton />
192191
<ModalBody>
193-
<Stack spacing={4}>
192+
<div className="flex flex-col gap-4">
194193
<FormControl>
195194
<FormLabel>Access Token</FormLabel>
196195
<Text>{accessToken.tokenMask}</Text>
@@ -204,7 +203,7 @@ const EditModal = ({
204203
placeholder="Enter a description for this access token"
205204
/>
206205
</FormControl>
207-
</Stack>
206+
</div>
208207
</ModalBody>
209208

210209
<ModalFooter as={Flex} gap={3}>
@@ -273,7 +272,7 @@ const RemoveModal = ({
273272
<ModalHeader>Delete Access Token</ModalHeader>
274273
<ModalCloseButton />
275274
<ModalBody>
276-
<Stack spacing={4}>
275+
<div className="flex flex-col gap-4">
277276
<Text>Are you sure you want to delete this access token?</Text>
278277
<FormControl>
279278
<FormLabel>Access Token</FormLabel>
@@ -283,7 +282,7 @@ const RemoveModal = ({
283282
<FormLabel>Label</FormLabel>
284283
<Text>{accessToken.label ?? <em>N/A</em>}</Text>
285284
</FormControl>
286-
</Stack>
285+
</div>
287286
</ModalBody>
288287

289288
<ModalFooter as={Flex} gap={3}>

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {
88
ModalFooter,
99
ModalHeader,
1010
ModalOverlay,
11-
Stack,
1211
useDisclosure,
1312
} from "@chakra-ui/react";
1413
import { useTrack } from "hooks/analytics/useTrack";
@@ -83,7 +82,7 @@ export const AddAccessTokenButton: React.FC<AddAccessTokenButtonProps> = ({
8382
<ModalContent className="!bg-background rounded-lg border border-border">
8483
<ModalHeader>Access token</ModalHeader>
8584
<ModalBody as={Flex} flexDir="column" gap={4}>
86-
<Stack spacing={4}>
85+
<div className="flex flex-col gap-4">
8786
<CodeBlock code={accessToken} />
8887
<Text color="red.500">
8988
This access token will not be shown again.
@@ -94,7 +93,7 @@ export const AddAccessTokenButton: React.FC<AddAccessTokenButtonProps> = ({
9493
>
9594
I have securely stored this access token.
9695
</Checkbox>
97-
</Stack>
96+
</div>
9897
</ModalBody>
9998

10099
<ModalFooter as={Flex} gap={3}>

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import {
1414
ModalFooter,
1515
ModalHeader,
1616
ModalOverlay,
17-
Stack,
1817
useDisclosure,
1918
} from "@chakra-ui/react";
2019
import { useTrack } from "hooks/analytics/useTrack";
@@ -93,7 +92,7 @@ export const AddAdminButton: React.FC<AddAdminButtonProps> = ({
9392
<ModalHeader>Add Admin</ModalHeader>
9493
<ModalCloseButton />
9594
<ModalBody>
96-
<Stack spacing={4}>
95+
<div className="flex flex-col gap-4">
9796
<FormControl isRequired>
9897
<FormLabel>Wallet Address</FormLabel>
9998
<Input
@@ -110,7 +109,7 @@ export const AddAdminButton: React.FC<AddAdminButtonProps> = ({
110109
{...form.register("label")}
111110
/>
112111
</FormControl>
113-
</Stack>
112+
</div>
114113
</ModalBody>
115114

116115
<ModalFooter as={Flex} gap={3}>

‎apps/dashboard/src/components/engine/permissions/admins-table.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import {
1616
ModalFooter,
1717
ModalHeader,
1818
ModalOverlay,
19-
Stack,
2019
type UseDisclosureReturn,
2120
useDisclosure,
2221
} from "@chakra-ui/react";
@@ -178,7 +177,7 @@ const EditModal = ({
178177
<ModalHeader>Update Admin</ModalHeader>
179178
<ModalCloseButton />
180179
<ModalBody>
181-
<Stack spacing={4}>
180+
<div className="flex flex-col gap-4">
182181
<FormControl>
183182
<FormLabel>Wallet Address</FormLabel>
184183
<Text>{admin.walletAddress}</Text>
@@ -192,7 +191,7 @@ const EditModal = ({
192191
placeholder="Enter a description for this admin"
193192
/>
194193
</FormControl>
195-
</Stack>
194+
</div>
196195
</ModalBody>
197196

198197
<ModalFooter as={Flex} gap={3}>
@@ -261,7 +260,7 @@ const RemoveModal = ({
261260
<ModalHeader>Remove Admin</ModalHeader>
262261
<ModalCloseButton />
263262
<ModalBody>
264-
<Stack spacing={4}>
263+
<div className="flex flex-col gap-4">
265264
<Text>Are you sure you want to remove this admin?</Text>
266265
<FormControl>
267266
<FormLabel>Wallet Address</FormLabel>
@@ -271,7 +270,7 @@ const RemoveModal = ({
271270
<FormLabel>Label</FormLabel>
272271
<Text>{admin.label ?? <em>N/A</em>}</Text>
273272
</FormControl>
274-
</Stack>
273+
</div>
275274
</ModalBody>
276275

277276
<ModalFooter as={Flex} gap={3}>

‎apps/dashboard/src/components/engine/permissions/keypairs-table.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import {
1313
ModalFooter,
1414
ModalHeader,
1515
ModalOverlay,
16-
Stack,
1716
type UseDisclosureReturn,
1817
useDisclosure,
1918
} from "@chakra-ui/react";
@@ -162,7 +161,7 @@ const RemoveModal = ({
162161
<ModalHeader>Remove Keypair</ModalHeader>
163162
<ModalCloseButton />
164163
<ModalBody>
165-
<Stack spacing={4}>
164+
<div className="flex flex-col gap-4">
166165
<Text>Are you sure you want to remove this keypair?</Text>
167166
<Text>
168167
Access tokens signed by the private key for this keypair will no
@@ -187,7 +186,7 @@ const RemoveModal = ({
187186
</Text>
188187
</Flex>
189188
</FormControl>
190-
</Stack>
189+
</div>
191190
</ModalBody>
192191

193192
<ModalFooter as={Flex} gap={3}>

‎apps/dashboard/src/components/engine/relayer/relayers-table.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import {
1717
ModalHeader,
1818
ModalOverlay,
1919
Select,
20-
Stack,
2120
Textarea,
2221
type UseDisclosureReturn,
2322
useDisclosure,
@@ -269,7 +268,7 @@ const EditModal = ({
269268
<ModalHeader>Update Relayer</ModalHeader>
270269
<ModalCloseButton />
271270
<ModalBody>
272-
<Stack spacing={4}>
271+
<div className="flex flex-col gap-4">
273272
<FormControl>
274273
<FormLabel>Chain</FormLabel>
275274
<NetworkDropdown
@@ -316,7 +315,7 @@ const EditModal = ({
316315
/>
317316
<FormHelperText>Allow all forwarders if omitted.</FormHelperText>
318317
</FormControl>
319-
</Stack>
318+
</div>
320319
</ModalBody>
321320

322321
<ModalFooter as={Flex} gap={3}>
@@ -384,7 +383,7 @@ const RemoveModal = ({
384383
<ModalHeader>Remove Relayer</ModalHeader>
385384
<ModalCloseButton />
386385
<ModalBody>
387-
<Stack spacing={4}>
386+
<div className="flex flex-col gap-4">
388387
<Text>Are you sure you want to remove this relayer?</Text>
389388
<FormControl>
390389
<FormLabel>Chain</FormLabel>
@@ -408,7 +407,7 @@ const RemoveModal = ({
408407
<FormLabel>Label</FormLabel>
409408
<Text>{relayer.name ?? <em>N/A</em>}</Text>
410409
</FormControl>
411-
</Stack>
410+
</div>
412411
</ModalBody>
413412
<ModalFooter as={Flex} gap={3}>
414413
<Button type="button" onClick={disclosure.onClose} variant="ghost">

0 commit comments

Comments
 (0)