Promote: Develop to Stage Release

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}

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">

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"

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}>

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}

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(() => {