From 0cd3bb5956c4aaedd2b2e57e93bb2ee64212564b Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Tue, 28 Feb 2023 14:42:46 +0530
Subject: [PATCH 1/2] style: kanban board

---
 .../components/core/board-view/all-boards.tsx |  8 ++-
 .../core/board-view/board-header.tsx          | 31 +++++-------
 .../core/board-view/single-board.tsx          |  7 ++-
 .../core/board-view/single-issue.tsx          | 10 ++--
 .../components/icons/backlog-state-icon.tsx   | 21 ++++++++
 .../components/icons/completed-state-icon.tsx | 33 ++++++++++++
 apps/app/components/icons/index.ts            |  5 ++
 .../components/icons/started-state-icon.tsx   | 36 +++++++++++++
 .../app/components/icons/state-group-icon.tsx | 25 ++++++++++
 .../issues/view-select/priority.tsx           | 50 ++++++++++---------
 apps/app/components/ui/custom-select.tsx      | 42 +++++++++-------
 11 files changed, 200 insertions(+), 68 deletions(-)
 create mode 100644 apps/app/components/icons/backlog-state-icon.tsx
 create mode 100644 apps/app/components/icons/completed-state-icon.tsx
 create mode 100644 apps/app/components/icons/started-state-icon.tsx
 create mode 100644 apps/app/components/icons/state-group-icon.tsx

diff --git a/apps/app/components/core/board-view/all-boards.tsx b/apps/app/components/core/board-view/all-boards.tsx
index f5b03267ccf..8e63d04e2ad 100644
--- a/apps/app/components/core/board-view/all-boards.tsx
+++ b/apps/app/components/core/board-view/all-boards.tsx
@@ -40,8 +40,13 @@ 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-4 overflow-x-auto overflow-y-hidden">
+              <div className="flex h-full gap-x-12 overflow-x-auto overflow-y-hidden">
                 {Object.keys(groupedByIssues).map((singleGroup, index) => {
+                  const currentState =
+                    selectedGroup === "state_detail.name"
+                      ? states?.find((s) => s.name === singleGroup)
+                      : null;
+
                   const stateId =
                     selectedGroup === "state_detail.name"
                       ? states?.find((s) => s.name === singleGroup)?.id ?? null
@@ -56,6 +61,7 @@ export const AllBoards: React.FC<Props> = ({
                     <SingleBoard
                       key={index}
                       type={type}
+                      currentState={currentState}
                       bgColor={bgColor}
                       groupTitle={singleGroup}
                       groupedByIssues={groupedByIssues}
diff --git a/apps/app/components/core/board-view/board-header.tsx b/apps/app/components/core/board-view/board-header.tsx
index cf394ae5e8b..7240e8ad8e2 100644
--- a/apps/app/components/core/board-view/board-header.tsx
+++ b/apps/app/components/core/board-view/board-header.tsx
@@ -1,22 +1,17 @@
 import React from "react";
 
-// react-beautiful-dnd
-import { DraggableProvided } from "react-beautiful-dnd";
 // icons
-import {
-  ArrowsPointingInIcon,
-  ArrowsPointingOutIcon,
-  EllipsisHorizontalIcon,
-  PlusIcon,
-} from "@heroicons/react/24/outline";
+import { ArrowsPointingInIcon, ArrowsPointingOutIcon, PlusIcon } from "@heroicons/react/24/outline";
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
-import { IIssue, IProjectMember, NestedKeyOf } from "types";
+import { IIssue, IProjectMember, IState, NestedKeyOf } from "types";
+import { getStateGroupIcon } from "components/icons";
 type Props = {
   groupedByIssues: {
     [key: string]: IIssue[];
   };
+  currentState?: IState | null;
   selectedGroup: NestedKeyOf<IIssue> | null;
   groupTitle: string;
   bgColor?: string;
@@ -28,6 +23,7 @@ type Props = {
 
 export const BoardHeader: React.FC<Props> = ({
   groupedByIssues,
+  currentState,
   selectedGroup,
   groupTitle,
   bgColor,
@@ -60,16 +56,13 @@ export const BoardHeader: React.FC<Props> = ({
     >
       <div className={`flex items-center ${!isCollapsed ? "flex-col gap-2" : "gap-1"}`}>
         <div
-          className={`flex cursor-pointer items-center gap-x-1 rounded-md bg-slate-900 px-2 ${
+          className={`flex cursor-pointer items-center gap-x-3.5 ${
             !isCollapsed ? "mb-2 flex-col gap-y-2 py-2" : ""
           }`}
-          style={{
-            border: `2px solid ${bgColor}`,
-            backgroundColor: `${bgColor}20`,
-          }}
         >
+          {currentState && getStateGroupIcon(currentState.group)}
           <h2
-            className={`text-[0.9rem] font-medium capitalize`}
+            className={`text-xl font-semibold capitalize`}
             style={{
               writingMode: !isCollapsed ? "vertical-rl" : "horizontal-tb",
             }}
@@ -80,14 +73,16 @@ export const BoardHeader: React.FC<Props> = ({
               ? assignees
               : addSpaceIfCamelCase(groupTitle)}
           </h2>
-          <span className="ml-0.5 text-sm text-gray-500">{groupedByIssues[groupTitle].length}</span>
+          <span className="ml-0.5 text-sm bg-gray-100 py-1 px-3 rounded-full">
+            {groupedByIssues[groupTitle].length}
+          </span>
         </div>
       </div>
 
       <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 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-200"
           onClick={() => {
             setIsCollapsed((prevData) => !prevData);
           }}
@@ -100,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 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-200"
           onClick={addIssueToState}
         >
           <PlusIcon className="h-4 w-4" />
diff --git a/apps/app/components/core/board-view/single-board.tsx b/apps/app/components/core/board-view/single-board.tsx
index cc7e6d0846a..fd4fcd06310 100644
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/apps/app/components/core/board-view/single-board.tsx
@@ -14,10 +14,11 @@ import { CustomMenu } from "components/ui";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 // types
-import { IIssue, IProjectMember, NestedKeyOf, UserAuth } from "types";
+import { IIssue, IProjectMember, IState, NestedKeyOf, UserAuth } from "types";
 
 type Props = {
   type?: "issue" | "cycle" | "module";
+  currentState?: IState | null;
   bgColor?: string;
   groupTitle: string;
   groupedByIssues: {
@@ -37,6 +38,7 @@ type Props = {
 
 export const SingleBoard: React.FC<Props> = ({
   type,
+  currentState,
   bgColor,
   groupTitle,
   groupedByIssues,
@@ -71,10 +73,11 @@ export const SingleBoard: React.FC<Props> = ({
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   return (
-    <div className={`h-full flex-shrink-0 rounded ${!isCollapsed ? "" : "w-80 border bg-gray-50"}`}>
+    <div className={`h-full flex-shrink-0 rounded ${!isCollapsed ? "" : "w-96 bg-gray-50"}`}>
       <div className={`${!isCollapsed ? "" : "flex h-full flex-col space-y-3"}`}>
         <BoardHeader
           addIssueToState={addIssueToState}
+          currentState={currentState}
           bgColor={bgColor}
           selectedGroup={selectedGroup}
           groupTitle={groupTitle}
diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx
index d3c9be75f32..8e8637beacf 100644
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/apps/app/components/core/board-view/single-issue.tsx
@@ -184,7 +184,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
 
   return (
     <div
-      className={`rounded border bg-white shadow-sm mb-3 ${
+      className={`rounded bg-white shadow mb-3 ${
         snapshot.isDragging ? "border-theme bg-indigo-50 shadow-lg" : ""
       }`}
       ref={provided.innerRef}
@@ -192,7 +192,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
       {...provided.dragHandleProps}
       style={getStyle(provided.draggableProps.style, snapshot)}
     >
-      <div className="group/card relative select-none p-2">
+      <div className="group/card relative select-none p-4">
         {!isNotAllowed && (
           <div className="absolute top-1.5 right-1.5 z-10 opacity-0 group-hover/card:opacity-100">
             {type && !isNotAllowed && (
@@ -214,19 +214,19 @@ export const SingleBoardIssue: React.FC<Props> = ({
         <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
           <a>
             {properties.key && (
-              <div className="mb-2 text-xs font-medium text-gray-500">
+              <div className="mb-2.5 text-xs font-medium text-gray-700">
                 {issue.project_detail.identifier}-{issue.sequence_id}
               </div>
             )}
             <h5
-              className="mb-3 text-sm group-hover:text-theme"
+              className="text-sm group-hover:text-theme"
               style={{ lineClamp: 3, WebkitLineClamp: 3 }}
             >
               {issue.name}
             </h5>
           </a>
         </Link>
-        <div className="relative flex flex-wrap items-center gap-x-1 gap-y-2 text-xs">
+        <div className="relative flex flex-wrap items-center gap-2 mt-2.5 text-xs">
           {properties.priority && selectedGroup !== "priority" && (
             <ViewPrioritySelect
               issue={issue}
diff --git a/apps/app/components/icons/backlog-state-icon.tsx b/apps/app/components/icons/backlog-state-icon.tsx
new file mode 100644
index 00000000000..42a33900212
--- /dev/null
+++ b/apps/app/components/icons/backlog-state-icon.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const BacklogStateIcon: React.FC<Props> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "black",
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="10" cy="10" r="9" stroke={color} strokeLinecap="round" strokeDasharray="4 4" />
+  </svg>
+);
diff --git a/apps/app/components/icons/completed-state-icon.tsx b/apps/app/components/icons/completed-state-icon.tsx
new file mode 100644
index 00000000000..7e38feef406
--- /dev/null
+++ b/apps/app/components/icons/completed-state-icon.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const CompletedStateIcon: React.FC<Props> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#438af3",
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="10"
+      cy="10"
+      r="9"
+      stroke={color}
+      strokeLinecap="round"
+      strokeDasharray="0 20 0 10"
+    />
+    <circle cx="10" cy="10" r="7" fill={color} />
+    <path
+      d="M13 8.33328L9 12.3333L7.16666 10.4999L7.63666 10.0299L9 11.3899L12.53 7.86328L13 8.33328Z"
+      fill="white"
+    />
+  </svg>
+);
diff --git a/apps/app/components/icons/index.ts b/apps/app/components/icons/index.ts
index dfcb2c5dcc8..2e8474a48f5 100644
--- a/apps/app/components/icons/index.ts
+++ b/apps/app/components/icons/index.ts
@@ -1,4 +1,5 @@
 export * from "./attachment-icon";
+export * from "./backlog-state-icon";
 export * from "./blocked-icon";
 export * from "./blocker-icon";
 export * from "./bolt-icon";
@@ -7,6 +8,7 @@ export * from "./cancel-icon";
 export * from "./clipboard-icon";
 export * from "./comment-icon";
 export * from "./completed-cycle-icon";
+export * from "./completed-state-icon";
 export * from "./current-cycle-icon";
 export * from "./cycle-icon";
 export * from "./discord-icon";
@@ -16,6 +18,7 @@ export * from "./ellipsis-horizontal-icon";
 export * from "./external-link-icon";
 export * from "./github-icon";
 export * from "./heartbeat-icon";
+export * from "./started-state-icon";
 export * from "./layer-diagonal-icon";
 export * from "./lock-icon";
 export * from "./menu-icon";
@@ -23,6 +26,8 @@ export * from "./plus-icon";
 export * from "./question-mark-circle-icon";
 export * from "./setting-icon";
 export * from "./signal-cellular-icon";
+export * from "./started-state-icon";
+export * from "./state-group-icon";
 export * from "./tag-icon";
 export * from "./tune-icon";
 export * from "./upcoming-cycle-icon";
diff --git a/apps/app/components/icons/started-state-icon.tsx b/apps/app/components/icons/started-state-icon.tsx
new file mode 100644
index 00000000000..fdca331863f
--- /dev/null
+++ b/apps/app/components/icons/started-state-icon.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const StartedStateIcon: React.FC<Props> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#fcbe1d",
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="10"
+      cy="10"
+      r="9"
+      stroke={color}
+      strokeLinecap="round"
+      strokeDasharray="0 20 0 10"
+    />
+    <path
+      d="M14.2878 4.46695C13.0513 3.5087 11.5294 2.99227 9.96503 3.00009C8.40068 3.0079 6.88403 3.53951 5.65713 4.51006L10 10L14.2878 4.46695Z"
+      fill={color}
+    />
+    <path
+      d="M5.70047 15.5331C6.93701 16.4913 8.45889 17.0077 10.0232 16.9999C11.5876 16.9921 13.1043 16.4605 14.3312 15.4899L9.98828 10L5.70047 15.5331Z"
+      fill={color}
+    />
+  </svg>
+);
diff --git a/apps/app/components/icons/state-group-icon.tsx b/apps/app/components/icons/state-group-icon.tsx
new file mode 100644
index 00000000000..b899a026b05
--- /dev/null
+++ b/apps/app/components/icons/state-group-icon.tsx
@@ -0,0 +1,25 @@
+import { BacklogStateIcon } from "./backlog-state-icon";
+import { CompletedStateIcon } from "./completed-state-icon";
+import { StartedStateIcon } from "./started-state-icon";
+
+export const getStateGroupIcon = (
+  stateGroup: "backlog" | "unstarted" | "started" | "completed" | "cancelled",
+  width = "20",
+  height = "20",
+  color?: string
+) => {
+  switch (stateGroup) {
+    case "backlog":
+      return <BacklogStateIcon width={width} height={height} color={color} />;
+    case "unstarted":
+      return <StartedStateIcon width={width} height={height} color={color} />;
+    case "started":
+      return <StartedStateIcon width={width} height={height} color={color} />;
+    case "completed":
+      return <CompletedStateIcon width={width} height={height} color={color} />;
+    case "cancelled":
+      return <StartedStateIcon width={width} height={height} color={color} />;
+    default:
+      return <></>;
+  }
+};
diff --git a/apps/app/components/issues/view-select/priority.tsx b/apps/app/components/issues/view-select/priority.tsx
index 52a911f5e3e..f47ea934d5e 100644
--- a/apps/app/components/issues/view-select/priority.tsx
+++ b/apps/app/components/issues/view-select/priority.tsx
@@ -23,34 +23,38 @@ export const ViewPrioritySelect: React.FC<Props> = ({
   isNotAllowed,
 }) => (
   <CustomSelect
-    label={
-      <Tooltip tooltipHeading="Priority" tooltipContent={issue.priority ?? "None"}>
-        <span>
-          {getPriorityIcon(
-            issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
-            "text-sm"
-          )}
-        </span>
-      </Tooltip>
-    }
     value={issue.state}
     onChange={(data: string) => {
       partialUpdateIssue({ priority: data });
     }}
     maxHeight="md"
-    buttonClassName={`flex ${
-      isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
-    } items-center gap-x-2 rounded px-2 py-0.5 capitalize shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
-      issue.priority === "urgent"
-        ? "bg-red-100 text-red-600 hover:bg-red-100"
-        : issue.priority === "high"
-        ? "bg-orange-100 text-orange-500 hover:bg-orange-100"
-        : issue.priority === "medium"
-        ? "bg-yellow-100 text-yellow-500 hover:bg-yellow-100"
-        : issue.priority === "low"
-        ? "bg-green-100 text-green-500 hover:bg-green-100"
-        : "bg-gray-100"
-    } border-none`}
+    customButton={
+      <button
+        type="button"
+        className={`grid place-items-center rounded w-6 h-6 ${
+          isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
+        } items-center shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
+          issue.priority === "urgent"
+            ? "bg-red-100 text-red-600 hover:bg-red-100"
+            : issue.priority === "high"
+            ? "bg-orange-100 text-orange-500 hover:bg-orange-100"
+            : issue.priority === "medium"
+            ? "bg-yellow-100 text-yellow-500 hover:bg-yellow-100"
+            : issue.priority === "low"
+            ? "bg-green-100 text-green-500 hover:bg-green-100"
+            : "bg-gray-100"
+        } border-none`}
+      >
+        <Tooltip tooltipHeading="Priority" tooltipContent={issue.priority ?? "None"}>
+          <span>
+            {getPriorityIcon(
+              issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
+              "text-sm"
+            )}
+          </span>
+        </Tooltip>
+      </button>
+    }
     noChevron
     disabled={isNotAllowed}
     selfPositioned={selfPositioned}
diff --git a/apps/app/components/ui/custom-select.tsx b/apps/app/components/ui/custom-select.tsx
index 677d7dab58a..5890261a4a4 100644
--- a/apps/app/components/ui/custom-select.tsx
+++ b/apps/app/components/ui/custom-select.tsx
@@ -8,13 +8,13 @@ type CustomSelectProps = {
   value: any;
   onChange: any;
   children: React.ReactNode;
-  label: string | JSX.Element;
+  label?: string | JSX.Element;
   textAlignment?: "left" | "center" | "right";
   maxHeight?: "sm" | "rg" | "md" | "lg" | "none";
   width?: "auto" | string;
   input?: boolean;
   noChevron?: boolean;
-  buttonClassName?: string;
+  customButton?: JSX.Element;
   optionsClassName?: string;
   disabled?: boolean;
   selfPositioned?: boolean;
@@ -30,7 +30,7 @@ const CustomSelect = ({
   width = "auto",
   input = false,
   noChevron = false,
-  buttonClassName = "",
+  customButton,
   optionsClassName = "",
   disabled = false,
   selfPositioned = false,
@@ -43,22 +43,26 @@ const CustomSelect = ({
     disabled={disabled}
   >
     <div>
-      <Listbox.Button
-        className={`${buttonClassName} flex w-full ${
-          disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
-        } items-center justify-between gap-1 rounded-md border shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
-          input ? "border-gray-300 px-3 py-2 text-sm" : "px-2 py-1 text-xs"
-        } ${
-          textAlignment === "right"
-            ? "text-right"
-            : textAlignment === "center"
-            ? "text-center"
-            : "text-left"
-        }`}
-      >
-        {label}
-        {!noChevron && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
-      </Listbox.Button>
+      {customButton ? (
+        customButton
+      ) : (
+        <Listbox.Button
+          className={`flex w-full ${
+            disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
+          } items-center justify-between gap-1 rounded-md border shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
+            input ? "border-gray-300 px-3 py-2 text-sm" : "px-2 py-1 text-xs"
+          } ${
+            textAlignment === "right"
+              ? "text-right"
+              : textAlignment === "center"
+              ? "text-center"
+              : "text-left"
+          }`}
+        >
+          {label}
+          {!noChevron && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
+        </Listbox.Button>
+      )}
     </div>
 
     <Transition

From 8589ce777f0dedee1c5e08b19b341dd7ee4fedb9 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Wed, 1 Mar 2023 11:30:49 +0530
Subject: [PATCH 2/2] style: added dragging state design

---
 .../components/core/board-view/all-boards.tsx |  2 +-
 .../core/board-view/board-header.tsx          |  8 +-
 .../core/board-view/single-board.tsx          | 26 +++---
 .../core/board-view/single-issue.tsx          |  2 +-
 apps/app/components/core/issues-view.tsx      |  4 +-
 .../components/icons/backlog-state-icon.tsx   |  2 +-
 .../components/icons/cancelled-state-icon.tsx | 78 ++++++++++++++++++
 .../components/icons/completed-state-icon.tsx | 66 ++++++++++++----
 apps/app/components/icons/index.ts            |  2 +
 .../components/icons/started-state-icon.tsx   | 79 ++++++++++++++-----
 .../app/components/icons/state-group-icon.tsx | 14 ++--
 .../components/icons/unstarted-state-icon.tsx | 59 ++++++++++++++
 apps/app/components/ui/custom-menu.tsx        | 74 +++++++++--------
 apps/app/components/ui/custom-select.tsx      |  2 +-
 14 files changed, 324 insertions(+), 94 deletions(-)
 create mode 100644 apps/app/components/icons/cancelled-state-icon.tsx
 create mode 100644 apps/app/components/icons/unstarted-state-icon.tsx

diff --git a/apps/app/components/core/board-view/all-boards.tsx b/apps/app/components/core/board-view/all-boards.tsx
index 8e63d04e2ad..9a1b96b2a4f 100644
--- a/apps/app/components/core/board-view/all-boards.tsx
+++ b/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"
diff --git a/apps/app/components/core/board-view/board-header.tsx b/apps/app/components/core/board-view/board-header.tsx
index 7240e8ad8e2..84d4211906c 100644
--- a/apps/app/components/core/board-view/board-header.tsx
+++ b/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" />
diff --git a/apps/app/components/core/board-view/single-board.tsx b/apps/app/components/core/board-view/single-board.tsx
index fd4fcd06310..4aafda62abf 100644
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/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
                 >
diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx
index 8e8637beacf..b425a97e9e1 100644
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/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}
diff --git a/apps/app/components/core/issues-view.tsx b/apps/app/components/core/issues-view.tsx
index 98526a2b0ef..2cefcfcf569 100644
--- a/apps/app/components/core/issues-view.tsx
+++ b/apps/app/components/core/issues-view.tsx
@@ -371,13 +371,13 @@ export const IssuesView: React.FC<Props> = ({
               <div
                 className={`${
                   trashBox ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
-                } fixed z-20 top-12 left-1/2 -translate-x-1/2 flex items-center gap-2 bg-red-100 border-2 border-red-500 p-3 text-xs rounded ${
+                } fixed z-20 top-9 right-9 flex justify-center items-center gap-2 bg-red-100 border-2 border-red-500 p-3 w-96 h-28 text-xs italic text-red-500 font-medium rounded ${
                   snapshot.isDraggingOver ? "bg-red-500 text-white" : ""
                 } duration-200`}
                 ref={provided.innerRef}
                 {...provided.droppableProps}
               >
-                <TrashIcon className="h-3 w-3" />
+                <TrashIcon className="h-4 w-4" />
                 Drop issue here to delete
               </div>
             )}
diff --git a/apps/app/components/icons/backlog-state-icon.tsx b/apps/app/components/icons/backlog-state-icon.tsx
index 42a33900212..48ae09524a9 100644
--- a/apps/app/components/icons/backlog-state-icon.tsx
+++ b/apps/app/components/icons/backlog-state-icon.tsx
@@ -6,7 +6,7 @@ export const BacklogStateIcon: React.FC<Props> = ({
   width = "20",
   height = "20",
   className,
-  color = "black",
+  color = "#858e96",
 }) => (
   <svg
     width={width}
diff --git a/apps/app/components/icons/cancelled-state-icon.tsx b/apps/app/components/icons/cancelled-state-icon.tsx
new file mode 100644
index 00000000000..5829146ff8d
--- /dev/null
+++ b/apps/app/components/icons/cancelled-state-icon.tsx
@@ -0,0 +1,78 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const CancelledStateIcon: React.FC<Props> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#f2655a",
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 84.36 84.36"
+  >
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <path
+          className="cls-1"
+          fill="none"
+          strokeWidth={3}
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M20.45,7.69a39.74,39.74,0,0,1,43.43.54"
+        />
+        <path
+          className="cls-1"
+          fill="none"
+          strokeWidth={3}
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M76.67,20.45a39.76,39.76,0,0,1-.53,43.43"
+        />
+        <path
+          className="cls-1"
+          fill="none"
+          strokeWidth={3}
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M63.92,76.67a39.78,39.78,0,0,1-43.44-.53"
+        />
+        <path
+          className="cls-1"
+          fill="none"
+          strokeWidth={3}
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M7.69,63.92a39.75,39.75,0,0,1,.54-43.44"
+        />
+        <circle className="cls-2" fill={color} cx="42.18" cy="42.18" r="31.04" />
+        <path
+          className="cls-3"
+          fill="none"
+          strokeWidth={3}
+          stroke="#ffffff"
+          strokeLinecap="square"
+          strokeMiterlimit={10}
+          d="M32.64,32.44q9.54,9.75,19.09,19.48"
+        />
+        <path
+          className="cls-3"
+          fill="none"
+          strokeWidth={3}
+          stroke="#ffffff"
+          strokeLinecap="square"
+          strokeMiterlimit={10}
+          d="M32.64,51.92,51.73,32.44"
+        />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/apps/app/components/icons/completed-state-icon.tsx b/apps/app/components/icons/completed-state-icon.tsx
index 7e38feef406..584245d58a2 100644
--- a/apps/app/components/icons/completed-state-icon.tsx
+++ b/apps/app/components/icons/completed-state-icon.tsx
@@ -12,22 +12,58 @@ export const CompletedStateIcon: React.FC<Props> = ({
     width={width}
     height={height}
     className={className}
-    viewBox="0 0 20 20"
-    fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 84.36 84.36"
   >
-    <circle
-      cx="10"
-      cy="10"
-      r="9"
-      stroke={color}
-      strokeLinecap="round"
-      strokeDasharray="0 20 0 10"
-    />
-    <circle cx="10" cy="10" r="7" fill={color} />
-    <path
-      d="M13 8.33328L9 12.3333L7.16666 10.4999L7.63666 10.0299L9 11.3899L12.53 7.86328L13 8.33328Z"
-      fill="white"
-    />
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <path
+          className="cls-1"
+          fill="none"
+          strokeWidth={3}
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M20.45,7.69a39.74,39.74,0,0,1,43.43.54"
+        />
+        <path
+          className="cls-1"
+          fill="none"
+          strokeWidth={3}
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M76.67,20.45a39.76,39.76,0,0,1-.53,43.43"
+        />
+        <path
+          className="cls-1"
+          fill="none"
+          strokeWidth={3}
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M63.92,76.67a39.78,39.78,0,0,1-43.44-.53"
+        />
+        <path
+          className="cls-1"
+          fill="none"
+          strokeWidth={3}
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M7.69,63.92a39.75,39.75,0,0,1,.54-43.44"
+        />
+        <circle className="cls-2" fill={color} cx="42.18" cy="42.18" r="31.04" />
+        <path
+          className="cls-3"
+          fill="none"
+          strokeWidth={3}
+          stroke="#ffffff"
+          strokeLinecap="square"
+          strokeMiterlimit={10}
+          d="M30.45,43.75l6.61,6.61L53.92,34"
+        />
+      </g>
+    </g>
   </svg>
 );
diff --git a/apps/app/components/icons/index.ts b/apps/app/components/icons/index.ts
index 2e8474a48f5..e07e22c299b 100644
--- a/apps/app/components/icons/index.ts
+++ b/apps/app/components/icons/index.ts
@@ -5,6 +5,7 @@ export * from "./blocker-icon";
 export * from "./bolt-icon";
 export * from "./calendar-month-icon";
 export * from "./cancel-icon";
+export * from "./cancelled-state-icon";
 export * from "./clipboard-icon";
 export * from "./comment-icon";
 export * from "./completed-cycle-icon";
@@ -30,6 +31,7 @@ export * from "./started-state-icon";
 export * from "./state-group-icon";
 export * from "./tag-icon";
 export * from "./tune-icon";
+export * from "./unstarted-state-icon";
 export * from "./upcoming-cycle-icon";
 export * from "./user-group-icon";
 export * from "./user-icon-circle";
diff --git a/apps/app/components/icons/started-state-icon.tsx b/apps/app/components/icons/started-state-icon.tsx
index fdca331863f..20de015379d 100644
--- a/apps/app/components/icons/started-state-icon.tsx
+++ b/apps/app/components/icons/started-state-icon.tsx
@@ -6,31 +6,72 @@ export const StartedStateIcon: React.FC<Props> = ({
   width = "20",
   height = "20",
   className,
-  color = "#fcbe1d",
+  color = "#fbb040",
 }) => (
   <svg
     width={width}
     height={height}
     className={className}
-    viewBox="0 0 20 20"
-    fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 83.36 83.36"
   >
-    <circle
-      cx="10"
-      cy="10"
-      r="9"
-      stroke={color}
-      strokeLinecap="round"
-      strokeDasharray="0 20 0 10"
-    />
-    <path
-      d="M14.2878 4.46695C13.0513 3.5087 11.5294 2.99227 9.96503 3.00009C8.40068 3.0079 6.88403 3.53951 5.65713 4.51006L10 10L14.2878 4.46695Z"
-      fill={color}
-    />
-    <path
-      d="M5.70047 15.5331C6.93701 16.4913 8.45889 17.0077 10.0232 16.9999C11.5876 16.9921 13.1043 16.4605 14.3312 15.4899L9.98828 10L5.70047 15.5331Z"
-      fill={color}
-    />
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <path
+          className="cls-1"
+          fill="none"
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={3}
+          d="M20,7.19a39.74,39.74,0,0,1,43.43.54"
+        />
+        <path
+          className="cls-1"
+          fill="none"
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={3}
+          d="M76.17,20a39.76,39.76,0,0,1-.53,43.43"
+        />
+        <path
+          className="cls-1"
+          fill="none"
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={3}
+          d="M63.42,76.17A39.78,39.78,0,0,1,20,75.64"
+        />
+        <path
+          className="cls-1"
+          fill="none"
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={3}
+          d="M7.19,63.42A39.75,39.75,0,0,1,7.73,20"
+        />
+        <path
+          className="cls-2"
+          fill={color}
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={3}
+          d="M42.32,41.21q9.57-14.45,19.13-28.9a35.8,35.8,0,0,0-39.09,0Z"
+        />
+        <path
+          className="cls-2"
+          fill={color}
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={3}
+          d="M42.32,41.7,61.45,70.6a35.75,35.75,0,0,1-39.09,0Z"
+        />
+      </g>
+    </g>
   </svg>
 );
diff --git a/apps/app/components/icons/state-group-icon.tsx b/apps/app/components/icons/state-group-icon.tsx
index b899a026b05..17b13f0b2df 100644
--- a/apps/app/components/icons/state-group-icon.tsx
+++ b/apps/app/components/icons/state-group-icon.tsx
@@ -1,6 +1,10 @@
-import { BacklogStateIcon } from "./backlog-state-icon";
-import { CompletedStateIcon } from "./completed-state-icon";
-import { StartedStateIcon } from "./started-state-icon";
+import {
+  BacklogStateIcon,
+  CancelledStateIcon,
+  CompletedStateIcon,
+  StartedStateIcon,
+  UnstartedStateIcon,
+} from "components/icons";
 
 export const getStateGroupIcon = (
   stateGroup: "backlog" | "unstarted" | "started" | "completed" | "cancelled",
@@ -12,13 +16,13 @@ export const getStateGroupIcon = (
     case "backlog":
       return <BacklogStateIcon width={width} height={height} color={color} />;
     case "unstarted":
-      return <StartedStateIcon width={width} height={height} color={color} />;
+      return <UnstartedStateIcon width={width} height={height} color={color} />;
     case "started":
       return <StartedStateIcon width={width} height={height} color={color} />;
     case "completed":
       return <CompletedStateIcon width={width} height={height} color={color} />;
     case "cancelled":
-      return <StartedStateIcon width={width} height={height} color={color} />;
+      return <CancelledStateIcon width={width} height={height} color={color} />;
     default:
       return <></>;
   }
diff --git a/apps/app/components/icons/unstarted-state-icon.tsx b/apps/app/components/icons/unstarted-state-icon.tsx
new file mode 100644
index 00000000000..0fcad39ea5a
--- /dev/null
+++ b/apps/app/components/icons/unstarted-state-icon.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const UnstartedStateIcon: React.FC<Props> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#858e96",
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 84.36 84.36"
+  >
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <path
+          className="cls-1"
+          fill="none"
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={3}
+          d="M20.45,7.69a39.74,39.74,0,0,1,43.43.54"
+        />
+        <path
+          className="cls-1"
+          fill="none"
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={3}
+          d="M76.67,20.45a39.76,39.76,0,0,1-.53,43.43"
+        />
+        <path
+          className="cls-1"
+          fill="none"
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={3}
+          d="M63.92,76.67a39.78,39.78,0,0,1-43.44-.53"
+        />
+        <path
+          className="cls-1"
+          fill="none"
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={3}
+          d="M7.69,63.92a39.75,39.75,0,0,1,.54-43.44"
+        />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/apps/app/components/ui/custom-menu.tsx b/apps/app/components/ui/custom-menu.tsx
index e34390eff1b..d82a1a3472e 100644
--- a/apps/app/components/ui/custom-menu.tsx
+++ b/apps/app/components/ui/custom-menu.tsx
@@ -15,6 +15,7 @@ type Props = {
   textAlignment?: "left" | "center" | "right";
   noBorder?: boolean;
   optionsPosition?: "left" | "right";
+  customButton?: JSX.Element;
 };
 
 type MenuItemProps = {
@@ -34,42 +35,47 @@ const CustomMenu = ({
   textAlignment,
   noBorder = false,
   optionsPosition = "right",
+  customButton,
 }: Props) => (
   <Menu as="div" className={`relative w-min whitespace-nowrap text-left ${className}`}>
-    <div>
-      {ellipsis ? (
-        <Menu.Button className="relative grid place-items-center rounded p-1 hover:bg-gray-100 focus:outline-none">
-          <EllipsisHorizontalIcon className="h-4 w-4" />
-        </Menu.Button>
-      ) : (
-        <Menu.Button
-          className={`flex cursor-pointer items-center justify-between gap-1 px-2 py-1 text-xs duration-300 hover:bg-gray-100 ${
-            textAlignment === "right"
-              ? "text-right"
-              : textAlignment === "center"
-              ? "text-center"
-              : "text-left"
-          } ${
-            noBorder
-              ? "rounded"
-              : "rounded-md border shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
-          } ${
-            width === "sm"
-              ? "w-10"
-              : width === "md"
-              ? "w-20"
-              : width === "lg"
-              ? "w-32"
-              : width === "xl"
-              ? "w-48"
-              : "w-full"
-          }`}
-        >
-          {label}
-          {!noBorder && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
-        </Menu.Button>
-      )}
-    </div>
+    {customButton ? (
+      <Menu.Button as="div">{customButton}</Menu.Button>
+    ) : (
+      <div>
+        {ellipsis ? (
+          <Menu.Button className="relative grid place-items-center rounded p-1 hover:bg-gray-100 focus:outline-none">
+            <EllipsisHorizontalIcon className="h-4 w-4" />
+          </Menu.Button>
+        ) : (
+          <Menu.Button
+            className={`flex cursor-pointer items-center justify-between gap-1 px-2 py-1 text-xs duration-300 hover:bg-gray-100 ${
+              textAlignment === "right"
+                ? "text-right"
+                : textAlignment === "center"
+                ? "text-center"
+                : "text-left"
+            } ${
+              noBorder
+                ? "rounded"
+                : "rounded-md border shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+            } ${
+              width === "sm"
+                ? "w-10"
+                : width === "md"
+                ? "w-20"
+                : width === "lg"
+                ? "w-32"
+                : width === "xl"
+                ? "w-48"
+                : "w-full"
+            }`}
+          >
+            {label}
+            {!noBorder && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
+          </Menu.Button>
+        )}
+      </div>
+    )}
 
     <Transition
       as={React.Fragment}
diff --git a/apps/app/components/ui/custom-select.tsx b/apps/app/components/ui/custom-select.tsx
index 5890261a4a4..843eb0f029a 100644
--- a/apps/app/components/ui/custom-select.tsx
+++ b/apps/app/components/ui/custom-select.tsx
@@ -44,7 +44,7 @@ const CustomSelect = ({
   >
     <div>
       {customButton ? (
-        customButton
+        <Listbox.Button as="div">{customButton}</Listbox.Button>
       ) : (
         <Listbox.Button
           className={`flex w-full ${