style: project settings theming (#936)

* style: project and workspace members theming * style: project features theming * style: project settings states theming * style: project settings labels theming * style: project settings integrations theming
2023-04-22 23:46:19 +05:30 · 2023-04-22 23:46:19 +05:30 · 169a60723b
commit 169a60723b
parent c80094581e
13 changed files with 211 additions and 294 deletions
--- a/apps/app/components/labels/create-update-label-inline.tsx
+++ b/apps/app/components/labels/create-update-label-inline.tsx
@ -108,28 +108,26 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd

  return (
    <div
-      className={`flex items-center gap-2 scroll-m-8 rounded-[10px] border border-brand-base bg-brand-surface-2 p-5 ${
+      className={`flex scroll-m-8 items-center gap-2 rounded-[10px] border border-brand-base bg-brand-base p-5 ${
        labelForm ? "" : "hidden"
      }`}
      ref={ref}
    >
      <div className="h-8 w-8 flex-shrink-0">
-        <Popover className="relative z-10 flex h-full w-full items-center justify-center rounded-xl bg-brand-surface-2">
+        <Popover className="relative z-10 flex h-full w-full items-center justify-center">
          {({ open }) => (
            <>
              <Popover.Button
-                className={`group inline-flex items-center text-base font-medium focus:outline-none focus:ring-2 focus:ring-brand-accent focus:ring-offset-2 ${
+                className={`group inline-flex items-center text-base font-medium focus:outline-none ${
                  open ? "text-brand-base" : "text-brand-secondary"
                }`}
              >
-                {watch("color") && watch("color") !== "" && (
                <span
-                    className="h-4 w-4 rounded"
+                  className="h-5 w-5 rounded"
                  style={{
-                      backgroundColor: watch("color") ?? "#000",
+                    backgroundColor: watch("color"),
                  }}
                />
-                )}
              </Popover.Button>

              <Transition
--- a/apps/app/components/labels/single-label-group.tsx
+++ b/apps/app/components/labels/single-label-group.tsx
@ -66,7 +66,11 @@ export const SingleLabelGroup: React.FC<Props> = ({
  };

  return (
-    <Disclosure as="div" className="rounded-[10px] border border-brand-base bg-brand-surface-1 p-5 text-brand-base" defaultOpen>
+    <Disclosure
+      as="div"
+      className="rounded-[10px] border border-brand-base bg-brand-base p-5 text-brand-base"
+      defaultOpen
+    >
      {({ open }) => (
        <>
          <div className="flex cursor-pointer items-center justify-between gap-2">
@ -74,7 +78,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
              <span>
                <RectangleGroupIcon className="h-4 w-4" />
              </span>
-              <h6 className="font-medium text-brand-base">{label.name}</h6>
+              <h6>{label.name}</h6>
            </div>
            <div className="flex items-center gap-2">
              <CustomMenu ellipsis>
@ -122,7 +126,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
                    key={child.id}
                    className="group flex items-center justify-between rounded-md border border-brand-base p-2 text-sm"
                  >
-                    <h5 className="flex items-center gap-3 text-brand-base">
+                    <h5 className="flex items-center gap-3">
                      <span
                        className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
                        style={{
--- a/apps/app/components/labels/single-label.tsx
+++ b/apps/app/components/labels/single-label.tsx
@ -5,7 +5,7 @@ import { CustomMenu } from "components/ui";
 // types
 import { IIssueLabels } from "types";
 //icons
-import { RectangleGroupIcon, LinkIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
+import { RectangleGroupIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";

 type Props = {
  label: IIssueLabels;
@ -20,7 +20,7 @@ export const SingleLabel: React.FC<Props> = ({
  editLabel,
  handleLabelDelete,
 }) => (
-  <div className="gap-2 space-y-3 divide-y divide-brand-base rounded-[10px]  border border-brand-base bg-brand-surface-1 p-5">
+  <div className="gap-2 space-y-3 divide-y divide-brand-base rounded-[10px]  border border-brand-base bg-brand-base p-5">
    <div className="flex items-center justify-between">
      <div className="flex items-center gap-3">
        <span
@ -29,7 +29,7 @@ export const SingleLabel: React.FC<Props> = ({
            backgroundColor: label.color && label.color !== "" ? label.color : "#000",
          }}
        />
-        <h6 className="font-medium text-brand-base">{label.name}</h6>
+        <h6 className="text-sm">{label.name}</h6>
      </div>
      <CustomMenu ellipsis>
        <CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
--- a/apps/app/components/project/single-integration-card.tsx
+++ b/apps/app/components/project/single-integration-card.tsx
@ -18,7 +18,6 @@ import SlackLogo from "public/services/slack.png";
 import { IWorkspaceIntegration } from "types";
 // fetch-keys
 import { PROJECT_GITHUB_REPOSITORY } from "constants/fetch-keys";
-import { comboMatches } from "@blueprintjs/core";

 type Props = {
  integration: IWorkspaceIntegration;
@ -27,14 +26,12 @@ type Props = {
 const integrationDetails: { [key: string]: any } = {
  github: {
    logo: GithubLogo,
-    installed:
-      "Activate GitHub integrations on individual projects to sync with specific repositories.",
-    notInstalled: "Connect with GitHub with your Plane workspace to sync project issues.",
+    description: "Select GitHub repository to enable sync.",
  },
  slack: {
    logo: SlackLogo,
-    installed: "Activate Slack integrations on individual projects to sync with specific cahnnels.",
-    notInstalled: "Connect with Slack with your Plane workspace to sync project issues.",
+    description:
+      "Connect your slack channel to this project to get regular updates. Control which notification you want to receive.",
  },
 };

@ -67,19 +64,19 @@ export const SingleIntegration: React.FC<Props> = ({ integration }) => {
    } = repo;

    projectService
-      .syncGiuthubRepository(workspaceSlug as string, projectId as string, integration.id, {
+      .syncGithubRepository(workspaceSlug as string, projectId as string, integration.id, {
        name,
        owner: login,
        repository_id: id,
        url: html_url,
      })
-      .then((res) => {
+      .then(() => {
        mutate(PROJECT_GITHUB_REPOSITORY(projectId as string));

        setToastAlert({
          type: "success",
          title: "Success!",
-          message: `${login}/${name} respository synced with the project successfully.`,
+          message: `${login}/${name} repository synced with the project successfully.`,
        });
      })
      .catch((err) => {
@ -88,7 +85,7 @@ export const SingleIntegration: React.FC<Props> = ({ integration }) => {
        setToastAlert({
          type: "error",
          title: "Error!",
-          message: "Respository could not be synced with the project. Please try again.",
+          message: "Repository could not be synced with the project. Please try again.",
        });
      });
  };
@ -96,24 +93,20 @@ export const SingleIntegration: React.FC<Props> = ({ integration }) => {
  return (
    <>
      {integration && (
-        <div className="flex items-center justify-between gap-2 rounded-[10px] border border-brand-base bg-brand-surface-1 p-5">
+        <div className="flex items-center justify-between gap-2 rounded-[10px] border border-brand-base bg-brand-base p-5">
          <div className="flex items-start gap-4">
            <div className="h-12 w-12 flex-shrink-0">
              <Image
                src={integrationDetails[integration.integration_detail.provider].logo}
-                alt="GithubLogo"
+                alt={`${integration.integration_detail.title} Logo`}
              />
            </div>
            <div>
              <h3 className="flex items-center gap-4 text-xl font-semibold">
                {integration.integration_detail.title}
              </h3>
-              <p className="text-sm text-gray-400">
-                {integration.integration_detail.provider === "github"
-                  ? "Select GitHub repository to enable sync."
-                  : integration.integration_detail.provider === "slack"
-                  ? "Connect your slack channel to this project to get regular updates. Control which notification you want to receive"
-                  : null}
+              <p className="text-sm text-brand-secondary">
+                {integrationDetails[integration.integration_detail.provider].description}
              </p>
            </div>
          </div>
--- a/apps/app/components/states/create-update-state-inline.tsx
+++ b/apps/app/components/states/create-update-state-inline.tsx
@ -155,7 +155,7 @@ export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, select
  return (
    <form
      onSubmit={handleSubmit(onSubmit)}
-      className="flex items-center gap-x-2 rounded-[10px] bg-brand-surface-1 p-5"
+      className="flex items-center gap-x-2 rounded-[10px] bg-brand-base p-5"
    >
      <div className="flex-shrink-0">
        <Popover className="relative flex h-full w-full items-center justify-center">
@ -163,7 +163,7 @@ export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, select
            <>
              <Popover.Button
                className={`group inline-flex items-center text-base font-medium focus:outline-none ${
-                  open ? "text-gray-900" : "text-gray-500"
+                  open ? "text-brand-base" : "text-brand-secondary"
                }`}
              >
                {watch("color") && watch("color") !== "" && (
--- a/apps/app/components/states/single-state.tsx
+++ b/apps/app/components/states/single-state.tsx
@ -134,21 +134,19 @@ export const SingleState: React.FC<Props> = ({
  };

  return (
-    <div
-      className={`group flex items-center justify-between gap-2 border-brand-base bg-brand-surface-1 p-5 first:rounded-t-[10px] last:rounded-b-[10px]`}
-    >
+    <div className="group flex items-center justify-between gap-2 border-brand-base bg-brand-base p-5 first:rounded-t-[10px] last:rounded-b-[10px]">
      <div className="flex items-center gap-3">
        {getStateGroupIcon(state.group, "20", "20", state.color)}
        <div>
-          <h6 className="text-brand-muted-1 font-medium">{addSpaceIfCamelCase(state.name)}</h6>
-          <p className="text-xs text-gray-400">{state.description}</p>
+          <h6 className="text-sm">{addSpaceIfCamelCase(state.name)}</h6>
+          <p className="text-xs text-brand-secondary">{state.description}</p>
        </div>
      </div>
      <div className="flex items-center gap-2">
        {index !== 0 && (
          <button
            type="button"
-            className="hidden text-gray-400 hover:text-brand-base group-hover:inline-block"
+            className="hidden text-brand-secondary group-hover:inline-block"
            onClick={() => handleMove(state, "up")}
          >
            <ArrowUpIcon className="h-4 w-4" />
@ -157,18 +155,18 @@ export const SingleState: React.FC<Props> = ({
        {!(index === groupLength - 1) && (
          <button
            type="button"
-            className="hidden text-gray-400 hover:text-brand-base group-hover:inline-block"
+            className="hidden text-brand-secondary group-hover:inline-block"
            onClick={() => handleMove(state, "down")}
          >
            <ArrowDownIcon className="h-4 w-4" />
          </button>
        )}
        {state.default ? (
-          <span className="text-xs text-gray-400">Default</span>
+          <span className="text-xs text-brand-secondary">Default</span>
        ) : (
          <button
            type="button"
-            className="hidden text-xs text-gray-400 hover:text-brand-base group-hover:inline-block"
+            className="hidden text-xs text-brand-secondary group-hover:inline-block"
            onClick={handleMakeDefault}
            disabled={isSubmitting}
          >
@ -177,7 +175,7 @@ export const SingleState: React.FC<Props> = ({
        )}

        <button type="button" className="grid place-items-center" onClick={handleEditState}>
-          <PencilSquareIcon className="h-4 w-4 text-gray-400" />
+          <PencilSquareIcon className="h-4 w-4 text-brand-secondary" />
        </button>
        <button
          type="button"
@ -189,14 +187,14 @@ export const SingleState: React.FC<Props> = ({
        >
          {state.default ? (
            <Tooltip tooltipContent="Cannot delete the default state.">
-              <TrashIcon className="h-4 w-4 text-red-400" />
+              <TrashIcon className="h-4 w-4 text-red-500" />
            </Tooltip>
          ) : groupLength === 1 ? (
            <Tooltip tooltipContent="Cannot have an empty group.">
-              <TrashIcon className="h-4 w-4 text-red-400" />
+              <TrashIcon className="h-4 w-4 text-red-500" />
            </Tooltip>
          ) : (
-            <TrashIcon className="h-4 w-4 text-red-400" />
+            <TrashIcon className="h-4 w-4 text-red-500" />
          )}
        </button>
      </div>
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@ -6,7 +6,7 @@ import useSWR, { mutate } from "swr";

 // services
 import projectService from "services/project.service";
-import trackEventServices from "services/track-event.service";
+import trackEventServices, { MiscellaneousEventType } from "services/track-event.service";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // hooks
@ -23,6 +23,52 @@ import type { NextPage } from "next";
 // fetch-keys
 import { PROJECTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";

+const featuresList = [
+  {
+    title: "Cycles",
+    description:
+      "Cycles are enabled for all the projects in this workspace. Access them from the sidebar.",
+    icon: <ContrastIcon color="#3f76ff" width={28} height={28} className="flex-shrink-0" />,
+    property: "cycle_view",
+  },
+  {
+    title: "Modules",
+    description:
+      "Modules are enabled for all the projects in this workspace. Access it from the sidebar.",
+    icon: <PeopleGroupIcon color="#ff6b00" width={28} height={28} className="flex-shrink-0" />,
+    property: "module_view",
+  },
+  {
+    title: "Views",
+    description:
+      "Views are enabled for all the projects in this workspace. Access it from the sidebar.",
+    icon: <ViewListIcon color="#05c3ff" width={28} height={28} className="flex-shrink-0" />,
+    property: "issue_views_view",
+  },
+  {
+    title: "Pages",
+    description:
+      "Pages are enabled for all the projects in this workspace. Access it from the sidebar.",
+    icon: <DocumentTextIcon color="#fcbe1d" width={28} height={28} className="flex-shrink-0" />,
+    property: "page_view",
+  },
+];
+
+const getEventType = (feature: string, toggle: boolean): MiscellaneousEventType => {
+  switch (feature) {
+    case "Cycles":
+      return toggle ? "TOGGLE_CYCLE_ON" : "TOGGLE_CYCLE_OFF";
+    case "Modules":
+      return toggle ? "TOGGLE_MODULE_ON" : "TOGGLE_MODULE_OFF";
+    case "Views":
+      return toggle ? "TOGGLE_VIEW_ON" : "TOGGLE_VIEW_OFF";
+    case "Pages":
+      return toggle ? "TOGGLE_PAGES_ON" : "TOGGLE_PAGES_OFF";
+    default:
+      return toggle ? "TOGGLE_PAGES_ON" : "TOGGLE_PAGES_OFF";
+  }
+};
+
 const FeaturesSettings: NextPage = () => {
  const router = useRouter();
  const { workspaceSlug, projectId } = router.query;
@ -91,24 +137,27 @@ const FeaturesSettings: NextPage = () => {
      <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-brand-base bg-brand-surface-1 p-5">
+          {featuresList.map((feature) => (
+            <div
+              key={feature.property}
+              className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-brand-base bg-brand-base p-5"
+            >
              <div className="flex items-start gap-3">
-              <ContrastIcon color="#3F76FF" width={28} height={28} className="flex-shrink-0" />
+                {feature.icon}
                <div>
-                <h4 className="text-xl font-semibold">Cycles</h4>
-                <p className="text-brand-secondary">
-                  Cycles are enabled for all the projects in this workspace. Access them from the
-                  navigation bar.
-                </p>
+                  <h4 className="text-lg font-semibold">{feature.title}</h4>
+                  <p className="text-sm text-brand-secondary">{feature.description}</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-brand-surface-2"
+                  projectDetails?.[feature.property as keyof IProject]
+                    ? "bg-green-500"
+                    : "bg-brand-surface-2"
                }`}
                role="switch"
-              aria-checked={projectDetails?.cycle_view}
+                aria-checked={projectDetails?.[feature.property as keyof IProject]}
                onClick={() => {
                  trackEventServices.trackMiscellaneousEvent(
                    {
@ -118,143 +167,27 @@ const FeaturesSettings: NextPage = () => {
                      projectIdentifier: projectDetails?.identifier,
                      projectName: projectDetails?.name,
                    },
-                  !projectDetails?.cycle_view ? "TOGGLE_CYCLE_ON" : "TOGGLE_CYCLE_OFF"
+                    !projectDetails?.[feature.property as keyof IProject]
+                      ? getEventType(feature.title, true)
+                      : getEventType(feature.title, false)
                  );
-                handleSubmit({ cycle_view: !projectDetails?.cycle_view });
+                  handleSubmit({
+                    [feature.property]: !projectDetails?.[feature.property as keyof IProject],
+                  });
                }}
              >
-              <span className="sr-only">Use cycles</span>
+                <span className="sr-only">Use {feature.title}</span>
                <span
                  aria-hidden="true"
                  className={`inline-block h-5 w-5 transform rounded-full bg-brand-surface-1 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-brand-base bg-brand-surface-1 p-5">
-            <div className="flex items-start gap-3">
-              <PeopleGroupIcon 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-brand-secondary">
-                  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-brand-surface-2"
-              }`}
-              role="switch"
-              aria-checked={projectDetails?.module_view}
-              onClick={() => {
-                trackEventServices.trackMiscellaneousEvent(
-                  {
-                    workspaceId: (projectDetails?.workspace as any)?.id,
-                    workspaceSlug,
-                    projectId,
-                    projectIdentifier: projectDetails?.identifier,
-                    projectName: projectDetails?.name,
-                  },
-                  !projectDetails?.module_view ? "TOGGLE_MODULE_ON" : "TOGGLE_MODULE_OFF"
-                );
-                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-brand-surface-1 shadow ring-0 transition duration-200 ease-in-out ${
-                  projectDetails?.module_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-brand-base bg-brand-surface-1 p-5">
-            <div className="flex items-start gap-3">
-              <ViewListIcon color="#05C3FF" width={28} height={28} className="flex-shrink-0" />
-              <div>
-                <h4 className="-mt-1.5 text-xl font-semibold">Views</h4>
-                <p className="text-brand-secondary">
-                  Views 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?.issue_views_view ? "bg-green-500" : "bg-brand-surface-2"
-              }`}
-              role="switch"
-              aria-checked={projectDetails?.issue_views_view}
-              onClick={() => {
-                trackEventServices.trackMiscellaneousEvent(
-                  {
-                    workspaceId: (projectDetails?.workspace as any)?.id,
-                    workspaceSlug,
-                    projectId,
-                    projectIdentifier: projectDetails?.identifier,
-                    projectName: projectDetails?.name,
-                  },
-                  !projectDetails?.issue_views_view ? "TOGGLE_VIEW_ON" : "TOGGLE_VIEW_OFF"
-                );
-                handleSubmit({ issue_views_view: !projectDetails?.issue_views_view });
-              }}
-            >
-              <span className="sr-only">Use views</span>
-              <span
-                aria-hidden="true"
-                className={`inline-block h-5 w-5 transform rounded-full bg-brand-surface-1 shadow ring-0 transition duration-200 ease-in-out ${
-                  projectDetails?.issue_views_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-brand-base bg-brand-surface-1 p-5">
-            <div className="flex items-start gap-3">
-              <DocumentTextIcon color="#FCBE1D" width={28} height={28} className="flex-shrink-0" />
-              <div>
-                <h4 className="text-xl font-semibold">Pages</h4>
-                <p className="text-brand-secondary">
-                  Pages 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?.page_view ? "bg-green-500" : "bg-brand-surface-2"
-              }`}
-              role="switch"
-              aria-checked={projectDetails?.page_view}
-              onClick={() => {
-                trackEventServices.trackMiscellaneousEvent(
-                  {
-                    workspaceId: (projectDetails?.workspace as any)?.id,
-                    workspaceSlug,
-                    projectId,
-                    projectIdentifier: projectDetails?.identifier,
-                    projectName: projectDetails?.name,
-                  },
-                  !projectDetails?.page_view ? "TOGGLE_PAGES_ON" : "TOGGLE_PAGES_OFF"
-                );
-                handleSubmit({ page_view: !projectDetails?.page_view });
-              }}
-            >
-              <span className="sr-only">Use cycles</span>
-              <span
-                aria-hidden="true"
-                className={`inline-block h-5 w-5 transform rounded-full bg-brand-surface-1 shadow ring-0 transition duration-200 ease-in-out ${
-                  projectDetails?.page_view ? "translate-x-5" : "translate-x-0"
+                    projectDetails?.[feature.property as keyof IProject]
+                      ? "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">
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@ -10,6 +10,7 @@ import projectService from "services/project.service";
 import workspaceService from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
+import useProjectDetails from "hooks/use-project-details";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // components
@ -23,12 +24,7 @@ import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // types
 import type { NextPage } from "next";
 // fetch-keys
-import {
-  PROJECT_DETAILS,
-  PROJECT_INVITATIONS,
-  PROJECT_MEMBERS,
-  WORKSPACE_DETAILS,
-} from "constants/fetch-keys";
+import { PROJECT_INVITATIONS, PROJECT_MEMBERS, WORKSPACE_DETAILS } from "constants/fetch-keys";
 // constants
 import { ROLE } from "constants/workspace";

@ -48,24 +44,13 @@ const MembersSettings: NextPage = () => {
    () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
  );

-  const { data: projectDetails } = useSWR(
-    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
-      : null
-  );
+  const { projectDetails } = useProjectDetails();

  const { data: projectMembers, mutate: mutateMembers } = useSWR(
    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
    workspaceSlug && projectId
      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
-      : null,
-    {
-      onErrorRetry(err, _, __, revalidate, revalidateOpts) {
-        if (err?.status === 403) return;
-        setTimeout(() => revalidate(revalidateOpts), 5000);
-      },
-    }
+      : null
  );

  const { data: projectInvitations, mutate: mutateInvitations } = useSWR(
@ -176,11 +161,11 @@ const MembersSettings: NextPage = () => {
              <Loader.Item height="40px" />
            </Loader>
          ) : (
-            <div className="divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-surface-1 px-6">
+            <div className="divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-base px-6">
              {members.length > 0
                ? members.map((member) => (
                    <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="flex items-center gap-x-6 gap-y-2">
                        <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
@ -203,12 +188,12 @@ const MembersSettings: NextPage = () => {
                          <p className="mt-0.5 text-xs text-brand-secondary">{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">
+                        {!member.member && (
+                          <div className="mr-2 flex items-center justify-center rounded-full bg-yellow-500/20 px-2 py-1 text-center text-xs text-yellow-500">
+                            Pending
+                          </div>
+                        )}
                        <CustomSelect
                          label={ROLE[member.role as keyof typeof ROLE]}
                          value={member.role}
@ -242,6 +227,7 @@ const MembersSettings: NextPage = () => {
                                console.log(err);
                              });
                          }}
+                          position="right"
                        >
                          {Object.keys(ROLE).map((key) => (
                            <CustomSelect.Option key={key} value={key}>
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@ -110,7 +110,10 @@ const StatesSettings: NextPage = () => {
                              handleDeleteState={() => setSelectDeleteState(state.id)}
                            />
                          ) : (
-                            <div className="border-b last:border-b-0" key={state.id}>
+                            <div
+                              className="border-b border-brand-base last:border-b-0"
+                              key={state.id}
+                            >
                              <CreateUpdateStateInline
                                onClose={() => {
                                  setActiveGroup(null);
--- a/apps/app/pages/[workspaceSlug]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/members.tsx
@ -157,7 +157,7 @@ const MembersSettings: NextPage = () => {
              <Loader.Item height="40px" />
            </Loader>
          ) : (
-            <div className="divide-y rounded-[10px] divide-brand-base border border-brand-base bg-brand-surface-1 px-6">
+            <div className="divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-base px-6">
              {members.length > 0
                ? members.map((member) => (
                    <div key={member.id} className="flex items-center justify-between py-6">
@ -184,13 +184,12 @@ const MembersSettings: NextPage = () => {
                          <p className="text-xs text-brand-secondary">{member.email}</p>
                        </div>
                      </div>
-                      <div className="flex items-center">
+                      <div className="flex items-center gap-2 text-xs">
                        {!member?.status && (
-                          <div className="flex mr-2 px-2 py-1 bg-yellow-200 text-yellow-700 text-center rounded-full text-xs items-center justify-center">
+                          <div className="mr-2 flex items-center justify-center rounded-full bg-yellow-500/20 px-2 py-1 text-center text-xs text-yellow-500">
                            <p>Pending</p>
                          </div>
                        )}
-                        <div className="flex items-center gap-2 text-xs">
                        <CustomSelect
                          label={ROLE[member.role as keyof typeof ROLE]}
                          value={member.role}
@ -221,6 +220,7 @@ const MembersSettings: NextPage = () => {
                                });
                              });
                          }}
+                          position="right"
                        >
                          {Object.keys(ROLE).map((key) => (
                            <CustomSelect.Option key={key} value={key}>
@ -243,7 +243,6 @@ const MembersSettings: NextPage = () => {
                        </CustomMenu>
                      </div>
                    </div>
-                    </div>
                  ))
                : null}
            </div>
--- a/apps/app/services/project.service.ts
+++ b/apps/app/services/project.service.ts
@ -244,7 +244,7 @@ class ProjectServices extends APIService {
      });
  }

-  async syncGiuthubRepository(
+  async syncGithubRepository(
    workspaceSlug: string,
    projectId: string,
    workspaceIntegrationId: string,
--- a/apps/app/services/track-event.service.ts
+++ b/apps/app/services/track-event.service.ts
@ -47,7 +47,7 @@ type ViewEventType = "VIEW_CREATE" | "VIEW_UPDATE" | "VIEW_DELETE";

 type IssueCommentType = "ISSUE_COMMENT_CREATE" | "ISSUE_COMMENT_UPDATE" | "ISSUE_COMMENT_DELETE";

-type MiscellaneousEventType =
+export type MiscellaneousEventType =
  | "TOGGLE_CYCLE_ON"
  | "TOGGLE_CYCLE_OFF"
  | "TOGGLE_MODULE_ON"
--- a/apps/app/styles/globals.css
+++ b/apps/app/styles/globals.css
@ -96,8 +96,11 @@
  -webkit-font-smoothing: antialiased;
 }

-/* scrollbar style */
+body {
+  color: rgba(var(--color-text-base));
+}

+/* scrollbar style */
 ::-webkit-scrollbar {
  display: none;
 }