From b429f9ddcc2635c659371404357420e372d3be06 Mon Sep 17 00:00:00 2001
From: ashwinpraveengo <ashwinpraveengo@gmail.com>
Date: Thu, 19 Dec 2024 21:16:03 +0530
Subject: [PATCH] feat: Add conditional styling for tags based on completed
 status in Resource and Shifting sections

---
 src/components/Common/Export.tsx          |  8 ++++++--
 src/components/Kanban/Board.tsx           | 16 ++++++++++++++--
 src/components/Resource/ResourceBoard.tsx |  1 +
 src/components/Shifting/ShiftingBoard.tsx |  1 +
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/components/Common/Export.tsx b/src/components/Common/Export.tsx
index 6cd786977ed..3dd8cbeeae6 100644
--- a/src/components/Common/Export.tsx
+++ b/src/components/Common/Export.tsx
@@ -113,7 +113,7 @@ export const ExportButton = ({
   ...props
 }: ExportButtonProps) => {
   const { isExporting, exportFile } = useExport();
-
+  const isCompleted = props.tooltip?.toLowerCase() === "completed";
   return (
     <>
       <ButtonV2
@@ -130,7 +130,11 @@ export const ExportButton = ({
             exportFile(action, props.filenamePrefix, type, parse);
           }
         }}
-        className="tooltip mx-2 p-4 text-lg text-secondary-800 disabled:bg-transparent disabled:text-secondary-500"
+        className={`tooltip mx-2 p-4 text-lg ${
+          isCompleted
+            ? "text-white"
+            : "text-secondary-800 disabled:bg-transparent disabled:text-secondary-500"
+        }`}
         variant="secondary"
         ghost
         circle
diff --git a/src/components/Kanban/Board.tsx b/src/components/Kanban/Board.tsx
index 337f98f1caf..e8c65b1a37b 100644
--- a/src/components/Kanban/Board.tsx
+++ b/src/components/Kanban/Board.tsx
@@ -150,8 +150,20 @@ export function KanbanSection<T extends { id: string }>(
           }
         >
           <div className="sticky top-0 rounded-xl bg-secondary-200 pt-2">
-            <div className="mx-2 flex items-center justify-between rounded-lg border border-secondary-300 bg-white p-4">
-              <div>{section.title}</div>
+            <div
+              className={`mx-2 flex items-center justify-between rounded-lg border p-4 ${
+                section.id === "COMPLETED"
+                  ? "border-green-500 bg-green-500 "
+                  : "border-secondary-300 bg-white"
+              }`}
+            >
+              <div>
+                {section.id === "COMPLETED" ? (
+                  <span className="font-bold text-white">{section.title}</span>
+                ) : (
+                  section.title
+                )}
+              </div>
               <div>
                 <span className="ml-2 rounded-lg bg-secondary-300 px-2">
                   {typeof totalCount === "undefined" ? "..." : totalCount}
diff --git a/src/components/Resource/ResourceBoard.tsx b/src/components/Resource/ResourceBoard.tsx
index 39b6f5184e5..f15a6aa6d74 100644
--- a/src/components/Resource/ResourceBoard.tsx
+++ b/src/components/Resource/ResourceBoard.tsx
@@ -116,6 +116,7 @@ export default function BoardView() {
               <h3 className="flex h-8 items-center text-xs">
                 {board}{" "}
                 <ExportButton
+                  tooltip={`${board}`}
                   action={async () => {
                     const { data } = await request(
                       routes.downloadResourceRequests,
diff --git a/src/components/Shifting/ShiftingBoard.tsx b/src/components/Shifting/ShiftingBoard.tsx
index 068820d3311..c0fd4b116b1 100644
--- a/src/components/Shifting/ShiftingBoard.tsx
+++ b/src/components/Shifting/ShiftingBoard.tsx
@@ -147,6 +147,7 @@ export default function BoardView() {
               <h3 className="flex h-8 items-center text-xs">
                 {board.label || board.text}{" "}
                 <ExportButton
+                  tooltip={`${board.text}`}
                   action={async () => {
                     const { data } = await request(
                       routes.downloadShiftRequests,