Merge pull request #366 from makeplane/style/project_settings

style: project settings pages
2024-06-14 14:31:34 +00:00 · 2023-03-03 14:04:04 +05:30 · 2023-03-03 14:04:04 +05:30 · 03a8ad336e
commit 03a8ad336e
parent f290a417bc 530edbe149
24 changed files with 657 additions and 712 deletions
--- a/apps/app/components/labels/create-update-label-inline.tsx
+++ b/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"
      }`}
    >
--- a/apps/app/components/labels/single-label.tsx
+++ b/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)}>
--- a/apps/app/components/project/send-project-invitation-modal.tsx
+++ b/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>
--- a/apps/app/components/project/single-integration-card.tsx
+++ b/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>
--- a/apps/app/components/states/create-update-state-inline.tsx
+++ b/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"
      />
--- a/apps/app/components/states/single-state.tsx
+++ b/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="flex items-center gap-2">
-        <span
-          className="h-3 w-3 flex-shrink-0 rounded-full"
-          style={{
-            backgroundColor: state.color,
-          }}
-        />
+    <div className={`group flex items-center justify-between gap-2 rounded-[10px] bg-white p-5`}>
+      <div className="flex items-center gap-3">
+        {getStateGroupIcon(state.group, "20", "20", 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}
          >
--- a/apps/app/layouts/app-layout/app-sidebar.tsx
+++ b/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`}
      >
--- a/apps/app/layouts/app-layout/index.tsx
+++ b/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,16 +120,6 @@ const AppLayout: FC<AppLayoutProps> = ({
            }
          />
        ) : (
-          <>
-            {settingsLayout && (
-              <SettingsSidebar
-                links={
-                  settingsLayout === "workspace"
-                    ? workspaceLinks(workspaceSlug as string)
-                    : sidebarLinks(workspaceSlug as string, projectId as string)
-                }
-              />
-            )}
          <main className="flex h-screen w-full min-w-0 flex-col overflow-y-auto">
            {!noHeader && (
              <AppHeader
@ -205,7 +136,7 @@ const AppLayout: FC<AppLayoutProps> = ({
            ) : isMember ? (
              <div
                className={`w-full flex-grow ${
-                    noPadding ? "" : settingsLayout ? "p-9 lg:px-16 lg:pt-10" : "p-9"
+                  noPadding ? "" : settingsLayout ? "p-9 lg:px-32 lg:pt-9" : "p-9"
                } ${
                  bg === "primary"
                    ? "bg-primary"
@ -214,13 +145,25 @@ const AppLayout: FC<AppLayoutProps> = ({
                    : "bg-primary"
                }`}
              >
+                {settingsLayout && (
+                  <div className="mb-12 space-y-6">
+                    <div>
+                      <h3 className="text-3xl font-semibold">
+                        {projectId ? "Project" : "Workspace"} Settings
+                      </h3>
+                      <p className="mt-1 text-gray-600">
+                        This information will be displayed to every member of the project.
+                      </p>
+                    </div>
+                    <SettingsNavbar />
+                  </div>
+                )}
                {children}
              </div>
            ) : (
              <JoinProject isJoiningProject={isJoiningProject} handleJoin={handleJoin} />
            )}
          </main>
-          </>
        )}
      </div>
    </Container>
--- a/apps/app/layouts/settings-layout/settings-sidebar.tsx
+++ b/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;
--- a/apps/app/layouts/settings-navbar.tsx
+++ b/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;
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
+++ b/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,18 +114,16 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
          <BreadcrumbItem title="Control Settings" />
        </Breadcrumbs>
      }
+      settingsLayout
    >
      <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="space-y-8">
-          <div>
-            <h3 className="text-3xl font-bold leading-6 text-gray-900">Control</h3>
-            <p className="mt-4 text-sm text-gray-500">Set the control for the project.</p>
+        <div className="space-y-8 sm:space-y-12">
+          <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
+            <div className="col-span-12 sm:col-span-6">
+              <h4 className="text-xl font-semibold">Project Lead</h4>
+              <p className="text-gray-500">Select the project leader.</p>
            </div>
-          <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>
+            <div className="col-span-12 sm:col-span-6">
              {projectDetails ? (
                <Controller
                  name="project_lead"
@ -180,12 +177,12 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
              )}
            </div>
          </div>
-            <div className="col-span-5 space-y-16">
-              <div>
-                <h4 className="text-md mb-1 leading-6 text-gray-900">Default Assignee</h4>
-                <p className="mb-3 text-sm text-gray-500">
-                  Select the default assignee for the project.
-                </p>
+          <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"
@ -239,8 +236,7 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
              )}
            </div>
          </div>
-          </div>
-          <div>
+          <div className="sm:text-right">
            <Button type="submit" disabled={isSubmitting}>
              {isSubmitting ? "Updating Project..." : "Update Project"}
            </Button>
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/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,25 +88,26 @@ const FeaturesSettings: NextPage<UserAuth> = (props) => {
          <BreadcrumbItem title="Features Settings" />
        </Breadcrumbs>
      }
+      settingsLayout
    >
      <section className="space-y-8">
+        <h3 className="text-2xl font-semibold">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>
-          <h3 className="text-3xl font-bold leading-6 text-gray-900">Project Features</h3>
-        </div>
-        <div className="space-y-8 md:w-2/3">
-          <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 cycles</h4>
-              <p className="mb-3 text-sm text-gray-500">
-                Cycles are enabled for all the projects in this workspace. Access it from the
+                <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>
+            </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-indigo-500" : "bg-gray-200"
+                projectDetails?.cycle_view ? "bg-green-500" : "bg-gray-200"
              }`}
              role="switch"
              aria-checked={projectDetails?.cycle_view}
@ -121,20 +122,21 @@ const FeaturesSettings: NextPage<UserAuth> = (props) => {
              />
            </button>
          </div>
-          </div>
-          <div className="flex items-center justify-between gap-x-10 gap-y-2">
+          <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="text-md mb-1 leading-6 text-gray-900">Use modules</h4>
-              <p className="mb-3 text-sm text-gray-500">
+                <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>
+            </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"
+                projectDetails?.module_view ? "bg-green-500" : "bg-gray-200"
              }`}
              role="switch"
              aria-checked={projectDetails?.module_view}
@ -162,7 +164,6 @@ const FeaturesSettings: NextPage<UserAuth> = (props) => {
            </Button>
          </a>
        </div>
-        </div>
      </section>
    </AppLayout>
  );
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/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,21 +147,13 @@ const GeneralSettings: NextPage<UserAuth> = (props) => {
        }}
      />
      <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="space-y-8">
-          <div>
-            <h3 className="text-3xl font-bold leading-6 text-gray-900">General</h3>
-            <p className="mt-4 text-sm text-gray-500">
-              This information will be displayed to every member of the project.
-            </p>
+        <div className="space-y-8 sm:space-y-12">
+          <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
+            <div className="col-span-12 sm:col-span-6">
+              <h4 className="text-xl font-semibold">Icon & Name</h4>
+              <p className="text-gray-500">Select an icon and a name for your project.</p>
            </div>
-          <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">Icon & Name</h4>
-                <p className="mb-3 text-sm text-gray-500">
-                  Select an icon and a name for the project.
-                </p>
-                <div className="flex gap-2">
+            <div className="col-span-12 flex gap-2 sm:col-span-6">
              {projectDetails ? (
                <Controller
                  control={control}
@ -185,7 +178,6 @@ const GeneralSettings: NextPage<UserAuth> = (props) => {
                  error={errors.name}
                  register={register}
                  placeholder="Project Name"
-                      className="w-auto"
                  validations={{
                    required: "Name is required",
                  }}
@ -197,11 +189,12 @@ const GeneralSettings: NextPage<UserAuth> = (props) => {
              )}
            </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-5 space-y-16">
-              <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>
+            <div className="col-span-12 sm:col-span-6">
              {projectDetails ? (
                <TextArea
                  id="description"
@ -219,12 +212,14 @@ const GeneralSettings: NextPage<UserAuth> = (props) => {
              )}
            </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">
+          <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"
@ -232,7 +227,6 @@ const GeneralSettings: NextPage<UserAuth> = (props) => {
                  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);
@ -256,10 +250,12 @@ const GeneralSettings: NextPage<UserAuth> = (props) => {
              )}
            </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>
+          <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"
@ -290,8 +286,7 @@ const GeneralSettings: NextPage<UserAuth> = (props) => {
              )}
            </div>
          </div>
-          </div>
-          <div>
+          <div className="sm:text-right">
            {projectDetails ? (
              <Button type="submit" disabled={isSubmitting}>
                {isSubmitting ? "Updating Project..." : "Update Project"}
@ -302,22 +297,16 @@ const GeneralSettings: NextPage<UserAuth> = (props) => {
              </Loader>
            )}
          </div>
-          <div className="col-span-12">
-            {projectDetails ? (
-              <div>
-                <h4 className="text-md mb-1 leading-6 text-gray-900">Danger Zone</h4>
-                <p className="mb-3 text-sm text-gray-500">
-                  The danger zone of the project delete page is a critical area that requires
-                  careful consideration and attention. When deleting a project, all of the data and
-                  resources within that project will be permanently removed and cannot be recovered.
+          <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">Danger Zone</h4>
+              <p className="text-gray-500">
+                The danger zone of the project delete page is a critical area that requires careful
+                consideration and attention. When deleting a project, all of the data and resources
+                within that project will be permanently removed and cannot be recovered.
              </p>
            </div>
-            ) : (
-              <Loader className="w-full space-y-2">
-                <Loader.Item height="22px" width="250px" light />
-                <Loader.Item height="46px" width="100%" light />
-              </Loader>
-            )}
+            <div className="col-span-12 sm:col-span-6">
              {projectDetails ? (
                <div>
                  <OutlineButton
@ -334,6 +323,7 @@ const GeneralSettings: NextPage<UserAuth> = (props) => {
              )}
            </div>
          </div>
+        </div>
      </form>
    </AppLayout>
  );
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
+++ b/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-3xl font-bold leading-6 text-gray-900">Integrations</h3>
-              <p className="mt-4 text-sm text-gray-500">Manage the project integrations.</p>
-            </div>
+            <h3 className="text-2xl font-semibold">Integrations</h3>
+            <div className="space-y-5">
              {workspaceIntegrations.map((integration) => (
                <SingleIntegration
                  key={integration.integration_detail.id}
                  integration={integration}
                />
              ))}
+            </div>
          </section>
        ) : (
          <div className="grid h-full w-full place-items-center px-4 sm:px-0">
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
+++ b/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">
-          <div>
-            <h3 className="text-3xl font-bold leading-6 text-gray-900">Labels</h3>
-            <p className="mt-4 text-sm text-gray-500">Manage the labels of this project.</p>
-          </div>
-          <div className="flex items-center justify-between gap-2 md:w-2/3">
-            <h4 className="text-md mb-1 leading-6 text-gray-900">Manage labels</h4>
-            <Button theme="secondary" className="flex items-center gap-x-1" onClick={newLabel}>
+        <section className="grid grid-cols-12 gap-10">
+          <div className="col-span-12 sm:col-span-5">
+            <h3 className="text-2xl font-semibold">Labels</h3>
+            <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
-            </Button>
+              </span>
+            </PrimaryButton>
          </div>
-          <div className="space-y-5">
+          <div className="col-span-12 space-y-5 sm:col-span-7">
+            {labelForm && (
              <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" />
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/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,45 +168,41 @@ const MembersSettings: NextPage<TMemberSettingsProps> = (props) => {
            <BreadcrumbItem title="Members Settings" />
          </Breadcrumbs>
        }
+        settingsLayout
      >
        <section className="space-y-8">
-          <div>
-            <h3 className="text-3xl font-bold leading-6 text-gray-900">Members</h3>
-            <p className="mt-4 text-sm text-gray-500">Manage all the members of the project.</p>
+          <div className="flex items-end justify-between gap-4">
+            <h3 className="text-2xl font-semibold">Members</h3>
+            <button
+              type="button"
+              className="flex items-center gap-2 text-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="flex items-center justify-between gap-2">
-                <h4 className="text-md mb-1 leading-6 text-gray-900">Manage members</h4>
-                <Button
-                  theme="secondary"
-                  className="flex items-center gap-x-1"
-                  onClick={() => setInviteModal(true)}
-                >
-                  <PlusIcon className="h-4 w-4" />
-                  Add Member
-                </Button>
-              </div>
-              <div className="mt-6 space-y-6">
+            <div className="divide-y rounded-[10px] border border-gray-200 bg-white px-6">
              {members.length > 0
                ? members.map((member) => (
-                      <div key={member.id} className="flex items-center justify-between">
+                    <div key={member.id} className="flex items-center justify-between py-6">
                      <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">
+                        <div className="relative flex h-10 w-10 items-center justify-center rounded-lg 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"
+                              className="rounded-lg"
                            />
                          ) : member.first_name !== "" ? (
                            member.first_name.charAt(0)
@ -217,9 +212,9 @@ const MembersSettings: NextPage<TMemberSettingsProps> = (props) => {
                        </div>
                        <div>
                          <h4 className="text-sm">
-                              {member.first_name} {member.last_name}{" "}
+                            {member.first_name} {member.last_name}
                          </h4>
-                            <p className="text-xs text-gray-500">{member.email}</p>
+                          <p className="mt-0.5 text-xs text-gray-500">{member.email}</p>
                        </div>
                      </div>
                      {!member.member && (
@ -228,16 +223,12 @@ const MembersSettings: NextPage<TMemberSettingsProps> = (props) => {
                        </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"}
+                        <CustomSelect
+                          label={ROLE[member.role as keyof typeof ROLE]}
                          value={member.role}
-                              onChange={(value) => {
+                          onChange={(value: 5 | 10 | 15 | 20 | undefined) => {
                            if (!activeWorkspace || !projectDetails) return;
+
                            projectService
                              .updateProjectMember(
                                activeWorkspace.slug,
@ -256,9 +247,7 @@ const MembersSettings: NextPage<TMemberSettingsProps> = (props) => {
                                mutateMembers(
                                  (prevData: any) =>
                                    prevData.map((m: any) =>
-                                          m.id === selectedMember
-                                            ? { ...m, ...res, role: value }
-                                            : m
+                                      m.id === member.id ? { ...m, ...res, role: value } : m
                                    ),
                                  false
                                );
@ -268,36 +257,21 @@ const MembersSettings: NextPage<TMemberSettingsProps> = (props) => {
                                console.log(err);
                              });
                          }}
-                            />
-                          ) : (
-                            <p>{ROLE[member.role as keyof typeof ROLE] ?? "None"}</p>
-                          )}
+                        >
+                          {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) {
-                                  setToastAlert({
-                                    type: "error",
-                                    message: "You can't edit a pending invitation.",
-                                    title: "Error",
-                                  });
-                                } else {
-                                  setSelectedMember(member.id);
-                                }
+                              if (member.member) setSelectedRemoveMember(member.id);
+                              else setSelectedInviteRemoveMember(member.id);
                            }}
                          >
-                              Edit
-                            </CustomMenu.MenuItem>
-                            <CustomMenu.MenuItem
-                              onClick={() => {
-                                if (member.member) {
-                                  setSelectedRemoveMember(member.id);
-                                } else {
-                                  setSelectedInviteRemoveMember(member.id);
-                                }
-                              }}
-                            >
-                              Remove
+                            Remove member
                          </CustomMenu.MenuItem>
                        </CustomMenu>
                      </div>
@ -305,7 +279,6 @@ const MembersSettings: NextPage<TMemberSettingsProps> = (props) => {
                  ))
                : null}
            </div>
-            </div>
          )}
        </section>
      </AppLayout>
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/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>
-            <h3 className="text-3xl font-bold leading-6 text-gray-900">States</h3>
-            <p className="mt-4 text-sm text-gray-500">Manage the states of this project.</p>
+        <div className="grid grid-cols-12 gap-10">
+          <div className="col-span-12 sm:col-span-5">
+            <h3 className="text-2xl font-semibold">States</h3>
+            <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">
-                        <p className="text-md capitalize leading-6 text-gray-900">{key} states</p>
+                      <div className="mb-2 flex w-full justify-between">
+                        <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)}
                            />
--- a/apps/app/pages/[workspaceSlug]/settings/billing.tsx
+++ b/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>
--- a/apps/app/pages/[workspaceSlug]/settings/index.tsx
+++ b/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}
--- a/apps/app/pages/[workspaceSlug]/settings/integrations.tsx
+++ b/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>
--- a/apps/app/pages/[workspaceSlug]/settings/members.tsx
+++ b/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>
--- a/apps/app/public/logos/github-square.png
+++ b/apps/app/public/logos/github-square.png
--- a/apps/app/tailwind.config.js
+++ b/apps/app/tailwind.config.js
@ -4,6 +4,7 @@ module.exports = {
    extend: {
      colors: {
        theme: "#3f76ff",
+        "hover-gray": "#f5f5f5",
        primary: "#f9fafb", // gray-50
        secondary: "white",
      },
--- a/apps/app/types/workspace.d.ts
+++ b/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;