From 5d8c5b22e8ed2516979382e6001cb3213a61321c Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 23 Apr 2024 12:55:42 +0530
Subject: [PATCH] chore: kanban layout sub-group ui revamp & sub-group icon fix
 (#4243)

---
 .../issue-layouts/kanban/base-kanban-root.tsx |  2 +-
 .../issues/issue-layouts/kanban/default.tsx   |  2 +-
 .../kanban/headers/sub-group-by-card.tsx      | 21 ++++++++++---------
 .../issues/issue-layouts/kanban/swimlanes.tsx | 11 +++++-----
 4 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
index be9b94cdc..8c6cf900b 100644
--- a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -233,7 +233,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
         className={`horizontal-scrollbar scrollbar-lg relative flex h-full w-full bg-custom-background-90 ${sub_group_by ? "vertical-scrollbar overflow-y-auto" : "overflow-x-auto overflow-y-hidden"}`}
         ref={scrollableContainerRef}
       >
-        <div className="relative h-full w-max min-w-full bg-custom-background-90 px-2">
+        <div className="relative h-full w-max min-w-full bg-custom-background-90">
           {/* drag and delete component */}
           <div
             className={`fixed left-1/2 -translate-x-1/2 ${
diff --git a/web/components/issues/issue-layouts/kanban/default.tsx b/web/components/issues/issue-layouts/kanban/default.tsx
index cb40accf5..99bfee411 100644
--- a/web/components/issues/issue-layouts/kanban/default.tsx
+++ b/web/components/issues/issue-layouts/kanban/default.tsx
@@ -138,7 +138,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
   const isGroupByCreatedBy = group_by === "created_by";
 
   return (
-    <div className={`relative w-full flex gap-2 ${sub_group_by ? "h-full" : "h-full"}`}>
+    <div className={`relative w-full flex gap-2 px-2 ${sub_group_by ? "h-full" : "h-full"}`}>
       {list &&
         list.length > 0 &&
         list.map((subList: IGroupByColumn) => {
diff --git a/web/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx b/web/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
index 475f63877..252585a83 100644
--- a/web/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
+++ b/web/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { FC } from "react";
 import { observer } from "mobx-react-lite";
 import { Circle, ChevronDown, ChevronUp } from "lucide-react";
 import { TIssueKanbanFilters } from "@plane/types";
@@ -13,13 +13,14 @@ interface IHeaderSubGroupByCard {
   handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void;
 }
 
-export const HeaderSubGroupByCard = observer(
-  ({ icon, title, count, column_id, kanbanFilters, handleKanbanFilters }: IHeaderSubGroupByCard) => (
-    <div className={`relative flex w-full flex-shrink-0 flex-row items-center gap-2 rounded-sm p-1.5`}>
-      <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={() => handleKanbanFilters("sub_group_by", column_id)}
-      >
+export const HeaderSubGroupByCard: FC<IHeaderSubGroupByCard> = observer((props) => {
+  const { icon, title, count, column_id, kanbanFilters, handleKanbanFilters } = props;
+  return (
+    <div
+      className={`relative flex w-full flex-shrink-0 flex-row items-center gap-2 rounded-sm p-1.5 cursor-pointer`}
+      onClick={() => handleKanbanFilters("sub_group_by", column_id)}
+    >
+      <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80">
         {kanbanFilters?.sub_group_by.includes(column_id) ? (
           <ChevronDown width={14} strokeWidth={2} />
         ) : (
@@ -36,5 +37,5 @@ export const HeaderSubGroupByCard = observer(
         <div className="pl-2 text-sm font-medium text-custom-text-300">{count || 0}</div>
       </div>
     </div>
-  )
-);
+  );
+});
diff --git a/web/components/issues/issue-layouts/kanban/swimlanes.tsx b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
index ae89664b5..99ac692f7 100644
--- a/web/components/issues/issue-layouts/kanban/swimlanes.tsx
+++ b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
@@ -175,23 +175,22 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
     <div className="relative h-max min-h-full w-full">
       {list &&
         list.length > 0 &&
-        list.map((_list: any) => {
+        list.map((_list: IGroupByColumn) => {
           const subGroupByVisibilityToggle = visibilitySubGroupBy(_list);
           if (subGroupByVisibilityToggle.showGroup === false) return <></>;
           return (
             <div key={_list.id} className="flex flex-shrink-0 flex-col">
-              <div className="sticky top-[50px] z-[1] flex w-full items-center bg-custom-background-90 py-1">
-                <div className="sticky left-0 flex-shrink-0 bg-custom-background-90 pr-2">
+              <div className="sticky top-[50px] z-[1] py-1 flex w-full items-center bg-custom-background-100 border-y-[0.5px] border-custom-border-200">
+                <div className="sticky left-0 flex-shrink-0">
                   <HeaderSubGroupByCard
                     column_id={_list.id}
-                    icon={_list.Icon}
+                    icon={_list.icon}
                     title={_list.name || ""}
                     count={calculateIssueCount(_list.id)}
                     kanbanFilters={kanbanFilters}
                     handleKanbanFilters={handleKanbanFilters}
                   />
                 </div>
-                <div className="w-full border-b border-dashed border-custom-border-400" />
               </div>
 
               {subGroupByVisibilityToggle.showIssues && (
@@ -313,7 +312,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
 
   return (
     <div className="relative">
-      <div className="sticky top-0 z-[2] h-[50px] bg-custom-background-90">
+      <div className="sticky top-0 z-[2] h-[50px] bg-custom-background-90 px-2">
         <SubGroupSwimlaneHeader
           issueIds={issueIds}
           group_by={group_by}