style: new empty states (#1497)

* fix: custom colors opacity

* chore: update text colors for dark mode

* fix: dropdown text colors, datepicker bg color

* chore: update text colors

* chore: updated primary bg color

* style: new empty states added

* refactor: empty state for issues

* style: empty state for estimates

* chore: update labels, estimates and integrations empty states

* fix: custom analytics sidebar

apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx

@@ -10,7 +10,6 @@ import { Tab } from "@headlessui/react";
 import useLocalStorage from "hooks/use-local-storage";
 import useUserAuth from "hooks/use-user-auth";
 // services
-import cycleService from "services/cycles.service";
 import projectService from "services/project.service";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout";

apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx

@@ -21,9 +21,9 @@ import {
 import { EmptyState, Loader, PrimaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
-import { ChartBarIcon, PlusIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
+import { PlusIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
 // images
-import emptyModule from "public/empty-state/empty-module.svg";
+import emptyModule from "public/empty-state/module.svg";
 // types
 import { IModule, SelectModuleType } from "types/modules";
 import type { NextPage } from "next";
@@ -141,10 +141,17 @@ const ProjectModules: NextPage = () => {
           </div>
         ) : (
           <EmptyState
-            type="module"
-            title="Create New Module"
-            description="Modules are smaller, focused projects that help you group and organize issues within a specific time frame."
-            imgURL={emptyModule}
+            title="Manage your project with modules"
+            description="Modules are smaller, focused projects that help you group and organize issues."
+            image={emptyModule}
+            buttonText="New Module"
+            buttonIcon={<PlusIcon className="h-4 w-4" />}
+            onClick={() => {
+              const e = new KeyboardEvent("keydown", {
+                key: "m",
+              });
+              document.dispatchEvent(e);
+            }}
           />
         )
       ) : (

apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx

@@ -41,7 +41,7 @@ import {
 } from "@heroicons/react/24/outline";
 import { ColorPalletteIcon, ClipboardIcon } from "components/icons";
 // helpers
-import { renderShortTime, renderShortDate } from "helpers/date-time.helper";
+import { render24HourFormatTime, renderShortDate } from "helpers/date-time.helper";
 import { copyTextToClipboard } from "helpers/string.helper";
 import { orderArrayBy } from "helpers/array.helper";
 // types
@@ -397,11 +397,11 @@ const SinglePage: NextPage = () => {
               <div className="flex items-center">
                 <div className="flex items-center gap-6 text-custom-text-200">
                   <Tooltip
-                    tooltipContent={`Last updated at ${renderShortTime(
+                    tooltipContent={`Last updated at ${render24HourFormatTime(
                       pageDetails.updated_at
                     )} on ${renderShortDate(pageDetails.updated_at)}`}
                   >
-                    <p className="text-sm">{renderShortTime(pageDetails.updated_at)}</p>
+                    <p className="text-sm">{render24HourFormatTime(pageDetails.updated_at)}</p>
                   </Tooltip>
                   <button className="flex items-center gap-2" onClick={handleCopyText}>
                     <LinkIcon className="h-4 w-4" />

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx

@@ -23,7 +23,7 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 // images
-import emptyEstimate from "public/empty-state/empty-estimate.svg";
+import emptyEstimate from "public/empty-state/estimate.svg";
 // types
 import { IEstimate, IProject } from "types";
 import type { NextPage } from "next";
@@ -158,13 +158,14 @@ const EstimatesSettings: NextPage = () => {
                 ))}
               </section>
             ) : (
-              <div className="grid h-full w-full place-items-center">
+              <div className="h-full w-full overflow-y-auto">
                 <EmptyState
-                  type="estimate"
-                  title="Create New Estimate"
-                  description="Estimates help you communicate the complexity of an issue. You can create your own estimate and communicate with your team."
-                  imgURL={emptyEstimate}
-                  action={() => {
+                  title="No estimates yet"
+                  description="Estimates help you communicate the complexity of an issue."
+                  image={emptyEstimate}
+                  buttonText="Add Estimate"
+                  buttonIcon={<PlusIcon className="h-4 w-4" />}
+                  onClick={() => {
                     setEstimateToUpdate(undefined);
                     setEstimateFormOpen(true);
                   }}

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx

@@ -12,15 +12,12 @@ import projectService from "services/project.service";
 // components
 import { SettingsHeader, SingleIntegration } from "components/project";
 // ui
-import {
-  EmptySpace,
-  EmptySpaceItem,
-  IntegrationAndImportExportBanner,
-  Loader,
-} from "components/ui";
+import { EmptyState, IntegrationAndImportExportBanner, Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon, PuzzlePieceIcon } from "@heroicons/react/24/outline";
+// images
+import emptyIntegration from "public/empty-state/integration.svg";
 // types
 import { IProject } from "types";
 import type { NextPage } from "next";
@@ -74,21 +71,13 @@ const ProjectIntegrations: NextPage = () => {
               </div>
             </section>
           ) : (
-            <div className="grid h-full w-full place-items-center">
-              <EmptySpace
-                title="You haven't added any integration yet."
-                description="Add GitHub and other integrations to sync your project issues."
-                Icon={PuzzlePieceIcon}
-              >
-                <EmptySpaceItem
-                  title="Add new integration"
-                  Icon={PlusIcon}
-                  action={() => {
-                    router.push(`/${workspaceSlug}/settings/integrations`);
-                  }}
-                />
-              </EmptySpace>
-            </div>
+            <EmptyState
+              title="You haven't configured integrations"
+              description="Configure GitHub and other integrations to sync your project issues."
+              image={emptyIntegration}
+              buttonText="Configure now"
+              onClick={() => router.push(`/${workspaceSlug}/settings/integrations`)}
+            />
           )
         ) : (
           <Loader className="space-y-5">

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx

@@ -21,10 +21,12 @@ import {
 } from "components/labels";
 import { SettingsHeader } from "components/project";
 // ui
-import { Loader, PrimaryButton } from "components/ui";
+import { EmptyState, Loader, PrimaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
+// images
+import emptyLabel from "public/empty-state/label.svg";
 // types
 import { IIssueLabels } from "types";
 import type { NextPage } from "next";
@@ -133,16 +135,33 @@ const LabelsSettings: NextPage = () => {
               )}
               <>
                 {issueLabels ? (
-                  issueLabels.map((label) => {
-                    const children = issueLabels?.filter((l) => l.parent === label.id);
+                  issueLabels.length > 0 ? (
+                    issueLabels.map((label) => {
+                      const children = issueLabels?.filter((l) => l.parent === label.id);
 
-                    if (children && children.length === 0) {
-                      if (!label.parent)
+                      if (children && children.length === 0) {
+                        if (!label.parent)
+                          return (
+                            <SingleLabel
+                              key={label.id}
+                              label={label}
+                              addLabelToGroup={() => addLabelToGroup(label)}
+                              editLabel={(label) => {
+                                editLabel(label);
+                                scrollToRef.current?.scrollIntoView({
+                                  behavior: "smooth",
+                                });
+                              }}
+                              handleLabelDelete={() => setSelectDeleteLabel(label)}
+                            />
+                          );
+                      } else
                         return (
-                          <SingleLabel
+                          <SingleLabelGroup
                             key={label.id}
                             label={label}
-                            addLabelToGroup={() => addLabelToGroup(label)}
+                            labelChildren={children}
+                            addLabelToGroup={addLabelToGroup}
                             editLabel={(label) => {
                               editLabel(label);
                               scrollToRef.current?.scrollIntoView({
@@ -150,26 +169,20 @@ const LabelsSettings: NextPage = () => {
                               });
                             }}
                             handleLabelDelete={() => setSelectDeleteLabel(label)}
+                            user={user}
                           />
                         );
-                    } else
-                      return (
-                        <SingleLabelGroup
-                          key={label.id}
-                          label={label}
-                          labelChildren={children}
-                          addLabelToGroup={addLabelToGroup}
-                          editLabel={(label) => {
-                            editLabel(label);
-                            scrollToRef.current?.scrollIntoView({
-                              behavior: "smooth",
-                            });
-                          }}
-                          handleLabelDelete={() => setSelectDeleteLabel(label)}
-                          user={user}
-                        />
-                      );
-                  })
+                    })
+                  ) : (
+                    <EmptyState
+                      title="No labels yet"
+                      description="Create labels to help organize and filter issues in you project"
+                      image={emptyLabel}
+                      buttonText="Add label"
+                      onClick={newLabel}
+                      isFullScreen={false}
+                    />
+                  )
                 ) : (
                   <Loader className="space-y-5">
                     <Loader.Item height="40px" />

apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx

@@ -16,7 +16,7 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 //icons
 import { PlusIcon } from "components/icons";
 // images
-import emptyView from "public/empty-state/empty-view.svg";
+import emptyView from "public/empty-state/view.svg";
 // fetching keys
 import { PROJECT_DETAILS, VIEWS_LIST } from "constants/fetch-keys";
 // components
@@ -115,10 +115,17 @@ const ProjectViews: NextPage = () => {
           </div>
         ) : (
           <EmptyState
-            type="view"
-            title="Create New View"
+            title="Get focused with views"
             description="Views aid in saving your issues by applying various filters and grouping options."
-            imgURL={emptyView}
+            image={emptyView}
+            buttonText="New View"
+            buttonIcon={<PlusIcon className="h-4 w-4" />}
+            onClick={() => {
+              const e = new KeyboardEvent("keydown", {
+                key: "v",
+              });
+              document.dispatchEvent(e);
+            }}
           />
         )
       ) : (

apps/app/pages/[workspaceSlug]/projects/index.tsx

@@ -16,12 +16,12 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 import { JoinProjectModal } from "components/project/join-project-modal";
 import { DeleteProjectModal, SingleProjectCard } from "components/project";
 // ui
-import { Loader, EmptyState, PrimaryButton } from "components/ui";
+import { EmptyState, Loader, PrimaryButton } from "components/ui";
 import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 // images
-import emptyProject from "public/empty-state/empty-project.svg";
+import emptyProject from "public/empty-state/project.svg";
 // types
 import type { NextPage } from "next";
 // fetch-keys
@@ -88,16 +88,7 @@ const ProjectsPage: NextPage = () => {
       />
       {projects ? (
         <div className="h-full w-full overflow-hidden">
-          {projects.length === 0 ? (
-            <div className="h-full w-full grid place-items-center p-8">
-              <EmptyState
-                type="project"
-                title="Create New Project"
-                description="Projects are a collection of issues. They can be used to represent the development work for a product, project, or service."
-                imgURL={emptyProject}
-              />
-            </div>
-          ) : (
+          {projects.length > 0 ? (
             <div className="h-full p-8 overflow-y-auto">
               <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
                 {projects.map((project) => (
@@ -110,6 +101,20 @@ const ProjectsPage: NextPage = () => {
                 ))}
               </div>
             </div>
+          ) : (
+            <EmptyState
+              image={emptyProject}
+              title="No projects yet"
+              description="Get started by creating your first project"
+              buttonText="New Project"
+              buttonIcon={<PlusIcon className="h-4 w-4" />}
+              onClick={() => {
+                const e = new KeyboardEvent("keydown", {
+                  key: "p",
+                });
+                document.dispatchEvent(e);
+              }}
+            />
           )}
         </div>
       ) : (