From 1dae74b9d20f97f2f269eb4ab53548d7f0753e91 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Mon, 7 Apr 2025 16:38:03 +0000
Subject: [PATCH] Dashboard: Update NFT token details page styles, reduce
 chakra usage (#6665)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on improving the UI components of the dashboard, enhancing the styling and structure of various elements, and adding new features like tooltips and breadcrumbs for better navigation.

### Detailed summary
- Changed `className` from `font-semibold` to `font-bold` in the `h1` element.
- Updated `NftProperty` component to use `div` instead of `Card`.
- Added `toolTip` property to `TabButtons`.
- Wrapped `Button` in `ToolTipLabel` for tooltips.
- Introduced `IPFSLinkGroup` component for displaying IPFS links.
- Enhanced `NFTName` and `NFTDescription` styling.
- Removed unnecessary imports and unused variables for cleaner code.

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

<!-- end pr-codex -->
---
 apps/dashboard/src/@/components/ui/tabs.tsx   |  45 +-
 .../_layout/metadata-header.tsx               |   2 +-
 .../nfts/[tokenId]/token-id.tsx               | 484 +++++++++---------
 .../nfts/components/nft-property.tsx          |  10 +-
 4 files changed, 280 insertions(+), 261 deletions(-)

diff --git a/apps/dashboard/src/@/components/ui/tabs.tsx b/apps/dashboard/src/@/components/ui/tabs.tsx
index 7bf4ab362b3..c672d2589e9 100644
--- a/apps/dashboard/src/@/components/ui/tabs.tsx
+++ b/apps/dashboard/src/@/components/ui/tabs.tsx
@@ -7,6 +7,7 @@ import { usePathname } from "next/navigation";
 import { useCallback, useRef, useState } from "react";
 import { ScrollShadow } from "./ScrollShadow/ScrollShadow";
 import { Button } from "./button";
+import { ToolTipLabel } from "./tooltip";
 
 export type TabLink = {
   name: string;
@@ -82,6 +83,7 @@ export function TabButtons(props: {
     isActive: boolean;
     isDisabled?: boolean;
     icon?: React.FC<{ className?: string }>;
+    toolTip?: string;
   }[];
   tabClassName?: string;
   activeTabClassName?: string;
@@ -111,26 +113,31 @@ export function TabButtons(props: {
         >
           {props.tabs.map((tab, index) => {
             return (
-              <Button
-                // biome-ignore lint/suspicious/noArrayIndexKey: tabs don't change order, so index is stable
-                key={index}
-                variant="ghost"
-                ref={tab.isActive ? activeTabRef : undefined}
-                className={cn(
-                  "relative inline-flex h-auto items-center gap-1.5 rounded-lg px-2 font-medium text-sm hover:bg-accent lg:px-3 lg:text-base",
-                  !tab.isActive &&
-                    "text-muted-foreground hover:text-foreground",
-                  tab.isDisabled && "cursor-not-allowed opacity-50",
-                  props.tabClassName,
-                  tab.isActive && props.activeTabClassName,
-                )}
-                onClick={!tab.isDisabled ? tab.onClick : undefined}
+              <ToolTipLabel
+                key={typeof tab.name === "string" ? tab.name : index}
+                label={tab.toolTip}
               >
-                {tab.icon && (
-                  <tab.icon className={cn("size-6", props.tabIconClassName)} />
-                )}
-                {tab.name}
-              </Button>
+                <Button
+                  variant="ghost"
+                  ref={tab.isActive ? activeTabRef : undefined}
+                  className={cn(
+                    "relative inline-flex h-auto items-center gap-1.5 rounded-lg px-2 font-medium text-sm hover:bg-accent lg:px-3 lg:text-base",
+                    !tab.isActive &&
+                      "text-muted-foreground hover:text-foreground",
+                    tab.isDisabled && "cursor-not-allowed opacity-50",
+                    props.tabClassName,
+                    tab.isActive && props.activeTabClassName,
+                  )}
+                  onClick={!tab.isDisabled ? tab.onClick : undefined}
+                >
+                  {tab.icon && (
+                    <tab.icon
+                      className={cn("size-6", props.tabIconClassName)}
+                    />
+                  )}
+                  {tab.name}
+                </Button>
+              </ToolTipLabel>
             );
           })}
         </div>
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx
index 213c2d50fc9..38fcc1e2977 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx
@@ -75,7 +75,7 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
         ) : (
           <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
             {data?.name && (
-              <h1 className="line-clamp-2 font-semibold text-2xl tracking-tight lg:text-3xl">
+              <h1 className="line-clamp-2 font-bold text-2xl tracking-tight lg:text-3xl">
                 {data.name}
               </h1>
             )}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx
index 578a2a69f0c..f04543bfdd7 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx
@@ -4,33 +4,31 @@ import { UnexpectedValueErrorMessage } from "@/components/blocks/error-fallbacks
 import { WalletAddress } from "@/components/blocks/wallet-address";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Badge } from "@/components/ui/badge";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Button } from "@/components/ui/button";
 import { CodeClient } from "@/components/ui/code/code.client";
+import { TabButtons } from "@/components/ui/tabs";
+import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
-import {
-  Box,
-  ButtonGroup,
-  Divider,
-  Flex,
-  GridItem,
-  IconButton,
-  SimpleGrid,
-  Tooltip,
-  useBreakpointValue,
-} from "@chakra-ui/react";
 import { useChainSlug } from "hooks/chains/chainSlug";
-import { ChevronLeftIcon, ExternalLinkIcon } from "lucide-react";
+import { ExternalLinkIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
-import type { ThirdwebContract } from "thirdweb";
+import type { NFT, ThirdwebClient, ThirdwebContract } from "thirdweb";
 import { getNFT as getErc721NFT } from "thirdweb/extensions/erc721";
 import { getNFT as getErc1155NFT } from "thirdweb/extensions/erc1155";
 import { useReadContract } from "thirdweb/react";
-import { Button, Card } from "tw-components";
 import { NFTMediaWithEmptyState } from "tw-components/nft-media";
-import { shortenString } from "utils/usedapp-external";
 import { NftProperty } from "../components/nft-property";
 import { useNFTDrawerTabs } from "./useNftDrawerTabs";
 
@@ -66,7 +64,6 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
   twAccount,
 }) => {
   const [tab, setTab] = useState("Details");
-  const isMobile = useBreakpointValue({ base: true, md: false });
   const router = useDashboardRouter();
   const chainId = contract.chain.id;
   const chainSlug = useChainSlug(chainId || 1);
@@ -89,15 +86,6 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
     },
   );
 
-  const tokenURIHttpLink = resolveSchemeWithErrorHandler({
-    client,
-    uri: nft?.tokenURI,
-  });
-  const nftImageLink = resolveSchemeWithErrorHandler({
-    client,
-    uri: nft?.metadata.image,
-  });
-
   if (isPending) {
     return (
       <div className="flex h-[400px] items-center justify-center">
@@ -123,230 +111,218 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
       : undefined,
   };
 
+  return (
+    <div>
+      <div className="flex flex-col gap-6 lg:flex-row">
+        <div className="relative aspect-square w-full shrink-0 self-start overflow-hidden bg-card lg:w-[350px]">
+          {/* border */}
+          <div className="absolute inset-0 z-0 rounded-lg border" />
+          {/* media */}
+          <NFTMediaWithEmptyState metadata={nftMetadata} className="z-10" />
+        </div>
+
+        <div className="flex w-full flex-col gap-6">
+          {/* breadcrumb + title */}
+          <div>
+            <Breadcrumb className="mb-3">
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbLink
+                    href={`/${chainSlug}/${contract.address}/nfts`}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      router.push(`/${chainSlug}/${contract.address}/nfts`);
+                    }}
+                  >
+                    NFTs
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbLink>#{tokenId}</BreadcrumbLink>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+
+            <div className="flex flex-col gap-1.5">
+              <NFTName value={nft.metadata.name} />
+              {nft.metadata?.description && (
+                <NFTDescription value={nft.metadata.description} />
+              )}
+            </div>
+          </div>
+
+          <TabButtons
+            tabClassName="!text-sm"
+            tabs={[
+              {
+                name: "Details",
+                onClick: () => setTab("Details"),
+                isActive: tab === "Details",
+                isDisabled: false,
+              },
+              ...tabs.map((tb) => ({
+                name: tb.title,
+                onClick: () => setTab(tb.title),
+                isActive: tab === tb.title,
+                isDisabled: tb.isDisabled,
+                toolTip: tb.isDisabled ? tb.disabledText : undefined,
+              })),
+            ].sort((a, b) => (a.isDisabled ? 1 : b.isDisabled ? -1 : 0))}
+          />
+
+          {/* tab contents */}
+          {tab === "Details" && <NFTDetailsTab nft={nft} client={client} />}
+
+          {tabs.map((tb) => {
+            return (
+              tb.title === tab && (
+                <div key={tb.title} className="w-full">
+                  {tb.children}
+                </div>
+              )
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+function NFTDetailsTab(props: {
+  nft: NFT;
+  client: ThirdwebClient;
+}) {
+  const { nft, client } = props;
   const properties = nft.metadata.attributes || nft.metadata.properties;
 
   return (
-    <Flex flexDir={{ base: "column", lg: "row" }} gap={6}>
-      <Card h="full" position="relative" minH="100px">
-        <Box w="50px" position="absolute" zIndex={1000} top={6} left={6}>
-          {/* TODO - replace this with breadcrumbs  */}
-          <Card p={1} bgColor="backgroundCardHighlight">
-            <IconButton
-              w="inherit"
-              variant="ghost"
-              onClick={() =>
-                router.push(`/${chainSlug}/${contract.address}/nfts`)
+    <div className="flex flex-col gap-8">
+      {/* common */}
+      <div className="flex flex-col gap-3">
+        <div className="grid grid-cols-1 items-center gap-x-8 gap-y-4 lg:grid-cols-[1fr_2fr]">
+          {/* token id */}
+          <div>
+            <p className="mb-1 text-muted-foreground text-sm">Token ID</p>
+            <CopyTextButton
+              textToCopy={nft.id?.toString()}
+              textToShow={
+                nft.id?.toString().length > 8
+                  ? `${nft.id.toString().slice(0, 4)}...${nft.id.toString().slice(-4)}`
+                  : nft.id?.toString()
               }
-              aria-label="Back"
-              icon={<ChevronLeftIcon className="size-6" />}
+              tooltip="Token ID"
+              copyIconPosition="right"
+              className="min-w-16 justify-between bg-card"
+            />
+          </div>
+
+          {/* owner */}
+          {nft.owner && (
+            <div>
+              <p className="mb-1 text-muted-foreground text-sm">Owner</p>
+              <WalletAddress
+                address={nft.owner}
+                className="h-auto rounded-full border bg-card px-2 py-1 pr-4 text-foreground text-sm"
+              />
+            </div>
+          )}
+
+          {/* type */}
+          <div>
+            <p className="mb-1 text-muted-foreground text-sm">Token Standard</p>
+            <Badge
+              variant="outline"
+              className="bg-card py-1 font-normal text-sm"
             >
-              Back
-            </IconButton>
-          </Card>
-        </Box>
-        <NFTMediaWithEmptyState
-          metadata={nftMetadata}
-          width={isMobile ? "100%" : "300px"}
-          height={isMobile ? "100%" : "300px"}
-        />
-      </Card>
-      <Flex flexDir="column" gap={6} w="full" px={2}>
-        <Flex flexDir="column" gap={1.5}>
-          <NFTName value={nft.metadata.name} />
-          {nft.metadata?.description && (
-            <NFTDescription value={nft.metadata.description} />
+              {nft.type}
+            </Badge>
+          </div>
+
+          {/* supply */}
+          {nft.type !== "ERC721" && (
+            <div className="w-full">
+              <p className="mb-1 text-muted-foreground text-sm">Supply</p>
+              <ToolTipLabel
+                label={nft.supply.toLocaleString("en-US")}
+                contentClassName="text-sm break-all"
+              >
+                <p className="max-w-[200px] truncate text-sm">
+                  {nft.supply.toLocaleString("en-US")}
+                </p>
+              </ToolTipLabel>
+            </div>
           )}
-        </Flex>
 
-        <Flex flexDir="column" gap={{ base: 0, md: 4 }}>
-          <Box
-            w="full"
-            overflow={{ base: "auto", md: "hidden" }}
-            pb={{ base: 4, md: 0 }}
-          >
-            <ButtonGroup size="sm" variant="ghost" spacing={2}>
-              <Button
-                type="button"
-                isActive={tab === "Details"}
-                _active={{
-                  bg: "bgBlack",
-                  color: "bgWhite",
-                }}
-                rounded="lg"
-                onClick={() => setTab("Details")}
+          {/* token uri */}
+          <div>
+            <p className="mb-1 text-muted-foreground text-sm">Token URI</p>
+            <IPFSLinkGroup
+              ipfsLink={nft.tokenURI}
+              tooltip="The URI of this NFT"
+              client={client}
+              httpsLinkTooltip="View URI"
+            />
+          </div>
+
+          {/* media uri */}
+          {nft.metadata.image && (
+            <div>
+              <p className="mb-1 text-muted-foreground text-sm">Media URI</p>
+              <IPFSLinkGroup
+                ipfsLink={nft.metadata.image}
+                tooltip="The media URI of this NFT"
+                client={client}
+                httpsLinkTooltip="View Media"
+              />
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* attributes */}
+      {properties ? (
+        <div>
+          <h3 className="mb-2 flex items-center gap-2 font-medium text-base">
+            Attributes
+            {Array.isArray(properties) && properties.length > 0 && (
+              <Badge
+                variant="outline"
+                className="bg-card px-2 text-muted-foreground"
               >
-                Details
-              </Button>
-              {tabs.map((tb) => (
-                <Tooltip
-                  key={tb.title}
-                  p={0}
-                  bg="transparent"
-                  boxShadow="none"
-                  label={
-                    tb.isDisabled ? (
-                      <Card py={2} px={4} bgColor="backgroundHighlight">
-                        <p>{tb.disabledText}</p>
-                      </Card>
-                    ) : (
-                      ""
-                    )
-                  }
-                >
-                  <Button
-                    isDisabled={tb.isDisabled}
-                    type="button"
-                    isActive={tab === tb.title}
-                    _active={{
-                      bg: "bgBlack",
-                      color: "bgWhite",
-                    }}
-                    rounded="lg"
-                    onClick={() => setTab(tb.title)}
-                  >
-                    {tb.title}
-                  </Button>
-                </Tooltip>
-              ))}
-            </ButtonGroup>
-          </Box>
-          <Divider />
-        </Flex>
-
-        {tab === "Details" && (
-          <Flex flexDir="column" gap={4}>
-            <Card as={Flex} flexDir="column" gap={3}>
-              <SimpleGrid rowGap={3} columns={12} placeItems="center left">
-                <GridItem colSpan={4}>
-                  <p className="font-semibold">Token ID</p>
-                </GridItem>
-                <GridItem colSpan={8}>
-                  <CopyTextButton
-                    textToCopy={nft.id?.toString()}
-                    textToShow={
-                      nft.id?.toString().length > 8
-                        ? `${nft.id.toString().slice(0, 4)}...${nft.id.toString().slice(-4)}`
-                        : nft.id?.toString()
-                    }
-                    tooltip="Token ID"
-                    copyIconPosition="right"
-                  />
-                </GridItem>
-
-                {nft.owner && (
-                  <>
-                    <GridItem colSpan={4}>
-                      <p className="font-semibold">Owner</p>
-                    </GridItem>
-                    <GridItem colSpan={8}>
-                      <WalletAddress address={nft.owner} />
-                    </GridItem>
-                  </>
-                )}
-                <GridItem colSpan={4}>
-                  <p className="font-semibold">Token Standard</p>
-                </GridItem>
-                <GridItem colSpan={8}>{nft.type}</GridItem>
-                {nft.type !== "ERC721" && (
-                  <>
-                    <GridItem colSpan={4}>
-                      <p className="font-semibold">Supply</p>
-                    </GridItem>
-                    <GridItem colSpan={8}>
-                      <p>{nft.supply.toLocaleString("en-US")}</p>
-                    </GridItem>
-                  </>
-                )}
-                <GridItem colSpan={4}>
-                  <p className="font-semibold">Token URI</p>
-                </GridItem>
-                <GridItem
-                  colSpan={8}
-                  className="flex flex-row items-center gap-1"
-                >
-                  <CopyTextButton
-                    textToCopy={nft.tokenURI}
-                    textToShow={shortenString(nft.tokenURI)}
-                    tooltip="The URI of this NFT"
-                    copyIconPosition="right"
-                  />
-                  {tokenURIHttpLink && (
-                    <Button variant="ghost" size="sm">
-                      <Link href={tokenURIHttpLink} target="_blank">
-                        <ExternalLinkIcon className="size-4" />
-                      </Link>
-                    </Button>
-                  )}
-                </GridItem>
-                {nft.metadata.image && (
-                  <>
-                    <GridItem colSpan={4}>
-                      <p className="font-semibold">Media URI</p>
-                    </GridItem>
-                    <GridItem
-                      colSpan={8}
-                      className="flex flex-row items-center gap-1"
-                    >
-                      <CopyTextButton
-                        textToCopy={nft.metadata.image}
-                        textToShow={shortenString(nft.metadata.image)}
-                        tooltip="The media URI of this NFT"
-                        copyIconPosition="right"
-                      />
-                      {nftImageLink && (
-                        <Button variant="ghost" size="sm">
-                          <Link href={nftImageLink} target="_blank">
-                            <ExternalLinkIcon className="size-4" />
-                          </Link>
-                        </Button>
-                      )}
-                    </GridItem>
-                  </>
-                )}
-              </SimpleGrid>
-            </Card>
-            {properties ? (
-              <Card as={Flex} flexDir="column" gap={4}>
-                <p className="font-semibold">Attributes</p>
-                {Array.isArray(properties) &&
-                String(properties[0]?.value) !== "undefined" ? (
-                  <SimpleGrid columns={{ base: 2, md: 4 }} gap={2}>
-                    {/* biome-ignore lint/suspicious/noExplicitAny: FIXME */}
-                    {properties.map((property: any, idx) => (
-                      // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-                      <NftProperty key={idx} property={property} />
-                    ))}
-                  </SimpleGrid>
-                ) : (
-                  <CodeClient
-                    code={JSON.stringify(properties, null, 2) || ""}
-                    lang="json"
-                  />
-                )}
-              </Card>
-            ) : null}
-          </Flex>
-        )}
-        {tabs.map((tb) => {
-          return (
-            tb.title === tab && (
-              <Flex key={tb.title} px={0} w="full">
-                {tb.children}
-              </Flex>
-            )
-          );
-        })}
-      </Flex>
-    </Flex>
+                {properties.length}
+              </Badge>
+            )}
+          </h3>
+          <div>
+            {Array.isArray(properties) &&
+            String(properties[0]?.value) !== "undefined" ? (
+              <div className="grid grid-cols-2 gap-3 lg:grid-cols-3">
+                {/* biome-ignore lint/suspicious/noExplicitAny: FIXME */}
+                {properties.map((property: any, idx) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
+                  <NftProperty key={idx} property={property} />
+                ))}
+              </div>
+            ) : (
+              <CodeClient
+                code={JSON.stringify(properties, null, 2) || ""}
+                lang="json"
+              />
+            )}
+          </div>
+        </div>
+      ) : null}
+    </div>
   );
-};
+}
 
 function NFTName(props: {
   value: unknown;
 }) {
   if (typeof props.value === "string") {
     return (
-      <h2 className="font-semibold text-lg tracking-tight"> {props.value}</h2>
+      <h2 className="font-bold text-3xl tracking-tight"> {props.value}</h2>
     );
   }
 
@@ -360,11 +336,49 @@ function NFTName(props: {
   );
 }
 
+function IPFSLinkGroup(props: {
+  ipfsLink: string;
+  tooltip: string;
+  client: ThirdwebClient;
+  httpsLinkTooltip: string;
+}) {
+  const httpLink = resolveSchemeWithErrorHandler({
+    client: props.client,
+    uri: props.ipfsLink,
+  });
+
+  return (
+    <div className="flex flex-row items-center gap-1.5">
+      <CopyTextButton
+        textToCopy={props.ipfsLink}
+        textToShow={props.ipfsLink}
+        tooltip={props.tooltip}
+        copyIconPosition="right"
+        className="max-w-[200px] truncate bg-card"
+      />
+      {httpLink && (
+        <ToolTipLabel label={props.httpsLinkTooltip}>
+          <Button
+            variant="outline"
+            size="sm"
+            asChild
+            className="size-[34px] rounded-full bg-card p-0 text-muted-foreground"
+          >
+            <Link href={httpLink} target="_blank">
+              <ExternalLinkIcon className="size-3" />
+            </Link>
+          </Button>
+        </ToolTipLabel>
+      )}
+    </div>
+  );
+}
+
 function NFTDescription(props: {
   value: unknown;
 }) {
   if (typeof props.value === "string") {
-    return <p className="text-muted-foreground"> {props.value}</p>;
+    return <p className="text-muted-foreground text-sm"> {props.value}</p>;
   }
 
   return (
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/nft-property.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/nft-property.tsx
index b1649327ca8..72593ec36b5 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/nft-property.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/nft-property.tsx
@@ -1,5 +1,3 @@
-import { Card } from "@/components/ui/card";
-
 interface NftPropertyProps {
   // biome-ignore lint/suspicious/noExplicitAny: FIXME
   property: any;
@@ -7,17 +5,17 @@ interface NftPropertyProps {
 
 export const NftProperty: React.FC<NftPropertyProps> = ({ property }) => {
   return (
-    <Card className="flex flex-col gap-2 p-3">
+    <div className="rounded-lg border bg-card p-3 text-sm">
       {property?.trait_type && (
-        <p className="text-center text-link-foreground text-sm leading-[1.2]">
+        <p className="mb-0.5 text-muted-foreground text-sm">
           {property?.trait_type}
         </p>
       )}
-      <p className="text-center text-muted-foreground text-sm">
+      <p className="text-foreground text-sm">
         {typeof property?.value === "object"
           ? JSON.stringify(property?.value || {})
           : property?.value}
       </p>
-    </Card>
+    </div>
   );
 };