dashboard: tweak projects empty state (#41524)

GitOrigin-RevId: ca2e9c3f49b0faff9f02ce00fda2bb4c9b30d4ea

Author: atrakh

npm-packages/dashboard-common/src/elements/EmptySection.tsx

@@ -13,7 +13,7 @@ export function EmptySection({
   learnMoreButton,
   sheet = true,
 }: {
-  Icon: React.FunctionComponent<{ className: string | undefined }>;
+  Icon?: React.FunctionComponent<{ className: string | undefined }>;
   color?: "yellow" | "red" | "purple" | "green" | "none";
   header: string;
   body: React.ReactNode;
@@ -26,20 +26,22 @@ export function EmptySection({
   return (
     <Parent className="size-full" padding={sheet ? false : undefined}>
       <div className="flex h-full animate-fadeInFromLoading flex-col items-center justify-center p-4 text-center">
-        <div
-          className={cn(
-            "mb-4 flex aspect-square h-[2.625rem] shrink-0 items-center justify-center rounded-lg bg-util-accent bg-gradient-to-tr shadow-md",
-            color === "yellow" && "from-yellow-200 to-util-brand-yellow",
-            color === "red" &&
-              // eslint-disable-next-line no-restricted-syntax
-              "from-red-300 to-util-brand-red",
-            color === "purple" && "from-purple-200 to-util-brand-purple",
-            color === "green" && "from-util-success to-util-success",
-            color === "none" && "bg-transparent shadow-none",
-          )}
-        >
-          <Icon className="h-6 w-6 text-white" />
-        </div>
+        {Icon && (
+          <div
+            className={cn(
+              "mb-4 flex aspect-square h-[2.625rem] shrink-0 items-center justify-center rounded-lg bg-util-accent bg-gradient-to-tr shadow-md",
+              color === "yellow" && "from-yellow-200 to-util-brand-yellow",
+              color === "red" &&
+                // eslint-disable-next-line no-restricted-syntax
+                "from-red-300 to-util-brand-red",
+              color === "purple" && "from-purple-200 to-util-brand-purple",
+              color === "green" && "from-util-success to-util-success",
+              color === "none" && "bg-transparent shadow-none",
+            )}
+          >
+            <Icon className="h-6 w-6 text-white" />
+          </div>
+        )}
         <h2 className="mx-2 mb-2">{header}</h2>
 
         <p className="mb-2 max-w-prose text-balance text-content-tertiary">

npm-packages/dashboard/src/pages/t/[team]/index.tsx

@@ -1,8 +1,8 @@
 import {
+  ExternalLinkIcon,
   GridIcon,
   ListBulletIcon,
   PlusIcon,
-  RocketIcon,
 } from "@radix-ui/react-icons";
 import { Button } from "@ui/Button";
 import { Callout } from "@ui/Callout";
@@ -24,6 +24,7 @@ import { useState, useEffect } from "react";
 import { cn } from "@ui/cn";
 import { PaginationControls } from "elements/PaginationControls";
 import { usePagination } from "hooks/usePagination";
+import { EmptySection } from "@common/elements/EmptySection";
 
 export { getServerSideProps } from "lib/ssr";
 
@@ -173,7 +174,7 @@ function ProjectGrid({ projects }: { projects: ProjectDetails[] }) {
               href="https://docs.convex.dev/tutorial"
               size="sm"
               target="_blank"
-              icon={<RocketIcon />}
+              icon={<ExternalLinkIcon />}
             >
               Start Tutorial
             </Button>
@@ -192,20 +193,28 @@ function ProjectGrid({ projects }: { projects: ProjectDetails[] }) {
         </div>
       )}
       {projects.length === 0 && (
-        <div className="mt-8 mb-24 flex w-full animate-fadeInFromLoading flex-col items-center justify-center gap-6">
-          <h3>Welcome to Convex!</h3>
-          <p>Get started by following the tutorial.</p>
-
-          <Button
-            size="lg"
-            href="https://docs.convex.dev/tutorial"
-            target="_blank"
-            className="gap-3 text-base"
-          >
-            <RocketIcon className="h-8 w-8 text-white" />
-            Start Tutorial
-          </Button>
-        </div>
+        <EmptySection
+          header="Welcome to Convex!"
+          sheet={false}
+          body={
+            <>
+              <p className="text-sm">
+                This team doesn't have an projects yet.{" "}
+              </p>
+              <p className="text-sm">Get started by following the tutorial.</p>
+            </>
+          }
+          action={
+            <Button
+              href="https://docs.convex.dev/tutorial"
+              target="_blank"
+              icon={<ExternalLinkIcon />}
+              className="mt-2"
+            >
+              Start Tutorial
+            </Button>
+          }
+        />
       )}
       <div
         className={cn(