style: new empty project ui for dash board and project screen

web/components/page-views/workspace-dashboard.tsx

@@ -10,6 +10,7 @@ import { TourRoot } from "components/onboarding";
 import { UserGreetingsView } from "components/user";
 import { CompletedIssuesGraph, IssuesList, IssuesPieChart, IssuesStats } from "components/workspace";
 import { Button } from "@plane/ui";
+import { DashboardScreenEmptyState } from "components/project/dashboard-empty-state";
 // images
 import emptyDashboard from "public/empty-state/dashboard.svg";
 
@@ -19,7 +20,12 @@ export const WorkspaceDashboardView = observer(() => {
   const { workspaceSlug } = router.query;
   // store
 
-  const { user: userStore, project: projectStore, commandPalette: commandPaletteStore, trackEvent: { setTrackElement } } = useMobxStore();
+  const {
+    user: userStore,
+    project: projectStore,
+    commandPalette: commandPaletteStore,
+    trackEvent: { setTrackElement },
+  } = useMobxStore();
 
   const user = userStore.currentUser;
   const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : null;
@@ -65,22 +71,15 @@ export const WorkspaceDashboardView = observer(() => {
               </div>
             </div>
           ) : (
-            <div className="bg-custom-primary-100/5 flex justify-between gap-5 md:gap-8">
-              <div className="p-5 md:p-8 pr-0">
-                <h5 className="text-xl font-semibold">Create a project</h5>
-                <p className="mt-2 mb-5">Manage your projects by creating issues, cycles, modules, views and pages.</p>
-                <Button variant="primary" size="sm" onClick={() => {
-                    setTrackElement("DASHBOARD_PAGE");
-                    commandPaletteStore.toggleCreateProjectModal(true)
-                  }
-                }>
-                  Create Project
-                </Button>
-              </div>
-              <div className="hidden md:block self-end overflow-hidden pt-8">
-                <Image src={emptyDashboard} alt="Empty Dashboard" />
-              </div>
-            </div>
+            <DashboardScreenEmptyState
+              primaryButton={{
+                text: "Start something new",
+                onClick: () => {
+                  setTrackElement("PROJECTS_EMPTY_STATE");
+                  commandPaletteStore.toggleCreateProjectModal(true);
+                },
+              }}
+            />
           )
         ) : null}
       </div>

web/components/project/card-list.tsx

@@ -5,6 +5,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { ProjectCard } from "components/project";
 import { EmptyState } from "components/project/empty-state";
+import { ProjectScreenEmptyState } from "components/project/projects-screen-empty-state";
 import { Loader } from "@plane/ui";
 // images
 import emptyProject from "public/empty-state/Project_full_screen.svg";
@@ -18,7 +19,11 @@ export interface IProjectCardList {
 export const ProjectCardList: FC<IProjectCardList> = observer((props) => {
   const { workspaceSlug } = props;
   // store
-  const { project: projectStore, commandPalette: commandPaletteStore, trackEvent: { setTrackElement } } = useMobxStore();
+  const {
+    project: projectStore,
+    commandPalette: commandPaletteStore,
+    trackEvent: { setTrackElement },
+  } = useMobxStore();
 
   const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : null;
 
@@ -50,17 +55,13 @@ export const ProjectCardList: FC<IProjectCardList> = observer((props) => {
           )}
         </div>
       ) : (
-        <EmptyState
-          image={emptyProject}
-          title="Why no fly 😔"
-          description="Let’s take off, cap’n!"
+        <ProjectScreenEmptyState
           primaryButton={{
-            icon: <Plus className="h-4 w-4" />,
             text: "Start something new",
             onClick: () => {
               setTrackElement("PROJECTS_EMPTY_STATE");
-              commandPaletteStore.toggleCreateProjectModal(true)
-            }
+              commandPaletteStore.toggleCreateProjectModal(true);
+            },
           }}
         />
       )}

web/components/project/dashboard-empty-state.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+
+import Image from "next/image";
+import emptyProject from "public/empty-state/empty_project_dashboard.webp";
+
+// ui
+import { Button } from "@plane/ui";
+
+type Props = {
+  primaryButton: {
+    icon?: any;
+    text: string;
+    onClick: () => void;
+  };
+  disabled?: boolean;
+};
+
+export const DashboardScreenEmptyState: React.FC<Props> = ({ primaryButton, disabled = false }) => (
+  <div className=" flex flex-col justify-center items-center h-full w-full ">
+    <div className="border rounded-xl border-custom-border-200 px-10 pt-7 pb-20 flex flex-col gap-5 max-w-6xl m-5 md:m-16 shadow-sm">
+      <h3 className="font-semibold text-2xl">Overview of your projects, activity, and metrics</h3>
+      <h4 className="text-lg">
+        When you have created a project and have issues assigned, you will see metrics, activity, and things you care
+        about here. This is personalized to your role in projects, so project admins will see more than members.
+      </h4>
+      <div className="relative w-full max-w-6xl">
+        <Image src={emptyProject} className="w-52 sm:w-60" alt={primaryButton?.text} />
+      </div>
+
+      <div className="flex justify-center items-start relative">
+        <Button
+          className="max-w-min m-3"
+          size="lg"
+          variant="primary"
+          onClick={primaryButton.onClick}
+          disabled={disabled}
+        >
+          Start your first project
+        </Button>
+        <div className="flex max-w-md absolute top-0 left-1/2 ml-28 pb-5">
+          <div className="relative w-0 h-0 border-t-[11px] mt-5 border-custom-border-200 border-b-[11px] border-r-[11px] border-y-transparent">
+            <div className="absolute top-[-10px] right-[-12px] w-0 h-0 border-t-[10px] border-custom-background-100 border-b-[10px] border-r-[10px] border-y-transparent"></div>
+          </div>
+          <div className="border border-custom-border-200 rounded-md bg-custom-background-100">
+            <h1 className="p-5">
+              <h3 className="font-semibold text-lg">Everything starts with a project in Plane</h3>
+              <h4 className="text-sm mt-1">
+                A project could be a product’s roadmap, a marketing campaign, or launching a new car.
+              </h4>
+            </h1>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+);

web/components/project/projects-screen-empty-state.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+
+import Image from "next/image";
+import emptyProject from "public/empty-state/empty_project_projects_screen.webp";
+
+// ui
+import { Button } from "@plane/ui";
+
+type Props = {
+  primaryButton: {
+    icon?: any;
+    text: string;
+    onClick: () => void;
+  };
+  disabled?: boolean;
+};
+
+export const ProjectScreenEmptyState: React.FC<Props> = ({ primaryButton, disabled = false }) => (
+  <div className=" flex flex-col justify-center items-center h-full w-full ">
+    <div className="border border-custom-border-200 rounded-xl px-10 py-7 flex flex-col gap-5 max-w-6xl m-5 md:m-16 shadow-sm">
+      <h3 className="font-semibold text-2xl">Start a Project</h3>
+      <h4 className="text-lg">
+        Think of each project as the parent for goal-oriented work. Projects are where Jobs, Cycles, and Modules live
+        and, along with your colleagues, help you achieve that goal.
+      </h4>
+      <div className="relative w-full max-w-6xl">
+        <Image src={emptyProject} className="w-52 sm:w-60" alt={primaryButton?.text} />
+      </div>
+
+      <div className="flex justify-center items-start relative">
+        <Button
+          className="max-w-min m-3"
+          size="lg"
+          variant="primary"
+          onClick={primaryButton.onClick}
+          disabled={disabled}
+        >
+          Start your first project
+        </Button>
+        <div className="flex max-w-md absolute top-0 left-1/2 ml-28 pb-5">
+          <div className="relative w-0 h-0 border-t-[11px] mt-5 border-custom-border-200 border-b-[11px] border-r-[11px] border-y-transparent">
+            <div className="absolute top-[-10px] right-[-12px] w-0 h-0 border-t-[10px] border-custom-background-100 border-b-[10px] border-r-[10px] border-y-transparent"></div>
+          </div>
+          <div className="border border-custom-border-200 rounded-md bg-custom-background-100">
+            <h1 className="p-5">
+              <h3 className="font-semibold text-lg">Everything starts with a project in Plane</h3>
+              <h4 className="text-sm mt-1">
+                A project could be a product’s roadmap, a marketing campaign, or launching a new car.
+              </h4>
+            </h1>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+);