From edf81097357dd3941e6da6be26af14e94680580c Mon Sep 17 00:00:00 2001
From: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
Date: Mon, 20 May 2024 11:38:28 +0530
Subject: [PATCH] [WEB-1249] chore: New Kanban column design changes (#4509)

* new Kanban column design changes

* fix minor build error
---
 .../tailwind-config-custom/tailwind.config.js |  3 +++
 .../issue-layouts/kanban/kanban-group.tsx     | 20 +++++++++++++------
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/tailwind-config-custom/tailwind.config.js b/packages/tailwind-config-custom/tailwind.config.js
index 0206c0e76..104c0b3b3 100644
--- a/packages/tailwind-config-custom/tailwind.config.js
+++ b/packages/tailwind-config-custom/tailwind.config.js
@@ -1,4 +1,6 @@
 const convertToRGB = (variableName) => `rgba(var(${variableName}))`;
+const convertToRGBA = (variableName, alpha) =>
+  `rgba(var(${variableName}), ${alpha})`;
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -87,6 +89,7 @@ module.exports = {
             800: convertToRGB("--color-background-800"),
             900: convertToRGB("--color-background-900"),
             1000: "rgb(0, 0, 0)",
+            overlay: convertToRGBA("--color-background-80", 0.95),
             primary: convertToRGB(" --color-background-primary"),
             error: convertToRGB(" --color-background-error"),
             DEFAULT: convertToRGB("--color-background-100"),
diff --git a/web/components/issues/issue-layouts/kanban/kanban-group.tsx b/web/components/issues/issue-layouts/kanban/kanban-group.tsx
index 07ea9fb58..e1845060e 100644
--- a/web/components/issues/issue-layouts/kanban/kanban-group.tsx
+++ b/web/components/issues/issue-layouts/kanban/kanban-group.tsx
@@ -2,6 +2,7 @@ import { MutableRefObject, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
+import { AlertCircle } from "lucide-react";
 //types
 import {
   TGroupedIssues,
@@ -192,7 +193,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
       <div
         //column overlay when issues are not sorted by manual
         className={cn(
-          "absolute top-0 left-0 h-full w-full items-center text-sm font-medium text-custom-text-300 rounded transparent",
+          "absolute top-0 left-0 h-full w-full items-center text-sm font-medium text-custom-text-300 rounded bg-custom-background-overlay",
           {
             "flex flex-col border-[1px] border-custom-border-300 z-[2]": shouldOverlay,
           },
@@ -202,20 +203,27 @@ export const KanbanGroup = (props: IKanbanGroup) => {
       >
         <div
           className={cn(
-            "p-3 mt-8 flex flex-col border-[1px] rounded items-center",
+            "p-3 mt-8 flex flex-col rounded items-center",
             {
-              "bg-custom-background-primary border-custom-border-primary text-custom-text-primary": shouldOverlay,
+              "text-custom-text-200": shouldOverlay,
             },
             {
-              "bg-custom-background-error border-custom-border-error text-custom-text-error": isDropDisabled,
+              "text-custom-text-error": isDropDisabled,
             }
           )}
         >
           {dropErrorMessage ? (
-            <span>{dropErrorMessage}</span>
+            <div className="flex items-center">
+              <AlertCircle width={13} height={13} /> &nbsp;
+              <span>{dropErrorMessage}</span>
+            </div>
           ) : (
             <>
-              {readableOrderBy && <span>The layout is ordered by {readableOrderBy}.</span>}
+              {readableOrderBy && (
+                <span>
+                  The layout is ordered by <span className="font-semibold">{readableOrderBy}</span>.
+                </span>
+              )}
               <span>Drop here to move the issue.</span>
             </>
           )}