From a78116a91d1ad52237204b69c4ba40bfa0381460 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 12 Sep 2023 12:39:37 +0530
Subject: [PATCH 01/21] style: project settings navigation sidebar added

---
 .hintrc                                       |  16 +
 web/components/project/index.ts               |   2 +-
 web/components/project/settings-header.tsx    |  13 -
 web/components/project/settings-sidebar.tsx   |  76 ++++
 .../[projectId]/settings/automations.tsx      |  10 +-
 .../projects/[projectId]/settings/control.tsx | 238 +++++-----
 .../[projectId]/settings/estimates.tsx        | 118 ++---
 .../[projectId]/settings/features.tsx         |  10 +-
 .../projects/[projectId]/settings/index.tsx   | 415 +++++++++---------
 .../[projectId]/settings/integrations.tsx     |  10 +-
 .../projects/[projectId]/settings/labels.tsx  |  10 +-
 .../projects/[projectId]/settings/members.tsx |  10 +-
 .../projects/[projectId]/settings/states.tsx  |  16 +-
 13 files changed, 523 insertions(+), 421 deletions(-)
 create mode 100644 .hintrc
 delete mode 100644 web/components/project/settings-header.tsx
 create mode 100644 web/components/project/settings-sidebar.tsx

diff --git a/.hintrc b/.hintrc
new file mode 100644
index 00000000000..5899c4a9365
--- /dev/null
+++ b/.hintrc
@@ -0,0 +1,16 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "no-inline-styles": "off",
+    "button-type": "off",
+    "axe/name-role-value": [
+      "default",
+      {
+        "button-name": "off"
+      }
+    ],
+    "disown-opener": "off"
+  }
+}
\ No newline at end of file
diff --git a/web/components/project/index.ts b/web/components/project/index.ts
index 494a0429426..8e3e5543ee0 100644
--- a/web/components/project/index.ts
+++ b/web/components/project/index.ts
@@ -1,7 +1,7 @@
 export * from "./create-project-modal";
 export * from "./delete-project-modal";
 export * from "./sidebar-list";
-export * from "./settings-header";
+export * from "./settings-sidebar";
 export * from "./single-integration-card";
 export * from "./single-project-card";
 export * from "./single-sidebar-project";
diff --git a/web/components/project/settings-header.tsx b/web/components/project/settings-header.tsx
deleted file mode 100644
index 8dcff51387c..00000000000
--- a/web/components/project/settings-header.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import SettingsNavbar from "layouts/settings-navbar";
-
-export const SettingsHeader = () => (
-  <div className="mb-8 space-y-6">
-    <div>
-      <h3 className="text-2xl font-semibold">Project Settings</h3>
-      <p className="mt-1 text-sm text-custom-text-200">
-        This information will be displayed to every member of the project.
-      </p>
-    </div>
-    <SettingsNavbar />
-  </div>
-);
diff --git a/web/components/project/settings-sidebar.tsx b/web/components/project/settings-sidebar.tsx
new file mode 100644
index 00000000000..7c5ca4298ac
--- /dev/null
+++ b/web/components/project/settings-sidebar.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+
+export const SettingsSidebar = () => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const projectLinks: Array<{
+    label: string;
+    href: string;
+  }> = [
+    {
+      label: "General",
+      href: `/${workspaceSlug}/projects/${projectId}/settings`,
+    },
+    {
+      label: "Control",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/control`,
+    },
+    {
+      label: "Members",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/members`,
+    },
+    {
+      label: "Features",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/features`,
+    },
+    {
+      label: "States",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/states`,
+    },
+    {
+      label: "Labels",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/labels`,
+    },
+    {
+      label: "Integrations",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/integrations`,
+    },
+    {
+      label: "Estimates",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/estimates`,
+    },
+    {
+      label: "Automations",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/automations`,
+    },
+  ];
+  return (
+    <div className="flex flex-col gap-2 w-80 px-9">
+      <span className="text-xs text-custom-sidebar-text-400 font-semibold">SETTINGS</span>
+      <div className="flex flex-col gap-1 w-full">
+        {projectLinks.map((link) => (
+          <Link key={link.href} href={link.href}>
+            <a>
+              <div
+                className={`px-4 py-2 text-sm font-medium rounded-md ${
+                  (
+                    link.label === "Import"
+                      ? router.asPath.includes(link.href)
+                      : router.asPath === link.href
+                  )
+                    ? "bg-custom-primary-100/10 text-custom-primary-100"
+                    : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
+                }`}
+              >
+                {link.label}
+              </div>
+            </a>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
index a65222af5a7..0dc80e1f4ff 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
@@ -13,8 +13,8 @@ import useUserAuth from "hooks/use-user-auth";
 import useProjectDetails from "hooks/use-project-details";
 import useToast from "hooks/use-toast";
 // components
-import { SettingsHeader } from "components/project";
 import { AutoArchiveAutomation, AutoCloseAutomation } from "components/automation";
+import { SettingsSidebar } from "components/project";
 // ui
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // types
@@ -75,9 +75,11 @@ const AutomationsSettings: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <div className="p-8">
-        <SettingsHeader />
-        <section className="space-y-5">
+      <div className="flex flex-row gap-2">
+        <div className="w-80 py-8">
+          <SettingsSidebar />
+        </div>
+        <section className="pr-9 py-8 space-y-5">
           <AutoCloseAutomation projectDetails={projectDetails} handleChange={handleChange} />
           <AutoArchiveAutomation projectDetails={projectDetails} handleChange={handleChange} />
         </section>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
index 12ef350aade..248488e7a3e 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
@@ -14,7 +14,7 @@ import projectService from "services/project.service";
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
 // components
-import { SettingsHeader } from "components/project";
+import { SettingsSidebar } from "components/project";
 // ui
 import { CustomSelect, Loader, SecondaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@@ -113,124 +113,130 @@ const ControlSettings: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <form onSubmit={handleSubmit(onSubmit)} className="p-8">
-        <SettingsHeader />
-        <div className="space-y-8 sm:space-y-12">
-          <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
-            <div className="col-span-12 sm:col-span-6">
-              <h4 className="text-lg font-semibold">Project Lead</h4>
-              <p className="text-sm text-custom-text-200">Select the project leader.</p>
-            </div>
-            <div className="col-span-12 sm:col-span-6">
-              {projectDetails ? (
-                <Controller
-                  name="project_lead"
-                  control={control}
-                  render={({ field }) => (
-                    <CustomSelect
-                      {...field}
-                      label={
-                        people?.find((person) => person.member.id === field.value)?.member
-                          .display_name ?? <span className="text-custom-text-200">Select lead</span>
-                      }
-                      width="w-full"
-                      input
-                    >
-                      {people?.map((person) => (
-                        <CustomSelect.Option
-                          key={person.member.id}
-                          value={person.member.id}
-                          className="flex items-center gap-2"
-                        >
-                          <div className="flex items-center gap-2">
-                            {person.member.avatar && person.member.avatar !== "" ? (
-                              <div className="relative h-4 w-4">
-                                <img
-                                  src={person.member.avatar}
-                                  className="absolute top-0 left-0 h-full w-full object-cover rounded-full"
-                                  alt="User Avatar"
-                                />
-                              </div>
-                            ) : (
-                              <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
-                                {person.member.display_name?.charAt(0)}
-                              </div>
-                            )}
-                            {person.member.display_name}
-                          </div>
-                        </CustomSelect.Option>
-                      ))}
-                    </CustomSelect>
-                  )}
-                />
-              ) : (
-                <Loader className="h-9 w-full">
-                  <Loader.Item width="100%" height="100%" />
-                </Loader>
-              )}
-            </div>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div className="flex flex-row gap-2">
+          <div className="w-80 py-8">
+            <SettingsSidebar />
           </div>
-          <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
-            <div className="col-span-12 sm:col-span-6">
-              <h4 className="text-lg font-semibold">Default Assignee</h4>
-              <p className="text-sm text-custom-text-200">
-                Select the default assignee for the project.
-              </p>
+          <div className="pr-9 py-8 space-y-8 sm:space-y-12">
+            <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
+              <div className="col-span-12 sm:col-span-6">
+                <h4 className="text-lg font-semibold">Project Lead</h4>
+                <p className="text-sm text-custom-text-200">Select the project leader.</p>
+              </div>
+              <div className="col-span-12 sm:col-span-6">
+                {projectDetails ? (
+                  <Controller
+                    name="project_lead"
+                    control={control}
+                    render={({ field }) => (
+                      <CustomSelect
+                        {...field}
+                        label={
+                          people?.find((person) => person.member.id === field.value)?.member
+                            .display_name ?? (
+                            <span className="text-custom-text-200">Select lead</span>
+                          )
+                        }
+                        width="w-full"
+                        input
+                      >
+                        {people?.map((person) => (
+                          <CustomSelect.Option
+                            key={person.member.id}
+                            value={person.member.id}
+                            className="flex items-center gap-2"
+                          >
+                            <div className="flex items-center gap-2">
+                              {person.member.avatar && person.member.avatar !== "" ? (
+                                <div className="relative h-4 w-4">
+                                  <img
+                                    src={person.member.avatar}
+                                    className="absolute top-0 left-0 h-full w-full object-cover rounded-full"
+                                    alt="User Avatar"
+                                  />
+                                </div>
+                              ) : (
+                                <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
+                                  {person.member.display_name?.charAt(0)}
+                                </div>
+                              )}
+                              {person.member.display_name}
+                            </div>
+                          </CustomSelect.Option>
+                        ))}
+                      </CustomSelect>
+                    )}
+                  />
+                ) : (
+                  <Loader className="h-9 w-full">
+                    <Loader.Item width="100%" height="100%" />
+                  </Loader>
+                )}
+              </div>
             </div>
-            <div className="col-span-12 sm:col-span-6">
-              {projectDetails ? (
-                <Controller
-                  name="default_assignee"
-                  control={control}
-                  render={({ field }) => (
-                    <CustomSelect
-                      {...field}
-                      label={
-                        people?.find((p) => p.member.id === field.value)?.member.display_name ?? (
-                          <span className="text-custom-text-200">Select default assignee</span>
-                        )
-                      }
-                      width="w-full"
-                      input
-                    >
-                      {people?.map((person) => (
-                        <CustomSelect.Option
-                          key={person.member.id}
-                          value={person.member.id}
-                          className="flex items-center gap-2"
-                        >
-                          <div className="flex items-center gap-2">
-                            {person.member.avatar && person.member.avatar !== "" ? (
-                              <div className="relative h-4 w-4">
-                                <img
-                                  src={person.member.avatar}
-                                  className="absolute top-0 left-0 h-full w-full object-cover rounded-full"
-                                  alt="User Avatar"
-                                />
-                              </div>
-                            ) : (
-                              <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
-                                {person.member.display_name?.charAt(0)}
-                              </div>
-                            )}
-                            {person.member.display_name}
-                          </div>
-                        </CustomSelect.Option>
-                      ))}
-                    </CustomSelect>
-                  )}
-                />
-              ) : (
-                <Loader className="h-9 w-full">
-                  <Loader.Item width="100%" height="100%" />
-                </Loader>
-              )}
+            <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
+              <div className="col-span-12 sm:col-span-6">
+                <h4 className="text-lg font-semibold">Default Assignee</h4>
+                <p className="text-sm text-custom-text-200">
+                  Select the default assignee for the project.
+                </p>
+              </div>
+              <div className="col-span-12 sm:col-span-6">
+                {projectDetails ? (
+                  <Controller
+                    name="default_assignee"
+                    control={control}
+                    render={({ field }) => (
+                      <CustomSelect
+                        {...field}
+                        label={
+                          people?.find((p) => p.member.id === field.value)?.member.display_name ?? (
+                            <span className="text-custom-text-200">Select default assignee</span>
+                          )
+                        }
+                        width="w-full"
+                        input
+                      >
+                        {people?.map((person) => (
+                          <CustomSelect.Option
+                            key={person.member.id}
+                            value={person.member.id}
+                            className="flex items-center gap-2"
+                          >
+                            <div className="flex items-center gap-2">
+                              {person.member.avatar && person.member.avatar !== "" ? (
+                                <div className="relative h-4 w-4">
+                                  <img
+                                    src={person.member.avatar}
+                                    className="absolute top-0 left-0 h-full w-full object-cover rounded-full"
+                                    alt="User Avatar"
+                                  />
+                                </div>
+                              ) : (
+                                <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
+                                  {person.member.display_name?.charAt(0)}
+                                </div>
+                              )}
+                              {person.member.display_name}
+                            </div>
+                          </CustomSelect.Option>
+                        ))}
+                      </CustomSelect>
+                    )}
+                  />
+                ) : (
+                  <Loader className="h-9 w-full">
+                    <Loader.Item width="100%" height="100%" />
+                  </Loader>
+                )}
+              </div>
+            </div>
+            <div className="sm:text-right">
+              <SecondaryButton type="submit" loading={isSubmitting}>
+                {isSubmitting ? "Updating Project..." : "Update Project"}
+              </SecondaryButton>
             </div>
-          </div>
-          <div className="sm:text-right">
-            <SecondaryButton type="submit" loading={isSubmitting}>
-              {isSubmitting ? "Updating Project..." : "Update Project"}
-            </SecondaryButton>
           </div>
         </div>
       </form>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
index f61bd24d82e..61ede9ca4af 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
@@ -13,7 +13,7 @@ import useProjectDetails from "hooks/use-project-details";
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // components
 import { CreateUpdateEstimateModal, SingleEstimate } from "components/estimates";
-import { SettingsHeader } from "components/project";
+import { SettingsSidebar } from "components/project";
 //hooks
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
@@ -125,66 +125,70 @@ const EstimatesSettings: NextPage = () => {
           </Breadcrumbs>
         }
       >
-        <div className="h-full flex flex-col p-8 overflow-hidden">
-          <SettingsHeader />
-          <section className="flex items-center justify-between">
-            <h3 className="text-2xl font-semibold">Estimates</h3>
-            <div className="col-span-12 space-y-5 sm:col-span-7">
-              <div className="flex items-center gap-2">
-                <div
-                  className="flex cursor-pointer items-center gap-2 text-custom-primary-100 hover:text-custom-primary-200"
-                  onClick={() => {
-                    setEstimateToUpdate(undefined);
-                    setEstimateFormOpen(true);
-                  }}
-                >
-                  <PlusIcon className="h-4 w-4" />
-                  Create New Estimate
+        <div className="flex flex-row gap-2 h-full overflow-hidden">
+          <div className="w-80 py-8">
+            <SettingsSidebar />
+          </div>
+          <div className="pr-9 py-8 flex flex-col">
+            <section className="flex items-center justify-between">
+              <h3 className="text-2xl font-semibold">Estimates</h3>
+              <div className="col-span-12 space-y-5 sm:col-span-7">
+                <div className="flex items-center gap-2">
+                  <div
+                    className="flex cursor-pointer items-center gap-2 text-custom-primary-100 hover:text-custom-primary-200"
+                    onClick={() => {
+                      setEstimateToUpdate(undefined);
+                      setEstimateFormOpen(true);
+                    }}
+                  >
+                    <PlusIcon className="h-4 w-4" />
+                    Create New Estimate
+                  </div>
+                  {projectDetails?.estimate && (
+                    <SecondaryButton onClick={disableEstimates}>Disable Estimates</SecondaryButton>
+                  )}
                 </div>
-                {projectDetails?.estimate && (
-                  <SecondaryButton onClick={disableEstimates}>Disable Estimates</SecondaryButton>
-                )}
               </div>
-            </div>
-          </section>
-          {estimatesList ? (
-            estimatesList.length > 0 ? (
-              <section className="h-full mt-5 divide-y divide-custom-border-200 rounded-xl border border-custom-border-200 bg-custom-background-100 px-6 overflow-y-auto">
-                {estimatesList.map((estimate) => (
-                  <SingleEstimate
-                    key={estimate.id}
-                    estimate={estimate}
-                    editEstimate={(estimate) => editEstimate(estimate)}
-                    handleEstimateDelete={(estimateId) => removeEstimate(estimateId)}
-                    user={user}
+            </section>
+            {estimatesList ? (
+              estimatesList.length > 0 ? (
+                <section className="h-full mt-5 divide-y divide-custom-border-200 rounded-xl border border-custom-border-200 bg-custom-background-100 px-6 overflow-y-auto">
+                  {estimatesList.map((estimate) => (
+                    <SingleEstimate
+                      key={estimate.id}
+                      estimate={estimate}
+                      editEstimate={(estimate) => editEstimate(estimate)}
+                      handleEstimateDelete={(estimateId) => removeEstimate(estimateId)}
+                      user={user}
+                    />
+                  ))}
+                </section>
+              ) : (
+                <div className="h-full w-full overflow-y-auto">
+                  <EmptyState
+                    title="No estimates yet"
+                    description="Estimates help you communicate the complexity of an issue."
+                    image={emptyEstimate}
+                    primaryButton={{
+                      icon: <PlusIcon className="h-4 w-4" />,
+                      text: "Add Estimate",
+                      onClick: () => {
+                        setEstimateToUpdate(undefined);
+                        setEstimateFormOpen(true);
+                      },
+                    }}
                   />
-                ))}
-              </section>
+                </div>
+              )
             ) : (
-              <div className="h-full w-full overflow-y-auto">
-                <EmptyState
-                  title="No estimates yet"
-                  description="Estimates help you communicate the complexity of an issue."
-                  image={emptyEstimate}
-                  primaryButton={{
-                    icon: <PlusIcon className="h-4 w-4" />,
-                    text: "Add Estimate",
-                    onClick: () => {
-                      setEstimateToUpdate(undefined);
-                      setEstimateFormOpen(true);
-                    },
-                  }}
-                />
-              </div>
-            )
-          ) : (
-            <Loader className="mt-5 space-y-5">
-              <Loader.Item height="40px" />
-              <Loader.Item height="40px" />
-              <Loader.Item height="40px" />
-              <Loader.Item height="40px" />
-            </Loader>
-          )}
+              <Loader className="mt-5 space-y-5">
+                <Loader.Item height="40px" />
+                <Loader.Item height="40px" />
+                <Loader.Item height="40px" />
+                <Loader.Item height="40px" />
+              </Loader>
+            )}
+          </div>
         </div>
       </ProjectAuthorizationWrapper>
     </>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
index be0c2198a17..9e39801c0e8 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -13,7 +13,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
 // components
-import { SettingsHeader } from "components/project";
+import { SettingsSidebar } from "components/project";
 // ui
 import { SecondaryButton, ToggleSwitch } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@@ -149,9 +149,11 @@ const FeaturesSettings: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <div className="p-8">
-        <SettingsHeader />
-        <section className="space-y-5">
+      <div className="flex flex-row gap-2">
+        <div className="w-80 py-8">
+          <SettingsSidebar />
+        </div>
+        <section className="pr-9 py-8 space-y-5 w-full">
           <h3 className="text-2xl font-semibold">Features</h3>
           <div className="space-y-5">
             {featuresList.map((feature) => (
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
index a178e28fa18..a60f8081f40 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -11,7 +11,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // services
 import projectService from "services/project.service";
 // components
-import { DeleteProjectModal, SettingsHeader } from "components/project";
+import { DeleteProjectModal, SettingsSidebar } from "components/project";
 import { ImagePickerPopover } from "components/core";
 import EmojiIconPicker from "components/emoji-icon-picker";
 // hooks
@@ -185,229 +185,234 @@ const GeneralSettings: NextPage = () => {
         onClose={() => setSelectedProject(null)}
         user={user}
       />
-      <form onSubmit={handleSubmit(onSubmit)} className="p-8">
-        <SettingsHeader />
-        <div className={`space-y-8 sm:space-y-12 ${isAdmin ? "" : "opacity-60"}`}>
-          <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
-            <div className="col-span-12 sm:col-span-6">
-              <h4 className="text-lg font-semibold">Icon & Name</h4>
-              <p className="text-sm text-custom-text-200">
-                Select an icon and a name for your project.
-              </p>
-            </div>
-            <div className="col-span-12 flex gap-2 sm:col-span-6">
-              {projectDetails ? (
-                <div className="h-7 w-7 grid place-items-center">
-                  <Controller
-                    control={control}
-                    name="emoji_and_icon"
-                    render={({ field: { value, onChange } }) => (
-                      <EmojiIconPicker
-                        label={value ? renderEmoji(value) : "Icon"}
-                        value={value}
-                        onChange={onChange}
-                        disabled={!isAdmin}
-                      />
-                    )}
-                  />
-                </div>
-              ) : (
-                <Loader>
-                  <Loader.Item height="46px" width="46px" />
-                </Loader>
-              )}
-              {projectDetails ? (
-                <Input
-                  id="name"
-                  name="name"
-                  error={errors.name}
-                  register={register}
-                  placeholder="Project Name"
-                  validations={{
-                    required: "Name is required",
-                  }}
-                  disabled={!isAdmin}
-                />
-              ) : (
-                <Loader>
-                  <Loader.Item height="46px" width="225px" />
-                </Loader>
-              )}
-            </div>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div className="flex flex-row gap-2">
+          <div className="w-80 py-8">
+            <SettingsSidebar />
           </div>
-          <div className="grid grid-cols-12 gap-4 sm:gap-16">
-            <div className="col-span-12 sm:col-span-6">
-              <h4 className="text-lg font-semibold">Description</h4>
-              <p className="text-sm text-custom-text-200">Give a description to your project.</p>
-            </div>
-            <div className="col-span-12 sm:col-span-6">
-              {projectDetails ? (
-                <TextArea
-                  id="description"
-                  name="description"
-                  error={errors.description}
-                  register={register}
-                  placeholder="Enter project description"
-                  validations={{}}
-                  className="min-h-[46px] text-sm"
-                  disabled={!isAdmin}
-                />
-              ) : (
-                <Loader className="w-full">
-                  <Loader.Item height="46px" width="full" />
-                </Loader>
-              )}
+          <div className={`pr-9 py-8 space-y-8 sm:space-y-12 ${isAdmin ? "" : "opacity-60"}`}>
+            <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
+              <div className="col-span-12 sm:col-span-6">
+                <h4 className="text-lg font-semibold">Icon & Name</h4>
+                <p className="text-sm text-custom-text-200">
+                  Select an icon and a name for your project.
+                </p>
+              </div>
+              <div className="col-span-12 flex gap-2 sm:col-span-6">
+                {projectDetails ? (
+                  <div className="h-7 w-7 grid place-items-center">
+                    <Controller
+                      control={control}
+                      name="emoji_and_icon"
+                      render={({ field: { value, onChange } }) => (
+                        <EmojiIconPicker
+                          label={value ? renderEmoji(value) : "Icon"}
+                          value={value}
+                          onChange={onChange}
+                          disabled={!isAdmin}
+                        />
+                      )}
+                    />
+                  </div>
+                ) : (
+                  <Loader>
+                    <Loader.Item height="46px" width="46px" />
+                  </Loader>
+                )}
+                {projectDetails ? (
+                  <Input
+                    id="name"
+                    name="name"
+                    error={errors.name}
+                    register={register}
+                    placeholder="Project Name"
+                    validations={{
+                      required: "Name is required",
+                    }}
+                    disabled={!isAdmin}
+                  />
+                ) : (
+                  <Loader>
+                    <Loader.Item height="46px" width="225px" />
+                  </Loader>
+                )}
+              </div>
             </div>
-          </div>
-          <div className="grid grid-cols-12 gap-4 sm:gap-16">
-            <div className="col-span-12 sm:col-span-6">
-              <h4 className="text-lg font-semibold">Cover Photo</h4>
-              <p className="text-sm text-custom-text-200">
-                Select your cover photo from the given library.
-              </p>
+            <div className="grid grid-cols-12 gap-4 sm:gap-16">
+              <div className="col-span-12 sm:col-span-6">
+                <h4 className="text-lg font-semibold">Description</h4>
+                <p className="text-sm text-custom-text-200">Give a description to your project.</p>
+              </div>
+              <div className="col-span-12 sm:col-span-6">
+                {projectDetails ? (
+                  <TextArea
+                    id="description"
+                    name="description"
+                    error={errors.description}
+                    register={register}
+                    placeholder="Enter project description"
+                    validations={{}}
+                    className="min-h-[46px] text-sm"
+                    disabled={!isAdmin}
+                  />
+                ) : (
+                  <Loader className="w-full">
+                    <Loader.Item height="46px" width="full" />
+                  </Loader>
+                )}
+              </div>
             </div>
-            <div className="col-span-12 sm:col-span-6">
-              {watch("cover_image") ? (
-                <div className="h-32 w-full rounded border border-custom-border-200 p-1">
-                  <div className="relative h-full w-full rounded">
-                    <img
-                      src={watch("cover_image")!}
-                      className="absolute top-0 left-0 h-full w-full object-cover rounded"
-                      alt={projectDetails?.name ?? "Cover image"}
-                    />
-                    <div className="absolute bottom-0 flex w-full justify-end">
-                      <ImagePickerPopover
-                        label={"Change cover"}
-                        onChange={(imageUrl) => {
-                          setValue("cover_image", imageUrl);
-                        }}
-                        value={watch("cover_image")}
-                        disabled={!isAdmin}
+            <div className="grid grid-cols-12 gap-4 sm:gap-16">
+              <div className="col-span-12 sm:col-span-6">
+                <h4 className="text-lg font-semibold">Cover Photo</h4>
+                <p className="text-sm text-custom-text-200">
+                  Select your cover photo from the given library.
+                </p>
+              </div>
+              <div className="col-span-12 sm:col-span-6">
+                {watch("cover_image") ? (
+                  <div className="h-32 w-full rounded border border-custom-border-200 p-1">
+                    <div className="relative h-full w-full rounded">
+                      <img
+                        src={watch("cover_image")!}
+                        className="absolute top-0 left-0 h-full w-full object-cover rounded"
+                        alt={projectDetails?.name ?? "Cover image"}
                       />
+                      <div className="absolute bottom-0 flex w-full justify-end">
+                        <ImagePickerPopover
+                          label={"Change cover"}
+                          onChange={(imageUrl) => {
+                            setValue("cover_image", imageUrl);
+                          }}
+                          value={watch("cover_image")}
+                          disabled={!isAdmin}
+                        />
+                      </div>
                     </div>
                   </div>
-                </div>
-              ) : (
-                <Loader className="w-full">
-                  <Loader.Item height="46px" width="full" />
-                </Loader>
-              )}
-            </div>
-          </div>
-          <div className="grid grid-cols-12 gap-4 sm:gap-16">
-            <div className="col-span-12 sm:col-span-6">
-              <h4 className="text-lg font-semibold">Identifier</h4>
-              <p className="text-sm text-custom-text-200">
-                Create a 1-6 characters{"'"} identifier for the project.
-              </p>
-            </div>
-            <div className="col-span-12 sm:col-span-6">
-              {projectDetails ? (
-                <Input
-                  id="identifier"
-                  name="identifier"
-                  error={errors.identifier}
-                  register={register}
-                  placeholder="Enter identifier"
-                  onChange={handleIdentifierChange}
-                  validations={{
-                    required: "Identifier is required",
-                    validate: (value) =>
-                      /^[A-Z0-9]+$/.test(value.toUpperCase()) || "Identifier must be in uppercase.",
-                    minLength: {
-                      value: 1,
-                      message: "Identifier must at least be of 1 character",
-                    },
-                    maxLength: {
-                      value: 5,
-                      message: "Identifier must at most be of 5 characters",
-                    },
-                  }}
-                  disabled={!isAdmin}
-                />
-              ) : (
-                <Loader>
-                  <Loader.Item height="46px" width="160px" />
-                </Loader>
-              )}
-            </div>
-          </div>
-          <div className="grid grid-cols-12 gap-4 sm:gap-16">
-            <div className="col-span-12 sm:col-span-6">
-              <h4 className="text-lg font-semibold">Network</h4>
-              <p className="text-sm text-custom-text-200">Select privacy type for the project.</p>
+                ) : (
+                  <Loader className="w-full">
+                    <Loader.Item height="46px" width="full" />
+                  </Loader>
+                )}
+              </div>
             </div>
-            <div className="col-span-12 sm:col-span-6">
-              {projectDetails ? (
-                <Controller
-                  name="network"
-                  control={control}
-                  render={({ field: { value, onChange } }) => (
-                    <CustomSelect
-                      value={value}
-                      onChange={onChange}
-                      label={currentNetwork?.label ?? "Select network"}
-                      input
-                      disabled={!isAdmin}
-                    >
-                      {NETWORK_CHOICES.map((network) => (
-                        <CustomSelect.Option key={network.key} value={network.key}>
-                          {network.label}
-                        </CustomSelect.Option>
-                      ))}
-                    </CustomSelect>
-                  )}
-                />
-              ) : (
-                <Loader className="w-full">
-                  <Loader.Item height="46px" width="160px" />
-                </Loader>
-              )}
+            <div className="grid grid-cols-12 gap-4 sm:gap-16">
+              <div className="col-span-12 sm:col-span-6">
+                <h4 className="text-lg font-semibold">Identifier</h4>
+                <p className="text-sm text-custom-text-200">
+                  Create a 1-6 characters{"'"} identifier for the project.
+                </p>
+              </div>
+              <div className="col-span-12 sm:col-span-6">
+                {projectDetails ? (
+                  <Input
+                    id="identifier"
+                    name="identifier"
+                    error={errors.identifier}
+                    register={register}
+                    placeholder="Enter identifier"
+                    onChange={handleIdentifierChange}
+                    validations={{
+                      required: "Identifier is required",
+                      validate: (value) =>
+                        /^[A-Z0-9]+$/.test(value.toUpperCase()) ||
+                        "Identifier must be in uppercase.",
+                      minLength: {
+                        value: 1,
+                        message: "Identifier must at least be of 1 character",
+                      },
+                      maxLength: {
+                        value: 5,
+                        message: "Identifier must at most be of 5 characters",
+                      },
+                    }}
+                    disabled={!isAdmin}
+                  />
+                ) : (
+                  <Loader>
+                    <Loader.Item height="46px" width="160px" />
+                  </Loader>
+                )}
+              </div>
             </div>
-          </div>
-
-          {isAdmin && (
-            <>
-              <div className="sm:text-right">
+            <div className="grid grid-cols-12 gap-4 sm:gap-16">
+              <div className="col-span-12 sm:col-span-6">
+                <h4 className="text-lg font-semibold">Network</h4>
+                <p className="text-sm text-custom-text-200">Select privacy type for the project.</p>
+              </div>
+              <div className="col-span-12 sm:col-span-6">
                 {projectDetails ? (
-                  <SecondaryButton type="submit" loading={isSubmitting} disabled={!isAdmin}>
-                    {isSubmitting ? "Updating Project..." : "Update Project"}
-                  </SecondaryButton>
+                  <Controller
+                    name="network"
+                    control={control}
+                    render={({ field: { value, onChange } }) => (
+                      <CustomSelect
+                        value={value}
+                        onChange={onChange}
+                        label={currentNetwork?.label ?? "Select network"}
+                        input
+                        disabled={!isAdmin}
+                      >
+                        {NETWORK_CHOICES.map((network) => (
+                          <CustomSelect.Option key={network.key} value={network.key}>
+                            {network.label}
+                          </CustomSelect.Option>
+                        ))}
+                      </CustomSelect>
+                    )}
+                  />
                 ) : (
-                  <Loader className="mt-2 w-full">
-                    <Loader.Item height="34px" width="100px" />
+                  <Loader className="w-full">
+                    <Loader.Item height="46px" width="160px" />
                   </Loader>
                 )}
               </div>
-              <div className="grid grid-cols-12 gap-4 sm:gap-16">
-                <div className="col-span-12 sm:col-span-6">
-                  <h4 className="text-lg font-semibold">Danger Zone</h4>
-                  <p className="text-sm text-custom-text-200">
-                    The danger zone of the project delete page is a critical area that requires
-                    careful consideration and attention. When deleting a project, all of the data
-                    and resources within that project will be permanently removed and cannot be
-                    recovered.
-                  </p>
-                </div>
-                <div className="col-span-12 sm:col-span-6">
+            </div>
+
+            {isAdmin && (
+              <>
+                <div className="sm:text-right">
                   {projectDetails ? (
-                    <div>
-                      <DangerButton
-                        onClick={() => setSelectedProject(projectDetails.id ?? null)}
-                        outline
-                      >
-                        Delete Project
-                      </DangerButton>
-                    </div>
+                    <SecondaryButton type="submit" loading={isSubmitting} disabled={!isAdmin}>
+                      {isSubmitting ? "Updating Project..." : "Update Project"}
+                    </SecondaryButton>
                   ) : (
                     <Loader className="mt-2 w-full">
-                      <Loader.Item height="46px" width="100px" />
+                      <Loader.Item height="34px" width="100px" />
                     </Loader>
                   )}
                 </div>
-              </div>
-            </>
-          )}
+                <div className="grid grid-cols-12 gap-4 sm:gap-16">
+                  <div className="col-span-12 sm:col-span-6">
+                    <h4 className="text-lg font-semibold">Danger Zone</h4>
+                    <p className="text-sm text-custom-text-200">
+                      The danger zone of the project delete page is a critical area that requires
+                      careful consideration and attention. When deleting a project, all of the data
+                      and resources within that project will be permanently removed and cannot be
+                      recovered.
+                    </p>
+                  </div>
+                  <div className="col-span-12 sm:col-span-6">
+                    {projectDetails ? (
+                      <div>
+                        <DangerButton
+                          onClick={() => setSelectedProject(projectDetails.id ?? null)}
+                          outline
+                        >
+                          Delete Project
+                        </DangerButton>
+                      </div>
+                    ) : (
+                      <Loader className="mt-2 w-full">
+                        <Loader.Item height="46px" width="100px" />
+                      </Loader>
+                    )}
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
         </div>
       </form>
     </ProjectAuthorizationWrapper>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
index 9c5fdecfc19..2a67784fa47 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
@@ -10,7 +10,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 import IntegrationService from "services/integration";
 import projectService from "services/project.service";
 // components
-import { SettingsHeader, SingleIntegration } from "components/project";
+import { SettingsSidebar, SingleIntegration } from "components/project";
 // ui
 import { EmptyState, IntegrationAndImportExportBanner, Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@@ -58,11 +58,13 @@ const ProjectIntegrations: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <div className="h-full flex flex-col p-8 overflow-hidden">
-        <SettingsHeader />
+      <div className="flex flex-row gap-2 h-full overflow-hidden">
+        <div className="w-80 py-8">
+          <SettingsSidebar />
+        </div>
         {workspaceIntegrations ? (
           workspaceIntegrations.length > 0 ? (
-            <section className="space-y-8 overflow-y-auto">
+            <section className="pr-9 py-8 space-y-8 overflow-y-auto">
               <IntegrationAndImportExportBanner bannerName="Integrations" />
               <div className="space-y-5">
                 {workspaceIntegrations.map((integration) => (
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
index dc845da685a..f4396eccd99 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
@@ -19,7 +19,7 @@ import {
   SingleLabel,
   SingleLabelGroup,
 } from "components/labels";
-import { SettingsHeader } from "components/project";
+import { SettingsSidebar } from "components/project";
 // ui
 import { EmptyState, Loader, PrimaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@@ -113,9 +113,11 @@ const LabelsSettings: NextPage = () => {
           </Breadcrumbs>
         }
       >
-        <div className="p-8">
-          <SettingsHeader />
-          <section className="grid grid-cols-12 gap-10">
+        <div className="flex flex-row gap-2">
+          <div className="w-80 py-8">
+            <SettingsSidebar />
+          </div>
+          <section className="pr-9 py-8 gap-10 w-full">
             <div className="col-span-12 sm:col-span-5">
               <h3 className="text-2xl font-semibold">Labels</h3>
               <p className="text-custom-text-200">Manage the labels of this project.</p>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index ec8c0c43b3e..ba7e789d0ac 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -18,7 +18,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // components
 import ConfirmProjectMemberRemove from "components/project/confirm-project-member-remove";
 import SendProjectInvitationModal from "components/project/send-project-invitation-modal";
-import { SettingsHeader } from "components/project";
+import { SettingsSidebar } from "components/project";
 // ui
 import { CustomMenu, CustomSelect, Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@@ -171,9 +171,11 @@ const MembersSettings: NextPage = () => {
         user={user}
         onSuccess={() => mutateMembers()}
       />
-      <div className="p-8">
-        <SettingsHeader />
-        <section className="space-y-5">
+      <div className="flex flex-row gap-2">
+        <div className="w-80 py-8">
+          <SettingsSidebar />
+        </div>
+        <section className="pr-9 py-8 space-y-5 w-full">
           <div className="flex items-end justify-between gap-4">
             <h3 className="text-2xl font-semibold">Members</h3>
             <button
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
index 73337c6bbd8..28ec965b4ae 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@@ -18,7 +18,7 @@ import {
   SingleState,
   StateGroup,
 } from "components/states";
-import { SettingsHeader } from "components/project";
+import { SettingsSidebar } from "components/project";
 // ui
 import { Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@@ -73,14 +73,12 @@ const StatesSettings: NextPage = () => {
           </Breadcrumbs>
         }
       >
-        <div className="p-8">
-          <SettingsHeader />
-          <div className="grid grid-cols-12 gap-10">
-            <div className="col-span-12 sm:col-span-5">
-              <h3 className="text-2xl font-semibold text-custom-text-100">States</h3>
-              <p className="text-custom-text-200">Manage the states of this project.</p>
-            </div>
-            <div className="col-span-12 space-y-8 sm:col-span-7">
+        <div className="flex flex-row gap-2">
+          <div className="w-80 py-8">
+            <SettingsSidebar />
+          </div>
+          <div className="pr-9 py-8 gap-10 w-full">
+            <div className="space-y-8">
               {states && projectDetails && orderedStateGroups ? (
                 Object.keys(orderedStateGroups).map((key) => {
                   if (orderedStateGroups[key].length !== 0)

From aca3a98811120407bc612380e34eefc782393fff Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 12 Sep 2023 16:19:54 +0530
Subject: [PATCH 02/21] chore: emoji and image picker close on outside click
 added

---
 web/components/core/image-picker-popover.tsx | 12 ++++++++++--
 web/components/emoji-icon-picker/index.tsx   | 13 +++++++++++--
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/web/components/core/image-picker-popover.tsx b/web/components/core/image-picker-popover.tsx
index 5f13d960ee6..957f1131cbe 100644
--- a/web/components/core/image-picker-popover.tsx
+++ b/web/components/core/image-picker-popover.tsx
@@ -20,6 +20,7 @@ import fileService from "services/file.service";
 import { Input, Spinner, PrimaryButton, SecondaryButton } from "components/ui";
 // hooks
 import useWorkspaceDetails from "hooks/use-workspace-details";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
 
 const unsplashEnabled =
   process.env.NEXT_PUBLIC_UNSPLASH_ENABLED === "true" ||
@@ -67,6 +68,8 @@ export const ImagePickerPopover: React.FC<Props> = ({
     fileService.getUnsplashImages(1, searchParams)
   );
 
+  const imagePickerRef = useRef<HTMLDivElement>(null);
+
   const { workspaceDetails } = useWorkspaceDetails();
 
   const onDrop = useCallback((acceptedFiles: File[]) => {
@@ -116,12 +119,14 @@ export const ImagePickerPopover: React.FC<Props> = ({
     onChange(images[0].urls.regular);
   }, [value, onChange, images]);
 
+  useOutsideClickDetector(imagePickerRef, () => setIsOpen(false));
+
   if (!unsplashEnabled) return null;
 
   return (
     <Popover className="relative z-[2]" ref={ref}>
       <Popover.Button
-        className="rounded-md border border-custom-border-300 bg-custom-background-100 px-2 py-1 text-xs text-custom-text-200 hover:text-custom-text-100"
+        className="rounded-sm border border-custom-border-300 bg-custom-background-100 px-2 py-1 text-xs text-custom-text-200 hover:text-custom-text-100"
         onClick={() => setIsOpen((prev) => !prev)}
         disabled={disabled}
       >
@@ -137,7 +142,10 @@ export const ImagePickerPopover: React.FC<Props> = ({
         leaveTo="transform opacity-0 scale-95"
       >
         <Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md border border-custom-border-200 bg-custom-background-80 shadow-lg">
-          <div className="h-96 md:h-[28rem] w-80 md:w-[36rem] flex flex-col overflow-auto rounded border border-custom-border-300 bg-custom-background-100 p-3 shadow-2xl">
+          <div
+            ref={imagePickerRef}
+            className="h-96 md:h-[28rem] w-80 md:w-[36rem] flex flex-col overflow-auto rounded border border-custom-border-300 bg-custom-background-100 p-3 shadow-2xl"
+          >
             <Tab.Group>
               <div>
                 <Tab.List as="span" className="inline-block rounded bg-custom-background-80 p-1">
diff --git a/web/components/emoji-icon-picker/index.tsx b/web/components/emoji-icon-picker/index.tsx
index 7af3bb74f23..ab4eb022e63 100644
--- a/web/components/emoji-icon-picker/index.tsx
+++ b/web/components/emoji-icon-picker/index.tsx
@@ -1,8 +1,10 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 // headless ui
 import { Tab, Transition, Popover } from "@headlessui/react";
 // react colors
 import { TwitterPicker } from "react-color";
+// hooks
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // types
 import { Props } from "./types";
 // emojis
@@ -36,6 +38,8 @@ const EmojiIconPicker: React.FC<Props> = ({
 
   const [recentEmojis, setRecentEmojis] = useState<string[]>([]);
 
+  const emojiPickerRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     setRecentEmojis(getRecentEmojis());
   }, []);
@@ -44,6 +48,8 @@ const EmojiIconPicker: React.FC<Props> = ({
     if (!value || value?.length === 0) onChange(getRandomEmoji());
   }, [value, onChange]);
 
+  useOutsideClickDetector(emojiPickerRef, () => setIsOpen(false));
+
   return (
     <Popover className="relative z-[1]">
       <Popover.Button
@@ -63,7 +69,10 @@ const EmojiIconPicker: React.FC<Props> = ({
         leaveTo="transform opacity-0 scale-95"
       >
         <Popover.Panel className="absolute z-10 mt-2 w-[250px] rounded-[4px] border border-custom-border-200 bg-custom-background-80 shadow-lg">
-          <div className="h-[230px] w-[250px] overflow-auto rounded-[4px] border border-custom-border-200 bg-custom-background-80 p-2 shadow-xl">
+          <div
+            ref={emojiPickerRef}
+            className="h-[230px] w-[250px] overflow-auto rounded-[4px] border border-custom-border-200 bg-custom-background-80 p-2 shadow-xl"
+          >
             <Tab.Group as="div" className="flex h-full w-full flex-col">
               <Tab.List className="flex-0 -mx-2 flex justify-around gap-1 p-1">
                 {tabOptions.map((tab) => (

From 671114776aa7f737c738ff153e17fcfe9f57936f Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 12 Sep 2023 16:20:53 +0530
Subject: [PATCH 03/21] style: project setting general page revamp

---
 .../projects/[projectId]/settings/index.tsx   | 383 ++++++++++--------
 1 file changed, 206 insertions(+), 177 deletions(-)

diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
index a60f8081f40..612d21c145c 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -4,6 +4,8 @@ import { useRouter } from "next/router";
 
 import useSWR, { mutate } from "swr";
 
+// headless ui
+import { Disclosure, Transition } from "@headlessui/react";
 // react-hook-form
 import { Controller, useForm } from "react-hook-form";
 // layouts
@@ -25,11 +27,14 @@ import {
   CustomSelect,
   SecondaryButton,
   DangerButton,
+  Icon,
+  PrimaryButton,
 } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // helpers
 import { renderEmoji } from "helpers/emoji.helper";
 import { truncateText } from "helpers/string.helper";
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
 import { IProject, IWorkspace } from "types";
 import type { NextPage } from "next";
@@ -190,41 +195,84 @@ const GeneralSettings: NextPage = () => {
           <div className="w-80 py-8">
             <SettingsSidebar />
           </div>
-          <div className={`pr-9 py-8 space-y-8 sm:space-y-12 ${isAdmin ? "" : "opacity-60"}`}>
-            <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
-              <div className="col-span-12 sm:col-span-6">
-                <h4 className="text-lg font-semibold">Icon & Name</h4>
-                <p className="text-sm text-custom-text-200">
-                  Select an icon and a name for your project.
-                </p>
-              </div>
-              <div className="col-span-12 flex gap-2 sm:col-span-6">
-                {projectDetails ? (
-                  <div className="h-7 w-7 grid place-items-center">
-                    <Controller
-                      control={control}
-                      name="emoji_and_icon"
-                      render={({ field: { value, onChange } }) => (
-                        <EmojiIconPicker
-                          label={value ? renderEmoji(value) : "Icon"}
-                          value={value}
-                          onChange={onChange}
-                          disabled={!isAdmin}
+          <div className={`pr-9 py-8 w-full ${isAdmin ? "" : "opacity-60"}`}>
+            <div className="relative h-44 w-full mt-6">
+              <img
+                src={watch("cover_image")!}
+                alt={watch("cover_image")!}
+                className="h-44 w-full rounded-md object-cover"
+              />
+              <div className="flex items-end justify-between absolute bottom-4 w-full px-4">
+                <div className="flex gap-3">
+                  <div className="flex items-center justify-center bg-custom-background-90 h-[52px] w-[52px] rounded-lg">
+                    {projectDetails ? (
+                      <div className="h-7 w-7 grid place-items-center">
+                        <Controller
+                          control={control}
+                          name="emoji_and_icon"
+                          render={({ field: { value, onChange } }) => (
+                            <EmojiIconPicker
+                              label={value ? renderEmoji(value) : "Icon"}
+                              value={value}
+                              onChange={onChange}
+                              disabled={!isAdmin}
+                            />
+                          )}
                         />
-                      )}
-                    />
+                      </div>
+                    ) : (
+                      <Loader>
+                        <Loader.Item height="46px" width="46px" />
+                      </Loader>
+                    )}
                   </div>
-                ) : (
-                  <Loader>
-                    <Loader.Item height="46px" width="46px" />
-                  </Loader>
-                )}
+                  <div className="flex flex-col gap-1 text-white">
+                    <span className="text-lg font-semibold">{watch("name")}</span>
+                    <span className="flex items-center gap-2 text-sm">
+                      <span>
+                        {watch("identifier")} . {currentNetwork?.label}
+                      </span>
+                    </span>
+                  </div>
+                </div>
+
+                <div className="flex justify-center">
+                  {projectDetails ? (
+                    <div>
+                      <Controller
+                        control={control}
+                        name="cover_image"
+                        render={({ field: { value, onChange } }) => (
+                          <ImagePickerPopover
+                            label={"Change cover"}
+                            onChange={(imageUrl) => {
+                              setValue("cover_image", imageUrl);
+                            }}
+                            value={watch("cover_image")}
+                            disabled={!isAdmin}
+                          />
+                        )}
+                      />
+                    </div>
+                  ) : (
+                    <Loader>
+                      <Loader.Item height="32px" width="108px" />
+                    </Loader>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-8 my-8">
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm">Project Name</h4>
                 {projectDetails ? (
                   <Input
                     id="name"
                     name="name"
                     error={errors.name}
                     register={register}
+                    className="!p-3 rounded-md font-medium"
                     placeholder="Project Name"
                     validations={{
                       required: "Name is required",
@@ -233,17 +281,13 @@ const GeneralSettings: NextPage = () => {
                   />
                 ) : (
                   <Loader>
-                    <Loader.Item height="46px" width="225px" />
+                    <Loader.Item height="46px" width="100%" />
                   </Loader>
                 )}
               </div>
-            </div>
-            <div className="grid grid-cols-12 gap-4 sm:gap-16">
-              <div className="col-span-12 sm:col-span-6">
-                <h4 className="text-lg font-semibold">Description</h4>
-                <p className="text-sm text-custom-text-200">Give a description to your project.</p>
-              </div>
-              <div className="col-span-12 sm:col-span-6">
+
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm">Description</h4>
                 {projectDetails ? (
                   <TextArea
                     id="description"
@@ -252,166 +296,151 @@ const GeneralSettings: NextPage = () => {
                     register={register}
                     placeholder="Enter project description"
                     validations={{}}
-                    className="min-h-[46px] text-sm"
+                    className="min-h-[102px] text-sm"
                     disabled={!isAdmin}
                   />
                 ) : (
                   <Loader className="w-full">
-                    <Loader.Item height="46px" width="full" />
+                    <Loader.Item height="102px" width="full" />
                   </Loader>
                 )}
               </div>
-            </div>
-            <div className="grid grid-cols-12 gap-4 sm:gap-16">
-              <div className="col-span-12 sm:col-span-6">
-                <h4 className="text-lg font-semibold">Cover Photo</h4>
-                <p className="text-sm text-custom-text-200">
-                  Select your cover photo from the given library.
-                </p>
-              </div>
-              <div className="col-span-12 sm:col-span-6">
-                {watch("cover_image") ? (
-                  <div className="h-32 w-full rounded border border-custom-border-200 p-1">
-                    <div className="relative h-full w-full rounded">
-                      <img
-                        src={watch("cover_image")!}
-                        className="absolute top-0 left-0 h-full w-full object-cover rounded"
-                        alt={projectDetails?.name ?? "Cover image"}
-                      />
-                      <div className="absolute bottom-0 flex w-full justify-end">
-                        <ImagePickerPopover
-                          label={"Change cover"}
-                          onChange={(imageUrl) => {
-                            setValue("cover_image", imageUrl);
-                          }}
-                          value={watch("cover_image")}
+
+              <div className="flex items-center justify-between gap-10 w-full">
+                <div className="flex flex-col gap-1 w-1/2">
+                  <h4 className="text-sm">Identifier</h4>
+                  {projectDetails ? (
+                    <Input
+                      id="identifier"
+                      name="identifier"
+                      error={errors.identifier}
+                      register={register}
+                      placeholder="Enter identifier"
+                      onChange={handleIdentifierChange}
+                      validations={{
+                        required: "Identifier is required",
+                        validate: (value) =>
+                          /^[A-Z0-9]+$/.test(value.toUpperCase()) ||
+                          "Identifier must be in uppercase.",
+                        minLength: {
+                          value: 1,
+                          message: "Identifier must at least be of 1 character",
+                        },
+                        maxLength: {
+                          value: 5,
+                          message: "Identifier must at most be of 5 characters",
+                        },
+                      }}
+                      disabled={!isAdmin}
+                    />
+                  ) : (
+                    <Loader>
+                      <Loader.Item height="36px" width="100%" />
+                    </Loader>
+                  )}
+                </div>
+
+                <div className="flex flex-col gap-1 w-1/2">
+                  <h4 className="text-sm">Network</h4>
+                  {projectDetails ? (
+                    <Controller
+                      name="network"
+                      control={control}
+                      render={({ field: { value, onChange } }) => (
+                        <CustomSelect
+                          value={value}
+                          onChange={onChange}
+                          label={currentNetwork?.label ?? "Select network"}
+                          className="!border-custom-border-200 !shadow-none"
+                          input
                           disabled={!isAdmin}
-                        />
-                      </div>
-                    </div>
-                  </div>
-                ) : (
-                  <Loader className="w-full">
-                    <Loader.Item height="46px" width="full" />
-                  </Loader>
-                )}
-              </div>
-            </div>
-            <div className="grid grid-cols-12 gap-4 sm:gap-16">
-              <div className="col-span-12 sm:col-span-6">
-                <h4 className="text-lg font-semibold">Identifier</h4>
-                <p className="text-sm text-custom-text-200">
-                  Create a 1-6 characters{"'"} identifier for the project.
-                </p>
-              </div>
-              <div className="col-span-12 sm:col-span-6">
-                {projectDetails ? (
-                  <Input
-                    id="identifier"
-                    name="identifier"
-                    error={errors.identifier}
-                    register={register}
-                    placeholder="Enter identifier"
-                    onChange={handleIdentifierChange}
-                    validations={{
-                      required: "Identifier is required",
-                      validate: (value) =>
-                        /^[A-Z0-9]+$/.test(value.toUpperCase()) ||
-                        "Identifier must be in uppercase.",
-                      minLength: {
-                        value: 1,
-                        message: "Identifier must at least be of 1 character",
-                      },
-                      maxLength: {
-                        value: 5,
-                        message: "Identifier must at most be of 5 characters",
-                      },
-                    }}
-                    disabled={!isAdmin}
-                  />
-                ) : (
-                  <Loader>
-                    <Loader.Item height="46px" width="160px" />
-                  </Loader>
-                )}
-              </div>
-            </div>
-            <div className="grid grid-cols-12 gap-4 sm:gap-16">
-              <div className="col-span-12 sm:col-span-6">
-                <h4 className="text-lg font-semibold">Network</h4>
-                <p className="text-sm text-custom-text-200">Select privacy type for the project.</p>
+                        >
+                          {NETWORK_CHOICES.map((network) => (
+                            <CustomSelect.Option key={network.key} value={network.key}>
+                              {network.label}
+                            </CustomSelect.Option>
+                          ))}
+                        </CustomSelect>
+                      )}
+                    />
+                  ) : (
+                    <Loader className="w-full">
+                      <Loader.Item height="46px" width="100%" />
+                    </Loader>
+                  )}
+                </div>
               </div>
-              <div className="col-span-12 sm:col-span-6">
+
+              <div className="flex items-center justify-between py-2">
                 {projectDetails ? (
-                  <Controller
-                    name="network"
-                    control={control}
-                    render={({ field: { value, onChange } }) => (
-                      <CustomSelect
-                        value={value}
-                        onChange={onChange}
-                        label={currentNetwork?.label ?? "Select network"}
-                        input
-                        disabled={!isAdmin}
-                      >
-                        {NETWORK_CHOICES.map((network) => (
-                          <CustomSelect.Option key={network.key} value={network.key}>
-                            {network.label}
-                          </CustomSelect.Option>
-                        ))}
-                      </CustomSelect>
-                    )}
-                  />
+                  <>
+                    <PrimaryButton type="submit" loading={isSubmitting} disabled={!isAdmin}>
+                      {isSubmitting ? "Updating Project..." : "Update Project"}
+                    </PrimaryButton>
+                    <span className="text-sm text-custom-sidebar-text-400 italic">
+                      Created on {renderShortDateWithYearFormat(projectDetails?.created_at)}
+                    </span>
+                  </>
                 ) : (
-                  <Loader className="w-full">
-                    <Loader.Item height="46px" width="160px" />
+                  <Loader className="mt-2 w-full">
+                    <Loader.Item height="34px" width="100px" />
                   </Loader>
                 )}
               </div>
             </div>
 
-            {isAdmin && (
-              <>
-                <div className="sm:text-right">
-                  {projectDetails ? (
-                    <SecondaryButton type="submit" loading={isSubmitting} disabled={!isAdmin}>
-                      {isSubmitting ? "Updating Project..." : "Update Project"}
-                    </SecondaryButton>
-                  ) : (
-                    <Loader className="mt-2 w-full">
-                      <Loader.Item height="34px" width="100px" />
-                    </Loader>
-                  )}
-                </div>
-                <div className="grid grid-cols-12 gap-4 sm:gap-16">
-                  <div className="col-span-12 sm:col-span-6">
-                    <h4 className="text-lg font-semibold">Danger Zone</h4>
-                    <p className="text-sm text-custom-text-200">
-                      The danger zone of the project delete page is a critical area that requires
-                      careful consideration and attention. When deleting a project, all of the data
-                      and resources within that project will be permanently removed and cannot be
-                      recovered.
-                    </p>
-                  </div>
-                  <div className="col-span-12 sm:col-span-6">
-                    {projectDetails ? (
-                      <div>
-                        <DangerButton
-                          onClick={() => setSelectedProject(projectDetails.id ?? null)}
-                          outline
-                        >
-                          Delete Project
-                        </DangerButton>
+            <Disclosure as="div" className="border-t border-custom-border-400">
+              {({ open }) => (
+                <div className="w-full">
+                  <Disclosure.Button
+                    as="button"
+                    type="button"
+                    className="flex items-center justify-between w-full py-4"
+                  >
+                    <span className="text-xl tracking-tight">Danger Zone</span>
+                    <Icon iconName={open ? "expand_more" : "expand_less"} className="!text-2xl" />
+                  </Disclosure.Button>
+
+                  <Transition
+                    show={open}
+                    enter="transition duration-100 ease-out"
+                    enterFrom="transform opacity-0"
+                    enterTo="transform opacity-100"
+                    leave="transition duration-75 ease-out"
+                    leaveFrom="transform opacity-100"
+                    leaveTo="transform opacity-0"
+                  >
+                    <Disclosure.Panel>
+                      <div className="flex flex-col gap-8">
+                        <span className="text-sm tracking-tight">
+                          The danger zone of the project delete page is a critical area that
+                          requires careful consideration and attention. When deleting a project, all
+                          of the data and resources within that project will be permanently removed
+                          and cannot be recovered.
+                        </span>
+                        <div>
+                          {projectDetails ? (
+                            <div>
+                              <DangerButton
+                                onClick={() => setSelectedProject(projectDetails.id ?? null)}
+                                className="!text-sm"
+                                outline
+                              >
+                                Delete my project
+                              </DangerButton>
+                            </div>
+                          ) : (
+                            <Loader className="mt-2 w-full">
+                              <Loader.Item height="38px" width="144px" />
+                            </Loader>
+                          )}
+                        </div>
                       </div>
-                    ) : (
-                      <Loader className="mt-2 w-full">
-                        <Loader.Item height="46px" width="100px" />
-                      </Loader>
-                    )}
-                  </div>
+                    </Disclosure.Panel>
+                  </Transition>
                 </div>
-              </>
-            )}
+              )}
+            </Disclosure>
           </div>
         </div>
       </form>

From acf6104cf4c15670893128d5cf1c59c0125e1df9 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 12 Sep 2023 17:47:48 +0530
Subject: [PATCH 04/21] style: project setting member page revamp

---
 web/components/project/settings-sidebar.tsx   |   4 -
 .../projects/[projectId]/settings/control.tsx | 247 ------------------
 .../projects/[projectId]/settings/members.tsx | 232 ++++++++++++++--
 3 files changed, 215 insertions(+), 268 deletions(-)
 delete mode 100644 web/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx

diff --git a/web/components/project/settings-sidebar.tsx b/web/components/project/settings-sidebar.tsx
index 7c5ca4298ac..9da5c10586f 100644
--- a/web/components/project/settings-sidebar.tsx
+++ b/web/components/project/settings-sidebar.tsx
@@ -14,10 +14,6 @@ export const SettingsSidebar = () => {
       label: "General",
       href: `/${workspaceSlug}/projects/${projectId}/settings`,
     },
-    {
-      label: "Control",
-      href: `/${workspaceSlug}/projects/${projectId}/settings/control`,
-    },
     {
       label: "Members",
       href: `/${workspaceSlug}/projects/${projectId}/settings/members`,
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
deleted file mode 100644
index 248488e7a3e..00000000000
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
+++ /dev/null
@@ -1,247 +0,0 @@
-import React, { useEffect } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// react-hook-form
-import { Controller, useForm } from "react-hook-form";
-// layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
-// services
-import projectService from "services/project.service";
-// hooks
-import useToast from "hooks/use-toast";
-import useUserAuth from "hooks/use-user-auth";
-// components
-import { SettingsSidebar } from "components/project";
-// ui
-import { CustomSelect, Loader, SecondaryButton } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// types
-import { IProject, IUserLite, IWorkspace } from "types";
-import type { NextPage } from "next";
-// fetch-keys
-import { PROJECTS_LIST, PROJECT_DETAILS, PROJECT_MEMBERS } from "constants/fetch-keys";
-// helper
-import { truncateText } from "helpers/string.helper";
-
-const defaultValues: Partial<IProject> = {
-  project_lead: null,
-  default_assignee: null,
-};
-
-const ControlSettings: NextPage = () => {
-  const { setToastAlert } = useToast();
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { user } = useUserAuth();
-
-  const { data: projectDetails } = useSWR<IProject>(
-    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const { data: people } = useSWR(
-    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const {
-    handleSubmit,
-    reset,
-    control,
-    formState: { isSubmitting },
-  } = useForm<IProject>({ defaultValues });
-
-  const onSubmit = async (formData: IProject) => {
-    if (!workspaceSlug || !projectId || !projectDetails) return;
-
-    const payload: Partial<IProject> = {
-      default_assignee: formData.default_assignee,
-      project_lead: formData.project_lead,
-    };
-
-    await projectService
-      .updateProject(workspaceSlug as string, projectId as string, payload, user)
-      .then((res) => {
-        mutate(PROJECT_DETAILS(projectId as string));
-
-        mutate(
-          PROJECTS_LIST(workspaceSlug as string, {
-            is_favorite: "all",
-          })
-        );
-
-        setToastAlert({
-          title: "Success",
-          type: "success",
-          message: "Project updated successfully",
-        });
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  };
-
-  useEffect(() => {
-    if (projectDetails)
-      reset({
-        ...projectDetails,
-        default_assignee: projectDetails.default_assignee?.id ?? projectDetails.default_assignee,
-        project_lead: (projectDetails.project_lead as IUserLite)?.id ?? projectDetails.project_lead,
-        workspace: (projectDetails.workspace as IWorkspace).id,
-      });
-  }, [projectDetails, reset]);
-
-  return (
-    <ProjectAuthorizationWrapper
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem
-            title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
-            link={`/${workspaceSlug}/projects/${projectId}/issues`}
-            linkTruncate
-          />
-          <BreadcrumbItem title="Control Settings" unshrinkTitle />
-        </Breadcrumbs>
-      }
-    >
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="flex flex-row gap-2">
-          <div className="w-80 py-8">
-            <SettingsSidebar />
-          </div>
-          <div className="pr-9 py-8 space-y-8 sm:space-y-12">
-            <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
-              <div className="col-span-12 sm:col-span-6">
-                <h4 className="text-lg font-semibold">Project Lead</h4>
-                <p className="text-sm text-custom-text-200">Select the project leader.</p>
-              </div>
-              <div className="col-span-12 sm:col-span-6">
-                {projectDetails ? (
-                  <Controller
-                    name="project_lead"
-                    control={control}
-                    render={({ field }) => (
-                      <CustomSelect
-                        {...field}
-                        label={
-                          people?.find((person) => person.member.id === field.value)?.member
-                            .display_name ?? (
-                            <span className="text-custom-text-200">Select lead</span>
-                          )
-                        }
-                        width="w-full"
-                        input
-                      >
-                        {people?.map((person) => (
-                          <CustomSelect.Option
-                            key={person.member.id}
-                            value={person.member.id}
-                            className="flex items-center gap-2"
-                          >
-                            <div className="flex items-center gap-2">
-                              {person.member.avatar && person.member.avatar !== "" ? (
-                                <div className="relative h-4 w-4">
-                                  <img
-                                    src={person.member.avatar}
-                                    className="absolute top-0 left-0 h-full w-full object-cover rounded-full"
-                                    alt="User Avatar"
-                                  />
-                                </div>
-                              ) : (
-                                <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
-                                  {person.member.display_name?.charAt(0)}
-                                </div>
-                              )}
-                              {person.member.display_name}
-                            </div>
-                          </CustomSelect.Option>
-                        ))}
-                      </CustomSelect>
-                    )}
-                  />
-                ) : (
-                  <Loader className="h-9 w-full">
-                    <Loader.Item width="100%" height="100%" />
-                  </Loader>
-                )}
-              </div>
-            </div>
-            <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
-              <div className="col-span-12 sm:col-span-6">
-                <h4 className="text-lg font-semibold">Default Assignee</h4>
-                <p className="text-sm text-custom-text-200">
-                  Select the default assignee for the project.
-                </p>
-              </div>
-              <div className="col-span-12 sm:col-span-6">
-                {projectDetails ? (
-                  <Controller
-                    name="default_assignee"
-                    control={control}
-                    render={({ field }) => (
-                      <CustomSelect
-                        {...field}
-                        label={
-                          people?.find((p) => p.member.id === field.value)?.member.display_name ?? (
-                            <span className="text-custom-text-200">Select default assignee</span>
-                          )
-                        }
-                        width="w-full"
-                        input
-                      >
-                        {people?.map((person) => (
-                          <CustomSelect.Option
-                            key={person.member.id}
-                            value={person.member.id}
-                            className="flex items-center gap-2"
-                          >
-                            <div className="flex items-center gap-2">
-                              {person.member.avatar && person.member.avatar !== "" ? (
-                                <div className="relative h-4 w-4">
-                                  <img
-                                    src={person.member.avatar}
-                                    className="absolute top-0 left-0 h-full w-full object-cover rounded-full"
-                                    alt="User Avatar"
-                                  />
-                                </div>
-                              ) : (
-                                <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
-                                  {person.member.display_name?.charAt(0)}
-                                </div>
-                              )}
-                              {person.member.display_name}
-                            </div>
-                          </CustomSelect.Option>
-                        ))}
-                      </CustomSelect>
-                    )}
-                  />
-                ) : (
-                  <Loader className="h-9 w-full">
-                    <Loader.Item width="100%" height="100%" />
-                  </Loader>
-                )}
-              </div>
-            </div>
-            <div className="sm:text-right">
-              <SecondaryButton type="submit" loading={isSubmitting}>
-                {isSubmitting ? "Updating Project..." : "Update Project"}
-              </SecondaryButton>
-            </div>
-          </div>
-        </div>
-      </form>
-    </ProjectAuthorizationWrapper>
-  );
-};
-
-export default ControlSettings;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index ba7e789d0ac..26ac0dd233a 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -1,9 +1,9 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 import { useRouter } from "next/router";
 import Link from "next/link";
 
-import useSWR from "swr";
+import useSWR, { mutate } from "swr";
 
 // services
 import projectService from "services/project.service";
@@ -13,6 +13,7 @@ import useToast from "hooks/use-toast";
 import useUser from "hooks/use-user";
 import useProjectMembers from "hooks/use-project-members";
 import useProjectDetails from "hooks/use-project-details";
+import { Controller, useForm } from "react-hook-form";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // components
@@ -20,15 +21,27 @@ import ConfirmProjectMemberRemove from "components/project/confirm-project-membe
 import SendProjectInvitationModal from "components/project/send-project-invitation-modal";
 import { SettingsSidebar } from "components/project";
 // ui
-import { CustomMenu, CustomSelect, Loader } from "components/ui";
+import {
+  CustomMenu,
+  CustomSearchSelect,
+  CustomSelect,
+  Icon,
+  Loader,
+  PrimaryButton,
+  SecondaryButton,
+} from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // types
 import type { NextPage } from "next";
+import { IProject, IUserLite, IWorkspace } from "types";
 // fetch-keys
 import {
+  PROJECTS_LIST,
+  PROJECT_DETAILS,
   PROJECT_INVITATIONS_WITH_EMAIL,
+  PROJECT_MEMBERS,
   PROJECT_MEMBERS_WITH_EMAIL,
   WORKSPACE_DETAILS,
 } from "constants/fetch-keys";
@@ -37,6 +50,11 @@ import { ROLE } from "constants/workspace";
 // helper
 import { truncateText } from "helpers/string.helper";
 
+const defaultValues: Partial<IProject> = {
+  project_lead: null,
+  default_assignee: null,
+};
+
 const MembersSettings: NextPage = () => {
   const [inviteModal, setInviteModal] = useState(false);
   const [selectedRemoveMember, setSelectedRemoveMember] = useState<string | null>(null);
@@ -55,11 +73,25 @@ const MembersSettings: NextPage = () => {
     Boolean(workspaceSlug && projectId)
   );
 
+  const {
+    handleSubmit,
+    reset,
+    control,
+    formState: { isSubmitting },
+  } = useForm<IProject>({ defaultValues });
+
   const { data: activeWorkspace } = useSWR(
     workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
     () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
   );
 
+  const { data: people } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+
   const { data: projectMembers, mutate: mutateMembers } = useSWR(
     workspaceSlug && projectId
       ? PROJECT_MEMBERS_WITH_EMAIL(workspaceSlug.toString(), projectId.toString())
@@ -110,6 +142,46 @@ const MembersSettings: NextPage = () => {
 
   const handleProjectInvitationSuccess = () => {};
 
+  const onSubmit = async (formData: IProject) => {
+    if (!workspaceSlug || !projectId || !projectDetails) return;
+
+    const payload: Partial<IProject> = {
+      default_assignee: formData.default_assignee,
+      project_lead: formData.project_lead,
+    };
+
+    await projectService
+      .updateProject(workspaceSlug as string, projectId as string, payload, user)
+      .then((res) => {
+        mutate(PROJECT_DETAILS(projectId as string));
+
+        mutate(
+          PROJECTS_LIST(workspaceSlug as string, {
+            is_favorite: "all",
+          })
+        );
+
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Project updated successfully",
+        });
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  useEffect(() => {
+    if (projectDetails)
+      reset({
+        ...projectDetails,
+        default_assignee: projectDetails.default_assignee?.id ?? projectDetails.default_assignee,
+        project_lead: (projectDetails.project_lead as IUserLite)?.id ?? projectDetails.project_lead,
+        workspace: (projectDetails.workspace as IWorkspace).id,
+      });
+  }, [projectDetails, reset]);
+
   return (
     <ProjectAuthorizationWrapper
       breadcrumbs={
@@ -175,17 +247,133 @@ const MembersSettings: NextPage = () => {
         <div className="w-80 py-8">
           <SettingsSidebar />
         </div>
-        <section className="pr-9 py-8 space-y-5 w-full">
-          <div className="flex items-end justify-between gap-4">
-            <h3 className="text-2xl font-semibold">Members</h3>
-            <button
-              type="button"
-              className="flex items-center gap-2 text-custom-primary outline-none"
-              onClick={() => setInviteModal(true)}
-            >
-              <PlusIcon className="h-4 w-4" />
-              Add Member
-            </button>
+        <section className="pr-9 py-8 w-full">
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <h4 className="text-xl font-medium py-4 border-b border-custom-border-200">Defaults</h4>
+            <div className="flex flex-col gap-2 pb-4 w-full">
+              <div className="flex items-center py-8 gap-4 w-full">
+                <div className="flex flex-col gap-2 w-1/2">
+                  <h4 className="text-sm">Project Lead</h4>
+                  <div className="">
+                    {projectDetails ? (
+                      <Controller
+                        name="project_lead"
+                        control={control}
+                        render={({ field }) => (
+                          <CustomSelect
+                            {...field}
+                            label={
+                              people?.find((person) => person.member.id === field.value)?.member
+                                .display_name ?? (
+                                <span className="text-custom-text-200">Select lead</span>
+                              )
+                            }
+                            width="w-full"
+                            input
+                          >
+                            {people?.map((person) => (
+                              <CustomSelect.Option
+                                key={person.member.id}
+                                value={person.member.id}
+                                className="flex items-center gap-2"
+                              >
+                                <div className="flex items-center gap-2">
+                                  {person.member.avatar && person.member.avatar !== "" ? (
+                                    <div className="relative h-4 w-4">
+                                      <img
+                                        src={person.member.avatar}
+                                        className="absolute top-0 left-0 h-full w-full object-cover rounded-full"
+                                        alt="User Avatar"
+                                      />
+                                    </div>
+                                  ) : (
+                                    <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
+                                      {person.member.display_name?.charAt(0)}
+                                    </div>
+                                  )}
+                                  {person.member.display_name}
+                                </div>
+                              </CustomSelect.Option>
+                            ))}
+                          </CustomSelect>
+                        )}
+                      />
+                    ) : (
+                      <Loader className="h-9 w-full">
+                        <Loader.Item width="100%" height="100%" />
+                      </Loader>
+                    )}
+                  </div>
+                </div>
+
+                <div className="flex flex-col gap-2 w-1/2">
+                  <h4 className="text-sm">Default Assignee</h4>
+                  <div className="">
+                    {projectDetails ? (
+                      <Controller
+                        name="default_assignee"
+                        control={control}
+                        render={({ field }) => (
+                          <CustomSelect
+                            {...field}
+                            label={
+                              people?.find((p) => p.member.id === field.value)?.member
+                                .display_name ?? (
+                                <span className="text-custom-text-200">
+                                  Select default assignee
+                                </span>
+                              )
+                            }
+                            width="w-full"
+                            input
+                          >
+                            {people?.map((person) => (
+                              <CustomSelect.Option
+                                key={person.member.id}
+                                value={person.member.id}
+                                className="flex items-center gap-2"
+                              >
+                                <div className="flex items-center gap-2">
+                                  {person.member.avatar && person.member.avatar !== "" ? (
+                                    <div className="relative h-4 w-4">
+                                      <img
+                                        src={person.member.avatar}
+                                        className="absolute top-0 left-0 h-full w-full object-cover rounded-full"
+                                        alt="User Avatar"
+                                      />
+                                    </div>
+                                  ) : (
+                                    <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
+                                      {person.member.display_name?.charAt(0)}
+                                    </div>
+                                  )}
+                                  {person.member.display_name}
+                                </div>
+                              </CustomSelect.Option>
+                            ))}
+                          </CustomSelect>
+                        )}
+                      />
+                    ) : (
+                      <Loader className="h-9 w-full">
+                        <Loader.Item width="100%" height="100%" />
+                      </Loader>
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              <div className="sm:text-right">
+                <SecondaryButton type="submit" loading={isSubmitting}>
+                  {isSubmitting ? "Updating Project..." : "Update Project"}
+                </SecondaryButton>
+              </div>
+            </div>
+          </form>
+
+          <div className="flex items-center justify-between gap-4 mt-4 pb-4 border-b border-custom-border-200">
+            <h4 className="text-xl font-medium border-b border-custom-border-100">Members</h4>
+            <PrimaryButton onClick={() => setInviteModal(true)}>Add Member</PrimaryButton>
           </div>
           {!projectMembers || !projectInvitations ? (
             <Loader className="space-y-5">
@@ -195,10 +383,13 @@ const MembersSettings: NextPage = () => {
               <Loader.Item height="40px" />
             </Loader>
           ) : (
-            <div className="divide-y divide-custom-border-200 rounded-[10px] border border-custom-border-200 bg-custom-background-100 px-6">
+            <div className="divide-y divide-custom-border-200">
               {members.length > 0
                 ? members.map((member) => (
-                    <div key={member.id} className="flex items-center justify-between py-6">
+                    <div
+                      key={member.id}
+                      className="flex items-center justify-between px-3.5 py-[18px]"
+                    >
                       <div className="flex items-center gap-x-6 gap-y-2">
                         {member.avatar && member.avatar !== "" ? (
                           <div className="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize text-white">
@@ -244,7 +435,14 @@ const MembersSettings: NextPage = () => {
                           </div>
                         )}
                         <CustomSelect
-                          label={ROLE[member.role as keyof typeof ROLE]}
+                          customButton={
+                            <button className="flex item-center gap-1">
+                              <span className="flex items-center text-sm font-medium">
+                                {ROLE[member.role as keyof typeof ROLE]}
+                              </span>
+                              <Icon iconName="expand_more" className="text-lg font-medium" />
+                            </button>
+                          }
                           value={member.role}
                           onChange={(value: 5 | 10 | 15 | 20 | undefined) => {
                             if (!activeWorkspace || !projectDetails) return;

From 299be83fa725103e838b98e09eb638dd4f41a838 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 12 Sep 2023 18:08:47 +0530
Subject: [PATCH 05/21] style: project setting features page revamp

---
 .../[projectId]/settings/features.tsx         | 53 ++++++++-----------
 1 file changed, 21 insertions(+), 32 deletions(-)

diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
index 9e39801c0e8..70e483a97af 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -15,7 +15,7 @@ import useUserAuth from "hooks/use-user-auth";
 // components
 import { SettingsSidebar } from "components/project";
 // ui
-import { SecondaryButton, ToggleSwitch } from "components/ui";
+import { Icon, ToggleSwitch } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { ContrastIcon, PeopleGroupIcon, ViewListIcon, InboxIcon } from "components/icons";
@@ -33,35 +33,38 @@ const featuresList = [
     title: "Cycles",
     description:
       "Cycles are enabled for all the projects in this workspace. Access them from the sidebar.",
-    icon: <ContrastIcon color="#3f76ff" width={28} height={28} className="flex-shrink-0" />,
+    icon: <ContrastIcon color="#3f76ff" width={20} height={20} className="flex-shrink-0" />,
     property: "cycle_view",
   },
   {
     title: "Modules",
     description:
       "Modules are enabled for all the projects in this workspace. Access it from the sidebar.",
-    icon: <PeopleGroupIcon color="#ff6b00" width={28} height={28} className="flex-shrink-0" />,
+    // icon: <PeopleGroupIcon color="#ff6b00" width={20} height={20} className="flex-shrink-0" />,
+    icon: <Icon iconName="dataset" className="text-xl flex-shrink-0" />,
     property: "module_view",
   },
   {
     title: "Views",
     description:
       "Views are enabled for all the projects in this workspace. Access it from the sidebar.",
-    icon: <ViewListIcon color="#05c3ff" width={28} height={28} className="flex-shrink-0" />,
+    icon: <ViewListIcon color="#05c3ff" width={20} height={20} className="flex-shrink-0" />,
     property: "issue_views_view",
   },
   {
     title: "Pages",
     description:
       "Pages are enabled for all the projects in this workspace. Access it from the sidebar.",
-    icon: <DocumentTextIcon color="#fcbe1d" width={28} height={28} className="flex-shrink-0" />,
+    // icon: <DocumentTextIcon color="#fcbe1d" width={20} height={20} className="flex-shrink-0" />,
+    icon: <Icon iconName="article" className="text-xl flex-shrink-0" />,
     property: "page_view",
   },
   {
     title: "Inbox",
     description:
       "Inbox are enabled for all the projects in this workspace. Access it from the issues views page.",
-    icon: <InboxIcon color="#fcbe1d" width={24} height={24} className="flex-shrink-0" />,
+    // icon: <InboxIcon color="#fcbe1d" width={20} height={20} className="flex-shrink-0" />,
+    icon: <Icon iconName="move_to_inbox" className="text-xl flex-shrink-0" />,
     property: "inbox_view",
   },
 ];
@@ -153,19 +156,23 @@ const FeaturesSettings: NextPage = () => {
         <div className="w-80 py-8">
           <SettingsSidebar />
         </div>
-        <section className="pr-9 py-8 space-y-5 w-full">
-          <h3 className="text-2xl font-semibold">Features</h3>
-          <div className="space-y-5">
+        <section className="pr-9 py-8 space-y-4 w-full">
+          <h3 className="text-xl font-medium">Features</h3>
+          <div>
             {featuresList.map((feature) => (
               <div
                 key={feature.property}
-                className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-5"
+                className="flex items-center justify-between gap-x-8 gap-y-2 border-b border-custom-border-200 bg-custom-background-100 p-4"
               >
                 <div className="flex items-start gap-3">
-                  {feature.icon}
+                  <div className="flex items-center justify-center p-2.5 rounded bg-custom-background-90">
+                    {feature.icon}
+                  </div>
                   <div className="">
-                    <h4 className="text-lg font-semibold">{feature.title}</h4>
-                    <p className="text-sm text-custom-text-200">{feature.description}</p>
+                    <h4 className="text-sm font-medium">{feature.title}</h4>
+                    <p className="text-sm text-custom-text-200 tracking-tight">
+                      {feature.description}
+                    </p>
                   </div>
                 </div>
                 <ToggleSwitch
@@ -189,29 +196,11 @@ const FeaturesSettings: NextPage = () => {
                       [feature.property]: !projectDetails?.[feature.property as keyof IProject],
                     });
                   }}
-                  size="lg"
+                  size="sm"
                 />
               </div>
             ))}
           </div>
-          <div className="flex items-center gap-2 text-custom-text-200">
-            <a
-              href="https://plane.so/"
-              target="_blank"
-              rel="noreferrer"
-              className="hover:text-custom-text-100"
-            >
-              <SecondaryButton outline>Plane is open-source, view Roadmap</SecondaryButton>
-            </a>
-            <a
-              href="https://github.com/makeplane/plane"
-              target="_blank"
-              rel="noreferrer"
-              className="hover:text-custom-text-100"
-            >
-              <SecondaryButton outline>Star us on GitHub</SecondaryButton>
-            </a>
-          </div>
         </section>
       </div>
     </ProjectAuthorizationWrapper>

From 58f9540c7b5a69e8a385e597aad254cb59289f0d Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 12 Sep 2023 18:43:12 +0530
Subject: [PATCH 06/21] style: project setting state page revamp

---
 web/components/states/single-state.tsx            | 15 ++++++++++-----
 .../projects/[projectId]/settings/states.tsx      |  6 +++---
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/web/components/states/single-state.tsx b/web/components/states/single-state.tsx
index e5c1bf8ddb6..bfa53974a61 100644
--- a/web/components/states/single-state.tsx
+++ b/web/components/states/single-state.tsx
@@ -160,15 +160,15 @@ export const SingleState: React.FC<Props> = ({
   };
 
   return (
-    <div className="group flex items-center justify-between gap-2 border-custom-border-200 bg-custom-background-100 p-5 first:rounded-t-[10px] last:rounded-b-[10px]">
+    <div className="group flex items-center justify-between gap-2 border-custom-border-200 bg-custom-background-100 px-4 py-3 first:rounded-t-[10px] last:rounded-b-[10px]">
       <div className="flex items-center gap-3">
-        <StateGroupIcon stateGroup={state.group} color={state.color} height="20px" width="20px" />
+        <StateGroupIcon stateGroup={state.group} color={state.color} height="16px" width="16px" />
         <div>
           <h6 className="text-sm">{addSpaceIfCamelCase(state.name)}</h6>
           <p className="text-xs text-custom-text-200">{state.description}</p>
         </div>
       </div>
-      <div className="flex items-center gap-2">
+      <div className="group flex items-center gap-2">
         {index !== 0 && (
           <button
             type="button"
@@ -200,12 +200,17 @@ export const SingleState: React.FC<Props> = ({
           </button>
         )}
 
-        <button type="button" className="grid place-items-center" onClick={handleEditState}>
+        <button
+          type="button"
+          className="grid place-items-center group-hover:opacity-100 opacity-0"
+          onClick={handleEditState}
+        >
           <PencilSquareIcon className="h-4 w-4 text-custom-text-200" />
         </button>
+
         <button
           type="button"
-          className={`${
+          className={`group-hover:opacity-100 opacity-0 ${
             state.default || groupLength === 1 ? "cursor-not-allowed" : ""
           } grid place-items-center`}
           onClick={handleDeleteState}
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
index 28ec965b4ae..1c4c26ae442 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@@ -78,7 +78,8 @@ const StatesSettings: NextPage = () => {
             <SettingsSidebar />
           </div>
           <div className="pr-9 py-8 gap-10 w-full">
-            <div className="space-y-8">
+            <h3 className="text-xl font-medium pb-4 border-b border-custom-border-200">States</h3>
+            <div className="space-y-8 py-6">
               {states && projectDetails && orderedStateGroups ? (
                 Object.keys(orderedStateGroups).map((key) => {
                   if (orderedStateGroups[key].length !== 0)
@@ -88,11 +89,10 @@ const StatesSettings: NextPage = () => {
                           <h4 className="text-custom-text-200 capitalize">{key}</h4>
                           <button
                             type="button"
-                            className="flex items-center gap-2 text-custom-primary-100 hover:text-custom-primary-200 outline-none"
+                            className="flex items-center gap-2 text-custom-primary-100 px-2 hover:text-custom-primary-200 outline-none"
                             onClick={() => setActiveGroup(key as keyof StateGroup)}
                           >
                             <PlusIcon className="h-4 w-4" />
-                            Add
                           </button>
                         </div>
                         <div className="divide-y divide-custom-border-200 rounded-[10px] border border-custom-border-200">

From 336fd6d59d3f6680135f8aaa44ba598c7fb93dff Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 12 Sep 2023 19:03:18 +0530
Subject: [PATCH 07/21] style: project setting integrations page revamp

---
 web/components/project/single-integration-card.tsx    | 11 +++++------
 .../ui/integration-and-import-export-banner.tsx       |  4 ++--
 .../projects/[projectId]/settings/integrations.tsx    |  4 ++--
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/web/components/project/single-integration-card.tsx b/web/components/project/single-integration-card.tsx
index 582ae685e21..587db0c85d0 100644
--- a/web/components/project/single-integration-card.tsx
+++ b/web/components/project/single-integration-card.tsx
@@ -30,8 +30,7 @@ const integrationDetails: { [key: string]: any } = {
   },
   slack: {
     logo: SlackLogo,
-    description:
-      "Connect your slack channel to this project to get regular updates. Control which notification you want to receive.",
+    description: "Get regular updates and control which notification you want to receive.",
   },
 };
 
@@ -93,19 +92,19 @@ export const SingleIntegration: React.FC<Props> = ({ integration }) => {
   return (
     <>
       {integration && (
-        <div className="flex items-center justify-between gap-2 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-5">
+        <div className="flex items-center justify-between gap-2 border-b border-custom-border-200 bg-custom-background-100 p-5">
           <div className="flex items-start gap-4">
-            <div className="h-12 w-12 flex-shrink-0">
+            <div className="h-10 w-10 flex-shrink-0">
               <Image
                 src={integrationDetails[integration.integration_detail.provider].logo}
                 alt={`${integration.integration_detail.title} Logo`}
               />
             </div>
             <div>
-              <h3 className="flex items-center gap-4 text-xl font-semibold">
+              <h3 className="flex items-center gap-4 text-sm font-medium">
                 {integration.integration_detail.title}
               </h3>
-              <p className="text-sm text-custom-text-200">
+              <p className="text-sm text-custom-text-200 tracking-tight">
                 {integrationDetails[integration.integration_detail.provider].description}
               </p>
             </div>
diff --git a/web/components/ui/integration-and-import-export-banner.tsx b/web/components/ui/integration-and-import-export-banner.tsx
index 9173a630e93..f79927ab16e 100644
--- a/web/components/ui/integration-and-import-export-banner.tsx
+++ b/web/components/ui/integration-and-import-export-banner.tsx
@@ -6,8 +6,8 @@ type Props = {
 };
 
 export const IntegrationAndImportExportBanner: React.FC<Props> = ({ bannerName, description }) => (
-  <div className="flex flex-col items-start gap-3">
-    <h3 className="text-2xl font-semibold">{bannerName}</h3>
+  <div className="flex flex-col items-start gap-3 pb-4 border-b border-custom-border-200">
+    <h3 className="text-xl font-medium">{bannerName}</h3>
     {description && (
       <div className="flex items-center gap-3 rounded-[10px] border border-custom-primary/75 bg-custom-primary/5 p-4 text-sm text-custom-text-100">
         <ExclamationIcon height={24} width={24} className="fill-current text-custom-text-100" />
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
index 2a67784fa47..cd1e68792ca 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
@@ -64,9 +64,9 @@ const ProjectIntegrations: NextPage = () => {
         </div>
         {workspaceIntegrations ? (
           workspaceIntegrations.length > 0 ? (
-            <section className="pr-9 py-8 space-y-8 overflow-y-auto">
+            <section className="pr-9 py-8 overflow-y-auto w-full">
               <IntegrationAndImportExportBanner bannerName="Integrations" />
-              <div className="space-y-5">
+              <div>
                 {workspaceIntegrations.map((integration) => (
                   <SingleIntegration
                     key={integration.integration_detail.id}

From 9d96b18ab309ab74ec61e06c68f3969acc025ed0 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 12 Sep 2023 19:20:51 +0530
Subject: [PATCH 08/21] style: project setting estimates page revamp

---
 web/components/estimates/single-estimate.tsx   |  2 +-
 .../[projectId]/settings/estimates.tsx         | 18 ++++++++----------
 .../projects/[projectId]/settings/features.tsx |  2 +-
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/web/components/estimates/single-estimate.tsx b/web/components/estimates/single-estimate.tsx
index 3adf986ae69..43edfcb2c7e 100644
--- a/web/components/estimates/single-estimate.tsx
+++ b/web/components/estimates/single-estimate.tsx
@@ -66,7 +66,7 @@ export const SingleEstimate: React.FC<Props> = ({
 
   return (
     <>
-      <div className="gap-2 py-3">
+      <div className="gap-2 p-4 border-b border-custom-border-200">
         <div className="flex items-center justify-between">
           <div>
             <h6 className="flex w-[40vw] items-center gap-2 truncate text-sm font-medium">
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
index 61ede9ca4af..a0c42a470fb 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
@@ -18,7 +18,7 @@ import { SettingsSidebar } from "components/project";
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
 // ui
-import { EmptyState, Loader, SecondaryButton } from "components/ui";
+import { EmptyState, Loader, PrimaryButton, SecondaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -129,21 +129,19 @@ const EstimatesSettings: NextPage = () => {
           <div className="w-80 py-8">
             <SettingsSidebar />
           </div>
-          <div className="pr-9 py-8 flex flex-col">
-            <section className="flex items-center justify-between">
-              <h3 className="text-2xl font-semibold">Estimates</h3>
+          <div className="pr-9 py-8 flex flex-col w-full">
+            <section className="flex items-center justify-between pb-4 border-b border-custom-border-200">
+              <h3 className="text-xl font-medium">Estimates</h3>
               <div className="col-span-12 space-y-5 sm:col-span-7">
                 <div className="flex items-center gap-2">
-                  <div
-                    className="flex cursor-pointer items-center gap-2 text-custom-primary-100 hover:text-custom-primary-200"
+                  <PrimaryButton
                     onClick={() => {
                       setEstimateToUpdate(undefined);
                       setEstimateFormOpen(true);
                     }}
                   >
-                    <PlusIcon className="h-4 w-4" />
-                    Create New Estimate
-                  </div>
+                    Add Estimate
+                  </PrimaryButton>
                   {projectDetails?.estimate && (
                     <SecondaryButton onClick={disableEstimates}>Disable Estimates</SecondaryButton>
                   )}
@@ -152,7 +150,7 @@ const EstimatesSettings: NextPage = () => {
             </section>
             {estimatesList ? (
               estimatesList.length > 0 ? (
-                <section className="h-full mt-5 divide-y divide-custom-border-200 rounded-xl border border-custom-border-200 bg-custom-background-100 px-6 overflow-y-auto">
+                <section className="h-full bg-custom-background-100 overflow-y-auto">
                   {estimatesList.map((estimate) => (
                     <SingleEstimate
                       key={estimate.id}
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
index 70e483a97af..8c81d9c6954 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -157,7 +157,7 @@ const FeaturesSettings: NextPage = () => {
           <SettingsSidebar />
         </div>
         <section className="pr-9 py-8 space-y-4 w-full">
-          <h3 className="text-xl font-medium">Features</h3>
+          <h3 className="text-xl font-medium pb-4 border-b border-custom-border-200">Features</h3>
           <div>
             {featuresList.map((feature) => (
               <div

From f24ee9c242343db391352ffce46a56f8d865a662 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 12 Sep 2023 19:45:27 +0530
Subject: [PATCH 09/21] style: project setting automation page revamp

---
 .../automation/auto-archive-automation.tsx    | 37 ++++++++++---------
 .../automation/auto-close-automation.tsx      | 37 ++++++++++---------
 .../[projectId]/settings/automations.tsx      |  6 ++-
 3 files changed, 45 insertions(+), 35 deletions(-)

diff --git a/web/components/automation/auto-archive-automation.tsx b/web/components/automation/auto-archive-automation.tsx
index 07ac86460ae..b71c4491d71 100644
--- a/web/components/automation/auto-archive-automation.tsx
+++ b/web/components/automation/auto-archive-automation.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 
 // component
-import { CustomSelect, ToggleSwitch } from "components/ui";
+import { CustomSelect, Icon, ToggleSwitch } from "components/ui";
 import { SelectMonthModal } from "components/automation";
 // icons
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
@@ -28,25 +28,28 @@ export const AutoArchiveAutomation: React.FC<Props> = ({ projectDetails, handleC
         handleClose={() => setmonthModal(false)}
         handleChange={handleChange}
       />
-      <div className="flex flex-col gap-7 px-6 py-5 rounded-[10px] border border-custom-border-300 bg-custom-background-90">
-        <div className="flex items-center justify-between gap-x-8 gap-y-2">
-          <div className="flex flex-col gap-2.5">
-            <h4 className="text-lg font-semibold">Auto-archive closed issues</h4>
-            <p className="text-sm text-custom-text-200">
-              Plane will automatically archive issues that have been completed or cancelled for the
-              configured time period.
+      <div className="flex items-center justify-between gap-x-8 gap-y-2 border-b border-custom-border-200 bg-custom-background-100 p-4">
+        <div className="flex items-start gap-3">
+          <div className="flex items-center justify-center p-2.5 rounded bg-custom-background-90">
+            <Icon iconName="tab_close_right" className="text-xl leading-5" />
+          </div>
+          <div className="">
+            <h4 className="text-sm font-medium">Auto-archive closed issues</h4>
+            <p className="text-sm text-custom-text-200 tracking-tight">
+              Plane will auto archive issues that have been completed or canceled.
             </p>
           </div>
-          <ToggleSwitch
-            value={projectDetails?.archive_in !== 0}
-            onChange={() =>
-              projectDetails?.archive_in === 0
-                ? handleChange({ archive_in: 1 })
-                : handleChange({ archive_in: 0 })
-            }
-            size="sm"
-          />
         </div>
+        <ToggleSwitch
+          value={projectDetails?.archive_in !== 0}
+          onChange={() =>
+            projectDetails?.archive_in === 0
+              ? handleChange({ archive_in: 1 })
+              : handleChange({ archive_in: 0 })
+          }
+          size="sm"
+        />
+
         {projectDetails?.archive_in !== 0 && (
           <div className="flex items-center justify-between gap-2 w-full">
             <div className="w-1/2 text-base font-medium">
diff --git a/web/components/automation/auto-close-automation.tsx b/web/components/automation/auto-close-automation.tsx
index ad65714aa80..4411c9e1180 100644
--- a/web/components/automation/auto-close-automation.tsx
+++ b/web/components/automation/auto-close-automation.tsx
@@ -5,7 +5,7 @@ import useSWR from "swr";
 import { useRouter } from "next/router";
 
 // component
-import { CustomSearchSelect, CustomSelect, ToggleSwitch } from "components/ui";
+import { CustomSearchSelect, CustomSelect, Icon, ToggleSwitch } from "components/ui";
 import { SelectMonthModal } from "components/automation";
 // icons
 import { ChevronDownIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
@@ -76,25 +76,28 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
         handleChange={handleChange}
       />
 
-      <div className="flex flex-col gap-7 px-6 py-5 rounded-[10px] border border-custom-border-300 bg-custom-background-90">
-        <div className="flex items-center justify-between gap-x-8 gap-y-2 ">
-          <div className="flex flex-col gap-2.5">
-            <h4 className="text-lg font-semibold">Auto-close inactive issues</h4>
-            <p className="text-sm text-custom-text-200">
-              Plane will automatically close the issues that have not been updated for the
-              configured time period.
+      <div className="flex items-center justify-between gap-x-8 gap-y-2 border-b border-custom-border-200 bg-custom-background-100 p-4">
+        <div className="flex items-start gap-3">
+          <div className="flex items-center justify-center p-2.5 rounded bg-custom-background-90">
+            <Icon iconName="archive" className="text-xl leading-5" />
+          </div>
+          <div className="">
+            <h4 className="text-sm font-medium">Auto-close issues</h4>
+            <p className="text-sm text-custom-text-200 tracking-tight">
+              Plane will automatically close issue that haven’t been completed or canceled.
             </p>
           </div>
-          <ToggleSwitch
-            value={projectDetails?.close_in !== 0}
-            onChange={() =>
-              projectDetails?.close_in === 0
-                ? handleChange({ close_in: 1, default_state: defaultState })
-                : handleChange({ close_in: 0, default_state: null })
-            }
-            size="sm"
-          />
         </div>
+        <ToggleSwitch
+          value={projectDetails?.close_in !== 0}
+          onChange={() =>
+            projectDetails?.close_in === 0
+              ? handleChange({ close_in: 1, default_state: defaultState })
+              : handleChange({ close_in: 0, default_state: null })
+          }
+          size="sm"
+        />
+
         {projectDetails?.close_in !== 0 && (
           <div className="flex flex-col gap-4 w-full">
             <div className="flex items-center justify-between gap-2 w-full">
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
index 0dc80e1f4ff..7c1c1407cee 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
@@ -79,7 +79,11 @@ const AutomationsSettings: NextPage = () => {
         <div className="w-80 py-8">
           <SettingsSidebar />
         </div>
-        <section className="pr-9 py-8 space-y-5">
+        <section className="pr-9 py-8 w-full">
+          <h3 className="text-xl font-medium pb-4 border-b border-custom-border-200">
+            Automations
+          </h3>
+
           <AutoCloseAutomation projectDetails={projectDetails} handleChange={handleChange} />
           <AutoArchiveAutomation projectDetails={projectDetails} handleChange={handleChange} />
         </section>

From 6c5624b1062b50dc5b77d173bdbdcc28993dc4b4 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 12 Sep 2023 20:20:29 +0530
Subject: [PATCH 10/21] style: project setting label page revamp

---
 web/components/labels/single-label.tsx        |  2 +-
 .../projects/[projectId]/settings/labels.tsx  | 19 ++++++++++---------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/web/components/labels/single-label.tsx b/web/components/labels/single-label.tsx
index 15fcf896d38..37aee2eff64 100644
--- a/web/components/labels/single-label.tsx
+++ b/web/components/labels/single-label.tsx
@@ -20,7 +20,7 @@ export const SingleLabel: React.FC<Props> = ({
   editLabel,
   handleLabelDelete,
 }) => (
-  <div className="gap-2 space-y-3 divide-y divide-custom-border-200 rounded-[10px]  border border-custom-border-200 bg-custom-background-100 p-5">
+  <div className="gap-2 space-y-3 divide-y divide-custom-border-200 rounded-[10px]  border border-custom-border-200 bg-custom-background-100 px-4 py-3">
     <div className="flex items-center justify-between">
       <div className="flex items-center gap-3">
         <span
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
index f4396eccd99..9541536fb8f 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
@@ -118,17 +118,18 @@ const LabelsSettings: NextPage = () => {
             <SettingsSidebar />
           </div>
           <section className="pr-9 py-8 gap-10 w-full">
-            <div className="col-span-12 sm:col-span-5">
-              <h3 className="text-2xl font-semibold">Labels</h3>
-              <p className="text-custom-text-200">Manage the labels of this project.</p>
-              <PrimaryButton onClick={newLabel} size="sm" className="mt-4">
-                <span className="flex items-center gap-2">
-                  <PlusIcon className="h-4 w-4" />
-                  New label
-                </span>
+            <div className="flex items-center justify-between pb-4 border-b border-custom-border-200">
+              <h3 className="text-xl font-medium">Labels</h3>
+
+              <PrimaryButton
+                onClick={newLabel}
+                size="sm"
+                className="flex items-center justify-center"
+              >
+                Add label
               </PrimaryButton>
             </div>
-            <div className="col-span-12 space-y-5 sm:col-span-7">
+            <div className="space-y-3 py-6">
               {labelForm && (
                 <CreateUpdateLabelInline
                   labelForm={labelForm}

From 4da59c788d2831eb567a569cd424b3780f57dc45 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 12 Sep 2023 21:45:59 +0530
Subject: [PATCH 11/21] chore: member select improvement for member setting
 page

---
 web/components/project/index.ts               |   1 +
 web/components/project/member-select.tsx      |  74 +++++++
 .../projects/[projectId]/settings/members.tsx | 198 +++++++-----------
 3 files changed, 154 insertions(+), 119 deletions(-)
 create mode 100644 web/components/project/member-select.tsx

diff --git a/web/components/project/index.ts b/web/components/project/index.ts
index 8e3e5543ee0..23ad6ddbad1 100644
--- a/web/components/project/index.ts
+++ b/web/components/project/index.ts
@@ -6,3 +6,4 @@ export * from "./single-integration-card";
 export * from "./single-project-card";
 export * from "./single-sidebar-project";
 export * from "./confirm-project-leave-modal";
+export * from "./member-select";
diff --git a/web/components/project/member-select.tsx b/web/components/project/member-select.tsx
new file mode 100644
index 00000000000..5a5e6caba04
--- /dev/null
+++ b/web/components/project/member-select.tsx
@@ -0,0 +1,74 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import projectService from "services/project.service";
+// ui
+import { Avatar, CustomSearchSelect } from "components/ui";
+// fetch-keys
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
+
+type Props = {
+  value: any;
+  onChange: (val: string) => void;
+};
+
+export const MemberSelect: React.FC<Props> = ({ value, onChange }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: members } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const options = members?.map((member) => ({
+    value: member.member.id,
+    query: member.member.display_name,
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar user={member.member} />
+        {member.member.display_name}
+      </div>
+    ),
+  }));
+
+  const selectedOption = members?.find((m) => m.member.id === value)?.member;
+
+  return (
+    <CustomSearchSelect
+      value={value}
+      label={
+        <div className="flex items-center gap-2">
+          {selectedOption && <Avatar user={selectedOption} />}
+          {selectedOption ? (
+            selectedOption?.display_name
+          ) : (
+            <span className="text-sm py-0.5 text-custom-text-200">Select</span>
+          )}
+        </div>
+      }
+      buttonClassName="!py-2.5 !px-3"
+      options={
+        options &&
+        options && [
+          ...options,
+          {
+            value: "none",
+            query: "none",
+            content: <div className="flex items-center gap-2">None</div>,
+          },
+        ]
+      }
+      maxHeight="md"
+      position="right"
+      width="w-full"
+      onChange={onChange}
+    />
+  );
+};
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index 26ac0dd233a..d5ebf4a8c4b 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -19,7 +19,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // components
 import ConfirmProjectMemberRemove from "components/project/confirm-project-member-remove";
 import SendProjectInvitationModal from "components/project/send-project-invitation-modal";
-import { SettingsSidebar } from "components/project";
+import { MemberSelect, SettingsSidebar } from "components/project";
 // ui
 import {
   CustomMenu,
@@ -147,7 +147,7 @@ const MembersSettings: NextPage = () => {
 
     const payload: Partial<IProject> = {
       default_assignee: formData.default_assignee,
-      project_lead: formData.project_lead,
+      project_lead: formData.project_lead === "none" ? null : formData.project_lead,
     };
 
     await projectService
@@ -182,6 +182,36 @@ const MembersSettings: NextPage = () => {
       });
   }, [projectDetails, reset]);
 
+  const submitChanges = async (formData: Partial<IProject>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const payload: Partial<IProject> = {
+      default_assignee: formData.default_assignee === "none" ? null : formData.default_assignee,
+      project_lead: formData.project_lead === "none" ? null : formData.project_lead,
+    };
+
+    await projectService
+      .updateProject(workspaceSlug as string, projectId as string, payload, user)
+      .then((res) => {
+        mutate(PROJECT_DETAILS(projectId as string));
+
+        mutate(
+          PROJECTS_LIST(workspaceSlug as string, {
+            is_favorite: "all",
+          })
+        );
+
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Project updated successfully",
+        });
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
   return (
     <ProjectAuthorizationWrapper
       breadcrumbs={
@@ -248,128 +278,58 @@ const MembersSettings: NextPage = () => {
           <SettingsSidebar />
         </div>
         <section className="pr-9 py-8 w-full">
-          <form onSubmit={handleSubmit(onSubmit)}>
-            <h4 className="text-xl font-medium py-4 border-b border-custom-border-200">Defaults</h4>
-            <div className="flex flex-col gap-2 pb-4 w-full">
-              <div className="flex items-center py-8 gap-4 w-full">
-                <div className="flex flex-col gap-2 w-1/2">
-                  <h4 className="text-sm">Project Lead</h4>
-                  <div className="">
-                    {projectDetails ? (
-                      <Controller
-                        name="project_lead"
-                        control={control}
-                        render={({ field }) => (
-                          <CustomSelect
-                            {...field}
-                            label={
-                              people?.find((person) => person.member.id === field.value)?.member
-                                .display_name ?? (
-                                <span className="text-custom-text-200">Select lead</span>
-                              )
-                            }
-                            width="w-full"
-                            input
-                          >
-                            {people?.map((person) => (
-                              <CustomSelect.Option
-                                key={person.member.id}
-                                value={person.member.id}
-                                className="flex items-center gap-2"
-                              >
-                                <div className="flex items-center gap-2">
-                                  {person.member.avatar && person.member.avatar !== "" ? (
-                                    <div className="relative h-4 w-4">
-                                      <img
-                                        src={person.member.avatar}
-                                        className="absolute top-0 left-0 h-full w-full object-cover rounded-full"
-                                        alt="User Avatar"
-                                      />
-                                    </div>
-                                  ) : (
-                                    <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
-                                      {person.member.display_name?.charAt(0)}
-                                    </div>
-                                  )}
-                                  {person.member.display_name}
-                                </div>
-                              </CustomSelect.Option>
-                            ))}
-                          </CustomSelect>
-                        )}
-                      />
-                    ) : (
-                      <Loader className="h-9 w-full">
-                        <Loader.Item width="100%" height="100%" />
-                      </Loader>
-                    )}
-                  </div>
-                </div>
-
-                <div className="flex flex-col gap-2 w-1/2">
-                  <h4 className="text-sm">Default Assignee</h4>
-                  <div className="">
-                    {projectDetails ? (
-                      <Controller
-                        name="default_assignee"
-                        control={control}
-                        render={({ field }) => (
-                          <CustomSelect
-                            {...field}
-                            label={
-                              people?.find((p) => p.member.id === field.value)?.member
-                                .display_name ?? (
-                                <span className="text-custom-text-200">
-                                  Select default assignee
-                                </span>
-                              )
-                            }
-                            width="w-full"
-                            input
-                          >
-                            {people?.map((person) => (
-                              <CustomSelect.Option
-                                key={person.member.id}
-                                value={person.member.id}
-                                className="flex items-center gap-2"
-                              >
-                                <div className="flex items-center gap-2">
-                                  {person.member.avatar && person.member.avatar !== "" ? (
-                                    <div className="relative h-4 w-4">
-                                      <img
-                                        src={person.member.avatar}
-                                        className="absolute top-0 left-0 h-full w-full object-cover rounded-full"
-                                        alt="User Avatar"
-                                      />
-                                    </div>
-                                  ) : (
-                                    <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
-                                      {person.member.display_name?.charAt(0)}
-                                    </div>
-                                  )}
-                                  {person.member.display_name}
-                                </div>
-                              </CustomSelect.Option>
-                            ))}
-                          </CustomSelect>
-                        )}
-                      />
-                    ) : (
-                      <Loader className="h-9 w-full">
-                        <Loader.Item width="100%" height="100%" />
-                      </Loader>
-                    )}
-                  </div>
+          <h4 className="text-xl font-medium py-4 border-b border-custom-border-200">Defaults</h4>
+          <div className="flex flex-col gap-2 pb-4 w-full">
+            <div className="flex items-center py-8 gap-4 w-full">
+              <div className="flex flex-col gap-2 w-1/2">
+                <h4 className="text-sm">Project Lead</h4>
+                <div className="">
+                  {projectDetails ? (
+                    <Controller
+                      control={control}
+                      name="project_lead"
+                      render={({ field: { value } }) => (
+                        <MemberSelect
+                          value={value}
+                          onChange={(val: string) => {
+                            submitChanges({ project_lead: val });
+                          }}
+                        />
+                      )}
+                    />
+                  ) : (
+                    <Loader className="h-9 w-full">
+                      <Loader.Item width="100%" height="100%" />
+                    </Loader>
+                  )}
                 </div>
               </div>
 
-              <div className="sm:text-right">
-                <SecondaryButton type="submit" loading={isSubmitting}>
-                  {isSubmitting ? "Updating Project..." : "Update Project"}
-                </SecondaryButton>
+              <div className="flex flex-col gap-2 w-1/2">
+                <h4 className="text-sm">Default Assignee</h4>
+                <div className="">
+                  {projectDetails ? (
+                    <Controller
+                      control={control}
+                      name="default_assignee"
+                      render={({ field: { value } }) => (
+                        <MemberSelect
+                          value={value}
+                          onChange={(val: string) => {
+                            submitChanges({ default_assignee: val });
+                          }}
+                        />
+                      )}
+                    />
+                  ) : (
+                    <Loader className="h-9 w-full">
+                      <Loader.Item width="100%" height="100%" />
+                    </Loader>
+                  )}
+                </div>
               </div>
             </div>
-          </form>
+          </div>
 
           <div className="flex items-center justify-between gap-4 mt-4 pb-4 border-b border-custom-border-200">
             <h4 className="text-xl font-medium border-b border-custom-border-100">Members</h4>

From c5fda667ee9c8bb769f04103ee64f4105c8bc3a7 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 12 Sep 2023 22:10:56 +0530
Subject: [PATCH 12/21] chore: toggle switch component improvement

---
 .hintrc                                        |  8 +++++++-
 .../integration/slack/select-channel.tsx       |  8 +++-----
 web/components/ui/toggle-switch.tsx            | 18 +++++++++---------
 .../projects/[projectId]/settings/features.tsx |  2 +-
 4 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/.hintrc b/.hintrc
index 5899c4a9365..42502f3914e 100644
--- a/.hintrc
+++ b/.hintrc
@@ -11,6 +11,12 @@
         "button-name": "off"
       }
     ],
-    "disown-opener": "off"
+    "disown-opener": "off",
+    "axe/aria": [
+      "default",
+      {
+        "aria-required-attr": "off"
+      }
+    ]
   }
 }
\ No newline at end of file
diff --git a/web/components/integration/slack/select-channel.tsx b/web/components/integration/slack/select-channel.tsx
index c116992a8c5..61d1ba5d2a8 100644
--- a/web/components/integration/slack/select-channel.tsx
+++ b/web/components/integration/slack/select-channel.tsx
@@ -83,9 +83,7 @@ export const SelectChannel: React.FC<Props> = ({ integration }) => {
       {projectIntegration ? (
         <button
           type="button"
-          className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
-            slackChannelAvailabilityToggle ? "bg-green-500" : "bg-gray-200"
-          }`}
+          className={`relative inline-flex h-5 w-8 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none bg-gray-700`}
           role="switch"
           aria-checked
           onClick={() => {
@@ -94,8 +92,8 @@ export const SelectChannel: React.FC<Props> = ({ integration }) => {
         >
           <span
             aria-hidden="true"
-            className={`inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
-              slackChannelAvailabilityToggle ? "translate-x-5" : "translate-x-0"
+            className={`self-center inline-block h-3 w-3 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+              slackChannelAvailabilityToggle ? "translate-x-4" : "translate-x-0"
             }`}
           />
         </button>
diff --git a/web/components/ui/toggle-switch.tsx b/web/components/ui/toggle-switch.tsx
index 61e2ca082f1..296c962ecf5 100644
--- a/web/components/ui/toggle-switch.tsx
+++ b/web/components/ui/toggle-switch.tsx
@@ -18,24 +18,24 @@ export const ToggleSwitch: React.FC<Props> = (props) => {
       disabled={disabled}
       onChange={onChange}
       className={`relative flex-shrink-0 inline-flex ${
-        size === "sm" ? "h-3.5 w-6" : size === "md" ? "h-4 w-7" : "h-6 w-11"
-      } flex-shrink-0 cursor-pointer rounded-full border-2 border-custom-border-200 transition-colors duration-200 ease-in-out focus:outline-none ${
-        value ? "bg-green-500" : "bg-custom-background-80"
-      } ${className || ""}`}
+        size === "sm" ? "h-4 w-6" : size === "md" ? "h-5 w-8" : "h-6 w-10"
+      } flex-shrink-0 cursor-pointer rounded-full border border-custom-border-200 transition-colors duration-200 ease-in-out focus:outline-none bg-gray-700 ${
+        className || ""
+      }`}
     >
       <span className="sr-only">{label}</span>
       <span
         aria-hidden="true"
-        className={`inline-block ${
-          size === "sm" ? "h-2.5 w-2.5" : size === "md" ? "h-3 w-3" : "h-5 w-5"
+        className={`self-center inline-block ${
+          size === "sm" ? "h-2 w-2" : size === "md" ? "h-3 w-3" : "h-4 w-4"
         } transform rounded-full shadow ring-0 transition duration-200 ease-in-out ${
           value
             ? (size === "sm"
-                ? "translate-x-2.5"
-                : size === "md"
                 ? "translate-x-3"
+                : size === "md"
+                ? "translate-x-4"
                 : "translate-x-5") + " bg-white"
-            : "translate-x-0 bg-custom-background-90"
+            : "translate-x-1 bg-custom-background-90"
         }`}
       />
     </Switch>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
index 8c81d9c6954..6947787f481 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -196,7 +196,7 @@ const FeaturesSettings: NextPage = () => {
                       [feature.property]: !projectDetails?.[feature.property as keyof IProject],
                     });
                   }}
-                  size="sm"
+                  size="md"
                 />
               </div>
             ))}

From 4af9c80513d6479bb7d3436651511f16139868cc Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 13 Sep 2023 19:43:47 +0530
Subject: [PATCH 13/21] style: project automation setting ui improvement

---
 .../automation/auto-archive-automation.tsx    | 112 +++++-----
 .../automation/auto-close-automation.tsx      | 194 +++++++++---------
 .../[projectId]/settings/automations.tsx      |   9 +-
 3 files changed, 162 insertions(+), 153 deletions(-)

diff --git a/web/components/automation/auto-archive-automation.tsx b/web/components/automation/auto-archive-automation.tsx
index b71c4491d71..3fc98f375de 100644
--- a/web/components/automation/auto-archive-automation.tsx
+++ b/web/components/automation/auto-archive-automation.tsx
@@ -1,10 +1,10 @@
 import React, { useState } from "react";
 
 // component
-import { CustomSelect, Icon, ToggleSwitch } from "components/ui";
+import { CustomSelect, ToggleSwitch } from "components/ui";
 import { SelectMonthModal } from "components/automation";
-// icons
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
+// icon
+import { ArchiveRestore } from "lucide-react";
 // constants
 import { PROJECT_AUTOMATION_MONTHS } from "constants/project";
 // types
@@ -28,62 +28,66 @@ export const AutoArchiveAutomation: React.FC<Props> = ({ projectDetails, handleC
         handleClose={() => setmonthModal(false)}
         handleChange={handleChange}
       />
-      <div className="flex items-center justify-between gap-x-8 gap-y-2 border-b border-custom-border-200 bg-custom-background-100 p-4">
-        <div className="flex items-start gap-3">
-          <div className="flex items-center justify-center p-2.5 rounded bg-custom-background-90">
-            <Icon iconName="tab_close_right" className="text-xl leading-5" />
-          </div>
-          <div className="">
-            <h4 className="text-sm font-medium">Auto-archive closed issues</h4>
-            <p className="text-sm text-custom-text-200 tracking-tight">
-              Plane will auto archive issues that have been completed or canceled.
-            </p>
+      <div className="flex flex-col gap-4 border-b border-custom-border-200 px-4 py-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-start gap-3">
+            <div className="flex items-center justify-center p-3 rounded bg-custom-background-90">
+              <ArchiveRestore className="h-4 w-4 text-custom-text-100 flex-shrink-0" />
+            </div>
+            <div className="">
+              <h4 className="text-sm font-medium">Auto-archive closed issues</h4>
+              <p className="text-sm text-custom-text-200 tracking-tight">
+                Plane will auto archive issues that have been completed or canceled.
+              </p>
+            </div>
           </div>
+          <ToggleSwitch
+            value={projectDetails?.archive_in !== 0}
+            onChange={() =>
+              projectDetails?.archive_in === 0
+                ? handleChange({ archive_in: 1 })
+                : handleChange({ archive_in: 0 })
+            }
+            size="sm"
+          />
         </div>
-        <ToggleSwitch
-          value={projectDetails?.archive_in !== 0}
-          onChange={() =>
-            projectDetails?.archive_in === 0
-              ? handleChange({ archive_in: 1 })
-              : handleChange({ archive_in: 0 })
-          }
-          size="sm"
-        />
 
         {projectDetails?.archive_in !== 0 && (
-          <div className="flex items-center justify-between gap-2 w-full">
-            <div className="w-1/2 text-base font-medium">
-              Auto-archive issues that are closed for
-            </div>
-            <div className="w-1/2">
-              <CustomSelect
-                value={projectDetails?.archive_in}
-                label={`${projectDetails?.archive_in} ${
-                  projectDetails?.archive_in === 1 ? "Month" : "Months"
-                }`}
-                onChange={(val: number) => {
-                  handleChange({ archive_in: val });
-                }}
-                input
-                verticalPosition="top"
-                width="w-full"
-              >
-                <>
-                  {PROJECT_AUTOMATION_MONTHS.map((month) => (
-                    <CustomSelect.Option key={month.label} value={month.value}>
-                      {month.label}
-                    </CustomSelect.Option>
-                  ))}
+          <div className="ml-12">
+            <div className="flex items-center justify-between rounded px-5 py-4 bg-custom-background-90 border border-custom-border-200 gap-2 w-full">
+              <div className="w-1/2 text-sm font-medium">
+                Auto-archive issues that are closed for
+              </div>
+              <div className="w-1/2">
+                <CustomSelect
+                  value={projectDetails?.archive_in}
+                  label={`${projectDetails?.archive_in} ${
+                    projectDetails?.archive_in === 1 ? "Month" : "Months"
+                  }`}
+                  onChange={(val: number) => {
+                    handleChange({ archive_in: val });
+                  }}
+                  input
+                  verticalPosition="bottom"
+                  width="w-full"
+                >
+                  <>
+                    {PROJECT_AUTOMATION_MONTHS.map((month) => (
+                      <CustomSelect.Option key={month.label} value={month.value}>
+                        <span className="text-sm">{month.label}</span>
+                      </CustomSelect.Option>
+                    ))}
 
-                  <button
-                    type="button"
-                    className="flex w-full select-none items-center rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80"
-                    onClick={() => setmonthModal(true)}
-                  >
-                    Customize Time Range
-                  </button>
-                </>
-              </CustomSelect>
+                    <button
+                      type="button"
+                      className="flex w-full text-sm select-none items-center rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80"
+                      onClick={() => setmonthModal(true)}
+                    >
+                      Customize Time Range
+                    </button>
+                  </>
+                </CustomSelect>
+              </div>
             </div>
           </div>
         )}
diff --git a/web/components/automation/auto-close-automation.tsx b/web/components/automation/auto-close-automation.tsx
index 4411c9e1180..256c1ddb941 100644
--- a/web/components/automation/auto-close-automation.tsx
+++ b/web/components/automation/auto-close-automation.tsx
@@ -8,8 +8,9 @@ import { useRouter } from "next/router";
 import { CustomSearchSelect, CustomSelect, Icon, ToggleSwitch } from "components/ui";
 import { SelectMonthModal } from "components/automation";
 // icons
-import { ChevronDownIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
+import { Squares2X2Icon } from "@heroicons/react/24/outline";
 import { StateGroupIcon } from "components/icons";
+import { ArchiveX } from "lucide-react";
 // services
 import stateService from "services/state.service";
 // constants
@@ -76,104 +77,109 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
         handleChange={handleChange}
       />
 
-      <div className="flex items-center justify-between gap-x-8 gap-y-2 border-b border-custom-border-200 bg-custom-background-100 p-4">
-        <div className="flex items-start gap-3">
-          <div className="flex items-center justify-center p-2.5 rounded bg-custom-background-90">
-            <Icon iconName="archive" className="text-xl leading-5" />
-          </div>
-          <div className="">
-            <h4 className="text-sm font-medium">Auto-close issues</h4>
-            <p className="text-sm text-custom-text-200 tracking-tight">
-              Plane will automatically close issue that haven’t been completed or canceled.
-            </p>
+      <div className="flex flex-col gap-4 border-b border-custom-border-200 px-4 py-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-start gap-3">
+            <div className="flex items-center justify-center p-3 rounded bg-custom-background-90">
+              <ArchiveX className="h-4 w-4 text-red-500 flex-shrink-0" />
+            </div>
+            <div className="">
+              <h4 className="text-sm font-medium">Auto-close issues</h4>
+              <p className="text-sm text-custom-text-200 tracking-tight">
+                Plane will automatically close issue that haven’t been completed or canceled.
+              </p>
+            </div>
           </div>
+          <ToggleSwitch
+            value={projectDetails?.close_in !== 0}
+            onChange={() =>
+              projectDetails?.close_in === 0
+                ? handleChange({ close_in: 1, default_state: defaultState })
+                : handleChange({ close_in: 0, default_state: null })
+            }
+            size="sm"
+          />
         </div>
-        <ToggleSwitch
-          value={projectDetails?.close_in !== 0}
-          onChange={() =>
-            projectDetails?.close_in === 0
-              ? handleChange({ close_in: 1, default_state: defaultState })
-              : handleChange({ close_in: 0, default_state: null })
-          }
-          size="sm"
-        />
 
         {projectDetails?.close_in !== 0 && (
-          <div className="flex flex-col gap-4 w-full">
-            <div className="flex items-center justify-between gap-2 w-full">
-              <div className="w-1/2 text-base font-medium">
-                Auto-close issues that are inactive for
+          <div className="ml-12">
+            <div className="flex flex-col gap-4">
+              <div className="flex items-center justify-between rounded px-5 py-4 bg-custom-background-90 border border-custom-border-200 gap-2 w-full">
+                <div className="w-1/2 text-sm font-medium">
+                  Auto-close issues that are inactive for
+                </div>
+                <div className="w-1/2">
+                  <CustomSelect
+                    value={projectDetails?.close_in}
+                    label={`${projectDetails?.close_in} ${
+                      projectDetails?.close_in === 1 ? "Month" : "Months"
+                    }`}
+                    onChange={(val: number) => {
+                      handleChange({ close_in: val });
+                    }}
+                    input
+                    width="w-full"
+                  >
+                    <>
+                      {PROJECT_AUTOMATION_MONTHS.map((month) => (
+                        <CustomSelect.Option key={month.label} value={month.value}>
+                          {month.label}
+                        </CustomSelect.Option>
+                      ))}
+                      <button
+                        type="button"
+                        className="flex w-full select-none items-center rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80"
+                        onClick={() => setmonthModal(true)}
+                      >
+                        Customize Time Range
+                      </button>
+                    </>
+                  </CustomSelect>
+                </div>
               </div>
-              <div className="w-1/2">
-                <CustomSelect
-                  value={projectDetails?.close_in}
-                  label={`${projectDetails?.close_in} ${
-                    projectDetails?.close_in === 1 ? "Month" : "Months"
-                  }`}
-                  onChange={(val: number) => {
-                    handleChange({ close_in: val });
-                  }}
-                  input
-                  width="w-full"
-                >
-                  <>
-                    {PROJECT_AUTOMATION_MONTHS.map((month) => (
-                      <CustomSelect.Option key={month.label} value={month.value}>
-                        {month.label}
-                      </CustomSelect.Option>
-                    ))}
-                    <button
-                      type="button"
-                      className="flex w-full select-none items-center rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80"
-                      onClick={() => setmonthModal(true)}
-                    >
-                      Customize Time Range
-                    </button>
-                  </>
-                </CustomSelect>
-              </div>
-            </div>
-            <div className="flex items-center justify-between gap-2 w-full">
-              <div className="w-1/2 text-base font-medium">Auto-close Status</div>
-              <div className="w-1/2 ">
-                <CustomSearchSelect
-                  value={
-                    projectDetails?.default_state ? projectDetails?.default_state : defaultState
-                  }
-                  label={
-                    <div className="flex items-center gap-2">
-                      {selectedOption ? (
-                        <StateGroupIcon
-                          stateGroup={selectedOption.group}
-                          color={selectedOption.color}
-                          height="16px"
-                          width="16px"
-                        />
-                      ) : currentDefaultState ? (
-                        <StateGroupIcon
-                          stateGroup={currentDefaultState.group}
-                          color={currentDefaultState.color}
-                          height="16px"
-                          width="16px"
-                        />
-                      ) : (
-                        <Squares2X2Icon className="h-3.5 w-3.5 text-custom-text-200" />
-                      )}
-                      {selectedOption?.name
-                        ? selectedOption.name
-                        : currentDefaultState?.name ?? (
-                            <span className="text-custom-text-200">State</span>
-                          )}
-                    </div>
-                  }
-                  onChange={(val: string) => {
-                    handleChange({ default_state: val });
-                  }}
-                  options={options}
-                  disabled={!multipleOptions}
-                  width="w-full"
-                  input
-                />
+
+              <div className="flex items-center justify-between rounded px-5 py-4 bg-custom-background-90 border border-custom-border-200 gap-2 w-full">
+                <div className="w-1/2 text-sm font-medium">Auto-close Status</div>
+                <div className="w-1/2 ">
+                  <CustomSearchSelect
+                    value={
+                      projectDetails?.default_state ? projectDetails?.default_state : defaultState
+                    }
+                    label={
+                      <div className="flex items-center gap-2">
+                        {selectedOption ? (
+                          <StateGroupIcon
+                            stateGroup={selectedOption.group}
+                            color={selectedOption.color}
+                            height="16px"
+                            width="16px"
+                          />
+                        ) : currentDefaultState ? (
+                          <StateGroupIcon
+                            stateGroup={currentDefaultState.group}
+                            color={currentDefaultState.color}
+                            height="16px"
+                            width="16px"
+                          />
+                        ) : (
+                          <Squares2X2Icon className="h-3.5 w-3.5 text-custom-text-200" />
+                        )}
+                        {selectedOption?.name
+                          ? selectedOption.name
+                          : currentDefaultState?.name ?? (
+                              <span className="text-custom-text-200">State</span>
+                            )}
+                      </div>
+                    }
+                    onChange={(val: string) => {
+                      handleChange({ default_state: val });
+                    }}
+                    options={options}
+                    disabled={!multipleOptions}
+                    width="w-full"
+                    input
+                  />
+                </div>
               </div>
             </div>
           </div>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
index 7c1c1407cee..ec6a57161f1 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
@@ -80,12 +80,11 @@ const AutomationsSettings: NextPage = () => {
           <SettingsSidebar />
         </div>
         <section className="pr-9 py-8 w-full">
-          <h3 className="text-xl font-medium pb-4 border-b border-custom-border-200">
-            Automations
-          </h3>
-
-          <AutoCloseAutomation projectDetails={projectDetails} handleChange={handleChange} />
+          <div className="flex items-center py-3.5 border-b border-custom-border-200">
+            <h3 className="text-xl font-medium">Automations</h3>
+          </div>
           <AutoArchiveAutomation projectDetails={projectDetails} handleChange={handleChange} />
+          <AutoCloseAutomation projectDetails={projectDetails} handleChange={handleChange} />
         </section>
       </div>
     </ProjectAuthorizationWrapper>

From 59adb712f9286e0629edbb437f06bcef0c2c704e Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 13 Sep 2023 19:51:08 +0530
Subject: [PATCH 14/21] style: module icon added

---
 web/components/icons/index.ts        |  1 +
 web/components/icons/module-icon.tsx | 59 ++++++++++++++++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 web/components/icons/module-icon.tsx

diff --git a/web/components/icons/index.ts b/web/components/icons/index.ts
index d3be7f2a8a0..856719f02a6 100644
--- a/web/components/icons/index.ts
+++ b/web/components/icons/index.ts
@@ -83,3 +83,4 @@ export * from "./archive-icon";
 export * from "./clock-icon";
 export * from "./bell-icon";
 export * from "./single-comment-icon";
+export * from "./module-icon";
\ No newline at end of file
diff --git a/web/components/icons/module-icon.tsx b/web/components/icons/module-icon.tsx
new file mode 100644
index 00000000000..dbe58eb53eb
--- /dev/null
+++ b/web/components/icons/module-icon.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const ModuleIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  className,
+  color = "#F15B5B",
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z"
+      stroke="#F15B5B"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M5.84925 4.66667H4.81221C4.73039 4.66667 4.66406 4.733 4.66406 4.81482V5.85185C4.66406 5.93367 4.73039 6 4.81221 6H5.84925C5.93107 6 5.9974 5.93367 5.9974 5.85185V4.81482C5.9974 4.733 5.93107 4.66667 5.84925 4.66667Z"
+      fill={color}
+      stroke="#F15B5B"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M5.84925 10H4.81221C4.73039 10 4.66406 10.0663 4.66406 10.1481V11.1852C4.66406 11.267 4.73039 11.3333 4.81221 11.3333H5.84925C5.93107 11.3333 5.9974 11.267 5.9974 11.1852V10.1481C5.9974 10.0663 5.93107 10 5.84925 10Z"
+      fill={color}
+      stroke="#F15B5B"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M11.1852 4.66667H10.1481C10.0663 4.66667 10 4.733 10 4.81482V5.85185C10 5.93367 10.0663 6 10.1481 6H11.1852C11.267 6 11.3333 5.93367 11.3333 5.85185V4.81482C11.3333 4.733 11.267 4.66667 11.1852 4.66667Z"
+      fill={color}
+      stroke="#F15B5B"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M11.1852 10H10.1481C10.0663 10 10 10.0663 10 10.1481V11.1852C10 11.267 10.0663 11.3333 10.1481 11.3333H11.1852C11.267 11.3333 11.3333 11.267 11.3333 11.1852V10.1481C11.3333 10.0663 11.267 10 11.1852 10Z"
+      fill={color}
+      stroke="#F15B5B"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);

From 6b32f9f871b20cfbf312ed2b3d115f0e529f8d33 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 13 Sep 2023 19:51:57 +0530
Subject: [PATCH 15/21] style: toggle switch improvement

---
 web/components/ui/toggle-switch.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/components/ui/toggle-switch.tsx b/web/components/ui/toggle-switch.tsx
index 296c962ecf5..e52ff26c944 100644
--- a/web/components/ui/toggle-switch.tsx
+++ b/web/components/ui/toggle-switch.tsx
@@ -19,9 +19,9 @@ export const ToggleSwitch: React.FC<Props> = (props) => {
       onChange={onChange}
       className={`relative flex-shrink-0 inline-flex ${
         size === "sm" ? "h-4 w-6" : size === "md" ? "h-5 w-8" : "h-6 w-10"
-      } flex-shrink-0 cursor-pointer rounded-full border border-custom-border-200 transition-colors duration-200 ease-in-out focus:outline-none bg-gray-700 ${
-        className || ""
-      }`}
+      } flex-shrink-0 cursor-pointer rounded-full border border-custom-border-200 transition-colors duration-200 ease-in-out focus:outline-none ${
+        value ? "bg-custom-primary-100" : "bg-gray-700"
+      } ${className || ""}`}
     >
       <span className="sr-only">{label}</span>
       <span

From b452302a4d5041c23f8e59d5783fe6b2e6da6df2 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 13 Sep 2023 19:53:00 +0530
Subject: [PATCH 16/21] style: ui and spacing consistency

---
 web/components/project/member-select.tsx      |  2 +-
 .../integration-and-import-export-banner.tsx  |  2 +-
 web/package.json                              |  2 +-
 .../[projectId]/settings/estimates.tsx        |  2 +-
 .../[projectId]/settings/features.tsx         | 29 +++++++++----------
 .../projects/[projectId]/settings/labels.tsx  |  2 +-
 .../projects/[projectId]/settings/members.tsx | 22 ++++++++++----
 .../projects/[projectId]/settings/states.tsx  |  4 ++-
 8 files changed, 39 insertions(+), 26 deletions(-)

diff --git a/web/components/project/member-select.tsx b/web/components/project/member-select.tsx
index 5a5e6caba04..e6eee911d20 100644
--- a/web/components/project/member-select.tsx
+++ b/web/components/project/member-select.tsx
@@ -53,7 +53,7 @@ export const MemberSelect: React.FC<Props> = ({ value, onChange }) => {
           )}
         </div>
       }
-      buttonClassName="!py-2.5 !px-3"
+      buttonClassName="!px-3 !py-2"
       options={
         options &&
         options && [
diff --git a/web/components/ui/integration-and-import-export-banner.tsx b/web/components/ui/integration-and-import-export-banner.tsx
index f79927ab16e..541c49efcad 100644
--- a/web/components/ui/integration-and-import-export-banner.tsx
+++ b/web/components/ui/integration-and-import-export-banner.tsx
@@ -6,7 +6,7 @@ type Props = {
 };
 
 export const IntegrationAndImportExportBanner: React.FC<Props> = ({ bannerName, description }) => (
-  <div className="flex flex-col items-start gap-3 pb-4 border-b border-custom-border-200">
+  <div className="flex flex-col items-start gap-3 py-3.5 border-b border-custom-border-200">
     <h3 className="text-xl font-medium">{bannerName}</h3>
     {description && (
       <div className="flex items-center gap-3 rounded-[10px] border border-custom-primary/75 bg-custom-primary/5 p-4 text-sm text-custom-text-100">
diff --git a/web/package.json b/web/package.json
index 17633ccb07e..080a99bb857 100644
--- a/web/package.json
+++ b/web/package.json
@@ -57,7 +57,7 @@
     "js-cookie": "^3.0.1",
     "lodash.debounce": "^4.0.8",
     "lowlight": "^2.9.0",
-    "lucide-react": "^0.263.1",
+    "lucide-react": "^0.269.0",
     "mobx": "^6.10.0",
     "mobx-react-lite": "^4.0.3",
     "next": "12.3.2",
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
index a0c42a470fb..b25035d9cf2 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
@@ -130,7 +130,7 @@ const EstimatesSettings: NextPage = () => {
             <SettingsSidebar />
           </div>
           <div className="pr-9 py-8 flex flex-col w-full">
-            <section className="flex items-center justify-between pb-4 border-b border-custom-border-200">
+            <section className="flex items-center justify-between pt-2 pb-3.5 border-b border-custom-border-200">
               <h3 className="text-xl font-medium">Estimates</h3>
               <div className="col-span-12 space-y-5 sm:col-span-7">
                 <div className="flex items-center gap-2">
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
index 6947787f481..5c04c5f7cca 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -15,11 +15,11 @@ import useUserAuth from "hooks/use-user-auth";
 // components
 import { SettingsSidebar } from "components/project";
 // ui
-import { Icon, ToggleSwitch } from "components/ui";
+import { ToggleSwitch } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
-import { ContrastIcon, PeopleGroupIcon, ViewListIcon, InboxIcon } from "components/icons";
-import { DocumentTextIcon } from "@heroicons/react/24/outline";
+import { ModuleIcon } from "components/icons";
+import { Contrast, FileText, Inbox, Layers } from "lucide-react";
 // types
 import { IProject } from "types";
 import type { NextPage } from "next";
@@ -33,38 +33,35 @@ const featuresList = [
     title: "Cycles",
     description:
       "Cycles are enabled for all the projects in this workspace. Access them from the sidebar.",
-    icon: <ContrastIcon color="#3f76ff" width={20} height={20} className="flex-shrink-0" />,
+    icon: <Contrast className="h-4 w-4 text-custom-primary-100 flex-shrink-0" />,
     property: "cycle_view",
   },
   {
     title: "Modules",
     description:
       "Modules are enabled for all the projects in this workspace. Access it from the sidebar.",
-    // icon: <PeopleGroupIcon color="#ff6b00" width={20} height={20} className="flex-shrink-0" />,
-    icon: <Icon iconName="dataset" className="text-xl flex-shrink-0" />,
+    icon: <ModuleIcon width={16} height={16} className="flex-shrink-0" />,
     property: "module_view",
   },
   {
     title: "Views",
     description:
       "Views are enabled for all the projects in this workspace. Access it from the sidebar.",
-    icon: <ViewListIcon color="#05c3ff" width={20} height={20} className="flex-shrink-0" />,
+    icon: <Layers className="h-4 w-4 text-custom-primary-100 flex-shrink-0" />,
     property: "issue_views_view",
   },
   {
     title: "Pages",
     description:
       "Pages are enabled for all the projects in this workspace. Access it from the sidebar.",
-    // icon: <DocumentTextIcon color="#fcbe1d" width={20} height={20} className="flex-shrink-0" />,
-    icon: <Icon iconName="article" className="text-xl flex-shrink-0" />,
+    icon: <FileText className="h-4 w-4 text-custom-primary-100 flex-shrink-0" />,
     property: "page_view",
   },
   {
     title: "Inbox",
     description:
       "Inbox are enabled for all the projects in this workspace. Access it from the issues views page.",
-    // icon: <InboxIcon color="#fcbe1d" width={20} height={20} className="flex-shrink-0" />,
-    icon: <Icon iconName="move_to_inbox" className="text-xl flex-shrink-0" />,
+    icon: <Inbox className="h-4 w-4 text-custom-primary-100 flex-shrink-0" />,
     property: "inbox_view",
   },
 ];
@@ -156,8 +153,10 @@ const FeaturesSettings: NextPage = () => {
         <div className="w-80 py-8">
           <SettingsSidebar />
         </div>
-        <section className="pr-9 py-8 space-y-4 w-full">
-          <h3 className="text-xl font-medium pb-4 border-b border-custom-border-200">Features</h3>
+        <section className="pr-9 py-8 w-full">
+          <div className="flex items-center py-3.5 border-b border-custom-border-200">
+            <h3 className="text-xl font-medium">Features</h3>
+          </div>
           <div>
             {featuresList.map((feature) => (
               <div
@@ -165,7 +164,7 @@ const FeaturesSettings: NextPage = () => {
                 className="flex items-center justify-between gap-x-8 gap-y-2 border-b border-custom-border-200 bg-custom-background-100 p-4"
               >
                 <div className="flex items-start gap-3">
-                  <div className="flex items-center justify-center p-2.5 rounded bg-custom-background-90">
+                  <div className="flex items-center justify-center p-3 rounded bg-custom-background-90">
                     {feature.icon}
                   </div>
                   <div className="">
@@ -196,7 +195,7 @@ const FeaturesSettings: NextPage = () => {
                       [feature.property]: !projectDetails?.[feature.property as keyof IProject],
                     });
                   }}
-                  size="md"
+                  size="sm"
                 />
               </div>
             ))}
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
index 9541536fb8f..bd1e68a7702 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
@@ -118,7 +118,7 @@ const LabelsSettings: NextPage = () => {
             <SettingsSidebar />
           </div>
           <section className="pr-9 py-8 gap-10 w-full">
-            <div className="flex items-center justify-between pb-4 border-b border-custom-border-200">
+            <div className="flex items-center justify-between pt-2 pb-3.5 border-b border-custom-border-200">
               <h3 className="text-xl font-medium">Labels</h3>
 
               <PrimaryButton
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index d5ebf4a8c4b..8a4d807861e 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -278,7 +278,9 @@ const MembersSettings: NextPage = () => {
           <SettingsSidebar />
         </div>
         <section className="pr-9 py-8 w-full">
-          <h4 className="text-xl font-medium py-4 border-b border-custom-border-200">Defaults</h4>
+          <div className="flex items-center py-3.5 border-b border-custom-border-200">
+            <h3 className="text-xl font-medium">Defaults</h3>
+          </div>
           <div className="flex flex-col gap-2 pb-4 w-full">
             <div className="flex items-center py-8 gap-4 w-full">
               <div className="flex flex-col gap-2 w-1/2">
@@ -331,7 +333,7 @@ const MembersSettings: NextPage = () => {
             </div>
           </div>
 
-          <div className="flex items-center justify-between gap-4 mt-4 pb-4 border-b border-custom-border-200">
+          <div className="flex items-center justify-between gap-4 py-3.5 border-b border-custom-border-200">
             <h4 className="text-xl font-medium border-b border-custom-border-100">Members</h4>
             <PrimaryButton onClick={() => setInviteModal(true)}>Add Member</PrimaryButton>
           </div>
@@ -397,10 +399,16 @@ const MembersSettings: NextPage = () => {
                         <CustomSelect
                           customButton={
                             <button className="flex item-center gap-1">
-                              <span className="flex items-center text-sm font-medium">
+                              <span
+                                className={`flex items-center text-sm font-medium ${
+                                  member.memberId !== user?.id ? "" : "text-custom-sidebar-text-400"
+                                }`}
+                              >
                                 {ROLE[member.role as keyof typeof ROLE]}
                               </span>
-                              <Icon iconName="expand_more" className="text-lg font-medium" />
+                              {member.memberId !== user?.id && (
+                                <Icon iconName="expand_more" className="text-lg font-medium" />
+                              )}
                             </button>
                           }
                           value={member.role}
@@ -466,7 +474,11 @@ const MembersSettings: NextPage = () => {
                           >
                             <span className="flex items-center justify-start gap-2">
                               <XMarkIcon className="h-4 w-4" />
-                              <span>Remove member</span>
+
+                              <span>
+                                {" "}
+                                {member.memberId !== user?.id ? "Remove member" : "Leave project"}
+                              </span>
                             </span>
                           </CustomMenu.MenuItem>
                         </CustomMenu>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
index 1c4c26ae442..e36592a899a 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@@ -78,7 +78,9 @@ const StatesSettings: NextPage = () => {
             <SettingsSidebar />
           </div>
           <div className="pr-9 py-8 gap-10 w-full">
-            <h3 className="text-xl font-medium pb-4 border-b border-custom-border-200">States</h3>
+            <div className="flex items-center py-3.5 border-b border-custom-border-200">
+              <h3 className="text-xl font-medium">States</h3>
+            </div>
             <div className="space-y-8 py-6">
               {states && projectDetails && orderedStateGroups ? (
                 Object.keys(orderedStateGroups).map((key) => {

From 486cab8f2ee616e1277d493d565037c82d3b9cf6 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 13 Sep 2023 20:43:20 +0530
Subject: [PATCH 17/21] style: project label setting revamp

---
 .../labels/create-update-label-inline.tsx     | 16 ++--
 web/components/labels/single-label-group.tsx  | 73 +++++++++++--------
 web/components/labels/single-label.tsx        | 57 +++++++++------
 3 files changed, 81 insertions(+), 65 deletions(-)

diff --git a/web/components/labels/create-update-label-inline.tsx b/web/components/labels/create-update-label-inline.tsx
index 6306d14ca36..61064e7774f 100644
--- a/web/components/labels/create-update-label-inline.tsx
+++ b/web/components/labels/create-update-label-inline.tsx
@@ -17,7 +17,7 @@ import issuesService from "services/issues.service";
 // ui
 import { Input, PrimaryButton, SecondaryButton } from "components/ui";
 // icons
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import { Component } from "lucide-react";
 // types
 import { IIssueLabels } from "types";
 // fetch-keys
@@ -132,7 +132,7 @@ export const CreateUpdateLabelInline = forwardRef<HTMLDivElement, Props>(
 
     return (
       <div
-        className={`flex scroll-m-8 items-center gap-2 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-5 ${
+        className={`flex scroll-m-8 items-center gap-2 rounded border border-custom-border-200 bg-custom-background-100 px-3.5 py-2 ${
           labelForm ? "" : "hidden"
         }`}
         ref={ref}
@@ -146,18 +146,12 @@ export const CreateUpdateLabelInline = forwardRef<HTMLDivElement, Props>(
                     open ? "text-custom-text-100" : "text-custom-text-200"
                   }`}
                 >
-                  <span
-                    className="h-5 w-5 rounded"
+                  <Component
+                    className="h-4 w-4 text-custom-text-100 flex-shrink-0"
                     style={{
-                      backgroundColor: watch("color"),
+                      color: watch("color"),
                     }}
                   />
-                  <ChevronDownIcon
-                    className={`ml-2 h-5 w-5 group-hover:text-custom-text-200 ${
-                      open ? "text-gray-600" : "text-gray-400"
-                    }`}
-                    aria-hidden="true"
-                  />
                 </Popover.Button>
 
                 <Transition
diff --git a/web/components/labels/single-label-group.tsx b/web/components/labels/single-label-group.tsx
index d489ce0574a..47a771174a8 100644
--- a/web/components/labels/single-label-group.tsx
+++ b/web/components/labels/single-label-group.tsx
@@ -13,12 +13,12 @@ import { CustomMenu } from "components/ui";
 // icons
 import {
   ChevronDownIcon,
-  RectangleGroupIcon,
   XMarkIcon,
   PlusIcon,
   PencilIcon,
   TrashIcon,
 } from "@heroicons/react/24/outline";
+import { Component, X } from "lucide-react";
 // types
 import { ICurrentUserResponse, IIssueLabels } from "types";
 // fetch-keys
@@ -76,20 +76,18 @@ export const SingleLabelGroup: React.FC<Props> = ({
   return (
     <Disclosure
       as="div"
-      className="rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-5 text-custom-text-100"
+      className="rounded border border-custom-border-200 bg-custom-background-100 px-3.5 py-3 text-custom-text-100"
       defaultOpen
     >
       {({ open }) => (
         <>
           <div className="flex cursor-pointer items-center justify-between gap-2">
             <div className="flex items-center gap-2">
-              <span>
-                <RectangleGroupIcon className="h-4 w-4" />
-              </span>
+              <Component className="h-4 w-4 text-custom-text-100 flex-shrink-0" />
               <h6>{label.name}</h6>
             </div>
             <div className="flex items-center gap-2">
-              <CustomMenu ellipsis>
+              <CustomMenu ellipsis buttonClassName="!text-custom-sidebar-text-400">
                 <CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
                   <span className="flex items-center justify-start gap-2">
                     <PlusIcon className="h-4 w-4" />
@@ -112,7 +110,9 @@ export const SingleLabelGroup: React.FC<Props> = ({
               <Disclosure.Button>
                 <span>
                   <ChevronDownIcon
-                    className={`h-4 w-4 text-custom-text-100 ${!open ? "rotate-90 transform" : ""}`}
+                    className={`h-4 w-4 text-custom-sidebar-text-400 ${
+                      !open ? "rotate-90 transform" : ""
+                    }`}
                   />
                 </span>
               </Disclosure.Button>
@@ -128,15 +128,15 @@ export const SingleLabelGroup: React.FC<Props> = ({
             leaveTo="transform opacity-0"
           >
             <Disclosure.Panel>
-              <div className="mt-3 ml-6 space-y-3">
+              <div className="mt-2.5 ml-6">
                 {labelChildren.map((child) => (
                   <div
                     key={child.id}
-                    className="group flex items-center justify-between rounded-md border border-custom-border-200 p-2 text-sm"
+                    className="group flex items-center justify-between border-b border-custom-border-200 px-4 py-2.5 text-sm last:border-0"
                   >
                     <h5 className="flex items-center gap-3">
                       <span
-                        className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
+                        className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
                         style={{
                           backgroundColor:
                             child.color && child.color !== "" ? child.color : "#000000",
@@ -144,27 +144,38 @@ export const SingleLabelGroup: React.FC<Props> = ({
                       />
                       {child.name}
                     </h5>
-                    <div className="pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100">
-                      <CustomMenu ellipsis>
-                        <CustomMenu.MenuItem onClick={() => removeFromGroup(child)}>
-                          <span className="flex items-center justify-start gap-2">
-                            <XMarkIcon className="h-4 w-4" />
-                            <span>Remove from group</span>
-                          </span>
-                        </CustomMenu.MenuItem>
-                        <CustomMenu.MenuItem onClick={() => editLabel(child)}>
-                          <span className="flex items-center justify-start gap-2">
-                            <PencilIcon className="h-4 w-4" />
-                            <span>Edit label</span>
-                          </span>
-                        </CustomMenu.MenuItem>
-                        <CustomMenu.MenuItem onClick={handleLabelDelete}>
-                          <span className="flex items-center justify-start gap-2">
-                            <TrashIcon className="h-4 w-4" />
-                            <span>Delete label</span>
-                          </span>
-                        </CustomMenu.MenuItem>
-                      </CustomMenu>
+                    <div className="flex items-center gap-3.5 pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100">
+                      <div className="h-4 w-4">
+                        <CustomMenu
+                          customButton={
+                            <div className="h-4 w-4">
+                              <Component className="h-4 w-4 leading-4 text-custom-sidebar-text-400 flex-shrink-0" />
+                            </div>
+                          }
+                        >
+                          <CustomMenu.MenuItem onClick={() => removeFromGroup(child)}>
+                            <span className="flex items-center justify-start gap-2">
+                              <XMarkIcon className="h-4 w-4" />
+                              <span>Remove from group</span>
+                            </span>
+                          </CustomMenu.MenuItem>
+                          <CustomMenu.MenuItem onClick={() => editLabel(child)}>
+                            <span className="flex items-center justify-start gap-2">
+                              <PencilIcon className="h-4 w-4" />
+                              <span>Edit label</span>
+                            </span>
+                          </CustomMenu.MenuItem>
+                        </CustomMenu>
+                      </div>
+
+                      <div className="flex items-center">
+                        <button
+                          className="flex items-center justify-start gap-2"
+                          onClick={handleLabelDelete}
+                        >
+                          <X className="h-[18px] w-[18px] text-custom-sidebar-text-400 flex-shrink-0" />
+                        </button>
+                      </div>
                     </div>
                   </div>
                 ))}
diff --git a/web/components/labels/single-label.tsx b/web/components/labels/single-label.tsx
index 37aee2eff64..464b331529d 100644
--- a/web/components/labels/single-label.tsx
+++ b/web/components/labels/single-label.tsx
@@ -5,7 +5,8 @@ import { CustomMenu } from "components/ui";
 // types
 import { IIssueLabels } from "types";
 //icons
-import { RectangleGroupIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
+import { RectangleGroupIcon, PencilIcon } from "@heroicons/react/24/outline";
+import { Component, X } from "lucide-react";
 
 type Props = {
   label: IIssueLabels;
@@ -20,8 +21,8 @@ export const SingleLabel: React.FC<Props> = ({
   editLabel,
   handleLabelDelete,
 }) => (
-  <div className="gap-2 space-y-3 divide-y divide-custom-border-200 rounded-[10px]  border border-custom-border-200 bg-custom-background-100 px-4 py-3">
-    <div className="flex items-center justify-between">
+  <div className="gap-2 space-y-3 divide-y divide-custom-border-200 rounded border border-custom-border-200 bg-custom-background-100 px-4 py-2.5">
+    <div className="group flex items-center justify-between">
       <div className="flex items-center gap-3">
         <span
           className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
@@ -31,26 +32,36 @@ export const SingleLabel: React.FC<Props> = ({
         />
         <h6 className="text-sm">{label.name}</h6>
       </div>
-      <CustomMenu ellipsis>
-        <CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
-          <span className="flex items-center justify-start gap-2">
-            <RectangleGroupIcon className="h-4 w-4" />
-            <span>Convert to group</span>
-          </span>
-        </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem onClick={() => editLabel(label)}>
-          <span className="flex items-center justify-start gap-2">
-            <PencilIcon className="h-4 w-4" />
-            <span>Edit label</span>
-          </span>
-        </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem onClick={handleLabelDelete}>
-          <span className="flex items-center justify-start gap-2">
-            <TrashIcon className="h-4 w-4" />
-            <span>Delete label</span>
-          </span>
-        </CustomMenu.MenuItem>
-      </CustomMenu>
+      <div className="flex items-center gap-3.5 pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100">
+        <div className="h-4 w-4">
+          <CustomMenu
+            customButton={
+              <div className="h-4 w-4">
+                <Component className="h-4 w-4 leading-4 text-custom-sidebar-text-400 flex-shrink-0" />
+              </div>
+            }
+          >
+            <CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
+              <span className="flex items-center justify-start gap-2">
+                <RectangleGroupIcon className="h-4 w-4" />
+                <span>Convert to group</span>
+              </span>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem onClick={() => editLabel(label)}>
+              <span className="flex items-center justify-start gap-2">
+                <PencilIcon className="h-4 w-4" />
+                <span>Edit label</span>
+              </span>
+            </CustomMenu.MenuItem>
+          </CustomMenu>
+        </div>
+
+        <div className="flex items-center">
+          <button className="flex items-center justify-start gap-2" onClick={handleLabelDelete}>
+            <X className="h-[18px] w-[18px] text-custom-sidebar-text-400 flex-shrink-0" />
+          </button>
+        </div>
+      </div>
     </div>
   </div>
 );

From acefff5ed2cd00544b053a9ba7a9235b5c001b3a Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 13 Sep 2023 21:05:56 +0530
Subject: [PATCH 18/21] style: project state setting ui improvement

---
 web/components/states/single-state.tsx        | 76 +++++++++----------
 .../[projectId]/settings/features.tsx         |  6 +-
 .../projects/[projectId]/settings/states.tsx  | 10 ++-
 3 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/web/components/states/single-state.tsx b/web/components/states/single-state.tsx
index bfa53974a61..6ec19ff0696 100644
--- a/web/components/states/single-state.tsx
+++ b/web/components/states/single-state.tsx
@@ -9,13 +9,10 @@ import stateService from "services/state.service";
 // ui
 import { Tooltip } from "components/ui";
 // icons
-import {
-  ArrowDownIcon,
-  ArrowUpIcon,
-  PencilSquareIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
+import { ArrowDownIcon, ArrowUpIcon } from "@heroicons/react/24/outline";
 import { StateGroupIcon } from "components/icons";
+import { Pencil, X } from "lucide-react";
+
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 import { groupBy, orderArrayBy } from "helpers/array.helper";
@@ -160,15 +157,15 @@ export const SingleState: React.FC<Props> = ({
   };
 
   return (
-    <div className="group flex items-center justify-between gap-2 border-custom-border-200 bg-custom-background-100 px-4 py-3 first:rounded-t-[10px] last:rounded-b-[10px]">
+    <div className="group flex items-center justify-between gap-2 rounded border border-custom-border-200 bg-custom-background-100 px-4 py-3">
       <div className="flex items-center gap-3">
         <StateGroupIcon stateGroup={state.group} color={state.color} height="16px" width="16px" />
         <div>
-          <h6 className="text-sm">{addSpaceIfCamelCase(state.name)}</h6>
+          <h6 className="text-sm font-medium">{addSpaceIfCamelCase(state.name)}</h6>
           <p className="text-xs text-custom-text-200">{state.description}</p>
         </div>
       </div>
-      <div className="group flex items-center gap-2">
+      <div className="group flex items-center gap-2.5">
         {index !== 0 && (
           <button
             type="button"
@@ -192,42 +189,43 @@ export const SingleState: React.FC<Props> = ({
         ) : (
           <button
             type="button"
-            className="hidden text-xs text-custom-text-200 group-hover:inline-block"
+            className="hidden text-xs text-custom-sidebar-text-400 group-hover:inline-block"
             onClick={handleMakeDefault}
             disabled={isSubmitting}
           >
-            Set as default
+            Mark as default
           </button>
         )}
+        <div className=" items-center gap-2.5 hidden group-hover:flex">
+          <button
+            type="button"
+            className="grid place-items-center group-hover:opacity-100 opacity-0"
+            onClick={handleEditState}
+          >
+            <Pencil className="h-3.5 w-3.5 text-custom-text-200" />
+          </button>
 
-        <button
-          type="button"
-          className="grid place-items-center group-hover:opacity-100 opacity-0"
-          onClick={handleEditState}
-        >
-          <PencilSquareIcon className="h-4 w-4 text-custom-text-200" />
-        </button>
-
-        <button
-          type="button"
-          className={`group-hover:opacity-100 opacity-0 ${
-            state.default || groupLength === 1 ? "cursor-not-allowed" : ""
-          } grid place-items-center`}
-          onClick={handleDeleteState}
-          disabled={state.default || groupLength === 1}
-        >
-          {state.default ? (
-            <Tooltip tooltipContent="Cannot delete the default state.">
-              <TrashIcon className="h-4 w-4 text-red-500" />
-            </Tooltip>
-          ) : groupLength === 1 ? (
-            <Tooltip tooltipContent="Cannot have an empty group.">
-              <TrashIcon className="h-4 w-4 text-red-500" />
-            </Tooltip>
-          ) : (
-            <TrashIcon className="h-4 w-4 text-red-500" />
-          )}
-        </button>
+          <button
+            type="button"
+            className={`group-hover:opacity-100 opacity-0 ${
+              state.default || groupLength === 1 ? "cursor-not-allowed" : ""
+            } grid place-items-center`}
+            onClick={handleDeleteState}
+            disabled={state.default || groupLength === 1}
+          >
+            {state.default ? (
+              <Tooltip tooltipContent="Cannot delete the default state.">
+                <X className="h-3.5 w-3.5 text-red-500" />
+              </Tooltip>
+            ) : groupLength === 1 ? (
+              <Tooltip tooltipContent="Cannot have an empty group.">
+                <X className="h-3.5 w-3.5 text-red-500" />
+              </Tooltip>
+            ) : (
+              <X className="h-3.5 w-3.5 text-red-500" />
+            )}
+          </button>
+        </div>
       </div>
     </div>
   );
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
index 5c04c5f7cca..0aaaf0b1c93 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -47,21 +47,21 @@ const featuresList = [
     title: "Views",
     description:
       "Views are enabled for all the projects in this workspace. Access it from the sidebar.",
-    icon: <Layers className="h-4 w-4 text-custom-primary-100 flex-shrink-0" />,
+    icon: <Layers className="h-4 w-4 text-cyan-500 flex-shrink-0" />,
     property: "issue_views_view",
   },
   {
     title: "Pages",
     description:
       "Pages are enabled for all the projects in this workspace. Access it from the sidebar.",
-    icon: <FileText className="h-4 w-4 text-custom-primary-100 flex-shrink-0" />,
+    icon: <FileText className="h-4 w-4 text-red-400 flex-shrink-0" />,
     property: "page_view",
   },
   {
     title: "Inbox",
     description:
       "Inbox are enabled for all the projects in this workspace. Access it from the issues views page.",
-    icon: <Inbox className="h-4 w-4 text-custom-primary-100 flex-shrink-0" />,
+    icon: <Inbox className="h-4 w-4 text-cyan-500 flex-shrink-0" />,
     property: "inbox_view",
   },
 ];
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
index e36592a899a..9a7d2060a8c 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@@ -86,9 +86,11 @@ const StatesSettings: NextPage = () => {
                 Object.keys(orderedStateGroups).map((key) => {
                   if (orderedStateGroups[key].length !== 0)
                     return (
-                      <div key={key}>
-                        <div className="mb-2 flex w-full justify-between">
-                          <h4 className="text-custom-text-200 capitalize">{key}</h4>
+                      <div key={key} className="flex flex-col gap-2">
+                        <div className="flex w-full justify-between">
+                          <h4 className="text-base font-medium text-custom-text-200 capitalize">
+                            {key}
+                          </h4>
                           <button
                             type="button"
                             className="flex items-center gap-2 text-custom-primary-100 px-2 hover:text-custom-primary-200 outline-none"
@@ -97,7 +99,7 @@ const StatesSettings: NextPage = () => {
                             <PlusIcon className="h-4 w-4" />
                           </button>
                         </div>
-                        <div className="divide-y divide-custom-border-200 rounded-[10px] border border-custom-border-200">
+                        <div className="flex flex-col gap-2 rounded">
                           {key === activeGroup && (
                             <CreateUpdateStateInline
                               groupLength={orderedStateGroups[key].length}

From 934c3b607479264e4e0d689c5c9362a860d43d01 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 13 Sep 2023 21:29:36 +0530
Subject: [PATCH 19/21] chore: integration setting repo select validation

---
 web/components/integration/github/select-repository.tsx | 2 ++
 web/components/integration/slack/select-channel.tsx     | 6 +++---
 web/components/project/single-integration-card.tsx      | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/web/components/integration/github/select-repository.tsx b/web/components/integration/github/select-repository.tsx
index 9857c0088ea..b46942e6d34 100644
--- a/web/components/integration/github/select-repository.tsx
+++ b/web/components/integration/github/select-repository.tsx
@@ -66,6 +66,8 @@ export const SelectRepository: React.FC<Props> = ({
       content: <p>{truncateText(repo.full_name, characterLimit)}</p>,
     })) ?? [];
 
+  if (userRepositories.length < 1) return null;
+
   return (
     <CustomSearchSelect
       value={value}
diff --git a/web/components/integration/slack/select-channel.tsx b/web/components/integration/slack/select-channel.tsx
index 61d1ba5d2a8..712c168df87 100644
--- a/web/components/integration/slack/select-channel.tsx
+++ b/web/components/integration/slack/select-channel.tsx
@@ -83,7 +83,7 @@ export const SelectChannel: React.FC<Props> = ({ integration }) => {
       {projectIntegration ? (
         <button
           type="button"
-          className={`relative inline-flex h-5 w-8 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none bg-gray-700`}
+          className={`relative inline-flex h-4 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none bg-gray-700`}
           role="switch"
           aria-checked
           onClick={() => {
@@ -92,8 +92,8 @@ export const SelectChannel: React.FC<Props> = ({ integration }) => {
         >
           <span
             aria-hidden="true"
-            className={`self-center inline-block h-3 w-3 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
-              slackChannelAvailabilityToggle ? "translate-x-4" : "translate-x-0"
+            className={`self-center inline-block h-2 w-2 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+              slackChannelAvailabilityToggle ? "translate-x-3" : "translate-x-0"
             }`}
           />
         </button>
diff --git a/web/components/project/single-integration-card.tsx b/web/components/project/single-integration-card.tsx
index 587db0c85d0..e7095e9ad82 100644
--- a/web/components/project/single-integration-card.tsx
+++ b/web/components/project/single-integration-card.tsx
@@ -92,7 +92,7 @@ export const SingleIntegration: React.FC<Props> = ({ integration }) => {
   return (
     <>
       {integration && (
-        <div className="flex items-center justify-between gap-2 border-b border-custom-border-200 bg-custom-background-100 p-5">
+        <div className="flex items-center justify-between gap-2 border-b border-custom-border-200 bg-custom-background-100 px-4 py-6">
           <div className="flex items-start gap-4">
             <div className="h-10 w-10 flex-shrink-0">
               <Image

From c484bd92ca89590a9c366fc0ea69d202647a074d Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 13 Sep 2023 21:46:08 +0530
Subject: [PATCH 20/21] chore: code refactor

---
 .hintrc | 22 ----------------------
 1 file changed, 22 deletions(-)
 delete mode 100644 .hintrc

diff --git a/.hintrc b/.hintrc
deleted file mode 100644
index 42502f3914e..00000000000
--- a/.hintrc
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "extends": [
-    "development"
-  ],
-  "hints": {
-    "no-inline-styles": "off",
-    "button-type": "off",
-    "axe/name-role-value": [
-      "default",
-      {
-        "button-name": "off"
-      }
-    ],
-    "disown-opener": "off",
-    "axe/aria": [
-      "default",
-      {
-        "aria-required-attr": "off"
-      }
-    ]
-  }
-}
\ No newline at end of file

From dccc3ce1d3185dab456402f9261a780947974336 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 13 Sep 2023 22:37:31 +0530
Subject: [PATCH 21/21] fix: build fix

---
 web/services/modules.service.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/services/modules.service.ts b/web/services/modules.service.ts
index dcac98d501f..5299fbaadca 100644
--- a/web/services/modules.service.ts
+++ b/web/services/modules.service.ts
@@ -2,7 +2,7 @@
 import APIService from "services/api.service";
 import trackEventServices from "./track-event.service";
 // types
-import type { IIssueViewOptions, IModule, IIssue, ICurrentUserResponse } from "types";
+import type { IModule, IIssue, ICurrentUserResponse } from "types";
 import { API_BASE_URL } from "helpers/common.helper";
 
 const { NEXT_PUBLIC_API_BASE_URL } = process.env;