[PRO-98] Update Project FTUX UI

apps/dashboard/src/@/components/blocks/full-width-sidebar-layout.tsx

@@ -67,7 +67,7 @@ export function FullWidthSidebarLayout(props: {
       )}
     >
       {/* left - sidebar */}
-      <Sidebar className="pt-2" collapsible="icon" side="left">
+      <Sidebar collapsible="icon" side="left">
         <SidebarContent className="p-2">
           <RenderSidebarMenu links={contentSidebarLinks} />
         </SidebarContent>

apps/dashboard/src/@/components/blocks/project-page/project-page-header.tsx

@@ -66,13 +66,16 @@ export type ProjectPageHeaderProps = {
     href: string;
   };
 
+  className?: string;
   // TODO: add task card component
   task?: never;
 };
 
 export function ProjectPageHeader(props: ProjectPageHeaderProps) {
   return (
-    <header className="container max-w-7xl py-6 relative">
+    <header
+      className={cn("container max-w-7xl py-6 relative", props.className)}
+    >
       {/* top row */}
       <div className="flex justify-between items-start mb-4">
         {/* left - icon */}

apps/dashboard/src/@/components/blocks/project-page/project-page.tsx

@@ -13,13 +13,19 @@ type ProjectPageProps = {
   header: ProjectPageHeaderProps;
   footer?: ProjectPageFooterProps;
   tabs?: TabPathLink[];
+  containerClassName?: string;
 };
 
 export function ProjectPage(props: React.PropsWithChildren<ProjectPageProps>) {
   return (
     <div className="flex flex-col grow">
       <div className={cn(!props.tabs && "border-b")}>
-        <ProjectPageHeader {...props.header} />
+        <ProjectPageHeader
+          {...props.header}
+          className={cn(
+            props.tabs && props.tabs.length > 0 ? "pt-8 pb-6" : "py-8",
+          )}
+        />
         {props.tabs && (
           <TabPathLinks
             scrollableClassName="container max-w-7xl"
@@ -28,7 +34,11 @@ export function ProjectPage(props: React.PropsWithChildren<ProjectPageProps>) {
         )}
       </div>
 
-      <main className="container max-w-7xl pt-6">{props.children}</main>
+      <main
+        className={cn("container max-w-7xl pt-6", props.containerClassName)}
+      >
+        {props.children}
+      </main>
       <div className="h-20" />
       {props.footer && (
         <div className="border-t mt-auto">

apps/dashboard/src/@/icons/brand-icons/ExpoIcon.tsx

@@ -0,0 +1,21 @@
+export function ExpoIcon(props: { className?: string }) {
+  return (
+    <svg
+      width="800px"
+      height="800px"
+      viewBox="0 -12.5 256 256"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      preserveAspectRatio="xMidYMid"
+      className={props.className}
+      aria-hidden="true"
+    >
+      <g>
+        <path
+          d="M121.309004,84.6732585 C123.402504,81.5874152 125.694292,81.1950171 127.553451,81.1950171 C129.41261,81.1950171 132.509843,81.5874152 134.604162,84.6732585 C151.106348,107.339593 178.345607,152.492 198.439108,185.798721 C211.542532,207.519499 221.6069,224.201947 223.671721,226.324944 C231.422996,234.294992 242.053551,229.327949 248.230809,220.287799 C254.312201,211.387762 256.000111,205.138399 256.000111,198.471155 C256.000111,193.930186 167.895315,30.0714244 159.022317,16.4322117 C150.48936,3.31359639 147.710044,0 133.105527,0 L122.176721,0 C107.615631,0 105.511479,3.31359639 96.9777022,16.4322117 C88.1055238,30.0714244 0.0001105152,193.930186 0.0001105152,198.471155 C0.0001105152,205.138399 1.68839227,211.387762 7.76991495,220.287799 C13.9471241,229.327949 24.5775965,234.294992 32.3286259,226.324944 C34.3936934,224.201947 44.4580605,207.519499 57.5616485,185.798721 C77.654822,152.492 104.806818,107.339593 121.309004,84.6732585 Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+}

apps/dashboard/src/@/icons/brand-icons/NextjsIcon.tsx

@@ -0,0 +1,59 @@
+export function NextjsIcon(props: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      data-testid="geist-icon"
+      strokeLinejoin="round"
+      style={{
+        color: "currentColor",
+      }}
+      viewBox="3 3 10 10"
+      aria-hidden="true"
+      className={props.className}
+    >
+      <g clipPath="url(#clip0_53_108)">
+        <path
+          d="M10.63 11V5"
+          stroke="url(#paint0_linear_53_108vsxrmxu21)"
+          strokeWidth={1.25}
+          strokeMiterlimit={Math.SQRT2}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M5.995 5.00087V5H4.745V11H5.995V6.96798L12.3615 14.7076C12.712 14.4793 13.0434 14.2242 13.353 13.9453L5.99527 5.00065L5.995 5.00087Z"
+          fill="url(#paint1_linear_53_108vsxrmxu21)"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="paint0_linear_53_108vsxrmxu21"
+          x1={11.13}
+          y1={5}
+          x2={11.13}
+          y2={11}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="currentColor" />
+          <stop offset={0.609375} stopColor="currentColor" stopOpacity={0.57} />
+          <stop offset={0.796875} stopColor="currentColor" stopOpacity={0} />
+          <stop offset={1} stopColor="currentColor" stopOpacity={0} />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_53_108vsxrmxu21"
+          x1={9.9375}
+          y1={9.0625}
+          x2={13.5574}
+          y2={13.3992}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="currentColor" />
+          <stop offset={1} stopColor="currentColor" stopOpacity={0} />
+        </linearGradient>
+        <clipPath id="clip0_53_108">
+          <rect width={16} height={16} fill="red" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

apps/dashboard/src/@/icons/brand-icons/NodeJSIcon.tsx

@@ -0,0 +1,20 @@
+export function NodeJSIcon(props: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      className={props.className}
+    >
+      <path
+        d="M17.1725 2.29872C16.4627 1.89953 15.5373 1.90132 14.8269 2.29872C11.2689 4.26227 7.71082 6.22641 4.15216 8.18906C3.45969 8.55335 2.99264 9.29698 3.00009 10.0688V21.9328C2.99509 22.7197 3.48622 23.4705 4.19655 23.8298C5.21871 24.3736 6.2118 24.9726 7.25244 25.4802C8.45451 26.0709 9.95843 26.2015 11.1752 25.5855C12.1629 25.075 12.6016 23.9395 12.6003 22.896C12.6083 18.9806 12.6016 15.0651 12.6034 11.1496C12.6269 10.9756 12.4962 10.7896 12.3064 10.7938C11.8517 10.7866 11.3964 10.7896 10.9417 10.7926C10.7699 10.7764 10.6022 10.9191 10.6152 11.0918C10.6091 14.982 10.6164 18.8734 10.6115 22.7642C10.6214 23.3024 10.2578 23.8196 9.73913 24.0014C8.5412 24.4213 5.12198 22.2012 5.12198 22.2012C4.9965 22.1431 4.91682 22.007 4.92912 21.8718C4.92912 17.9576 4.92973 14.0433 4.92912 10.1297C4.91187 9.97191 5.00912 9.8298 5.15402 9.76538C8.70033 7.8134 12.2448 5.85654 15.7911 3.90336C15.9143 3.82115 16.086 3.8214 16.2089 3.90396C19.7552 5.85654 23.3003 7.81161 26.8472 9.76368C26.9926 9.828 27.0857 9.9725 27.0709 10.1297C27.0703 14.0433 27.0721 17.9576 27.0697 21.8713C27.0802 22.0098 27.0086 22.144 26.8793 22.2048C23.3661 24.1462 19.8129 26.025 16.3315 28.0228C16.1796 28.1099 16.0075 28.2086 15.8373 28.1126C14.9218 27.6062 14.0174 27.0801 13.1049 26.5688C13.0057 26.5069 12.8794 26.4803 12.7759 26.5496C12.3668 26.7652 11.982 26.9398 11.5122 27.1258C10.8524 27.387 10.9578 27.4938 11.5529 27.8405C12.62 28.4444 13.6889 29.0459 14.756 29.6504C15.4585 30.0888 16.4024 30.12 17.1275 29.7149C20.6861 27.7538 24.2436 25.7904 27.8029 23.8293C28.5113 23.468 29.0049 22.7202 28.9999 21.9327V10.0688C29.0068 9.31264 28.5576 8.58227 27.886 8.21259C24.3156 6.23947 20.7435 4.27064 17.1725 2.29872Z"
+        fill="currentColor"
+      />
+      <path
+        d="M22.5419 11.2062C21.1452 10.459 19.4836 10.4192 17.9315 10.5169C16.8102 10.6277 15.6309 10.9371 14.814 11.7409C13.9761 12.5489 13.7937 13.8537 14.1917 14.9085C14.4769 15.6539 15.1948 16.1386 15.9372 16.395C16.8935 16.7326 17.8979 16.837 18.9026 16.9414C19.819 17.0366 20.7357 17.1319 21.6165 17.4042C21.9763 17.5234 22.3953 17.7058 22.5055 18.0973C22.6073 18.5609 22.4957 19.0998 22.1193 19.4219C20.9237 20.3682 17.5979 20.2232 16.4166 19.4784C15.939 19.1611 15.7332 18.5994 15.6495 18.0641C15.6402 17.8973 15.5059 17.7443 15.3248 17.757C14.8713 17.7516 14.4178 17.7528 13.9643 17.7564C13.8061 17.7431 13.6416 17.8557 13.6329 18.0172C13.5397 20.4689 15.7914 21.5377 17.9039 21.773C19.1108 21.888 20.3442 21.8814 21.5327 21.6224C22.4261 21.419 23.3219 21.0444 23.9369 20.3563C24.6953 19.52 24.8444 18.2749 24.5043 17.2332C24.2443 16.4559 23.5012 15.9573 22.7416 15.7008C21.7086 15.3466 20.4844 15.1562 19.5488 15.0671C18.1889 14.9376 16.5729 14.9905 16.188 14.0969C16.0345 13.629 16.1651 13.048 16.5951 12.7602C17.7328 11.9885 20.0483 12.091 21.2265 12.6675C21.7675 12.9384 22.081 13.4948 22.2104 14.0565C22.2344 14.2215 22.3454 14.3937 22.5364 14.3865C22.9868 14.3955 23.4372 14.3889 23.8875 14.3895C24.0422 14.4003 24.2116 14.313 24.2418 14.1546C24.2227 12.9806 23.6232 11.7788 22.5419 11.2062Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

apps/dashboard/src/@/icons/brand-icons/ViteIcon.tsx

@@ -0,0 +1,23 @@
+export function ViteIcon(props: { className?: string }) {
+  return (
+    <svg
+      viewBox="-0.5 0 257 257"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      preserveAspectRatio="xMidYMid"
+      aria-hidden="true"
+      className={props.className}
+    >
+      <g>
+        <path
+          d="M255.152904,37.937763 L134.896865,252.97646 C132.413943,257.416178 126.035075,257.442321 123.5149,253.02417 L0.87443175,37.9584812 C-1.87111536,33.1438084 2.24595371,27.3119153 7.70191187,28.2871109 L128.086639,49.8052023 C128.854587,49.9424525 129.640835,49.9411454 130.408783,49.8012155 L248.276014,28.3179595 C253.713738,27.3268821 257.850198,33.1136134 255.152904,37.937763 Z"
+          fill="currentColor"
+        />
+        <path
+          d="M185.432401,0.0631038902 L96.4393502,17.500942 C94.9766549,17.7875335 93.8936852,19.0270992 93.8054529,20.5146956 L88.3311293,112.971419 C88.2023755,115.149123 90.2023075,116.839261 92.3277254,116.349082 L117.10466,110.630976 C119.422882,110.096354 121.517582,112.138114 121.041128,114.469407 L113.67994,150.515893 C113.184532,152.941955 115.462232,155.016394 117.831433,154.29681 L133.134834,149.647295 C135.507302,148.927059 137.786963,151.00738 137.285019,153.435402 L125.586724,210.056351 C124.854723,213.598061 129.565674,215.529368 131.530313,212.49287 L132.842687,210.464834 L205.359174,65.745575 C206.573511,63.3224548 204.479465,60.5594769 201.818118,61.0730542 L176.31441,65.9952397 C173.91776,66.4573155 171.878614,64.2253653 172.555061,61.8805431 L189.2009,4.17570253 C189.878001,1.82692623 187.831665,-0.406957894 185.432401,0.0631038902 Z"
+          fill="hsl(var(--background))"
+        />
+      </g>
+    </svg>
+  );
+}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/components/server/products.ts

@@ -1,7 +1,7 @@
+import { BotIcon } from "lucide-react";
 import { ConnectSDKIcon } from "@/icons/ConnectSDKIcon";
 import { ContractIcon } from "@/icons/ContractIcon";
 import { EngineIcon } from "@/icons/EngineIcon";
-import { NebulaIcon } from "@/icons/NebulaIcon";
 import { PayIcon } from "@/icons/PayIcon";
 import { RPCIcon } from "@/icons/RPCIcon";
 import { SmartAccountIcon } from "@/icons/SmartAccountIcon";
@@ -52,7 +52,7 @@ export const products = [
   },
   {
     description: "The most powerful AI for interacting with the blockchain",
-    icon: NebulaIcon,
+    icon: BotIcon,
     id: "nebula",
     link: "https://thirdweb.com/ai",
     name: "thirdweb AI",

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/analytics/chart/AiTokenUsageChartCard.tsx

@@ -1,11 +1,11 @@
 "use client";
 import { format } from "date-fns";
+import { BotIcon } from "lucide-react";
 import { useMemo } from "react";
 import { ThirdwebBarChart } from "@/components/blocks/charts/bar-chart";
 import { DocLink } from "@/components/blocks/DocLink";
 import { ExportToCSVButton } from "@/components/blocks/ExportToCSVButton";
 import type { ChartConfig } from "@/components/ui/chart";
-import { NebulaIcon } from "@/icons/NebulaIcon";
 import type { AIUsageStats } from "@/types/analytics";
 
 type ChartData = Record<string, number> & {
@@ -106,7 +106,7 @@ function AiTokenUsageEmptyChartState() {
       </span>
       <div className="flex max-w-md flex-wrap items-center justify-center gap-x-6 gap-y-4">
         <DocLink
-          icon={NebulaIcon}
+          icon={BotIcon}
           label="Get Started"
           link="https://portal.thirdweb.com/ai/chat"
         />

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/analytics/page.tsx

@@ -1,3 +1,4 @@
+import { BotIcon } from "lucide-react";
 import { redirect } from "next/navigation";
 import { ResponsiveSearchParamsProvider } from "responsive-rsc";
 import { getAuthToken } from "@/api/auth-token";
@@ -6,7 +7,6 @@ import type { DurationId } from "@/components/analytics/date-range-selector";
 import { ResponsiveTimeFilters } from "@/components/analytics/responsive-time-filters";
 import { ProjectPage } from "@/components/blocks/project-page/project-page";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
-import { NebulaIcon } from "@/icons/NebulaIcon";
 import { getFiltersFromSearchParams } from "@/lib/time";
 import { loginRedirect } from "@/utils/redirects";
 import { AiAnalytics } from "./chart";
@@ -58,7 +58,7 @@ export default async function Page(props: {
     <ResponsiveSearchParamsProvider value={searchParams}>
       <ProjectPage
         header={{
-          icon: NebulaIcon,
+          icon: BotIcon,
           client,
           title: "AI Analytics",
           description: "Track your AI app usage and performance",

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/ChatSidebar.tsx

@@ -1,5 +1,6 @@
 "use client";
 import {
+  BotIcon,
   ChartLineIcon,
   ChevronDownIcon,
   ChevronRightIcon,
@@ -25,7 +26,6 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { DynamicHeight } from "@/components/ui/DynamicHeight";
 import { TabButtons } from "@/components/ui/tabs";
-import { NebulaIcon } from "@/icons/NebulaIcon";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { cn } from "@/lib/utils";
 import type { TruncatedSessionInfo } from "../api/types";
@@ -52,7 +52,7 @@ export function ChatSidebar(props: {
     <div className="flex h-full flex-col">
       <div className="flex items-center justify-start gap-3 p-4 lg:justify-between">
         <div className="flex items-center gap-2">
-          <NebulaIcon aria-label="AI" className="size-6 text-foreground" />
+          <BotIcon aria-label="AI" className="size-6 text-foreground" />
           <span className="font-medium text-lg">thirdweb AI</span>
         </div>
 

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/Chats.tsx

@@ -1,10 +1,9 @@
 import { MarkdownRenderer } from "@workspace/ui/components/markdown-renderer";
 import { ScrollShadow } from "@workspace/ui/components/scroll-shadow";
-import { AlertCircleIcon } from "lucide-react";
+import { AlertCircleIcon, BotIcon } from "lucide-react";
 import { useEffect, useRef } from "react";
 import type { ThirdwebClient } from "thirdweb";
 import type { Project } from "@/api/project/projects";
-import { NebulaIcon } from "@/icons/NebulaIcon";
 import { cn } from "@/lib/utils";
 import type {
   NebulaSwapData,
@@ -238,11 +237,11 @@ function RenderMessage(props: {
           )}
         >
           {message.type === "presence" && (
-            <NebulaIcon className="size-5 text-muted-foreground" />
+            <BotIcon className="size-5 text-muted-foreground" />
           )}
 
           {message.type === "assistant" && (
-            <NebulaIcon className="size-5 text-muted-foreground" />
+            <BotIcon className="size-5 text-muted-foreground" />
           )}
 
           {message.type === "error" && (

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/EmptyStateChatPageContent.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { ArrowUpRightIcon, InfoIcon } from "lucide-react";
+import { ArrowUpRightIcon, BotIcon, InfoIcon } from "lucide-react";
 import type { ThirdwebClient } from "thirdweb";
 import { Button } from "@/components/ui/button";
-import { NebulaIcon } from "@/icons/NebulaIcon";
 import { cn } from "@/lib/utils";
 import type { NebulaContext, NebulaUserMessage } from "../api/types";
 import { examplePrompts } from "../data/examplePrompts";
@@ -33,7 +32,7 @@ export function EmptyStateChatPageContent(props: {
         <div className="flex justify-center">
           <div className="rounded-full border-[1.5px] border-primary-foreground/20 bg-[hsl(var(--primary-foreground)/5%)] p-1">
             <div className="rounded-full border-[1.5px] border-primary-foreground/40 bg-[hsl(var(--primary-foreground)/5%)] p-2">
-              <NebulaIcon className="size-7 text-primary-foreground" />
+              <BotIcon className="size-7 text-primary-foreground" />
             </div>
           </div>
         </div>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ClientIDSection.tsx

@@ -3,8 +3,8 @@ import { CopyTextButton } from "@/components/ui/CopyTextButton";
 export function ClientIDSection(props: { clientId: string }) {
   return (
     <div>
-      <h3>Client ID</h3>
-      <p className="mb-2 text-muted-foreground text-sm">
+      <h3 className="mb-1 text-base text-foreground font-medium">Client ID</h3>
+      <p className="mb-3 text-muted-foreground text-sm">
         Identifies your application
       </p>