[WEB-2432]fix: project not found state and error page alignment (#6095)

* fixed error page alignment and projects empty page

* spelling corrected

* spelling corrected

Author: vamsikrishnamathala

web/app/error.tsx

@@ -39,7 +39,7 @@ export default function CustomErrorComponent() {
       <div className={`h-screen w-full overflow-hidden bg-custom-background-100`}>
         <div className="grid h-full place-items-center p-4">
           <div className="space-y-8 text-center">
-            <div className="space-y-2">
+          <div className="space-y-2 relative flex flex-col justify-center items-center">
               <h3 className="text-lg font-semibold">Yikes! That doesn{"'"}t look good.</h3>
               <p className="mx-auto md:w-1/2 text-sm text-custom-text-200">
                 That crashed Plane, pun intended. No worries, though. Our engineers have been notified. If you have more

web/core/constants/empty-state.ts

@@ -35,6 +35,7 @@ export enum EmptyStateType {
   WORKSPACE_SUBSCRIBED = "workspace-subscribed",
   WORKSPACE_CUSTOM_VIEW = "workspace-custom-view",
   WORKSPACE_NO_PROJECTS = "workspace-no-projects",
+  WORKSPACE_PROJECT_NOT_FOUND = "workspace-project-not-found",
   WORKSPACE_SETTINGS_API_TOKENS = "workspace-settings-api-tokens",
   WORKSPACE_SETTINGS_WEBHOOKS = "workspace-settings-webhooks",
   WORKSPACE_SETTINGS_EXPORT = "workspace-settings-export",
@@ -208,6 +209,22 @@ const emptyStateDetails = {
     description: "Issues that applies to the filters, track all of them here.",
     path: "/empty-state/all-issues/custom-view",
   },
+  [EmptyStateType.WORKSPACE_PROJECT_NOT_FOUND]: {
+    key: EmptyStateType.WORKSPACE_PROJECT_NOT_FOUND,
+    title: "No such project exists",
+    description: 'To create issues or manage your work, you need to create a project or be a part of one.',
+    path: "/empty-state/onboarding/projects",
+    primaryButton: {
+      text: "Create Project",
+      comicBox: {
+        title: "Everything starts with a project in Plane",
+        description: "A project could be a product’s roadmap, a marketing campaign, or launching a new car.",
+      },
+    },
+
+    accessType: "workspace",
+    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+  },
   [EmptyStateType.WORKSPACE_NO_PROJECTS]: {
     key: EmptyStateType.WORKSPACE_NO_PROJECTS,
     title: "No project",

web/core/layouts/auth-layout/project-wrapper.tsx

@@ -7,8 +7,11 @@ import useSWR from "swr";
 
 // components
 import { JoinProject } from "@/components/auth-screens";
-import { EmptyState, LogoSpinner } from "@/components/common";
+import { LogoSpinner } from "@/components/common";
+import { EmptyState } from "@/components/empty-state";
 import { ETimeLineTypeType } from "@/components/gantt-chart/contexts";
+//constants
+import { EmptyStateType } from "@/constants/empty-state";
 // hooks
 import {
   useCommandPalette,
@@ -28,8 +31,6 @@ import { useTimeLineChart } from "@/hooks/use-timeline-chart";
 import { persistence } from "@/local-db/storage.sqlite";
 // plane web constants
 import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
-// images
-import emptyProject from "@/public/empty-state/onboarding/dashboard-light.webp";
 
 interface IProjectAuthWrapper {
   children: ReactNode;
@@ -164,15 +165,11 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
     return (
       <div className="grid h-screen place-items-center bg-custom-background-100">
         <EmptyState
-          title="No such project exists"
-          description="Try creating a new project"
-          image={emptyProject}
-          primaryButton={{
-            text: "Create Project",
-            onClick: () => {
-              setTrackElement("Projects page empty state");
-              toggleCreateProjectModal(true);
-            },
+          type={EmptyStateType.WORKSPACE_PROJECT_NOT_FOUND}
+          layout="screen-detailed"
+          primaryButtonOnClick={() => {
+            setTrackElement("Projects page empty state");
+            toggleCreateProjectModal(true)
           }}
         />
       </div>