From a7a404f990b9833bcafed3e93b159dc4611d08e3 Mon Sep 17 00:00:00 2001
From: Akshita Goyal <36129505+gakshita@users.noreply.github.com>
Date: Mon, 19 Aug 2024 19:30:37 +0530
Subject: [PATCH] fix: card gradient + kanban collapse issue (#870)

---
 .../layouts/board/group-item-header/root.tsx         | 12 ++++++++----
 .../components/projects/layouts/board/group-item.tsx | 12 ++++++++----
 web/ee/components/projects/layouts/board/group.tsx   |  4 ++--
 .../components/projects/layouts/gallery/details.tsx  |  3 ++-
 4 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/web/ee/components/projects/layouts/board/group-item-header/root.tsx b/web/ee/components/projects/layouts/board/group-item-header/root.tsx
index c0afcfed0b..9104054381 100644
--- a/web/ee/components/projects/layouts/board/group-item-header/root.tsx
+++ b/web/ee/components/projects/layouts/board/group-item-header/root.tsx
@@ -18,12 +18,16 @@ type TProjectBoardGroupItemHeader = {
   groupByKey: string;
   projectIds: string[];
   verticalAlign: boolean;
-  setVerticalAlign: (value: boolean) => void;
+  setVerticalAlign: (
+    value: (state: { [key: string]: boolean }) => {
+      [key: string]: boolean;
+    }
+  ) => void;
 };
 
 // Todo: Vertical Align
 export const ProjectBoardGroupItemHeader: FC<TProjectBoardGroupItemHeader> = observer((props) => {
-  const { groupByKey, projectIds, verticalAlign } = props;
+  const { groupByKey, projectIds, verticalAlign, setVerticalAlign } = props;
   //states
   const [open, setOpen] = useState(false);
   // hooks
@@ -71,7 +75,7 @@ export const ProjectBoardGroupItemHeader: FC<TProjectBoardGroupItemHeader> = obs
         >
           <div
             className={`line-clamp-1 inline-block overflow-hidden truncate font-medium text-custom-text-100 ${
-              verticalAlign ? `vertical-lr max-h-[400px]` : ``
+              verticalAlign ? `vertical-lr` : ``
             }`}
           >
             {details?.title}
@@ -83,7 +87,7 @@ export const ProjectBoardGroupItemHeader: FC<TProjectBoardGroupItemHeader> = obs
 
         <div
           className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80"
-          // onClick={() => setVerticalAlign(!verticalAlign)}
+          onClick={() => setVerticalAlign((state) => ({ ...state, [groupByKey]: !verticalAlign }))}
         >
           {verticalAlign ? <Maximize2 width={12} strokeWidth={2} /> : <Minimize2 width={12} strokeWidth={2} />}
         </div>
diff --git a/web/ee/components/projects/layouts/board/group-item.tsx b/web/ee/components/projects/layouts/board/group-item.tsx
index 9bb360b297..c4449b8e49 100644
--- a/web/ee/components/projects/layouts/board/group-item.tsx
+++ b/web/ee/components/projects/layouts/board/group-item.tsx
@@ -17,8 +17,12 @@ import { groupDetails, highlightProjectOnDrop } from "./utils";
 type ProjectBoardGroupItem = {
   groupByKey: string;
   projectIds: string[];
-  verticalAlign: boolean;
-  setVerticalAlign: (value: boolean) => void;
+  verticalAlign: { [key: string]: boolean };
+  setVerticalAlign: (
+    value: (state: { [key: string]: boolean }) => {
+      [key: string]: boolean;
+    }
+  ) => void;
   dropErrorMessage?: string;
 };
 
@@ -98,11 +102,11 @@ export const ProjectBoardGroupItem: FC<ProjectBoardGroupItem> = observer((props)
         <ProjectBoardGroupItemHeader
           groupByKey={groupByKey}
           projectIds={projectIds}
-          verticalAlign={verticalAlign}
+          verticalAlign={verticalAlign[`${groupByKey}`] || false}
           setVerticalAlign={setVerticalAlign}
         />
         {/* projects placeholder */}
-        {!verticalAlign && projectIds.length > 0 && (
+        {!verticalAlign[groupByKey] && projectIds.length > 0 && (
           <ProjectBoardList groupByKey={groupByKey} projectIds={projectIds} />
         )}
       </div>
diff --git a/web/ee/components/projects/layouts/board/group.tsx b/web/ee/components/projects/layouts/board/group.tsx
index 039dff257c..55f8150541 100644
--- a/web/ee/components/projects/layouts/board/group.tsx
+++ b/web/ee/components/projects/layouts/board/group.tsx
@@ -14,7 +14,7 @@ type ProjectBoardGroup = {
 
 export const ProjectBoardGroup: FC<ProjectBoardGroup> = observer((props) => {
   const { groupByProjectIds } = props;
-  const [verticalAlign, setVerticalAlign] = useState(false);
+  const [verticalAlign, setVerticalAlign] = useState<{ [key: string]: boolean }>({});
 
   return (
     <div className="w-full h-full overflow-hidden overflow-x-auto relative flex px-3 space-x-3 horizontal-scrollbar scrollbar-lg">
@@ -22,7 +22,7 @@ export const ProjectBoardGroup: FC<ProjectBoardGroup> = observer((props) => {
         <div
           key={groupKey}
           className={cn("py-3 h-full overflow-hidden flex-shrink-0", {
-            "w-[320px]": !verticalAlign,
+            "w-[320px]": !verticalAlign[groupKey],
           })}
         >
           <ProjectBoardGroupItem
diff --git a/web/ee/components/projects/layouts/gallery/details.tsx b/web/ee/components/projects/layouts/gallery/details.tsx
index 2ddfd8be42..2dbdd9e9a2 100644
--- a/web/ee/components/projects/layouts/gallery/details.tsx
+++ b/web/ee/components/projects/layouts/gallery/details.tsx
@@ -148,6 +148,7 @@ const Details: React.FC<Props> = observer((props) => {
               e.stopPropagation();
             }}
           />
+          <div className="absolute inset-0 z-[1] bg-gradient-to-t to-black/60 from-transparent" />
         </div>
         <div className="flex gap-2 absolute top-2 right-2" data-prevent-nprogress>
           {(isOwner || !isArchived) && (
@@ -186,7 +187,7 @@ const Details: React.FC<Props> = observer((props) => {
               {" "}
               <FavoriteStar
                 buttonClassName={cn(
-                  "h-6 w-6 bg-white/30 rounded opacity-0 group-hover/project-card:opacity-100 group-hover/project-card:pointer-events-auto",
+                  "relative flex justify-center items-center opacity-0 z-[2] pointer-events-none flex-shrink-0 group-hover/project-card:opacity-100 group-hover/project-card:pointer-events-auto my-auto bg-white/30 rounded h-6 w-6",
                   {
                     "opacity-100 pointer-events-auto": project.is_favorite,
                   }