[Dashboard] Remove <Stack /> (1) (#4829)

## 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 `Stack` component with `div` elements styled with Flexbox classes for layout consistency across various components in the application.

### Detailed summary
- Replaced `Stack` components with `div` elements using Flexbox for layout in multiple files.
- Updated spacing and alignment properties to maintain visual consistency.
- Adjusted modal body structures to use Flexbox for better responsiveness.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: kien-ngo

apps/dashboard/src/components/community/CommunityCard.tsx

@@ -1,4 +1,4 @@
-import { Flex, LinkBox, LinkOverlay, Stack } from "@chakra-ui/react";
+import { Flex, LinkBox, LinkOverlay } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { Card, Heading, Text } from "tw-components";
 
@@ -34,14 +34,7 @@ export const CommunityCard: React.FC<CommunityCardProps> = ({
         _hover={{ textDecor: "none" }}
         as={LinkBox}
       >
-        <Stack
-          align="center"
-          justify="center"
-          w="full"
-          bg="#181818"
-          borderTopRadius="xl"
-          h="11.5rem"
-        >
+        <div className="flex h-44 w-full flex-col items-center justify-center gap-2 rounded-t-xl bg-[#181818]">
           <ChakraNextImage
             pointerEvents="none"
             alt={title}
@@ -52,7 +45,7 @@ export const CommunityCard: React.FC<CommunityCardProps> = ({
             width={90}
             height={90}
           />
-        </Stack>
+        </div>
 
         <Flex
           w="full"

apps/dashboard/src/components/contract-pages/forms/properties.shared.tsx

@@ -69,7 +69,7 @@ export const PropertiesFormControl = <
   }, [fields, append]);
 
   return (
-    <Stack spacing={4}>
+    <div className="flex flex-col gap-4">
       <Flex justify="space-between" align="center" direction="row">
         <FormLabel m={0}>Attributes</FormLabel>
         <Button
@@ -93,7 +93,7 @@ export const PropertiesFormControl = <
         const isInvalid = !!(keyError || valueError);
 
         return (
-          <Stack key={field.id} align="center" direction="row">
+          <div className="flex flex-row items-center gap-2" key={field.id}>
             <FormControl
               isInvalid={isInvalid}
               as={Stack}
@@ -177,10 +177,10 @@ export const PropertiesFormControl = <
               size="xs"
               icon={<Icon as={FiX} />}
             />
-          </Stack>
+          </div>
         );
       })}
-      <Stack direction="row">
+      <div className="flex flex-row gap-2">
         <Button
           leftIcon={<Icon as={FiPlus} />}
           colorScheme="purple"
@@ -192,7 +192,7 @@ export const PropertiesFormControl = <
         >
           Add Row
         </Button>
-      </Stack>
-    </Stack>
+      </div>
+    </div>
   );
 };

apps/dashboard/src/components/engine/configuration/webhooks-table.tsx

@@ -12,7 +12,6 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
-  Stack,
   Tooltip,
   useDisclosure,
 } from "@chakra-ui/react";
@@ -171,7 +170,7 @@ export const WebhooksTable: React.FC<WebhooksTableProps> = ({
           <ModalCloseButton />
           <ModalBody>
             {webhookToRevoke && (
-              <Stack gap={4}>
+              <div className="flex flex-col gap-4">
                 <Text>Are you sure you want to delete this webook?</Text>
                 <FormControl>
                   <FormLabel>Name</FormLabel>
@@ -190,7 +189,7 @@ export const WebhooksTable: React.FC<WebhooksTableProps> = ({
                     )}
                   </Text>
                 </FormControl>
-              </Stack>
+              </div>
             )}
           </ModalBody>
 

apps/dashboard/src/components/engine/contract-subscription/add-contract-subscription-button.tsx

@@ -185,7 +185,7 @@ const ModalBodyInputContract = ({
   return (
     <>
       <ModalBody>
-        <Stack spacing={4}>
+        <div className="flex flex-col gap-4">
           <Text>
             Add a contract subscription to process real-time onchain data.
           </Text>
@@ -252,7 +252,7 @@ const ModalBodyInputContract = ({
               {form.getFieldState("webhookUrl", form.formState).error?.message}
             </FormErrorMessage>
           </FormControl>
-        </Stack>
+        </div>
       </ModalBody>
 
       <ModalFooter>
@@ -304,7 +304,7 @@ const ModalBodyInputData = ({
   return (
     <>
       <ModalBody>
-        <Stack spacing={4}>
+        <div className="flex flex-col gap-4">
           <Text>
             Select the data type to process.
             <br />
@@ -334,7 +334,7 @@ const ModalBodyInputData = ({
               </Checkbox>
               {/* Shows all/specific events if processing event logs */}
               <Collapse in={processEventLogsDisclosure.isOpen}>
-                <Stack px={4}>
+                <div className="flex flex-col gap-2 px-4">
                   <RadioGroup
                     defaultValue="false"
                     onChange={(val: "false" | "true") => {
@@ -370,7 +370,7 @@ const ModalBodyInputData = ({
                       </Collapse>
                     </div>
                   </RadioGroup>
-                </Stack>
+                </div>
               </Collapse>
 
               <Checkbox
@@ -390,7 +390,7 @@ const ModalBodyInputData = ({
               </Checkbox>
               {/* Shows all/specific functions if processing transaction receipts */}
               <Collapse in={processTransactionReceiptsDisclosure.isOpen}>
-                <Stack px={4}>
+                <div className="flex flex-col gap-2 px-4">
                   <RadioGroup
                     defaultValue="false"
                     onChange={(val: "false" | "true") => {
@@ -426,11 +426,11 @@ const ModalBodyInputData = ({
                       </Collapse>
                     </div>
                   </RadioGroup>
-                </Stack>
+                </div>
               </Collapse>
             </div>
           </FormControl>
-        </Stack>
+        </div>
       </ModalBody>
 
       <ModalFooter as={Flex} gap={3}>

apps/dashboard/src/components/engine/contract-subscription/contract-subscriptions-table.tsx

@@ -378,7 +378,7 @@ const RemoveModal = ({
         <ModalHeader>Remove Contract Subscription</ModalHeader>
         <ModalCloseButton />
         <ModalBody>
-          <Stack spacing={4}>
+          <div className="flex flex-col gap-4">
             <Text>
               This action will delete all stored data for this contract
               subscription.
@@ -429,7 +429,7 @@ const RemoveModal = ({
                 )}
               </FormControl>
             </Card>
-          </Stack>
+          </div>
         </ModalBody>
         <ModalFooter as={Flex} gap={3}>
           <Button type="button" onClick={disclosure.onClose} variant="ghost">

apps/dashboard/src/components/engine/create/tier-card.tsx

@@ -2,7 +2,7 @@
 
 import { Button } from "@/components/ui/button";
 import type { EngineTier } from "@3rdweb-sdk/react/hooks/useEngine";
-import { Flex, Spacer, Stack } from "@chakra-ui/react";
+import { Flex, Spacer } from "@chakra-ui/react";
 import { CheckIcon } from "lucide-react";
 
 interface EngineTierCardConfig {
@@ -97,7 +97,7 @@ export const EngineTierCard = ({
       </Flex>
 
       {/* Features */}
-      <Stack spacing={3}>
+      <div className="flex flex-col gap-3">
         {previousTier && (
           <p>
             <span className="font-semibold"> All of {previousTier}</span>, plus:
@@ -109,7 +109,7 @@ export const EngineTierCard = ({
             <p className="text-muted-foreground text-sm">{feature}</p>
           </Flex>
         ))}
-      </Stack>
+      </div>
 
       <Spacer />
 

apps/dashboard/src/contract-ui/tabs/proposals/page.tsx

@@ -1,12 +1,5 @@
 import { voteTokenBalances } from "@3rdweb-sdk/react/hooks/useVote";
-import {
-  Divider,
-  Flex,
-  Stack,
-  Stat,
-  StatLabel,
-  StatNumber,
-} from "@chakra-ui/react";
+import { Divider, Flex, Stat, StatLabel, StatNumber } from "@chakra-ui/react";
 import { useMemo } from "react";
 import type { ThirdwebContract } from "thirdweb";
 import * as VoteExt from "thirdweb/extensions/vote";
@@ -51,7 +44,7 @@ export const ContractProposalsPage: React.FC<ProposalsPageProps> = ({
           <ProposalButton contract={contract} />
         </Flex>
       </Flex>
-      <Stack spacing={4}>
+      <div className="flex flex-col gap-4">
         {proposals.map((proposal) => (
           <Proposal
             key={proposal.proposalId.toString()}
@@ -61,7 +54,7 @@ export const ContractProposalsPage: React.FC<ProposalsPageProps> = ({
         ))}
         <Divider />
         <Heading size="title.sm">Voting Tokens</Heading>
-        <Stack direction="row">
+        <div className="flex flex-row gap-2">
           {voteTokenBalancesQuery.data?.map((balance) => (
             <Card as={Stat} key={balance.address} maxWidth="240px">
               <StatLabel>
@@ -72,8 +65,8 @@ export const ContractProposalsPage: React.FC<ProposalsPageProps> = ({
               <StatNumber>{balance.balance}</StatNumber>
             </Card>
           ))}
-        </Stack>
-      </Stack>
+        </div>
+      </div>
     </Flex>
   );
 };

apps/dashboard/src/contract-ui/tabs/shared-components/cancel-tab.tsx

@@ -1,5 +1,4 @@
 import { useEVMContractInfo } from "@3rdweb-sdk/react";
-import { Stack } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
@@ -29,7 +28,7 @@ export const CancelTab: React.FC<CancelTabProps> = ({
   );
   const cancelQuery = useSendAndConfirmTransaction();
   return (
-    <Stack pt={3} gap={3}>
+    <div className="flex flex-col gap-3 pt-3">
       {/* maybe some text? */}
       <TransactionButton
         transactionCount={1}
@@ -67,6 +66,6 @@ export const CancelTab: React.FC<CancelTabProps> = ({
       >
         Cancel Listing
       </TransactionButton>
-    </Stack>
+    </div>
   );
 };

apps/dashboard/src/contract-ui/tabs/split/page.tsx

@@ -3,7 +3,6 @@ import {
   Flex,
   SimpleGrid,
   Spinner,
-  Stack,
   Stat,
   StatLabel,
   StatNumber,
@@ -112,7 +111,7 @@ export const ContractSplitPage: React.FC<SplitPageProps> = ({ contract }) => {
           />
         </Flex>
       </Flex>
-      <Stack spacing={8}>
+      <div className="flex flex-col gap-8">
         <Flex gap={4} flexDir="column">
           <SimpleGrid spacing={{ base: 3, md: 6 }} columns={{ base: 2, md: 4 }}>
             <Card as={Stat}>
@@ -209,7 +208,7 @@ export const ContractSplitPage: React.FC<SplitPageProps> = ({ contract }) => {
             </Card>
           ))}
         </div>
-      </Stack>
+      </div>
     </Flex>
   );
 };

apps/dashboard/src/contract-ui/tabs/tokens/components/mint-button.tsx

@@ -7,7 +7,7 @@ import {
   SheetTrigger,
 } from "@/components/ui/sheet";
 import { MinterOnly } from "@3rdweb-sdk/react/components/roles/minter-only";
-import { FormControl, Input, Stack } from "@chakra-ui/react";
+import { FormControl, Input } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { useTrack } from "hooks/analytics/useTrack";
 import { Plus } from "lucide-react";
@@ -60,10 +60,8 @@ export const TokenMintButton: React.FC<TokenMintButtonProps> = ({
           <SheetHeader>
             <SheetTitle>Mint additional tokens</SheetTitle>
           </SheetHeader>
-          <Stack
-            mt={10}
-            spacing={6}
-            as="form"
+          <form
+            className="mt-10 flex flex-col gap-6"
             id={MINT_FORM_ID}
             onSubmit={form.handleSubmit((d) => {
               if (!address) {
@@ -120,7 +118,7 @@ export const TokenMintButton: React.FC<TokenMintButtonProps> = ({
                 {form.formState.errors?.amount?.message}
               </FormErrorMessage>
             </FormControl>
-          </Stack>
+          </form>
           <SheetFooter className="mt-10">
             <TransactionButton
               transactionCount={1}