[Dashboard] Remove <Center /> (#4765)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on replacing the usage of the `Center` component from `@chakra-ui/react` with `div` elements styled with Flexbox classes for better layout control across various components in the dashboard.

### Detailed summary
- Replaced `Center` with `div` and applied Flexbox utility classes in multiple components for consistent styling.
- Updated components include `TransactionButton`, `ContractSplitPage`, `OnboardingPaymentForm`, and more.
- Maintained existing functionality while improving layout responsiveness.

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

<!-- end pr-codex -->

Author: kien-ngo

apps/dashboard/src/components/FTUX/components/ContentContainer.tsx

@@ -1,5 +1,5 @@
 import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
-import { Box, ButtonGroup, Center, Flex } from "@chakra-ui/react";
+import { Box, ButtonGroup, Flex } from "@chakra-ui/react";
 import { motion } from "framer-motion";
 import { useTrack } from "hooks/analytics/useTrack";
 import { FiArrowRight } from "react-icons/fi";
@@ -98,7 +98,7 @@ export const ContentContainer: React.FC<SlideStateProps> = ({
       h="100%"
       justify="space-between"
     >
-      <Center flexGrow={1} position="relative">
+      <div className="relative flex grow items-center justify-center">
         <Flex gap={8} direction="column" height="100%" width="100%">
           <Box position="relative" w="full" mt="auto">
             <SlideContent
@@ -128,7 +128,7 @@ export const ContentContainer: React.FC<SlideStateProps> = ({
             )}
           </ButtonGroup>
         </Flex>
-      </Center>
+      </div>
     </Flex>
   );
 };

apps/dashboard/src/components/FTUX/components/Graphics.tsx

@@ -1,4 +1,4 @@
-import { Center, Flex } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { motion } from "framer-motion";
 import { Heading } from "tw-components";
@@ -48,25 +48,25 @@ export const Titles: React.FC<SlideStateProps> = ({
 
 export const DashboardImage: React.FC = () => (
   <motion.div {...moveDown}>
-    <Center>
+    <div className="flex items-center justify-center">
       <ChakraNextImage
         priority
         w={{ base: "45%", md: "90%" }}
         src={require("../../../../public/assets/product-pages/dashboard/hero.png")}
         alt=""
       />
-    </Center>
+    </div>
   </motion.div>
 );
 
 export const ConnectWalletImage: React.FC = () => (
   <motion.div {...moveDown}>
-    <Center h="100%" w="100%">
+    <div className="flex h-full w-full items-center justify-center">
       <ChakraNextImage
         alt=""
         boxSize="75px"
         src={require("../../../../public/logos/wallet.png")}
       />
-    </Center>
+    </div>
   </motion.div>
 );

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

@@ -119,6 +119,7 @@ export const TransactionButton: React.FC<TransactionButtonProps> = ({
                 : `This action will trigger ${transactionCount} ${transactionCount > 1 ? "transactions" : "transaction"}`
             }
           >
+            {/* to be completed */}
             <Center
               _groupHover={{
                 bg:

apps/dashboard/src/components/contract-components/tables/published-contracts.tsx

@@ -1,11 +1,4 @@
-import {
-  Alert,
-  AlertIcon,
-  AlertTitle,
-  Center,
-  Flex,
-  Spinner,
-} from "@chakra-ui/react";
+import { Alert, AlertIcon, AlertTitle, Flex, Spinner } from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useMemo, useState } from "react";
 import { IoRefreshSharp } from "react-icons/io5";
@@ -90,15 +83,15 @@ export const PublishedContracts: React.FC<PublishedContractsProps> = ({
         hidePublisher
       >
         {publishedContractsQuery.isPending && (
-          <Center>
+          <div className="flex items-center justify-center">
             <Flex py={4} direction="row" gap={4} align="center">
               <Spinner size="sm" />
               <Text>Loading published contracts</Text>
             </Flex>
-          </Center>
+          </div>
         )}
         {publishedContractsQuery.isError && (
-          <Center>
+          <div className="flex items-center justify-center">
             <Flex mt={4} py={4} direction="column" gap={4} align="center">
               <Alert status="error" borderRadius="md">
                 <AlertIcon />
@@ -116,15 +109,15 @@ export const PublishedContracts: React.FC<PublishedContractsProps> = ({
                 </Button>
               </Alert>
             </Flex>
-          </Center>
+          </div>
         )}
         {publishedContractsQuery.isSuccess &&
           publishedContractsQuery.data.length === 0 && (
-            <Center>
+            <div className="flex items-center justify-center">
               <Flex py={4} direction="column" gap={4} align="center">
                 <Text>No published contracts found.</Text>
               </Flex>
-            </Center>
+            </div>
           )}
         {publishedContractsQuery.isSuccess &&
           publishedContractsQuery.data.length > slicedData.length && (

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { useThirdwebClient } from "@/constants/thirdweb.client";
-import { Center, Flex, Skeleton, useBreakpointValue } from "@chakra-ui/react";
+import { Flex, Skeleton, useBreakpointValue } from "@chakra-ui/react";
 import { ChainIcon } from "components/icons/ChainIcon";
 import Link from "next/link";
 import type { ChainMetadata } from "thirdweb/chains";
@@ -119,13 +119,9 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
                 cursor="pointer"
               >
                 {chain.icon?.url && (
-                  <Center
-                    boxSize={5}
-                    mr={{ base: 0, md: -0.5 }}
-                    borderRadius="full"
-                  >
+                  <div className="md:-mr-0.5 mr-0 flex h-5 w-5 items-center justify-center rounded-full">
                     <ChainIcon ipfsSrc={chain.icon.url} size={24} />
-                  </Center>
+                  </div>
                 )}
                 <Heading
                   display={{

apps/dashboard/src/components/homepage/sections/GetStartedSection.tsx

@@ -1,4 +1,4 @@
-import { Box, Center, Flex, LightMode } from "@chakra-ui/react";
+import { Box, Flex, LightMode } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { HomepageSection } from "components/product-pages/homepage/HomepageSection";
 import { GeneralCta } from "components/shared/GeneralCta";
@@ -18,8 +18,8 @@ export const GetStartedSection = () => {
         align="center"
         gap={{ base: 6, md: 8 }}
       >
-        <Center mb={6} pt={{ base: 8, lg: 24 }}>
-          <Center p={2} position="relative" mb={6}>
+        <div className="mb-6 flex items-center justify-center pt-8 lg:pt-24">
+          <div className="relative mb-6 flex items-center justify-center p-2">
             <Box
               position="absolute"
               bgGradient="linear(to-r, #F213A4, #040BBF)"
@@ -38,8 +38,8 @@ export const GetStartedSection = () => {
               placeholder="empty"
               src={WhiteLogo}
             />
-          </Center>
-        </Center>
+          </div>
+        </div>
         <Heading as="h2" size="display.md" textAlign="center">
           Get started with thirdweb
         </Heading>

apps/dashboard/src/components/homepage/sections/PricingCard.tsx

@@ -1,5 +1,5 @@
 import { AccountPlan } from "@3rdweb-sdk/react/hooks/useApi";
-import { Box, type CardProps, Center, Flex } from "@chakra-ui/react";
+import { Box, type CardProps, Flex } from "@chakra-ui/react";
 import {
   Badge,
   Card,
@@ -174,7 +174,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
 
   if (highlighted) {
     return (
-      <Center position="relative" p={2} m={-2}>
+      <div className="-m-2 relative flex items-center justify-center p-2">
         <Box
           position="absolute"
           bgGradient="linear(to-b, #4DABEE, #692AC1)"
@@ -187,7 +187,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
           filter="blur(8px)"
         />
         {content}
-      </Center>
+      </div>
     );
   }
 

apps/dashboard/src/components/ipfs-upload/dropzone.tsx

@@ -7,7 +7,6 @@ import { useDashboardStorageUpload } from "@3rdweb-sdk/react/hooks/useDashboardS
 import {
   Box,
   ButtonGroup,
-  Center,
   Divider,
   Flex,
   GridItem,
@@ -87,36 +86,22 @@ export const IpfsUploadDropzone: React.FC = () => {
             <FileUpload files={droppedFiles} updateFiles={setDroppedFiles} />
           </div>
         ) : !address ? (
-          <Center
-            border="2px solid"
-            borderColor="borderColor"
-            borderRadius="xl"
-            h="full"
-          >
+          <div className="flex h-full items-center justify-center rounded-xl border-2 border-border">
             <Text
               size="label.lg"
               className="text-muted-foreground"
               textAlign="center"
             >
               Please connect your wallet to begin uploading.
             </Text>
-          </Center>
+          </div>
         ) : (
-          <Center
+          <div
+            className={cn(
+              "flex items-center justify-center rounded-xl border-2 border-border border-solid bg-transparent hover:border-blue-600 dark:border-blue-400",
+              address ? "cursor-pointer" : "cursor-default",
+            )}
             {...getRootProps()}
-            bg="transparent"
-            _hover={{
-              _light: {
-                borderColor: "blue.600",
-              },
-              _dark: {
-                borderColor: "blue.400",
-              },
-            }}
-            border="2px solid"
-            borderColor="borderColor"
-            borderRadius="xl"
-            cursor={address ? "pointer" : "default"}
           >
             <input {...getInputProps()} />
 
@@ -148,7 +133,7 @@ export const IpfsUploadDropzone: React.FC = () => {
                 )}
               </Flex>
             }
-          </Center>
+          </div>
         )}
       </div>
       <Flex flexDir="column" gap={{ base: 6, md: 3 }} />
@@ -440,14 +425,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ files, updateFiles }) => {
                 isIndeterminate={storageUpload.isPending}
                 position="relative"
               />
-              <Center
-                display={{ base: "none", md: "block" }}
-                position="absolute"
-                left={0}
-                right={0}
-                top={0}
-                bottom={0}
-              >
+              <div className="absolute top-0 right-0 bottom-0 left-0 hidden md:block">
                 {/* <Text
                   mt={0.5}
                   size="label.xs"
@@ -474,7 +452,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ files, updateFiles }) => {
                 >
                   {Math.round(progressPercent)}%
                 </Text> */}
-              </Center>
+              </div>
             </Flex>
           )}
           <ButtonGroup ml={{ base: "0", md: "auto" }}>

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

@@ -3,7 +3,6 @@ import {
   Alert,
   AlertDescription,
   AlertIcon,
-  Center,
   Flex,
   Spinner,
 } from "@chakra-ui/react";
@@ -109,9 +108,9 @@ export const OnboardingPaymentForm: React.FC<OnboardingPaymentForm> = ({
         />
 
         {loading ? (
-          <Center pb={16}>
+          <div className="flex items-center justify-center pb-16">
             <Spinner size="sm" />
-          </Center>
+          </div>
         ) : (
           <Flex flexDir="column" gap={4}>
             {paymentFailureCode ? (

apps/dashboard/src/components/product-pages/common/GameCard.tsx

@@ -1,4 +1,4 @@
-import { Box, Center, Flex, useBreakpointValue } from "@chakra-ui/react";
+import { Box, Flex, useBreakpointValue } from "@chakra-ui/react";
 import { SiGithub } from "@react-icons/all-files/si/SiGithub";
 import { useTrack } from "hooks/analytics/useTrack";
 import NextImage, { type StaticImageData } from "next/image";
@@ -70,7 +70,7 @@ export const GameCard: React.FC<GameCardProps> = ({
               (max-width: 1200px) 50vw,
               33vw"
         />
-        <Center position="absolute" top={0} bottom={0} left={0} right={0}>
+        <div className="absolute inset-0 flex items-center justify-center">
           <Button
             leftIcon={<IoGameControllerOutline />}
             color="white"
@@ -80,7 +80,7 @@ export const GameCard: React.FC<GameCardProps> = ({
           >
             Play Game
           </Button>
-        </Center>
+        </div>
       </Box>
 
       <Flex direction="column" gap={2} pb={4} px={4}>