Merge pull request #61 from aaryan610/master

style: projects settings page

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" : ""
         }`}
       >

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">
+      <div className="p-2 pl-6 mt-16">
-        <h2 className="flex items-center gap-2 text-lg font-medium leading-5">
+        <h2 className="flex items-center gap-2 text-lg font-medium leading-5">Settings</h2>
-          <ArrowLeftIcon className="h-4 w-4" />
-          Settings
-        </h2>
         <div className="mt-6 space-y-1">
           {links.map((link, index) => (
             <h4 key={index}>

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"
             }`}
           >

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>

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>

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>

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>

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>

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>