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"
-                    style={{
-                      backgroundColor: watch("color") ?? "#000",
-                    }}
-                  />
-                )}
+                <span
+                  className="h-5 w-5 rounded"
+                  style={{
+                    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>