[PRO-125] Dashboard: Update token creation modal UI

apps/dashboard/src/@/components/ui/dialog.tsx

@@ -42,7 +42,7 @@ const DialogContent = React.forwardRef<
       <DialogOverlay className={dialogOverlayClassName} />
       <DialogPrimitive.Content
         className={cn(
-          "fixed z-50 grid w-full gap-4 rounded-t-xl border border-border bg-background p-6 shadow-lg duration-300 md:max-w-lg md:rounded-lg",
+          "fixed z-50 grid w-full gap-4 rounded-t-xl border border-border bg-background p-6 shadow-lg duration-300 md:max-w-lg md:rounded-xl",
           // on mobile - put the dialog at the bottom of the screen, animate - slide up and fade in
           "right-0 bottom-0 left-0",
           "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/cards.tsx → apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/(general)/cards.tsx

@@ -1,8 +1,10 @@
 "use client";
 
 import { Button } from "@workspace/ui/components/button";
+import { Img } from "@workspace/ui/components/img";
 import { ArrowDownToLineIcon, CoinsIcon, ImagesIcon } from "lucide-react";
 import Link from "next/link";
+import { useTheme } from "next-themes";
 import { useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
 import {
@@ -63,19 +65,27 @@ export function Cards(props: {
   projectId: string;
 }) {
   return (
-    <div className="flex flex-col gap-4">
+    <div className="grid lg:grid-cols-2 gap-4">
       <CardLink
-        description="Launch your own ERC-20 coin"
+        images={{
+          light: "/assets/tokens/coin-light.png",
+          dark: "/assets/tokens/coin-dark.png",
+        }}
+        description="Launch an ERC-20 coin with various pricing strategies"
         href={`/team/${props.teamSlug}/${props.projectSlug}/tokens/create/token`}
         icon={CoinsIcon}
-        title="Create Coin"
+        title="Coin"
       />
 
       <CardLink
-        description="Launch your own NFT collection"
+        images={{
+          light: "/assets/tokens/nft-light.png",
+          dark: "/assets/tokens/nft-dark.png",
+        }}
+        description="Launch an ERC-721 or ERC-1155 NFT collection"
         href={`/team/${props.teamSlug}/${props.projectSlug}/tokens/create/nft`}
         icon={ImagesIcon}
-        title="Create NFT Collection"
+        title="NFT Collection"
       />
     </div>
   );
@@ -87,15 +97,20 @@ function CardLink(props: {
   href: string | undefined;
   onClick?: () => void;
   icon: React.FC<{ className?: string }>;
+  images: {
+    dark: string;
+    light: string;
+  };
 }) {
   const { onClick } = props;
   const isClickable = !!onClick || !!props.href;
+  const { resolvedTheme } = useTheme();
 
   return (
     // biome-ignore lint/a11y/noStaticElementInteractions: FIXME
     <div
       className={cn(
-        "relative flex flex-col rounded-lg border bg-card p-4",
+        "relative flex flex-col rounded-xl border bg-card p-4",
         isClickable && "cursor-pointer hover:border-active-border ",
       )}
       onClick={onClick}
@@ -107,13 +122,23 @@ function CardLink(props: {
       role={onClick ? "button" : undefined}
       tabIndex={onClick ? 0 : undefined}
     >
-      <div className="mb-4 flex">
-        <div className="flex items-center justify-center rounded-full border p-2">
-          <props.icon className="size-4 text-muted-foreground" />
+      <div className="mb-4">
+        <div className="flex lg:hidden">
+          <div className="flex items-center justify-center rounded-full border p-2">
+            <props.icon className="size-4 text-muted-foreground" />
+          </div>
         </div>
+
+        <Img
+          src={
+            resolvedTheme === "light" ? props.images.light : props.images.dark
+          }
+          alt={props.title}
+          className="hidden lg:block"
+        />
       </div>
 
-      <h3 className="mb-0.5 font-semibold text-lg tracking-tight">
+      <h3 className="mb-0.5 font-semibold text-xl tracking-tight">
         {props.href ? (
           <Link className="before:absolute before:inset-0" href={props.href}>
             {props.title}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/(general)/layout.tsx

@@ -8,14 +8,15 @@ import { ProjectPage } from "@/components/blocks/project-page/project-page";
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { TokenIcon } from "@/icons/TokenIcon";
 import { loginRedirect } from "@/utils/redirects";
-import { Cards, ImportTokenButton } from "../cards";
+import { Cards, ImportTokenButton } from "./cards";
 
 export default async function Layout(props: {
   params: Promise<{ team_slug: string; project_slug: string }>;
@@ -63,9 +64,12 @@ export default async function Layout(props: {
                     Create Token
                   </Button>
                 </DialogTrigger>
-                <DialogContent className="!max-w-md">
+                <DialogContent className="!max-w-2xl">
                   <DialogHeader>
                     <DialogTitle>Create Token</DialogTitle>
+                    <DialogDescription>
+                      Launch your own ERC-20 coin or NFT collection
+                    </DialogDescription>
                   </DialogHeader>
                   <Cards
                     client={client}