From a8fdd42cb935427e8281423915fa1ccea998d306 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Wed, 23 Aug 2023 15:43:09 +0530
Subject: [PATCH 1/2] fix: label color select popover overflow (#1949)

Co-authored-by: Aaryan Khandelwal <aaryan610@Aaryans-MacBook-Pro.local>
---
 .../components/issues/sidebar-select/label.tsx  | 17 ++++-------------
 apps/app/components/issues/sidebar.tsx          |  4 ++--
 .../projects/[projectId]/issues/[issueId].tsx   |  2 +-
 3 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/apps/app/components/issues/sidebar-select/label.tsx b/apps/app/components/issues/sidebar-select/label.tsx
index 5f3539c86..3ac2f552e 100644
--- a/apps/app/components/issues/sidebar-select/label.tsx
+++ b/apps/app/components/issues/sidebar-select/label.tsx
@@ -17,13 +17,7 @@ import useUser from "hooks/use-user";
 // ui
 import { Input, Spinner } from "components/ui";
 // icons
-import {
-  ChevronDownIcon,
-  PlusIcon,
-  RectangleGroupIcon,
-  TagIcon,
-  XMarkIcon,
-} from "@heroicons/react/24/outline";
+import { PlusIcon, RectangleGroupIcon, TagIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // types
 import { IIssue, IIssueLabels } from "types";
 // fetch-keys
@@ -281,18 +275,15 @@ export const SidebarLabelSelect: React.FC<Props> = ({
             <Popover className="relative">
               {({ open }) => (
                 <>
-                  <Popover.Button
-                    className={`flex items-center gap-1 rounded-md bg-custom-background-80 p-1 outline-none focus:ring-2 focus:ring-custom-primary`}
-                  >
+                  <Popover.Button className="grid place-items-center outline-none">
                     {watch("color") && watch("color") !== "" && (
                       <span
-                        className="h-5 w-5 rounded"
+                        className="h-6 w-6 rounded"
                         style={{
                           backgroundColor: watch("color") ?? "black",
                         }}
                       />
                     )}
-                    <ChevronDownIcon className="h-3 w-3" />
                   </Popover.Button>
 
                   <Transition
@@ -304,7 +295,7 @@ export const SidebarLabelSelect: React.FC<Props> = ({
                     leaveFrom="opacity-100 translate-y-0"
                     leaveTo="opacity-0 translate-y-1"
                   >
-                    <Popover.Panel className="absolute right-0 bottom-8 z-10 mt-1 max-w-xs transform px-2 sm:px-0">
+                    <Popover.Panel className="absolute z-10 mt-1.5 max-w-xs px-2 sm:px-0">
                       <Controller
                         name="color"
                         control={labelControl}
diff --git a/apps/app/components/issues/sidebar.tsx b/apps/app/components/issues/sidebar.tsx
index 3ac0eb943..6ae7eccb8 100644
--- a/apps/app/components/issues/sidebar.tsx
+++ b/apps/app/components/issues/sidebar.tsx
@@ -285,7 +285,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
         user={user}
       />
       <div className="h-full w-full flex flex-col divide-y-2 divide-custom-border-200 overflow-hidden">
-        <div className="flex items-center justify-between pb-3">
+        <div className="flex items-center justify-between px-5 pb-3">
           <h4 className="text-sm font-medium">
             {issueDetail?.project_detail?.identifier}-{issueDetail?.sequence_id}
           </h4>
@@ -327,7 +327,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
           </div>
         </div>
 
-        <div className="h-full w-full overflow-y-auto">
+        <div className="h-full w-full px-5 overflow-y-auto">
           <div className={`divide-y-2 divide-custom-border-200 ${uneditable ? "opacity-60" : ""}`}>
             {showFirstSection && (
               <div className="py-1">
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index be76d28e3..916c0141e 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -148,7 +148,7 @@ const IssueDetailsPage: NextPage = () => {
           <div className="w-2/3 h-full overflow-y-auto space-y-5 divide-y-2 divide-custom-border-300 p-5">
             <IssueMainContent issueDetails={issueDetails} submitChanges={submitChanges} />
           </div>
-          <div className="w-1/3 h-full space-y-5 border-l border-custom-border-300 p-5 overflow-hidden">
+          <div className="w-1/3 h-full space-y-5 border-l border-custom-border-300 py-5 overflow-hidden">
             <IssueDetailsSidebar
               control={control}
               issueDetail={issueDetails}

From 2d1406953e9cde65895e2ed6128272e53b09da2c Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Wed, 23 Aug 2023 15:44:27 +0530
Subject: [PATCH 2/2] fix: mutate projects list after joining (#1944)

Co-authored-by: Aaryan Khandelwal <aaryan610@Aaryans-MacBook-Pro.local>
---
 apps/app/components/project/join-project-modal.tsx |  3 ++-
 apps/app/components/project/sidebar-list.tsx       |  4 ++--
 apps/app/pages/[workspaceSlug]/projects/index.tsx  | 12 +++++++++++-
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/apps/app/components/project/join-project-modal.tsx b/apps/app/components/project/join-project-modal.tsx
index e0517ac6a..3128a0a42 100644
--- a/apps/app/components/project/join-project-modal.tsx
+++ b/apps/app/components/project/join-project-modal.tsx
@@ -19,6 +19,7 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = ({ onClose, on
 
   const handleJoin = () => {
     setIsJoiningLoading(true);
+
     onJoin()
       .then(() => {
         setIsJoiningLoading(false);
@@ -59,7 +60,7 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = ({ onClose, on
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-80 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-300 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
                 <div className="space-y-5">
                   <Dialog.Title
                     as="h3"
diff --git a/apps/app/components/project/sidebar-list.tsx b/apps/app/components/project/sidebar-list.tsx
index 8018d19a5..9e37426de 100644
--- a/apps/app/components/project/sidebar-list.tsx
+++ b/apps/app/components/project/sidebar-list.tsx
@@ -48,7 +48,7 @@ export const ProjectSidebarList: FC = () => {
 
   const { projects: allProjects } = useProjects();
 
-  const joinedProjects = allProjects?.filter((p) => p.sort_order);
+  const joinedProjects = allProjects?.filter((p) => p.is_member);
   const favoriteProjects = allProjects?.filter((p) => p.is_favorite);
 
   const orderedJoinedProjects: IProject[] | undefined = joinedProjects
@@ -201,7 +201,7 @@ export const ProjectSidebarList: FC = () => {
                               key={project.id}
                               draggableId={project.id}
                               index={index}
-                              isDragDisabled={project.sort_order === null}
+                              isDragDisabled={!project.is_member}
                             >
                               {(provided, snapshot) => (
                                 <div ref={provided.innerRef} {...provided.draggableProps}>
diff --git a/apps/app/pages/[workspaceSlug]/projects/index.tsx b/apps/app/pages/[workspaceSlug]/projects/index.tsx
index 4dd6a234e..5c671e32a 100644
--- a/apps/app/pages/[workspaceSlug]/projects/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/index.tsx
@@ -28,6 +28,8 @@ import type { NextPage } from "next";
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 // helper
 import { truncateText } from "helpers/string.helper";
+// types
+import { IProject } from "types";
 
 const ProjectsPage: NextPage = () => {
   // router
@@ -39,7 +41,7 @@ const ProjectsPage: NextPage = () => {
   const { user } = useUserAuth();
   // context data
   const { activeWorkspace } = useWorkspaces();
-  const { projects } = useProjects();
+  const { projects, mutateProjects } = useProjects();
   // states
   const [deleteProject, setDeleteProject] = useState<string | null>(null);
   const [selectedProjectToJoin, setSelectedProjectToJoin] = useState<string | null>(null);
@@ -101,6 +103,14 @@ const ProjectsPage: NextPage = () => {
             })
             .then(async () => {
               mutate(PROJECT_MEMBERS(project.id));
+              mutateProjects<IProject[]>(
+                (prevData) =>
+                  (prevData ?? []).map((p) => ({
+                    ...p,
+                    is_member: p.id === project.id ? true : p.is_member,
+                  })),
+                false
+              );
               setSelectedProjectToJoin(null);
             })
             .catch(() => {