[Dashboard] Remove <AspectRatio/> (#4750)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on removing the `AspectRatio` component from the project and replacing its usage with `div` elements styled with Tailwind CSS classes to maintain the aspect ratio.

### Detailed summary
- Deleted `@radix-ui/react-aspect-ratio` from `package.json`.
- Removed all instances of the `AspectRatio` component across various files.
- Replaced `AspectRatio` with `div` elements using Tailwind CSS classes for aspect ratios.
- Updated related props and imports as necessary.

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

<!-- end pr-codex -->

Author: kien-ngo

apps/dashboard/.eslintrc.js

@@ -57,6 +57,7 @@ module.exports = {
               "MenuItem",
               "VStack",
               "HStack",
+              "AspectRatio",
               // also the types
               "ButtonProps",
               "BadgeProps",
@@ -67,6 +68,7 @@ module.exports = {
               "HelpTextProps",
               "MenuGroupProps",
               "MenuItemProps",
+              "AspectRatioProps",
             ],
             message:
               'Use the equivalent component from "tw-components" instead.',

apps/dashboard/package.json

@@ -31,7 +31,6 @@
     "@hookform/resolvers": "^3.9.0",
     "@n8tb1t/use-scroll-position": "^2.0.3",
     "@radix-ui/react-alert-dialog": "^1.1.1",
-    "@radix-ui/react-aspect-ratio": "^1.0.3",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dialog": "1.1.1",

apps/dashboard/src/@/components/ui/aspect-ratio.tsx

@@ -1,4 +1,3 @@
-import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import Link from "next/link";
@@ -20,9 +19,11 @@ export function ChainHeader(props: ChainHeaderProps) {
     // force the banner image to be 4:1 aspect ratio and full-width on mobile devices
     <div className="flex flex-col">
       {!props.headerImageUrl && <div className="h-8 md:hidden" />}
-      <AspectRatio
-        ratio={props.headerImageUrl ? 4 : 8}
-        className="max-sm:-mx-4 border-border border-b"
+      <div
+        className={cn(
+          "max-sm:-mx-4 border-border border-b",
+          props.headerImageUrl ? "aspect-[4/1]" : "aspect-[8/1]",
+        )}
       >
         {props.headerImageUrl && (
           // eslint-disable-next-line @next/next/no-img-element
@@ -32,7 +33,7 @@ export function ChainHeader(props: ChainHeaderProps) {
             className="h-full w-full object-cover object-center"
           />
         )}
-      </AspectRatio>
+      </div>
       {/* below header */}
       <div className="relative flex flex-row items-end justify-end">
         {/* chain logo */}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/chain-header.tsx

@@ -1,4 +1,4 @@
-import { AspectRatio, Center } from "@chakra-ui/react";
+import { Center } from "@chakra-ui/react";
 import { motion } from "framer-motion";
 import type { SlideStateProps } from "../shared";
 import { slides } from "../slides";
@@ -21,7 +21,7 @@ export const GraphicContainer: React.FC<SlideStateProps> = ({
   const Graphic = slides[slideIndex].graphic;
 
   return (
-    <AspectRatio ratio={{ base: 16 / 9, md: 1 }} w="100%" position="relative">
+    <div className="relative aspect-[16/9] w-full md:aspect-square">
       <Center
         as={motion.div}
         initial={`slide-${slideIndex}`}
@@ -33,6 +33,6 @@ export const GraphicContainer: React.FC<SlideStateProps> = ({
       >
         <Graphic slideIndex={slideIndex} setSlideIndex={setSlideIndex} />
       </Center>
-    </AspectRatio>
+    </div>
   );
 };

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

@@ -1,5 +1,4 @@
 import {
-  AspectRatio,
   Box,
   Flex,
   Modal,
@@ -87,14 +86,14 @@ export const GameShowcase = () => {
           >
             <ModalCloseButton />
           </Box>
-          <AspectRatio ratio={{ base: 16 / 9, md: 16 / 9 }} w="100%">
+          <div className="aspect-[16/9] w-full">
             <Box
               bg="#000"
               borderRadius={{ base: "md", md: "lg" }}
               as="iframe"
               src={selectedGame}
             />
-          </AspectRatio>
+          </div>
         </ModalContent>
       </Modal>
     </Flex>

apps/dashboard/src/components/hackathon/gaming/GameShowcase.tsx

@@ -1,4 +1,4 @@
-import { AspectRatio, GridItem, SimpleGrid } from "@chakra-ui/react";
+import { GridItem, SimpleGrid } from "@chakra-ui/react";
 import { themes } from "prism-react-renderer";
 import { HomePageCodeBlock } from "../CodeBlock";
 import { KeyFeatureLayout } from "./key-features/KeyFeatureLayout";
@@ -113,7 +113,7 @@ export const WithoutThirdwebSection: React.FC = () => {
     >
       <SimpleGrid columns={12} gap={8} w="full">
         <GridItem colSpan={{ base: 12, md: 6 }}>
-          <AspectRatio ratio={16 / 10} w="full">
+          <div className="aspect-[16/10] w-full">
             <HomePageCodeBlock
               darkTheme={darkTheme}
               color="white"
@@ -128,10 +128,10 @@ export const WithoutThirdwebSection: React.FC = () => {
               titleColor="gray.600"
               borderTopRadius={0}
             />
-          </AspectRatio>
+          </div>
         </GridItem>
         <GridItem colSpan={{ base: 12, md: 6 }}>
-          <AspectRatio ratio={16 / 10} w="full">
+          <div className="aspect-[16/10] w-full">
             <HomePageCodeBlock
               darkTheme={darkTheme}
               color="white"
@@ -146,7 +146,7 @@ export const WithoutThirdwebSection: React.FC = () => {
               titleColor="white"
               borderTopRadius={0}
             />
-          </AspectRatio>
+          </div>
         </GridItem>
       </SimpleGrid>
     </KeyFeatureLayout>

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

@@ -2,9 +2,9 @@
 
 import { Label } from "@/components/ui/label";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
+import { cn } from "@/lib/utils";
 import { useDashboardStorageUpload } from "@3rdweb-sdk/react/hooks/useDashboardStorageUpload";
 import {
-  AspectRatio,
   Box,
   ButtonGroup,
   Center,
@@ -74,22 +74,24 @@ export const IpfsUploadDropzone: React.FC = () => {
   });
   return (
     <Flex flexDir="column" gap={4}>
-      <AspectRatio
-        ratio={{
-          base: droppedFiles.length ? 1 : 8 / 4,
-          md: droppedFiles.length ? 16 / 9 : 36 / 9,
-        }}
-        w="100%"
+      <div
+        className={cn(
+          "w-full",
+          droppedFiles.length
+            ? "aspect-square md:aspect-[16/9]"
+            : "aspect-[2] md:aspect-[36/9]",
+        )}
       >
         {droppedFiles.length ? (
-          <Box border="2px solid" borderColor="borderColor" borderRadius="xl">
+          <div className="h-full rounded-xl border-2 border-border">
             <FileUpload files={droppedFiles} updateFiles={setDroppedFiles} />
-          </Box>
+          </div>
         ) : !address ? (
           <Center
             border="2px solid"
             borderColor="borderColor"
             borderRadius="xl"
+            h="full"
           >
             <Text
               size="label.lg"
@@ -148,7 +150,7 @@ export const IpfsUploadDropzone: React.FC = () => {
             }
           </Center>
         )}
-      </AspectRatio>
+      </div>
       <Flex flexDir="column" gap={{ base: 6, md: 3 }} />
     </Flex>
   );
@@ -232,7 +234,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ files, updateFiles }) => {
                 alignItems="center"
               >
                 <GridItem colSpan={5} rowSpan={2}>
-                  <AspectRatio ratio={1}>
+                  <div className="aspect-square">
                     <Box
                       rounded="lg"
                       overflow="hidden"
@@ -250,7 +252,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ files, updateFiles }) => {
                         client={client}
                       />
                     </Box>
-                  </AspectRatio>
+                  </div>
                 </GridItem>
                 <GridItem colSpan={16} rowSpan={1}>
                   <Heading size="label.md" as="label" noOfLines={2}>

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

@@ -1,16 +1,12 @@
-import {
-  AspectRatio,
-  type AspectRatioProps,
-  Stack,
-  VisuallyHidden,
-} from "@chakra-ui/react";
+import { cn } from "@/lib/utils";
+import { Stack, VisuallyHidden } from "@chakra-ui/react";
 
-export const IconLogo: React.FC<Omit<AspectRatioProps, "ratio">> = ({
+export const IconLogo: React.FC<{ extraClass?: string; color?: string }> = ({
   color,
-  ...props
+  extraClass,
 }) => {
   return (
-    <AspectRatio ratio={516 / 321} {...props}>
+    <div className={cn("aspect-[516/321]", extraClass || "")}>
       <svg viewBox="0 0 516 321" fill="none">
         <title>thirdweb</title>
         <g clipPath="url(#clip0_3:35)">
@@ -81,26 +77,7 @@ export const IconLogo: React.FC<Omit<AspectRatioProps, "ratio">> = ({
           </clipPath>
         </defs>
       </svg>
-    </AspectRatio>
-  );
-};
-
-const Wordmark: React.FC<Omit<AspectRatioProps, "ratio">> = ({
-  color = "var(--chakra-colors-wordmark)",
-  ...props
-}) => {
-  return (
-    <AspectRatio ratio={1377 / 267} {...props}>
-      <svg viewBox="0 0 1377 267" fill="none">
-        <title>thirdweb</title>
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M351.582 2C335.29 2 321.931 15.2034 321.931 32.0377C321.931 48.542 335.29 61.7454 351.582 61.7454C367.874 61.7454 381.233 48.542 381.233 32.0377C381.233 15.2034 367.874 2 351.582 2ZM377.649 76.9285H325.84V254.844H377.649V76.9285ZM23.4605 8.60203H73.9657V76.9296H112.741V124.462H73.9657V187.178C73.9657 196.42 81.1342 203.682 89.9318 203.682H112.415V254.185H89.9318C53.4378 254.185 23.4605 224.147 23.4605 186.848V124.132H0V76.5995H23.4605V8.60203ZM236.234 72.9686C212.774 72.9686 194.201 82.8711 187.032 98.3851V8.60203H135.224V254.515H187.032V154.83C187.032 134.034 200.392 119.511 219.291 119.511C238.515 119.511 249.268 132.054 249.268 153.179V254.845H301.076V146.577C301.076 100.366 277.616 72.9686 236.234 72.9686ZM451.613 76.5995V101.026C459.433 83.2012 478.332 72.9686 502.118 72.6385C505.703 72.6385 510.264 72.9686 515.804 73.6288V123.141C510.59 122.151 504.725 121.491 498.534 121.491C468.883 121.491 451.613 138.325 451.613 167.703V254.515H399.805V76.5995H451.613ZM661.455 100.036C656.242 84.5216 635.714 73.6288 609.321 73.6288C584.557 73.6288 563.703 82.541 547.085 100.366C530.793 117.86 522.322 139.976 522.322 165.722C522.322 191.469 530.793 213.255 547.085 231.409C563.703 248.904 584.557 257.816 609.321 257.816C635.714 257.816 656.242 246.923 661.455 231.409V254.845H713.264V8.60203H661.455V100.036ZM651.029 197.411C642.231 205.993 631.478 209.954 618.77 209.954C606.388 209.954 595.636 205.663 587.164 197.411C578.366 188.498 574.13 177.936 574.13 165.722C574.13 153.509 578.366 142.947 587.164 134.364C595.961 125.452 606.388 121.161 618.77 121.161C631.804 121.161 642.557 125.452 651.029 134.364C660.152 142.947 664.714 153.509 664.714 165.722C664.714 177.936 660.152 188.498 651.029 197.411ZM862.824 77.5887L909.745 162.09L941.352 76.9285H992.183L919.846 265.077L862.824 162.751L805.803 265.077L733.792 76.9285H784.623L815.904 162.09L862.824 77.5887ZM1077.55 72.6385C1050.83 72.6385 1028.35 81.2207 1010.76 98.3851C993.486 115.219 984.688 137.665 984.688 165.392V167.043C984.688 194.77 993.486 217.216 1010.76 234.05C1028.68 250.554 1051.49 259.136 1080.16 259.136C1106.88 259.136 1128.71 253.855 1145.33 242.962V197.08C1129.04 208.633 1108.18 214.245 1083.09 214.245C1055.72 214.245 1037.8 200.711 1036.82 179.586H1165.53C1166.18 174.305 1166.51 168.363 1166.51 162.422C1166.51 137.005 1158.03 115.88 1141.74 98.7152C1125.45 81.2207 1103.62 72.6385 1077.55 72.6385ZM1036.82 145.587C1037.15 137.335 1041.38 130.403 1049.2 124.792C1057.35 119.18 1066.47 116.21 1077.55 116.21C1098.08 116.21 1114.05 129.743 1114.05 145.587H1036.82ZM1290 73.6288C1314.76 73.6288 1335.62 82.541 1351.91 100.366C1368.53 118.19 1377 139.646 1377 165.392C1377 191.139 1368.53 212.925 1351.91 231.079C1335.62 248.574 1314.76 257.486 1290 257.486C1263.61 257.486 1243.08 246.593 1237.87 231.079V254.515H1186.06V8.60203H1237.87V100.036C1243.08 84.5216 1263.61 73.6288 1290 73.6288ZM1280.55 209.954C1292.93 209.954 1303.36 205.993 1312.16 197.411C1320.95 188.498 1325.19 177.936 1325.19 165.722C1325.19 153.509 1320.95 142.947 1312.16 134.364C1303.69 125.452 1292.93 121.161 1280.55 121.161C1267.84 121.161 1257.09 125.452 1247.97 134.364C1239.17 142.947 1234.61 153.509 1234.61 165.722C1234.61 177.936 1239.17 188.498 1247.97 197.411C1256.76 205.663 1267.52 209.954 1280.55 209.954Z"
-          fill={color as string}
-        />
-      </svg>
-    </AspectRatio>
+    </div>
   );
 };
 
@@ -115,18 +92,29 @@ export const Logo: React.FC<ILogoProps> = ({
   hideIcon,
   hideWordmark,
   forceShowWordMark,
-  color,
+  color = "var(--chakra-colors-wordmark)",
 }) => {
   return (
     <Stack as="h2" align="center" direction="row">
-      {hideIcon ?? <IconLogo w={[9, 9, 10]} flexShrink={0} />}
+      {hideIcon ?? <IconLogo extraClass="w-9 md:w-10 flex-shrink-0" />}
       {(hideWordmark && !forceShowWordMark) ?? (
-        <Wordmark
-          display={forceShowWordMark ? "block" : { base: "none", md: "block" }}
-          color={color}
-          w={[24, 24, 28]}
-          flexShrink={0}
-        />
+        <div
+          className={cn(
+            "aspect-[1377/267] w-24 flex-shrink-0 md:w-28",
+            forceShowWordMark ? "block" : "none md:block",
+          )}
+          style={color ? { color } : undefined}
+        >
+          <svg viewBox="0 0 1377 267" fill="none">
+            <title>thirdweb</title>
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M351.582 2C335.29 2 321.931 15.2034 321.931 32.0377C321.931 48.542 335.29 61.7454 351.582 61.7454C367.874 61.7454 381.233 48.542 381.233 32.0377C381.233 15.2034 367.874 2 351.582 2ZM377.649 76.9285H325.84V254.844H377.649V76.9285ZM23.4605 8.60203H73.9657V76.9296H112.741V124.462H73.9657V187.178C73.9657 196.42 81.1342 203.682 89.9318 203.682H112.415V254.185H89.9318C53.4378 254.185 23.4605 224.147 23.4605 186.848V124.132H0V76.5995H23.4605V8.60203ZM236.234 72.9686C212.774 72.9686 194.201 82.8711 187.032 98.3851V8.60203H135.224V254.515H187.032V154.83C187.032 134.034 200.392 119.511 219.291 119.511C238.515 119.511 249.268 132.054 249.268 153.179V254.845H301.076V146.577C301.076 100.366 277.616 72.9686 236.234 72.9686ZM451.613 76.5995V101.026C459.433 83.2012 478.332 72.9686 502.118 72.6385C505.703 72.6385 510.264 72.9686 515.804 73.6288V123.141C510.59 122.151 504.725 121.491 498.534 121.491C468.883 121.491 451.613 138.325 451.613 167.703V254.515H399.805V76.5995H451.613ZM661.455 100.036C656.242 84.5216 635.714 73.6288 609.321 73.6288C584.557 73.6288 563.703 82.541 547.085 100.366C530.793 117.86 522.322 139.976 522.322 165.722C522.322 191.469 530.793 213.255 547.085 231.409C563.703 248.904 584.557 257.816 609.321 257.816C635.714 257.816 656.242 246.923 661.455 231.409V254.845H713.264V8.60203H661.455V100.036ZM651.029 197.411C642.231 205.993 631.478 209.954 618.77 209.954C606.388 209.954 595.636 205.663 587.164 197.411C578.366 188.498 574.13 177.936 574.13 165.722C574.13 153.509 578.366 142.947 587.164 134.364C595.961 125.452 606.388 121.161 618.77 121.161C631.804 121.161 642.557 125.452 651.029 134.364C660.152 142.947 664.714 153.509 664.714 165.722C664.714 177.936 660.152 188.498 651.029 197.411ZM862.824 77.5887L909.745 162.09L941.352 76.9285H992.183L919.846 265.077L862.824 162.751L805.803 265.077L733.792 76.9285H784.623L815.904 162.09L862.824 77.5887ZM1077.55 72.6385C1050.83 72.6385 1028.35 81.2207 1010.76 98.3851C993.486 115.219 984.688 137.665 984.688 165.392V167.043C984.688 194.77 993.486 217.216 1010.76 234.05C1028.68 250.554 1051.49 259.136 1080.16 259.136C1106.88 259.136 1128.71 253.855 1145.33 242.962V197.08C1129.04 208.633 1108.18 214.245 1083.09 214.245C1055.72 214.245 1037.8 200.711 1036.82 179.586H1165.53C1166.18 174.305 1166.51 168.363 1166.51 162.422C1166.51 137.005 1158.03 115.88 1141.74 98.7152C1125.45 81.2207 1103.62 72.6385 1077.55 72.6385ZM1036.82 145.587C1037.15 137.335 1041.38 130.403 1049.2 124.792C1057.35 119.18 1066.47 116.21 1077.55 116.21C1098.08 116.21 1114.05 129.743 1114.05 145.587H1036.82ZM1290 73.6288C1314.76 73.6288 1335.62 82.541 1351.91 100.366C1368.53 118.19 1377 139.646 1377 165.392C1377 191.139 1368.53 212.925 1351.91 231.079C1335.62 248.574 1314.76 257.486 1290 257.486C1263.61 257.486 1243.08 246.593 1237.87 231.079V254.515H1186.06V8.60203H1237.87V100.036C1243.08 84.5216 1263.61 73.6288 1290 73.6288ZM1280.55 209.954C1292.93 209.954 1303.36 205.993 1312.16 197.411C1320.95 188.498 1325.19 177.936 1325.19 165.722C1325.19 153.509 1320.95 142.947 1312.16 134.364C1303.69 125.452 1292.93 121.161 1280.55 121.161C1267.84 121.161 1257.09 125.452 1247.97 134.364C1239.17 142.947 1234.61 153.509 1234.61 165.722C1234.61 177.936 1239.17 188.498 1247.97 197.411C1256.76 205.663 1267.52 209.954 1280.55 209.954Z"
+              fill={color}
+            />
+          </svg>
+        </div>
       )}
       <VisuallyHidden>thirdweb</VisuallyHidden>
     </Stack>

apps/dashboard/src/components/logo/index.tsx

@@ -1,5 +1,4 @@
 import {
-  AspectRatio,
   Flex,
   Modal,
   ModalBody,
@@ -39,9 +38,9 @@ export const OnboardingModal: ComponentWithChildren<OnboardingModalProps> = ({
       <ModalOverlay />
       <ModalContent className="!bg-background rounded-lg border border-border">
         <ModalBody p={8} as={Flex} gap={4} flexDir="column">
-          <AspectRatio ratio={1} w="40px">
+          <div className="aspect-square w-[40px]">
             <IconLogo />
-          </AspectRatio>
+          </div>
 
           <Flex flexDir="column" gap={8}>
             {children}