Merge pull request #366 from makeplane/style/project_settings

style: project settings pages

apps/app/components/labels/create-update-label-inline.tsx

@@ -109,7 +109,7 @@ export const CreateUpdateLabelInline: React.FC<Props> = ({
 
   return (
     <div
-      className={`flex items-center gap-2 rounded-md border p-3 md:w-2/3 ${
+      className={`flex items-center gap-2 rounded-[10px] border bg-white p-5 ${
         labelForm ? "" : "hidden"
       }`}
     >

apps/app/components/labels/single-label.tsx

@@ -18,16 +18,16 @@ export const SingleLabel: React.FC<Props> = ({
   editLabel,
   handleLabelDelete,
 }) => (
-  <div className="gap-2 space-y-3 divide-y rounded-md border p-3 md:w-2/3">
+  <div className="gap-2 space-y-3 divide-y rounded-[10px] border bg-white p-5">
     <div className="flex items-center justify-between">
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-3">
         <span
-          className="h-3 w-3 flex-shrink-0 rounded-full"
+          className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
           style={{
             backgroundColor: label.color && label.color !== "" ? label.color : "#000",
           }}
         />
-        <h6 className="text-sm">{label.name}</h6>
+        <h6 className="font-medium text-gray-600">{label.name}</h6>
       </div>
       <CustomMenu ellipsis>
         <CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>

apps/app/components/project/send-project-invitation-modal.tsx

@@ -199,7 +199,7 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
                                               className={({ active, selected }) =>
                                                 `${active ? "bg-indigo-50" : ""} ${
                                                   selected ? "bg-indigo-50 font-medium" : ""
-                                                } text-gray-900 cursor-default select-none p-2`
+                                                } cursor-default select-none p-2 text-gray-900`
                                               }
                                               value={{
                                                 id: person.member.id,
@@ -258,7 +258,7 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
                       </div>
                     </div>
                   </div>
-                  <div className="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
+                  <div className="mt-5 flex justify-end gap-2">
                     <Button theme="secondary" onClick={handleClose}>
                       Cancel
                     </Button>

apps/app/components/project/single-integration-card.tsx

@@ -10,7 +10,7 @@ import useToast from "hooks/use-toast";
 // ui
 import { CustomSelect } from "components/ui";
 // icons
-import GithubLogo from "public/logos/github-black.png";
+import GithubLogo from "public/logos/github-square.png";
 // types
 import { IWorkspaceIntegrations } from "types";
 // fetch-keys
@@ -85,16 +85,16 @@ export const SingleIntegration: React.FC<Props> = ({ integration }) => {
   return (
     <>
       {integration && (
-        <div className="flex items-center justify-between gap-2 border p-4 rounded-xl">
+        <div className="flex items-center justify-between gap-2 rounded-[10px] border bg-white p-5">
           <div className="flex items-start gap-4">
             <div className="h-12 w-12">
               <Image src={GithubLogo} alt="GithubLogo" />
             </div>
             <div>
-              <h3 className="flex items-center gap-4 font-semibold text-xl">
+              <h3 className="flex items-center gap-4 text-xl font-semibold">
                 {integration.integration_detail.title}
               </h3>
-              <p className="text-gray-400 text-sm">Select GitHub repository to enable sync.</p>
+              <p className="text-sm text-gray-400">Select GitHub repository to enable sync.</p>
             </div>
           </div>
           <CustomSelect
@@ -127,10 +127,10 @@ export const SingleIntegration: React.FC<Props> = ({ integration }) => {
                   </CustomSelect.Option>
                 ))
               ) : (
-                <p className="text-gray-400 text-center text-xs">No repositories found</p>
+                <p className="p-2 text-center text-xs text-gray-400">No repositories found</p>
               )
             ) : (
-              <p className="text-gray-400 text-center text-xs">Loading repositories</p>
+              <p className="p-2 text-center text-xs text-gray-400">Loading repositories...</p>
             )}
           </CustomSelect>
         </div>

apps/app/components/states/create-update-state-inline.tsx

@@ -127,7 +127,10 @@ export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, select
   };
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)} className="flex items-center gap-x-2 bg-gray-50 p-2">
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="flex items-center gap-x-2 rounded-[10px] bg-white p-5"
+    >
       <div className="h-8 w-8 flex-shrink-0">
         <Popover className="relative flex h-full w-full items-center justify-center rounded-xl bg-gray-200">
           {({ open }) => (
@@ -175,7 +178,7 @@ export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, select
         name="name"
         register={register}
         autoFocus
-        placeholder="Enter state name"
+        placeholder="Name"
         validations={{
           required: true,
         }}
@@ -210,7 +213,7 @@ export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, select
         id="description"
         name="description"
         register={register}
-        placeholder="Enter state description"
+        placeholder="Description"
         error={errors.description}
         autoComplete="off"
       />

apps/app/components/states/single-state.tsx

@@ -24,12 +24,12 @@ import { IState } from "types";
 import { StateGroup } from "components/states";
 // fetch-keys
 import { STATE_LIST } from "constants/fetch-keys";
+import { getStateGroupIcon } from "components/icons";
 
 type Props = {
   index: number;
   state: IState;
   statesList: IState[];
-  activeGroup: StateGroup;
   handleEditState: () => void;
   handleDeleteState: () => void;
 };
@@ -38,7 +38,6 @@ export const SingleState: React.FC<Props> = ({
   index,
   state,
   statesList,
-  activeGroup,
   handleEditState,
   handleDeleteState,
 }) => {
@@ -136,16 +135,11 @@ export const SingleState: React.FC<Props> = ({
   };
 
   return (
-    <div className="group flex items-center justify-between gap-2 bg-gray-50 p-3">
+    <div className={`group flex items-center justify-between gap-2 rounded-[10px] bg-white p-5`}>
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-3">
-        <span
+        {getStateGroupIcon(state.group, "20", "20", state.color)}
-          className="h-3 w-3 flex-shrink-0 rounded-full"
-          style={{
-            backgroundColor: state.color,
-          }}
-        />
         <div>
-          <h6 className="text-sm">{addSpaceIfCamelCase(state.name)}</h6>
+          <h6 className="font-medium text-gray-600">{addSpaceIfCamelCase(state.name)}</h6>
           <p className="text-xs text-gray-400">{state.description}</p>
         </div>
       </div>
@@ -153,7 +147,7 @@ export const SingleState: React.FC<Props> = ({
         {index !== 0 && (
           <button
             type="button"
-            className="hidden group-hover:inline-block text-gray-400 hover:text-gray-900"
+            className="hidden text-gray-400 hover:text-gray-900 group-hover:inline-block"
             onClick={() => handleMove(state, "up")}
           >
             <ArrowUpIcon className="h-4 w-4" />
@@ -162,7 +156,7 @@ export const SingleState: React.FC<Props> = ({
         {!(index === groupLength - 1) && (
           <button
             type="button"
-            className="hidden group-hover:inline-block text-gray-400 hover:text-gray-900"
+            className="hidden text-gray-400 hover:text-gray-900 group-hover:inline-block"
             onClick={() => handleMove(state, "down")}
           >
             <ArrowDownIcon className="h-4 w-4" />
@@ -173,7 +167,7 @@ export const SingleState: React.FC<Props> = ({
         ) : (
           <button
             type="button"
-            className="hidden group-hover:inline-block text-xs text-gray-400 hover:text-gray-900"
+            className="hidden text-xs text-gray-400 hover:text-gray-900 group-hover:inline-block"
             onClick={handleMakeDefault}
             disabled={isSubmitting}
           >

apps/app/layouts/app-layout/app-sidebar.tsx

@@ -20,7 +20,7 @@ const Sidebar: React.FC<SidebarProps> = ({ toggleSidebar, setToggleSidebar }) =>
   return (
     <nav className="relative z-20 h-screen">
       <div
-        className={`${sidebarCollapse ? "" : "w-auto md:w-80"} fixed inset-y-0 top-0 ${
+        className={`${sidebarCollapse ? "" : "w-auto md:w-72"} fixed inset-y-0 top-0 ${
           toggleSidebar ? "left-0" : "-left-60 md:left-0"
         } flex h-full flex-col bg-white duration-300 md:relative`}
       >

apps/app/layouts/app-layout/index.tsx

@@ -19,11 +19,11 @@ import { JoinProject } from "components/project";
 import Container from "layouts/container";
 import AppSidebar from "layouts/app-layout/app-sidebar";
 import AppHeader from "layouts/app-layout/app-header";
-import SettingsSidebar from "layouts/settings-layout/settings-sidebar";
 // types
 import { UserAuth } from "types";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
+import SettingsNavbar from "layouts/settings-navbar";
 
 type Meta = {
   title?: string | null;
@@ -41,69 +41,10 @@ type AppLayoutProps = {
   breadcrumbs?: JSX.Element;
   left?: JSX.Element;
   right?: JSX.Element;
-  settingsLayout?: "project" | "workspace";
+  settingsLayout?: boolean;
   memberType?: UserAuth;
 };
 
-const workspaceLinks: (wSlug: string) => Array<{
-  label: string;
-  href: string;
-}> = (workspaceSlug) => [
-  {
-    label: "General",
-    href: `/${workspaceSlug}/settings`,
-  },
-  {
-    label: "Members",
-    href: `/${workspaceSlug}/settings/members`,
-  },
-  {
-    label: "Billing & Plans",
-    href: `/${workspaceSlug}/settings/billing`,
-  },
-  {
-    label: "Integrations",
-    href: `/${workspaceSlug}/settings/integrations`,
-  },
-];
-
-const sidebarLinks: (
-  wSlug?: string,
-  pId?: string
-) => Array<{
-  label: string;
-  href: string;
-}> = (workspaceSlug, projectId) => [
-  {
-    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`,
-  },
-];
-
 const AppLayout: FC<AppLayoutProps> = ({
   meta,
   children,
@@ -113,7 +54,7 @@ const AppLayout: FC<AppLayoutProps> = ({
   breadcrumbs,
   left,
   right,
-  settingsLayout,
+  settingsLayout = false,
   memberType,
 }) => {
   // states
@@ -179,48 +120,50 @@ const AppLayout: FC<AppLayoutProps> = ({
             }
           />
         ) : (
-          <>
+          <main className="flex h-screen w-full min-w-0 flex-col overflow-y-auto">
-            {settingsLayout && (
+            {!noHeader && (
-              <SettingsSidebar
+              <AppHeader
-                links={
+                breadcrumbs={breadcrumbs}
-                  settingsLayout === "workspace"
+                left={left}
-                    ? workspaceLinks(workspaceSlug as string)
+                right={right}
-                    : sidebarLinks(workspaceSlug as string, projectId as string)
+                setToggleSidebar={setToggleSidebar}
-                }
               />
             )}
-            <main className="flex h-screen w-full min-w-0 flex-col overflow-y-auto">
+            {projectId && !projectMembers ? (
-              {!noHeader && (
+              <div className="flex h-full w-full items-center justify-center">
-                <AppHeader
+                <Spinner />
-                  breadcrumbs={breadcrumbs}
+              </div>
-                  left={left}
+            ) : isMember ? (
-                  right={right}
+              <div
-                  setToggleSidebar={setToggleSidebar}
+                className={`w-full flex-grow ${
-                />
+                  noPadding ? "" : settingsLayout ? "p-9 lg:px-32 lg:pt-9" : "p-9"
-              )}
+                } ${
-              {projectId && !projectMembers ? (
+                  bg === "primary"
-                <div className="flex h-full w-full items-center justify-center">
+                    ? "bg-primary"
-                  <Spinner />
+                    : bg === "secondary"
-                </div>
+                    ? "bg-secondary"
-              ) : isMember ? (
+                    : "bg-primary"
-                <div
+                }`}
-                  className={`w-full flex-grow ${
+              >
-                    noPadding ? "" : settingsLayout ? "p-9 lg:px-16 lg:pt-10" : "p-9"
+                {settingsLayout && (
-                  } ${
+                  <div className="mb-12 space-y-6">
-                    bg === "primary"
+                    <div>
-                      ? "bg-primary"
+                      <h3 className="text-3xl font-semibold">
-                      : bg === "secondary"
+                        {projectId ? "Project" : "Workspace"} Settings
-                      ? "bg-secondary"
+                      </h3>
-                      : "bg-primary"
+                      <p className="mt-1 text-gray-600">
-                  }`}
+                        This information will be displayed to every member of the project.
-                >
+                      </p>
-                  {children}
+                    </div>
-                </div>
+                    <SettingsNavbar />
-              ) : (
+                  </div>
-                <JoinProject isJoiningProject={isJoiningProject} handleJoin={handleJoin} />
+                )}
-              )}
+                {children}
-            </main>
+              </div>
-          </>
+            ) : (
+              <JoinProject isJoiningProject={isJoiningProject} handleJoin={handleJoin} />
+            )}
+          </main>
         )}
       </div>
     </Container>

apps/app/layouts/settings-layout/settings-sidebar.tsx

@@ -1,41 +0,0 @@
-// next
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-type Props = {
-  links: {
-    label: string;
-    href: string;
-  }[];
-};
-
-const SettingsSidebar: React.FC<Props> = ({ links }) => {
-  const router = useRouter();
-
-  return (
-    <nav className="h-screen w-72 border-r border-gray-200">
-      <div className="mt-16 p-2 pl-6">
-        <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}>
-              <Link href={link.href}>
-                <a
-                  className={`${
-                    link.href === router.asPath
-                      ? "bg-gray-200 text-gray-900"
-                      : "hover:bg-gray-100 focus:bg-gray-100"
-                  } flex items-center gap-3 rounded-md p-2 text-xs font-medium outline-none`}
-                >
-                  {link.label}
-                </a>
-              </Link>
-            </h4>
-          ))}
-        </div>
-      </div>
-    </nav>
-  );
-};
-
-export default SettingsSidebar;

apps/app/layouts/settings-navbar.tsx

@@ -0,0 +1,85 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+const SettingsNavbar: React.FC = () => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const workspaceLinks: Array<{
+    label: string;
+    href: string;
+  }> = [
+    {
+      label: "General",
+      href: `/${workspaceSlug}/settings`,
+    },
+    {
+      label: "Members",
+      href: `/${workspaceSlug}/settings/members`,
+    },
+    {
+      label: "Billing & Plans",
+      href: `/${workspaceSlug}/settings/billing`,
+    },
+    {
+      label: "Integrations",
+      href: `/${workspaceSlug}/settings/integrations`,
+    },
+  ];
+
+  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`,
+    },
+  ];
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      {(projectId ? projectLinks : workspaceLinks).map((link) => (
+        <Link href={link.href}>
+          <a>
+            <div
+              className={`rounded-3xl border px-5 py-1.5 text-sm sm:px-7 sm:py-2 sm:text-base ${
+                router.asPath === link.href
+                  ? "border-theme bg-theme text-white"
+                  : "border-gray-300 bg-white hover:bg-hover-gray"
+              }`}
+            >
+              {link.label}
+            </div>
+          </a>
+        </Link>
+      ))}
+    </div>
+  );
+};
+
+export default SettingsNavbar;

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

@@ -104,7 +104,6 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
 
   return (
     <AppLayout
-      settingsLayout="project"
       memberType={{ isMember, isOwner, isViewer, isGuest }}
       breadcrumbs={
         <Breadcrumbs>
@@ -115,132 +114,129 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
           <BreadcrumbItem title="Control Settings" />
         </Breadcrumbs>
       }
+      settingsLayout
     >
       <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="space-y-8">
+        <div className="space-y-8 sm:space-y-12">
-          <div>
+          <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
-            <h3 className="text-3xl font-bold leading-6 text-gray-900">Control</h3>
+            <div className="col-span-12 sm:col-span-6">
-            <p className="mt-4 text-sm text-gray-500">Set the control for the project.</p>
+              <h4 className="text-xl font-semibold">Project Lead</h4>
-          </div>
+              <p className="text-gray-500">Select the project leader.</p>
-          <div className="grid grid-cols-12 gap-16">
-            <div className="col-span-5 space-y-16">
-              <div>
-                <h4 className="text-md mb-1 leading-6 text-gray-900">Project Lead</h4>
-                <p className="mb-3 text-sm text-gray-500">Select the project leader.</p>
-                {projectDetails ? (
-                  <Controller
-                    name="project_lead"
-                    control={control}
-                    render={({ field }) => (
-                      <CustomSelect
-                        {...field}
-                        label={
-                          people?.find((person) => person.member.id === field.value)?.member
-                            .first_name ?? "Select Lead"
-                        }
-                        input
-                      >
-                        {people?.map((person) => (
-                          <CustomSelect.Option
-                            key={person.id}
-                            value={person.member.id}
-                            className="flex items-center gap-2"
-                          >
-                            <>
-                              {person.member.avatar && person.member.avatar !== "" ? (
-                                <div className="relative h-4 w-4">
-                                  <Image
-                                    src={person.member.avatar}
-                                    alt="avatar"
-                                    className="rounded-full"
-                                    layout="fill"
-                                    objectFit="cover"
-                                  />
-                                </div>
-                              ) : (
-                                <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
-                                  {person.member.first_name && person.member.first_name !== ""
-                                    ? person.member.first_name.charAt(0)
-                                    : person.member.email.charAt(0)}
-                                </div>
-                              )}
-                              {person.member.first_name !== ""
-                                ? person.member.first_name
-                                : person.member.email}
-                            </>
-                          </CustomSelect.Option>
-                        ))}
-                      </CustomSelect>
-                    )}
-                  />
-                ) : (
-                  <Loader className="h-9 w-full">
-                    <Loader.Item width="100%" height="100%" />
-                  </Loader>
-                )}
-              </div>
             </div>
-            <div className="col-span-5 space-y-16">
+            <div className="col-span-12 sm:col-span-6">
-              <div>
+              {projectDetails ? (
-                <h4 className="text-md mb-1 leading-6 text-gray-900">Default Assignee</h4>
+                <Controller
-                <p className="mb-3 text-sm text-gray-500">
+                  name="project_lead"
-                  Select the default assignee for the project.
+                  control={control}
-                </p>
+                  render={({ field }) => (
-                {projectDetails ? (
+                    <CustomSelect
-                  <Controller
+                      {...field}
-                    name="default_assignee"
+                      label={
-                    control={control}
+                        people?.find((person) => person.member.id === field.value)?.member
-                    render={({ field }) => (
+                          .first_name ?? "Select Lead"
-                      <CustomSelect
+                      }
-                        {...field}
+                      input
-                        label={
+                    >
-                          people?.find((p) => p.member.id === field.value)?.member.first_name ??
+                      {people?.map((person) => (
-                          "Select Default Assignee"
+                        <CustomSelect.Option
-                        }
+                          key={person.id}
-                        input
+                          value={person.member.id}
-                      >
+                          className="flex items-center gap-2"
-                        {people?.map((person) => (
+                        >
-                          <CustomSelect.Option
+                          <>
-                            key={person.id}
+                            {person.member.avatar && person.member.avatar !== "" ? (
-                            value={person.member.id}
+                              <div className="relative h-4 w-4">
-                            className="flex items-center gap-2"
+                                <Image
-                          >
+                                  src={person.member.avatar}
-                            <>
+                                  alt="avatar"
-                              {person.member.avatar && person.member.avatar !== "" ? (
+                                  className="rounded-full"
-                                <div className="relative h-4 w-4">
+                                  layout="fill"
-                                  <Image
+                                  objectFit="cover"
-                                    src={person.member.avatar}
+                                />
-                                    alt="avatar"
+                              </div>
-                                    className="rounded-full"
+                            ) : (
-                                    layout="fill"
+                              <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
-                                    objectFit="cover"
+                                {person.member.first_name && person.member.first_name !== ""
-                                  />
+                                  ? person.member.first_name.charAt(0)
-                                </div>
+                                  : person.member.email.charAt(0)}
-                              ) : (
+                              </div>
-                                <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
+                            )}
-                                  {person.member.first_name && person.member.first_name !== ""
+                            {person.member.first_name !== ""
-                                    ? person.member.first_name.charAt(0)
+                              ? person.member.first_name
-                                    : person.member.email.charAt(0)}
+                              : person.member.email}
-                                </div>
+                          </>
-                              )}
+                        </CustomSelect.Option>
-                              {person.member.first_name !== ""
+                      ))}
-                                ? person.member.first_name
+                    </CustomSelect>
-                                : person.member.email}
+                  )}
-                            </>
+                />
-                          </CustomSelect.Option>
+              ) : (
-                        ))}
+                <Loader className="h-9 w-full">
-                      </CustomSelect>
+                  <Loader.Item width="100%" height="100%" />
-                    )}
+                </Loader>
-                  />
+              )}
-                ) : (
-                  <Loader className="h-9 w-full">
-                    <Loader.Item width="100%" height="100%" />
-                  </Loader>
-                )}
-              </div>
             </div>
           </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-xl font-semibold">Default Assignee</h4>
+              <p className="text-gray-500">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.first_name ??
+                        "Select Default Assignee"
+                      }
+                      input
+                    >
+                      {people?.map((person) => (
+                        <CustomSelect.Option
+                          key={person.id}
+                          value={person.member.id}
+                          className="flex items-center gap-2"
+                        >
+                          <>
+                            {person.member.avatar && person.member.avatar !== "" ? (
+                              <div className="relative h-4 w-4">
+                                <Image
+                                  src={person.member.avatar}
+                                  alt="avatar"
+                                  className="rounded-full"
+                                  layout="fill"
+                                  objectFit="cover"
+                                />
+                              </div>
+                            ) : (
+                              <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
+                                {person.member.first_name && person.member.first_name !== ""
+                                  ? person.member.first_name.charAt(0)
+                                  : person.member.email.charAt(0)}
+                              </div>
+                            )}
+                            {person.member.first_name !== ""
+                              ? person.member.first_name
+                              : person.member.email}
+                          </>
+                        </CustomSelect.Option>
+                      ))}
+                    </CustomSelect>
+                  )}
+                />
+              ) : (
+                <Loader className="h-9 w-full">
+                  <Loader.Item width="100%" height="100%" />
+                </Loader>
+              )}
+            </div>
+          </div>
+          <div className="sm:text-right">
             <Button type="submit" disabled={isSubmitting}>
               {isSubmitting ? "Updating Project..." : "Update Project"}
             </Button>

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

@@ -20,6 +20,7 @@ import { IProject, UserAuth } from "types";
 import type { NextPage, GetServerSidePropsContext } from "next";
 // fetch-keys
 import { PROJECTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+import { ContrastIcon, GridViewIcon } from "components/icons";
 
 const FeaturesSettings: NextPage<UserAuth> = (props) => {
   const router = useRouter();
@@ -77,7 +78,6 @@ const FeaturesSettings: NextPage<UserAuth> = (props) => {
 
   return (
     <AppLayout
-      settingsLayout="project"
       memberType={props}
       breadcrumbs={
         <Breadcrumbs>
@@ -88,80 +88,81 @@ const FeaturesSettings: NextPage<UserAuth> = (props) => {
           <BreadcrumbItem title="Features Settings" />
         </Breadcrumbs>
       }
+      settingsLayout
     >
       <section className="space-y-8">
-        <div>
+        <h3 className="text-2xl font-semibold">Features</h3>
-          <h3 className="text-3xl font-bold leading-6 text-gray-900">Project Features</h3>
+        <div className="space-y-5">
+          <div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-gray-200 bg-white p-6">
+            <div className="flex items-start gap-3">
+              <ContrastIcon color="#3f76ff" width={28} height={28} className="flex-shrink-0" />
+              <div>
+                <h4 className="text-xl font-semibold">Cycles</h4>
+                <p className="text-gray-500">
+                  Cycles are enabled for all the projects in this workspace. Access them from the
+                  navigation bar.
+                </p>
+              </div>
+            </div>
+            <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 ${
+                projectDetails?.cycle_view ? "bg-green-500" : "bg-gray-200"
+              }`}
+              role="switch"
+              aria-checked={projectDetails?.cycle_view}
+              onClick={() => handleSubmit({ cycle_view: !projectDetails?.cycle_view })}
+            >
+              <span className="sr-only">Use cycles</span>
+              <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 ${
+                  projectDetails?.cycle_view ? "translate-x-5" : "translate-x-0"
+                }`}
+              />
+            </button>
+          </div>
+          <div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-gray-200 bg-white p-6">
+            <div className="flex items-start gap-3">
+              <GridViewIcon color="#ff6b00" width={28} height={28} className="flex-shrink-0" />
+              <div>
+                <h4 className="-mt-1.5 text-xl font-semibold">Modules</h4>
+                <p className="text-gray-500">
+                  Modules are enabled for all the projects in this workspace. Access it from the
+                  navigation bar.
+                </p>
+              </div>
+            </div>
+            <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 ${
+                projectDetails?.module_view ? "bg-green-500" : "bg-gray-200"
+              }`}
+              role="switch"
+              aria-checked={projectDetails?.module_view}
+              onClick={() => handleSubmit({ module_view: !projectDetails?.module_view })}
+            >
+              <span className="sr-only">Use cycles</span>
+              <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 ${
+                  projectDetails?.module_view ? "translate-x-5" : "translate-x-0"
+                }`}
+              />
+            </button>
+          </div>
         </div>
-        <div className="space-y-8 md:w-2/3">
+        <div className="flex items-center gap-2">
-          <div className="flex items-center justify-between gap-x-10 gap-y-2">
+          <a href="https://plane.so/" target="_blank" rel="noreferrer">
-            <div>
+            <Button theme="secondary" size="rg" className="text-xs">
-              <h4 className="text-md mb-1 leading-6 text-gray-900">Use cycles</h4>
+              Plane is open-source, view Roadmap
-              <p className="mb-3 text-sm text-gray-500">
+            </Button>
-                Cycles are enabled for all the projects in this workspace. Access it from the
+          </a>
-                navigation bar.
+          <a href="https://github.com/makeplane/plane" target="_blank" rel="noreferrer">
-              </p>
+            <Button theme="secondary" size="rg" className="text-xs">
-            </div>
+              Star us on GitHub
-            <div>
+            </Button>
-              <button
+          </a>
-                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 ${
-                  projectDetails?.cycle_view ? "bg-indigo-500" : "bg-gray-200"
-                }`}
-                role="switch"
-                aria-checked={projectDetails?.cycle_view}
-                onClick={() => handleSubmit({ cycle_view: !projectDetails?.cycle_view })}
-              >
-                <span className="sr-only">Use cycles</span>
-                <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 ${
-                    projectDetails?.cycle_view ? "translate-x-5" : "translate-x-0"
-                  }`}
-                />
-              </button>
-            </div>
-          </div>
-          <div className="flex items-center justify-between gap-x-10 gap-y-2">
-            <div>
-              <h4 className="text-md mb-1 leading-6 text-gray-900">Use modules</h4>
-              <p className="mb-3 text-sm text-gray-500">
-                Modules are enabled for all the projects in this workspace. Access it from the
-                navigation bar.
-              </p>
-            </div>
-            <div>
-              <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 ${
-                  projectDetails?.module_view ? "bg-indigo-500" : "bg-gray-200"
-                }`}
-                role="switch"
-                aria-checked={projectDetails?.module_view}
-                onClick={() => handleSubmit({ module_view: !projectDetails?.module_view })}
-              >
-                <span className="sr-only">Use cycles</span>
-                <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 ${
-                    projectDetails?.module_view ? "translate-x-5" : "translate-x-0"
-                  }`}
-                />
-              </button>
-            </div>
-          </div>
-          <div className="flex items-center gap-2">
-            <a href="https://plane.so/" target="_blank" rel="noreferrer">
-              <Button theme="secondary" size="rg" className="text-xs">
-                Plane is open-source, view Roadmap
-              </Button>
-            </a>
-            <a href="https://github.com/makeplane/plane" target="_blank" rel="noreferrer">
-              <Button theme="secondary" size="rg" className="text-xs">
-                Star us on GitHub
-              </Button>
-            </a>
-          </div>
         </div>
       </section>
     </AppLayout>

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

@@ -30,6 +30,7 @@ import type { NextPage, GetServerSidePropsContext } from "next";
 import { PROJECTS_LIST, PROJECT_DETAILS, WORKSPACE_DETAILS } from "constants/fetch-keys";
 // constants
 import { NETWORK_CHOICES } from "constants/project";
+import SettingsNavbar from "layouts/settings-navbar";
 
 const defaultValues: Partial<IProject> = {
   name: "",
@@ -125,7 +126,6 @@ const GeneralSettings: NextPage<UserAuth> = (props) => {
 
   return (
     <AppLayout
-      settingsLayout="project"
       memberType={{ isMember, isOwner, isViewer, isGuest }}
       breadcrumbs={
         <Breadcrumbs>
@@ -136,6 +136,7 @@ const GeneralSettings: NextPage<UserAuth> = (props) => {
           <BreadcrumbItem title="General Settings" />
         </Breadcrumbs>
       }
+      settingsLayout
     >
       <ConfirmProjectDeletion
         data={projectDetails ?? null}
@@ -146,152 +147,146 @@ const GeneralSettings: NextPage<UserAuth> = (props) => {
         }}
       />
       <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="space-y-8">
+        <div className="space-y-8 sm:space-y-12">
-          <div>
+          <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
-            <h3 className="text-3xl font-bold leading-6 text-gray-900">General</h3>
+            <div className="col-span-12 sm:col-span-6">
-            <p className="mt-4 text-sm text-gray-500">
+              <h4 className="text-xl font-semibold">Icon & Name</h4>
-              This information will be displayed to every member of the project.
+              <p className="text-gray-500">Select an icon and a name for your project.</p>
-            </p>
+            </div>
-          </div>
+            <div className="col-span-12 flex gap-2 sm:col-span-6">
-          <div className="grid grid-cols-12 gap-16">
+              {projectDetails ? (
-            <div className="col-span-5 space-y-16">
+                <Controller
-              <div>
+                  control={control}
-                <h4 className="text-md mb-1 leading-6 text-gray-900">Icon & Name</h4>
+                  name="icon"
-                <p className="mb-3 text-sm text-gray-500">
+                  render={({ field: { value, onChange } }) => (
-                  Select an icon and a name for the project.
+                    <EmojiIconPicker
-                </p>
+                      label={value ? String.fromCodePoint(parseInt(value)) : "Icon"}
-                <div className="flex gap-2">
+                      value={value}
-                  {projectDetails ? (
+                      onChange={onChange}
-                    <Controller
-                      control={control}
-                      name="icon"
-                      render={({ field: { value, onChange } }) => (
-                        <EmojiIconPicker
-                          label={value ? String.fromCodePoint(parseInt(value)) : "Icon"}
-                          value={value}
-                          onChange={onChange}
-                        />
-                      )}
                     />
-                  ) : (
-                    <Loader>
-                      <Loader.Item height="46px" width="46px" light />
-                    </Loader>
                   )}
-                  {projectDetails ? (
+                />
-                    <Input
+              ) : (
-                      id="name"
+                <Loader>
-                      name="name"
+                  <Loader.Item height="46px" width="46px" light />
-                      error={errors.name}
+                </Loader>
-                      register={register}
+              )}
-                      placeholder="Project Name"
+              {projectDetails ? (
-                      className="w-auto"
+                <Input
-                      validations={{
+                  id="name"
-                        required: "Name is required",
+                  name="name"
-                      }}
+                  error={errors.name}
-                    />
+                  register={register}
-                  ) : (
+                  placeholder="Project Name"
-                    <Loader>
+                  validations={{
-                      <Loader.Item height="46px" width="225px" light />
+                    required: "Name is required",
-                    </Loader>
+                  }}
-                  )}
+                />
-                </div>
+              ) : (
-              </div>
+                <Loader>
-            </div>
+                  <Loader.Item height="46px" width="225px" light />
-            <div className="col-span-5 space-y-16">
+                </Loader>
-              <div>
+              )}
-                <h4 className="text-md mb-1 leading-6 text-gray-900">Description</h4>
-                <p className="mb-3 text-sm text-gray-500">Give a description to the project.</p>
-                {projectDetails ? (
-                  <TextArea
-                    id="description"
-                    name="description"
-                    error={errors.description}
-                    register={register}
-                    placeholder="Enter project description"
-                    validations={{}}
-                    className="min-h-[46px]"
-                  />
-                ) : (
-                  <Loader className="w-full">
-                    <Loader.Item height="46px" width="full" light />
-                  </Loader>
-                )}
-              </div>
-            </div>
-            <div className="col-span-5 space-y-16">
-              <div>
-                <h4 className="text-md mb-1 leading-6 text-gray-900">Identifier</h4>
-                <p className="mb-3 text-sm text-gray-500">
-                  Create a 1-6 characters{"'"} identifier for the project.
-                </p>
-                {projectDetails ? (
-                  <Input
-                    id="identifier"
-                    name="identifier"
-                    error={errors.identifier}
-                    register={register}
-                    placeholder="Enter identifier"
-                    className="w-40"
-                    onChange={(e: any) => {
-                      if (!activeWorkspace || !e.target.value) return;
-                      checkIdentifierAvailability(activeWorkspace.slug, e.target.value);
-                    }}
-                    validations={{
-                      required: "Identifier is required",
-                      minLength: {
-                        value: 1,
-                        message: "Identifier must at least be of 1 character",
-                      },
-                      maxLength: {
-                        value: 9,
-                        message: "Identifier must at most be of 9 characters",
-                      },
-                    }}
-                  />
-                ) : (
-                  <Loader>
-                    <Loader.Item height="46px" width="160px" light />
-                  </Loader>
-                )}
-              </div>
-            </div>
-            <div className="col-span-5 space-y-16">
-              <div>
-                <h4 className="text-md mb-1 leading-6 text-gray-900">Network</h4>
-                <p className="mb-3 text-sm text-gray-500">Select privacy type for the project.</p>
-                {projectDetails ? (
-                  <Controller
-                    name="network"
-                    control={control}
-                    render={({ field: { value, onChange } }) => (
-                      <CustomSelect
-                        value={value}
-                        onChange={onChange}
-                        label={
-                          Object.keys(NETWORK_CHOICES).find((k) => k === value.toString())
-                            ? NETWORK_CHOICES[value.toString() as keyof typeof NETWORK_CHOICES]
-                            : "Select network"
-                        }
-                        input
-                      >
-                        {Object.keys(NETWORK_CHOICES).map((key) => (
-                          <CustomSelect.Option key={key} value={key}>
-                            {NETWORK_CHOICES[key as keyof typeof NETWORK_CHOICES]}
-                          </CustomSelect.Option>
-                        ))}
-                      </CustomSelect>
-                    )}
-                  />
-                ) : (
-                  <Loader className="w-full">
-                    <Loader.Item height="46px" width="160px" light />
-                  </Loader>
-                )}
-              </div>
             </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-xl font-semibold">Description</h4>
+              <p className="text-gray-500">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]"
+                />
+              ) : (
+                <Loader className="w-full">
+                  <Loader.Item height="46px" width="full" light />
+                </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-xl font-semibold">Identifier</h4>
+              <p className="text-gray-500">
+                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={(e: any) => {
+                    if (!activeWorkspace || !e.target.value) return;
+                    checkIdentifierAvailability(activeWorkspace.slug, e.target.value);
+                  }}
+                  validations={{
+                    required: "Identifier is required",
+                    minLength: {
+                      value: 1,
+                      message: "Identifier must at least be of 1 character",
+                    },
+                    maxLength: {
+                      value: 9,
+                      message: "Identifier must at most be of 9 characters",
+                    },
+                  }}
+                />
+              ) : (
+                <Loader>
+                  <Loader.Item height="46px" width="160px" light />
+                </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-xl font-semibold">Network</h4>
+              <p className="text-gray-500">Select privacy type for the project.</p>
+            </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={
+                        Object.keys(NETWORK_CHOICES).find((k) => k === value.toString())
+                          ? NETWORK_CHOICES[value.toString() as keyof typeof NETWORK_CHOICES]
+                          : "Select network"
+                      }
+                      input
+                    >
+                      {Object.keys(NETWORK_CHOICES).map((key) => (
+                        <CustomSelect.Option key={key} value={key}>
+                          {NETWORK_CHOICES[key as keyof typeof NETWORK_CHOICES]}
+                        </CustomSelect.Option>
+                      ))}
+                    </CustomSelect>
+                  )}
+                />
+              ) : (
+                <Loader className="w-full">
+                  <Loader.Item height="46px" width="160px" light />
+                </Loader>
+              )}
+            </div>
+          </div>
+          <div className="sm:text-right">
             {projectDetails ? (
               <Button type="submit" disabled={isSubmitting}>
                 {isSubmitting ? "Updating Project..." : "Update Project"}
@@ -302,36 +297,31 @@ const GeneralSettings: NextPage<UserAuth> = (props) => {
               </Loader>
             )}
           </div>
-          <div className="col-span-12">
+          <div className="grid grid-cols-12 gap-4 sm:gap-16">
-            {projectDetails ? (
+            <div className="col-span-12 sm:col-span-6">
-              <div>
+              <h4 className="text-xl font-semibold">Danger Zone</h4>
-                <h4 className="text-md mb-1 leading-6 text-gray-900">Danger Zone</h4>
+              <p className="text-gray-500">
-                <p className="mb-3 text-sm text-gray-500">
+                The danger zone of the project delete page is a critical area that requires careful
-                  The danger zone of the project delete page is a critical area that requires
+                consideration and attention. When deleting a project, all of the data and resources
-                  careful consideration and attention. When deleting a project, all of the data and
+                within that project will be permanently removed and cannot be recovered.
-                  resources within that project will be permanently removed and cannot be recovered.
+              </p>
-                </p>
+            </div>
-              </div>
+            <div className="col-span-12 sm:col-span-6">
-            ) : (
+              {projectDetails ? (
-              <Loader className="w-full space-y-2">
+                <div>
-                <Loader.Item height="22px" width="250px" light />
+                  <OutlineButton
-                <Loader.Item height="46px" width="100%" light />
+                    theme="danger"
-              </Loader>
+                    onClick={() => setSelectedProject(projectDetails.id ?? null)}
-            )}
+                  >
-            {projectDetails ? (
+                    Delete Project
-              <div>
+                  </OutlineButton>
-                <OutlineButton
+                </div>
-                  theme="danger"
+              ) : (
-                  onClick={() => setSelectedProject(projectDetails.id ?? null)}
+                <Loader className="mt-2 w-full">
-                >
+                  <Loader.Item height="46px" width="100px" light />
-                  Delete Project
+                </Loader>
-                </OutlineButton>
+              )}
-              </div>
+            </div>
-            ) : (
-              <Loader className="mt-2 w-full">
-                <Loader.Item height="46px" width="100px" light />
-              </Loader>
-            )}
           </div>
         </div>
       </form>

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

@@ -44,7 +44,6 @@ const ProjectIntegrations: NextPage<UserAuth> = (props) => {
 
   return (
     <AppLayout
-      settingsLayout="project"
       memberType={{ isMember, isOwner, isViewer, isGuest }}
       breadcrumbs={
         <Breadcrumbs>
@@ -55,20 +54,20 @@ const ProjectIntegrations: NextPage<UserAuth> = (props) => {
           <BreadcrumbItem title="Integrations" />
         </Breadcrumbs>
       }
+      settingsLayout
     >
       {workspaceIntegrations ? (
         workspaceIntegrations.length > 0 ? (
           <section className="space-y-8">
-            <div>
+            <h3 className="text-2xl font-semibold">Integrations</h3>
-              <h3 className="text-3xl font-bold leading-6 text-gray-900">Integrations</h3>
+            <div className="space-y-5">
-              <p className="mt-4 text-sm text-gray-500">Manage the project integrations.</p>
+              {workspaceIntegrations.map((integration) => (
+                <SingleIntegration
+                  key={integration.integration_detail.id}
+                  integration={integration}
+                />
+              ))}
             </div>
-            {workspaceIntegrations.map((integration) => (
-              <SingleIntegration
-                key={integration.integration_detail.id}
-                integration={integration}
-              />
-            ))}
           </section>
         ) : (
           <div className="grid h-full w-full place-items-center px-4 sm:px-0">

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

@@ -19,7 +19,7 @@ import {
   SingleLabelGroup,
 } from "components/labels";
 // ui
-import { Button, Loader } from "components/ui";
+import { Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -28,6 +28,7 @@ import { IIssueLabels, UserAuth } from "types";
 import type { GetServerSidePropsContext, NextPage } from "next";
 // fetch-keys
 import { PROJECT_DETAILS, PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+import { PrimaryButton } from "components/ui/button/primary-button";
 
 const LabelsSettings: NextPage<UserAuth> = (props) => {
   const { isMember, isOwner, isViewer, isGuest } = props;
@@ -98,7 +99,6 @@ const LabelsSettings: NextPage<UserAuth> = (props) => {
         parent={parentLabel}
       />
       <AppLayout
-        settingsLayout="project"
         memberType={{ isMember, isOwner, isViewer, isGuest }}
         breadcrumbs={
           <Breadcrumbs>
@@ -109,26 +109,28 @@ const LabelsSettings: NextPage<UserAuth> = (props) => {
             <BreadcrumbItem title="Labels Settings" />
           </Breadcrumbs>
         }
+        settingsLayout
       >
-        <section className="space-y-8">
+        <section className="grid grid-cols-12 gap-10">
-          <div>
+          <div className="col-span-12 sm:col-span-5">
-            <h3 className="text-3xl font-bold leading-6 text-gray-900">Labels</h3>
+            <h3 className="text-2xl font-semibold">Labels</h3>
-            <p className="mt-4 text-sm text-gray-500">Manage the labels of this project.</p>
+            <p className="text-gray-500">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>
+            </PrimaryButton>
           </div>
-          <div className="flex items-center justify-between gap-2 md:w-2/3">
+          <div className="col-span-12 space-y-5 sm:col-span-7">
-            <h4 className="text-md mb-1 leading-6 text-gray-900">Manage labels</h4>
+            {labelForm && (
-            <Button theme="secondary" className="flex items-center gap-x-1" onClick={newLabel}>
+              <CreateUpdateLabelInline
-              <PlusIcon className="h-4 w-4" />
+                labelForm={labelForm}
-              New label
+                setLabelForm={setLabelForm}
-            </Button>
+                isUpdating={isUpdating}
-          </div>
+                labelToUpdate={labelToUpdate}
-          <div className="space-y-5">
+              />
-            <CreateUpdateLabelInline
+            )}
-              labelForm={labelForm}
-              setLabelForm={setLabelForm}
-              isUpdating={isUpdating}
-              labelToUpdate={labelToUpdate}
-            />
             <>
               {issueLabels ? (
                 issueLabels.map((label) => {
@@ -158,7 +160,7 @@ const LabelsSettings: NextPage<UserAuth> = (props) => {
                     );
                 })
               ) : (
-                <Loader className="space-y-5 md:w-2/3">
+                <Loader className="space-y-5">
                   <Loader.Item height="40px" />
                   <Loader.Item height="40px" />
                   <Loader.Item height="40px" />

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

@@ -18,7 +18,7 @@ import AppLayout from "layouts/app-layout";
 import ConfirmProjectMemberRemove from "components/project/confirm-project-member-remove";
 import SendProjectInvitationModal from "components/project/send-project-invitation-modal";
 // ui
-import { Button, CustomListbox, CustomMenu, Loader } from "components/ui";
+import { Button, CustomMenu, CustomSelect, Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -158,7 +158,6 @@ const MembersSettings: NextPage<TMemberSettingsProps> = (props) => {
         members={members}
       />
       <AppLayout
-        settingsLayout="project"
         memberType={{ isMember, isOwner, isViewer, isGuest }}
         breadcrumbs={
           <Breadcrumbs>
@@ -169,142 +168,116 @@ const MembersSettings: NextPage<TMemberSettingsProps> = (props) => {
             <BreadcrumbItem title="Members Settings" />
           </Breadcrumbs>
         }
+        settingsLayout
       >
         <section className="space-y-8">
-          <div>
+          <div className="flex items-end justify-between gap-4">
-            <h3 className="text-3xl font-bold leading-6 text-gray-900">Members</h3>
+            <h3 className="text-2xl font-semibold">Members</h3>
-            <p className="mt-4 text-sm text-gray-500">Manage all the members of the project.</p>
+            <button
+              type="button"
+              className="flex items-center gap-2 text-theme outline-none"
+              onClick={() => setInviteModal(true)}
+            >
+              <PlusIcon className="h-4 w-4" />
+              Add Member
+            </button>
           </div>
           {!projectMembers || !projectInvitations ? (
-            <Loader className="space-y-5 md:w-2/3">
+            <Loader className="space-y-5">
               <Loader.Item height="40px" />
               <Loader.Item height="40px" />
               <Loader.Item height="40px" />
               <Loader.Item height="40px" />
             </Loader>
           ) : (
-            <div className="md:w-2/3">
+            <div className="divide-y rounded-[10px] border border-gray-200 bg-white px-6">
-              <div className="flex items-center justify-between gap-2">
+              {members.length > 0
-                <h4 className="text-md mb-1 leading-6 text-gray-900">Manage members</h4>
+                ? members.map((member) => (
-                <Button
+                    <div key={member.id} className="flex items-center justify-between py-6">
-                  theme="secondary"
+                      <div className="flex items-center gap-x-8 gap-y-2">
-                  className="flex items-center gap-x-1"
+                        <div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 p-4 capitalize text-white">
-                  onClick={() => setInviteModal(true)}
+                          {member.avatar && member.avatar !== "" ? (
-                >
+                            <Image
-                  <PlusIcon className="h-4 w-4" />
+                              src={member.avatar}
-                  Add Member
+                              alt={member.first_name}
-                </Button>
+                              layout="fill"
-              </div>
+                              objectFit="cover"
-              <div className="mt-6 space-y-6">
+                              className="rounded-lg"
-                {members.length > 0
-                  ? members.map((member) => (
-                      <div key={member.id} className="flex items-center justify-between">
-                        <div className="flex items-center gap-x-8 gap-y-2">
-                          <div className="relative flex h-10 w-10 items-center justify-center rounded bg-gray-700 p-4 capitalize text-white">
-                            {member.avatar && member.avatar !== "" ? (
-                              <Image
-                                src={member.avatar}
-                                alt={member.first_name}
-                                layout="fill"
-                                objectFit="cover"
-                                className="rounded"
-                              />
-                            ) : member.first_name !== "" ? (
-                              member.first_name.charAt(0)
-                            ) : (
-                              member.email.charAt(0)
-                            )}
-                          </div>
-                          <div>
-                            <h4 className="text-sm">
-                              {member.first_name} {member.last_name}{" "}
-                            </h4>
-                            <p className="text-xs text-gray-500">{member.email}</p>
-                          </div>
-                        </div>
-                        {!member.member && (
-                          <span className="inline-flex items-center rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800">
-                            Request Pending
-                          </span>
-                        )}
-                        <div className="flex items-center gap-2 text-xs">
-                          {selectedMember === member.id ? (
-                            <CustomListbox
-                              options={Object.keys(ROLE).map((key) => ({
-                                value: key,
-                                display: ROLE[parseInt(key) as keyof typeof ROLE],
-                              }))}
-                              title={ROLE[member.role as keyof typeof ROLE] ?? "Select Role"}
-                              value={member.role}
-                              onChange={(value) => {
-                                if (!activeWorkspace || !projectDetails) return;
-                                projectService
-                                  .updateProjectMember(
-                                    activeWorkspace.slug,
-                                    projectDetails.id,
-                                    member.id,
-                                    {
-                                      role: value,
-                                    }
-                                  )
-                                  .then((res) => {
-                                    setToastAlert({
-                                      type: "success",
-                                      message: "Member role updated successfully.",
-                                      title: "Success",
-                                    });
-                                    mutateMembers(
-                                      (prevData: any) =>
-                                        prevData.map((m: any) =>
-                                          m.id === selectedMember
-                                            ? { ...m, ...res, role: value }
-                                            : m
-                                        ),
-                                      false
-                                    );
-                                    setSelectedMember(null);
-                                  })
-                                  .catch((err) => {
-                                    console.log(err);
-                                  });
-                              }}
                             />
+                          ) : member.first_name !== "" ? (
+                            member.first_name.charAt(0)
                           ) : (
-                            <p>{ROLE[member.role as keyof typeof ROLE] ?? "None"}</p>
+                            member.email.charAt(0)
                           )}
-                          <CustomMenu ellipsis>
+                        </div>
-                            <CustomMenu.MenuItem
+                        <div>
-                              onClick={() => {
+                          <h4 className="text-sm">
-                                if (!member.member) {
+                            {member.first_name} {member.last_name}
-                                  setToastAlert({
+                          </h4>
-                                    type: "error",
+                          <p className="mt-0.5 text-xs text-gray-500">{member.email}</p>
-                                    message: "You can't edit a pending invitation.",
-                                    title: "Error",
-                                  });
-                                } else {
-                                  setSelectedMember(member.id);
-                                }
-                              }}
-                            >
-                              Edit
-                            </CustomMenu.MenuItem>
-                            <CustomMenu.MenuItem
-                              onClick={() => {
-                                if (member.member) {
-                                  setSelectedRemoveMember(member.id);
-                                } else {
-                                  setSelectedInviteRemoveMember(member.id);
-                                }
-                              }}
-                            >
-                              Remove
-                            </CustomMenu.MenuItem>
-                          </CustomMenu>
                         </div>
                       </div>
-                    ))
+                      {!member.member && (
-                  : null}
+                        <span className="inline-flex items-center rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800">
-              </div>
+                          Request Pending
+                        </span>
+                      )}
+                      <div className="flex items-center gap-2 text-xs">
+                        <CustomSelect
+                          label={ROLE[member.role as keyof typeof ROLE]}
+                          value={member.role}
+                          onChange={(value: 5 | 10 | 15 | 20 | undefined) => {
+                            if (!activeWorkspace || !projectDetails) return;
+
+                            projectService
+                              .updateProjectMember(
+                                activeWorkspace.slug,
+                                projectDetails.id,
+                                member.id,
+                                {
+                                  role: value,
+                                }
+                              )
+                              .then((res) => {
+                                setToastAlert({
+                                  type: "success",
+                                  message: "Member role updated successfully.",
+                                  title: "Success",
+                                });
+                                mutateMembers(
+                                  (prevData: any) =>
+                                    prevData.map((m: any) =>
+                                      m.id === member.id ? { ...m, ...res, role: value } : m
+                                    ),
+                                  false
+                                );
+                                setSelectedMember(null);
+                              })
+                              .catch((err) => {
+                                console.log(err);
+                              });
+                          }}
+                        >
+                          {Object.keys(ROLE).map((key) => (
+                            <CustomSelect.Option value={key}>
+                              <>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
+                            </CustomSelect.Option>
+                          ))}
+                        </CustomSelect>
+                        <CustomMenu ellipsis>
+                          <CustomMenu.MenuItem
+                            onClick={() => {
+                              if (member.member) setSelectedRemoveMember(member.id);
+                              else setSelectedInviteRemoveMember(member.id);
+                            }}
+                          >
+                            Remove member
+                          </CustomMenu.MenuItem>
+                        </CustomMenu>
+                      </div>
+                    </div>
+                  ))
+                : null}
             </div>
           )}
         </section>

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

@@ -65,7 +65,6 @@ const StatesSettings: NextPage<UserAuth> = (props) => {
         onClose={() => setSelectDeleteState(null)}
       />
       <AppLayout
-        settingsLayout="project"
         memberType={{ isMember, isOwner, isViewer, isGuest }}
         breadcrumbs={
           <Breadcrumbs>
@@ -76,30 +75,31 @@ const StatesSettings: NextPage<UserAuth> = (props) => {
             <BreadcrumbItem title="States Settings" />
           </Breadcrumbs>
         }
+        settingsLayout
       >
-        <div className="space-y-8">
+        <div className="grid grid-cols-12 gap-10">
-          <div>
+          <div className="col-span-12 sm:col-span-5">
-            <h3 className="text-3xl font-bold leading-6 text-gray-900">States</h3>
+            <h3 className="text-2xl font-semibold">States</h3>
-            <p className="mt-4 text-sm text-gray-500">Manage the states of this project.</p>
+            <p className="text-gray-500">Manage the states of this project.</p>
           </div>
-          <div className="flex flex-col justify-between gap-4">
+          <div className="col-span-12 space-y-8 sm:col-span-7">
             {states && projectDetails ? (
               Object.keys(orderedStateGroups).map((key) => {
                 if (orderedStateGroups[key].length !== 0)
                   return (
                     <div key={key}>
-                      <div className="mb-2 flex w-full justify-between md:w-2/3">
+                      <div className="mb-2 flex w-full justify-between">
-                        <p className="text-md capitalize leading-6 text-gray-900">{key} states</p>
+                        <h4 className="font-medium capitalize">{key}</h4>
                         <button
                           type="button"
+                          className="flex items-center gap-2 text-theme outline-none"
                           onClick={() => setActiveGroup(key as keyof StateGroup)}
-                          className="flex items-center gap-2 text-xs text-theme"
                         >
-                          <PlusIcon className="h-3 w-3 text-theme" />
+                          <PlusIcon className="h-4 w-4" />
                           Add
                         </button>
                       </div>
-                      <div className="space-y-1 rounded-xl border divide-y p-1 md:w-2/3">
+                      <div className="divide-y rounded-[10px] border border-gray-200">
                         {key === activeGroup && (
                           <CreateUpdateStateInline
                             onClose={() => {
@@ -117,7 +117,6 @@ const StatesSettings: NextPage<UserAuth> = (props) => {
                               index={index}
                               state={state}
                               statesList={statesList}
-                              activeGroup={activeGroup}
                               handleEditState={() => setSelectedState(state.id)}
                               handleDeleteState={() => setSelectDeleteState(state.id)}
                             />

apps/app/pages/[workspaceSlug]/settings/billing.tsx

@@ -38,7 +38,6 @@ const BillingSettings: NextPage<TBillingSettingsProps> = (props) => {
   return (
     <>
       <AppLayout
-        settingsLayout="workspace"
         memberType={props}
         breadcrumbs={
           <Breadcrumbs>
@@ -49,6 +48,7 @@ const BillingSettings: NextPage<TBillingSettingsProps> = (props) => {
             <BreadcrumbItem title="Members Settings" />
           </Breadcrumbs>
         }
+        settingsLayout
       >
         <section className="space-y-8">
           <div>

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

@@ -105,7 +105,6 @@ const WorkspaceSettings: NextPage<TWorkspaceSettingsProps> = (props) => {
 
   return (
     <AppLayout
-      settingsLayout="workspace"
       memberType={props}
       meta={{
         title: "Plane - Workspace Settings",
@@ -115,6 +114,7 @@ const WorkspaceSettings: NextPage<TWorkspaceSettingsProps> = (props) => {
           <BreadcrumbItem title={`${activeWorkspace?.name ?? "Workspace"} Settings`} />
         </Breadcrumbs>
       }
+      settingsLayout
     >
       <ImageUploadModal
         isOpen={isImageUploadModalOpen}

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

@@ -37,7 +37,6 @@ const WorkspaceIntegrations: NextPage<UserAuth> = (props) => {
   return (
     <>
       <AppLayout
-        settingsLayout="workspace"
         memberType={props}
         breadcrumbs={
           <Breadcrumbs>
@@ -48,6 +47,7 @@ const WorkspaceIntegrations: NextPage<UserAuth> = (props) => {
             <BreadcrumbItem title="Integrations" />
           </Breadcrumbs>
         }
+        settingsLayout
       >
         <section className="space-y-8">
           <div>

apps/app/pages/[workspaceSlug]/settings/members.tsx

@@ -138,7 +138,6 @@ const MembersSettings: NextPage<TMembersSettingsProps> = (props) => {
         members={members}
       />
       <AppLayout
-        settingsLayout="workspace"
         memberType={props}
         breadcrumbs={
           <Breadcrumbs>
@@ -149,6 +148,7 @@ const MembersSettings: NextPage<TMembersSettingsProps> = (props) => {
             <BreadcrumbItem title="Members Settings" />
           </Breadcrumbs>
         }
+        settingsLayout
       >
         <section className="space-y-8">
           <div>

apps/app/tailwind.config.js

@@ -4,6 +4,7 @@ module.exports = {
     extend: {
       colors: {
         theme: "#3f76ff",
+        "hover-gray": "#f5f5f5",
         primary: "#f9fafb", // gray-50
         secondary: "white",
       },

apps/app/types/workspace.d.ts

@@ -74,7 +74,7 @@ export interface IWorkspaceIntegrations {
   id: string;
   integration: string;
   integration_detail: IIntegrations;
-  metadata: anyl;
+  metadata: any;
   updated_at: string;
   updated_by: string;
   workspace: string;