style: added dragging state design

apps/app/components/core/board-view/all-boards.tsx

@@ -40,7 +40,7 @@ export const AllBoards: React.FC<Props> = ({
         <div className="h-[calc(100vh-157px)] lg:h-[calc(100vh-115px)] w-full">
           <div className="h-full w-full overflow-hidden">
             <div className="h-full w-full">
-              <div className="flex h-full gap-x-12 overflow-x-auto overflow-y-hidden">
+              <div className="flex h-full gap-x-9 overflow-x-auto overflow-y-hidden">
                 {Object.keys(groupedByIssues).map((singleGroup, index) => {
                   const currentState =
                     selectedGroup === "state_detail.name"

apps/app/components/core/board-view/board-header.tsx

@@ -50,7 +50,7 @@ export const BoardHeader: React.FC<Props> = ({
 
   return (
     <div
-      className={`flex justify-between p-3 pb-0 ${
+      className={`flex justify-between px-1 ${
         !isCollapsed ? "flex-col rounded-md border bg-gray-50" : ""
       }`}
     >
@@ -60,7 +60,7 @@ export const BoardHeader: React.FC<Props> = ({
             !isCollapsed ? "mb-2 flex-col gap-y-2 py-2" : ""
           }`}
         >
-          {currentState && getStateGroupIcon(currentState.group)}
+          {currentState && getStateGroupIcon(currentState.group, "20", "20", bgColor)}
           <h2
             className={`text-xl font-semibold capitalize`}
             style={{
@@ -82,7 +82,7 @@ export const BoardHeader: React.FC<Props> = ({
       <div className={`flex items-center ${!isCollapsed ? "flex-col pb-2" : ""}`}>
         <button
           type="button"
-          className="grid h-7 w-7 place-items-center rounded p-1 text-gray-700 outline-none duration-300 hover:bg-gray-200"
+          className="grid h-7 w-7 place-items-center rounded p-1 text-gray-700 outline-none duration-300 hover:bg-gray-100"
           onClick={() => {
             setIsCollapsed((prevData) => !prevData);
           }}
@@ -95,7 +95,7 @@ export const BoardHeader: React.FC<Props> = ({
         </button>
         <button
           type="button"
-          className="grid h-7 w-7 place-items-center rounded p-1 text-gray-700 outline-none duration-300 hover:bg-gray-200"
+          className="grid h-7 w-7 place-items-center rounded p-1 text-gray-700 outline-none duration-300 hover:bg-gray-100"
           onClick={addIssueToState}
         >
           <PlusIcon className="h-4 w-4" />

apps/app/components/core/board-view/single-board.tsx

@@ -13,6 +13,8 @@ import { BoardHeader, SingleBoardIssue } from "components/core";
 import { CustomMenu } from "components/ui";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
+// helpers
+import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 // types
 import { IIssue, IProjectMember, IState, NestedKeyOf, UserAuth } from "types";
 
@@ -89,7 +91,7 @@ export const SingleBoard: React.FC<Props> = ({
         <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
           {(provided, snapshot) => (
             <div
-              className={`relative mt-3 h-full px-3 pb-3 overflow-y-auto  ${
+              className={`relative h-full p-1 overflow-y-auto  ${
                 snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
               } ${!isCollapsed ? "hidden" : "block"}`}
               ref={provided.innerRef}
@@ -107,7 +109,7 @@ export const SingleBoard: React.FC<Props> = ({
                       snapshot.isDraggingOver ? "block" : "hidden"
                     } top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 text-xs whitespace-nowrap bg-white p-2 rounded pointer-events-none z-[99999999]`}
                   >
-                    This board is ordered by {orderBy}
+                    This board is ordered by {replaceUnderscoreIfSnakeCase(orderBy ?? "")}
                   </div>
                 </>
               )}
@@ -151,21 +153,23 @@ export const SingleBoard: React.FC<Props> = ({
               {type === "issue" ? (
                 <button
                   type="button"
-                  className="flex items-center rounded p-2 text-xs font-medium outline-none duration-300 hover:bg-gray-100"
+                  className="flex items-center gap-2 text-theme font-medium outline-none"
                   onClick={addIssueToState}
                 >
-                  <PlusIcon className="mr-1 h-3 w-3" />
-                  Create
+                  <PlusIcon className="h-4 w-4" />
+                  Add Issue
                 </button>
               ) : (
                 <CustomMenu
-                  label={
-                    <span className="flex items-center gap-1">
-                      <PlusIcon className="h-3 w-3" />
-                      Add issue
-                    </span>
+                  customButton={
+                    <button
+                      type="button"
+                      className="flex items-center gap-2 text-theme font-medium outline-none"
+                    >
+                      <PlusIcon className="h-4 w-4" />
+                      Add Issue
+                    </button>
                   }
-                  className="mt-1"
                   optionsPosition="left"
                   noBorder
                 >

apps/app/components/core/board-view/single-issue.tsx

@@ -185,7 +185,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
   return (
     <div
       className={`rounded bg-white shadow mb-3 ${
-        snapshot.isDragging ? "border-theme bg-indigo-50 shadow-lg" : ""
+        snapshot.isDragging ? "border-2 border-theme shadow-lg" : ""
       }`}
       ref={provided.innerRef}
       {...provided.draggableProps}