From 21660e2872d83869768ce017ce101943890cfca6 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Tue, 20 Dec 2022 21:14:42 +0530
Subject: [PATCH] style: projects settings page

---
 .../app/components/project/member-invitations.tsx |  2 +-
 apps/app/layouts/navbar/settings-sidebar.tsx      |  7 ++-----
 apps/app/layouts/settings-layout.tsx              |  2 +-
 .../projects/[projectId]/cycles/[cycleId].tsx     |  2 +-
 .../projects/[projectId]/settings/control.tsx     | 15 +++++++++++++--
 .../pages/projects/[projectId]/settings/index.tsx | 15 +++++++++++++--
 .../projects/[projectId]/settings/labels.tsx      | 15 +++++++++++++--
 .../projects/[projectId]/settings/members.tsx     | 15 +++++++++++++--
 .../projects/[projectId]/settings/states.tsx      | 15 +++++++++++++--
 9 files changed, 70 insertions(+), 18 deletions(-)

diff --git a/apps/app/components/project/member-invitations.tsx b/apps/app/components/project/member-invitations.tsx
index 4bc44f632..484d9fed5 100644
--- a/apps/app/components/project/member-invitations.tsx
+++ b/apps/app/components/project/member-invitations.tsx
@@ -66,7 +66,7 @@ const ProjectMemberInvitations: React.FC<Props> = ({
   return (
     <>
       <div
-        className={`w-full h-full flex flex-col px-4 py-3 rounded-md bg-white ${
+        className={`w-full h-full flex flex-col px-4 py-3 rounded-md border bg-white ${
           selected ? "ring-2 ring-indigo-400" : ""
         }`}
       >
diff --git a/apps/app/layouts/navbar/settings-sidebar.tsx b/apps/app/layouts/navbar/settings-sidebar.tsx
index 417ff4835..3fb6e284a 100644
--- a/apps/app/layouts/navbar/settings-sidebar.tsx
+++ b/apps/app/layouts/navbar/settings-sidebar.tsx
@@ -15,11 +15,8 @@ const SettingsSidebar: React.FC<Props> = ({ links }) => {
 
   return (
     <nav className="h-screen w-72 border-r border-gray-200">
-      <div className="h-full p-2 pl-6 mt-16">
-        <h2 className="flex items-center gap-2 text-lg font-medium leading-5">
-          <ArrowLeftIcon className="h-4 w-4" />
-          Settings
-        </h2>
+      <div className="p-2 pl-6 mt-16">
+        <h2 className="flex items-center gap-2 text-lg font-medium leading-5">Settings</h2>
         <div className="mt-6 space-y-1">
           {links.map((link, index) => (
             <h4 key={index}>
diff --git a/apps/app/layouts/settings-layout.tsx b/apps/app/layouts/settings-layout.tsx
index 0759ccaca..b5d3496f8 100644
--- a/apps/app/layouts/settings-layout.tsx
+++ b/apps/app/layouts/settings-layout.tsx
@@ -104,7 +104,7 @@ const SettingsLayout: React.FC<Props> = ({
         <main className="h-screen w-full flex flex-col overflow-y-auto min-w-0">
           {noHeader ? null : <Header breadcrumbs={breadcrumbs} left={left} right={right} />}
           <div
-            className={`w-full flex-grow ${noPadding ? "" : "p-5 px-16 pt-16"} ${
+            className={`w-full flex-grow ${noPadding ? "" : "p-5 px-16"} ${
               bg === "primary" ? "bg-primary" : bg === "secondary" ? "bg-secondary" : "bg-primary"
             }`}
           >
diff --git a/apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx b/apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx
index 509f892c0..02978b3cf 100644
--- a/apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx
+++ b/apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx
@@ -306,7 +306,7 @@ const SingleCycle: React.FC = () => {
                     leaveFrom="opacity-100 translate-y-0"
                     leaveTo="opacity-0 translate-y-1"
                   >
-                    <Popover.Panel className="absolute right-0 z-10 mt-1 w-screen max-w-xs transform p-3 bg-white rounded-lg shadow-lg overflow-hidden">
+                    <Popover.Panel className="absolute right-0 z-20 mt-1 w-screen max-w-xs transform p-3 bg-white rounded-lg shadow-lg overflow-hidden">
                       <div className="relative flex flex-col gap-1 gap-y-4">
                         <div className="flex justify-between items-center">
                           <h4 className="text-sm text-gray-600">Group by</h4>
diff --git a/apps/app/pages/projects/[projectId]/settings/control.tsx b/apps/app/pages/projects/[projectId]/settings/control.tsx
index cd8809e9e..3e26c168a 100644
--- a/apps/app/pages/projects/[projectId]/settings/control.tsx
+++ b/apps/app/pages/projects/[projectId]/settings/control.tsx
@@ -15,7 +15,7 @@ import useUser from "lib/hooks/useUser";
 // headless ui
 import { Listbox, Transition } from "@headlessui/react";
 // ui
-import { Button } from "ui";
+import { BreadcrumbItem, Breadcrumbs, Button } from "ui";
 // icons
 import { CheckIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
 // types
@@ -101,7 +101,18 @@ const ControlSettings = () => {
   }, [projectDetails, reset]);
 
   return (
-    <SettingsLayout type="project" noHeader>
+    <SettingsLayout
+      type="project"
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem
+            title={`${activeProject?.name ?? "Project"}`}
+            link={`/projects/${activeProject?.id}/issues`}
+          />
+          <BreadcrumbItem title="Control Settings" />
+        </Breadcrumbs>
+      }
+    >
       <form onSubmit={handleSubmit(onSubmit)}>
         <div className="space-y-8">
           <div>
diff --git a/apps/app/pages/projects/[projectId]/settings/index.tsx b/apps/app/pages/projects/[projectId]/settings/index.tsx
index 80a8be49f..99bd8a1cd 100644
--- a/apps/app/pages/projects/[projectId]/settings/index.tsx
+++ b/apps/app/pages/projects/[projectId]/settings/index.tsx
@@ -12,7 +12,7 @@ import projectService from "lib/services/project.service";
 import useUser from "lib/hooks/useUser";
 import useToast from "lib/hooks/useToast";
 // ui
-import { Button, EmojiIconPicker, Input, Select, TextArea } from "ui";
+import { BreadcrumbItem, Breadcrumbs, Button, EmojiIconPicker, Input, Select, TextArea } from "ui";
 // types
 import { IProject, IWorkspace } from "types";
 // fetch-keys
@@ -116,7 +116,18 @@ const GeneralSettings = () => {
   }, [projectDetails, reset]);
 
   return (
-    <SettingsLayout type="project" noHeader>
+    <SettingsLayout
+      type="project"
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem
+            title={`${activeProject?.name ?? "Project"}`}
+            link={`/projects/${activeProject?.id}/issues`}
+          />
+          <BreadcrumbItem title="General Settings" />
+        </Breadcrumbs>
+      }
+    >
       <form onSubmit={handleSubmit(onSubmit)}>
         <div className="space-y-8">
           <div>
diff --git a/apps/app/pages/projects/[projectId]/settings/labels.tsx b/apps/app/pages/projects/[projectId]/settings/labels.tsx
index 9279e80a8..56dec8a8a 100644
--- a/apps/app/pages/projects/[projectId]/settings/labels.tsx
+++ b/apps/app/pages/projects/[projectId]/settings/labels.tsx
@@ -17,7 +17,7 @@ import SingleLabel from "components/project/settings/single-label";
 // headless ui
 import { Popover, Transition } from "@headlessui/react";
 // ui
-import { Button, Input, Spinner } from "ui";
+import { BreadcrumbItem, Breadcrumbs, Button, Input, Spinner } from "ui";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 // fetch-keys
@@ -103,7 +103,18 @@ const LabelsSettings = () => {
   };
 
   return (
-    <SettingsLayout type="project" noHeader>
+    <SettingsLayout
+      type="project"
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem
+            title={`${activeProject?.name ?? "Project"}`}
+            link={`/projects/${activeProject?.id}/issues`}
+          />
+          <BreadcrumbItem title="Labels Settings" />
+        </Breadcrumbs>
+      }
+    >
       <section className="space-y-8">
         <div>
           <h3 className="text-3xl font-bold leading-6 text-gray-900">Labels</h3>
diff --git a/apps/app/pages/projects/[projectId]/settings/members.tsx b/apps/app/pages/projects/[projectId]/settings/members.tsx
index 5ab23b091..0fcfb84d6 100644
--- a/apps/app/pages/projects/[projectId]/settings/members.tsx
+++ b/apps/app/pages/projects/[projectId]/settings/members.tsx
@@ -15,7 +15,7 @@ import SettingsLayout from "layouts/settings-layout";
 import ConfirmProjectMemberRemove from "components/project/confirm-project-member-remove";
 import SendProjectInvitationModal from "components/project/send-project-invitation-modal";
 // ui
-import { Button, CustomListbox, CustomMenu, Spinner } from "ui";
+import { BreadcrumbItem, Breadcrumbs, Button, CustomListbox, CustomMenu, Spinner } from "ui";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 // fetch-keys
@@ -128,7 +128,18 @@ const MembersSettings = () => {
         setIsOpen={setInviteModal}
         members={members}
       />
-      <SettingsLayout type="project" noHeader>
+      <SettingsLayout
+        type="project"
+        breadcrumbs={
+          <Breadcrumbs>
+            <BreadcrumbItem
+              title={`${activeProject?.name ?? "Project"}`}
+              link={`/projects/${activeProject?.id}/issues`}
+            />
+            <BreadcrumbItem title="Members Settings" />
+          </Breadcrumbs>
+        }
+      >
         <section className="space-y-8">
           <div>
             <h3 className="text-3xl font-bold leading-6 text-gray-900">Members</h3>
diff --git a/apps/app/pages/projects/[projectId]/settings/states.tsx b/apps/app/pages/projects/[projectId]/settings/states.tsx
index 0592a32a8..82905677c 100644
--- a/apps/app/pages/projects/[projectId]/settings/states.tsx
+++ b/apps/app/pages/projects/[projectId]/settings/states.tsx
@@ -11,7 +11,7 @@ import {
   StateGroup,
 } from "components/project/issues/BoardView/state/create-update-state-inline";
 // ui
-import { Spinner } from "ui";
+import { BreadcrumbItem, Breadcrumbs, Spinner } from "ui";
 // icons
 import { PencilSquareIcon, PlusIcon, TrashIcon } from "@heroicons/react/24/outline";
 // types
@@ -37,7 +37,18 @@ const StatesSettings = () => {
         data={states?.find((state) => state.id === selectDeleteState) ?? null}
         onClose={() => setSelectDeleteState(null)}
       />
-      <SettingsLayout type="project" noHeader>
+      <SettingsLayout
+        type="project"
+        breadcrumbs={
+          <Breadcrumbs>
+            <BreadcrumbItem
+              title={`${activeProject?.name ?? "Project"}`}
+              link={`/projects/${activeProject?.id}/issues`}
+            />
+            <BreadcrumbItem title="States Settings" />
+          </Breadcrumbs>
+        }
+      >
         <div className="space-y-8">
           <div>
             <h3 className="text-3xl font-bold leading-6 text-gray-900">States</h3>