From c1f8766571294eef77085f9b57be380c4bacc263 Mon Sep 17 00:00:00 2001
From: gurusainath <gurusainath007@gmail.com>
Date: Sat, 20 May 2023 23:10:04 +0530
Subject: [PATCH] styles: UI changes in the gantt blocks

---
 .../components/cycles/cycles-list-gantt-chart.tsx    |  6 +++---
 apps/app/components/cycles/gantt-chart.tsx           |  6 +++---
 apps/app/components/gantt-chart/blocks/index.tsx     | 12 +++++-------
 apps/app/components/gantt-chart/chart/index.tsx      |  2 +-
 apps/app/components/gantt-chart/views/month-view.ts  |  2 +-
 apps/app/components/issues/gantt-chart.tsx           |  6 +++---
 apps/app/components/modules/gantt-chart.tsx          |  6 +++---
 .../components/modules/modules-list-gantt-chart.tsx  |  6 +++---
 apps/app/components/views/gantt-chart.tsx            |  6 +++---
 9 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/apps/app/components/cycles/cycles-list-gantt-chart.tsx b/apps/app/components/cycles/cycles-list-gantt-chart.tsx
index 2b783f4e2..ad298e79d 100644
--- a/apps/app/components/cycles/cycles-list-gantt-chart.tsx
+++ b/apps/app/components/cycles/cycles-list-gantt-chart.tsx
@@ -23,9 +23,9 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles }) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: { data: ICycle }) => (
-    <div className="relative flex w-full h-full overflow-hidden">
-      <div className="flex-shrink-0 w-[4px] h-auto" style={{ backgroundColor: "#858e96" }} />
-      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+      <div className="flex-shrink-0 w-[4px] h-full" style={{ backgroundColor: "#858e96" }} />
+      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
         {data?.name}
       </div>
     </div>
diff --git a/apps/app/components/cycles/gantt-chart.tsx b/apps/app/components/cycles/gantt-chart.tsx
index d38ad727b..04de7afb7 100644
--- a/apps/app/components/cycles/gantt-chart.tsx
+++ b/apps/app/components/cycles/gantt-chart.tsx
@@ -32,12 +32,12 @@ export const CycleIssuesGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex w-full h-full overflow-hidden">
+    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
       <div
-        className="flex-shrink-0 w-[4px] h-auto"
+        className="flex-shrink-0 w-[4px] h-full"
         style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
       />
-      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
         {data?.name}
       </div>
     </div>
diff --git a/apps/app/components/gantt-chart/blocks/index.tsx b/apps/app/components/gantt-chart/blocks/index.tsx
index 24ee4d39e..113ca8964 100644
--- a/apps/app/components/gantt-chart/blocks/index.tsx
+++ b/apps/app/components/gantt-chart/blocks/index.tsx
@@ -21,14 +21,14 @@ export const GanttChartBlocks: FC<{
       className="relative z-10 mt-[58px] h-full w-[4000px] divide-x divide-gray-300 overflow-hidden overflow-y-auto bg-[#999] bg-opacity-5"
       style={{ width: `${itemsContainerWidth}px` }}
     >
-      <div className="w-full divide-y divide-brand-base">
+      <div className="w-full">
         {blocks &&
           blocks.length > 0 &&
           blocks.map((block: any, _idx: number) => (
             <>
               {block.start_date && block.target_date && (
                 <ChartDraggable
-                  className="relative flex h-[36.5px] items-center"
+                  className="relative flex h-[40px] items-center"
                   key={`blocks-${_idx}`}
                   block={block}
                   handleBlock={handleChartBlockPosition}
@@ -44,14 +44,12 @@ export const GanttChartBlocks: FC<{
                     </div>
 
                     <div
-                      className="rounded-sm shadow-sm bg-brand-base overflow-hidden relative flex items-center"
+                      className="rounded-sm shadow-sm bg-brand-base overflow-hidden relative flex items-center h-[34px] border border-brand-base"
                       style={{
                         width: `${block?.position?.width}px`,
                       }}
                     >
-                      <div className="w-full h-full relative overflow-hidden">
-                        {blockRender({ ...block?.data })}
-                      </div>
+                      {blockRender({ ...block?.data })}
                     </div>
 
                     <div className="flex-shrink-0 relative w-0 h-0 flex items-center invisible group-hover:visible whitespace-nowrap">
@@ -71,7 +69,7 @@ export const GanttChartBlocks: FC<{
         {blocks &&
           blocks.length > 0 &&
           blocks.map((block: any, _idx: number) => (
-            <div className="relative h-[36.5px] bg-brand-base" key={`sidebar-blocks-${_idx}`}>
+            <div className="relative h-[40px] bg-brand-base" key={`sidebar-blocks-${_idx}`}>
               {sidebarBlockRender(block?.data)}
             </div>
           ))}
diff --git a/apps/app/components/gantt-chart/chart/index.tsx b/apps/app/components/gantt-chart/chart/index.tsx
index a1b80ef84..6724c3552 100644
--- a/apps/app/components/gantt-chart/chart/index.tsx
+++ b/apps/app/components/gantt-chart/chart/index.tsx
@@ -214,7 +214,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
     <div
       className={`${
         fullScreenMode ? `fixed top-0 bottom-0 left-0 right-0 z-[999999] bg-brand-base` : `relative`
-      } flex h-full flex-col rounded-sm border border-brand-base select-none`}
+      } flex h-full flex-col rounded-sm border border-brand-base select-none bg-brand-base shadow`}
     >
       {/* chart title */}
       <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2 border-b border-brand-base">
diff --git a/apps/app/components/gantt-chart/views/month-view.ts b/apps/app/components/gantt-chart/views/month-view.ts
index df537ba5e..7211a45eb 100644
--- a/apps/app/components/gantt-chart/views/month-view.ts
+++ b/apps/app/components/gantt-chart/views/month-view.ts
@@ -184,7 +184,7 @@ export const getMonthChartItemPositionWidthInMonth = (chartData: ChartDataType,
   diffMonths -= startDate.getMonth();
   diffMonths += itemStartDate.getMonth();
 
-  scrollPosition = scrollPosition + diffMonths - 1;
+  scrollPosition = scrollPosition + diffMonths;
   // position code ends
 
   // width code starts
diff --git a/apps/app/components/issues/gantt-chart.tsx b/apps/app/components/issues/gantt-chart.tsx
index 5e79822c5..b35d4a749 100644
--- a/apps/app/components/issues/gantt-chart.tsx
+++ b/apps/app/components/issues/gantt-chart.tsx
@@ -32,12 +32,12 @@ export const IssueGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex w-full h-full overflow-hidden">
+    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
       <div
-        className="flex-shrink-0 w-[4px] h-auto"
+        className="flex-shrink-0 w-[4px] h-full"
         style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
       />
-      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
         {data?.name}
       </div>
     </div>
diff --git a/apps/app/components/modules/gantt-chart.tsx b/apps/app/components/modules/gantt-chart.tsx
index edc24cfc9..0d11da2c0 100644
--- a/apps/app/components/modules/gantt-chart.tsx
+++ b/apps/app/components/modules/gantt-chart.tsx
@@ -32,12 +32,12 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex w-full h-full overflow-hidden">
+    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
       <div
-        className="flex-shrink-0 w-[4px] h-auto"
+        className="flex-shrink-0 w-[4px] h-full"
         style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
       />
-      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
         {data?.name}
       </div>
     </div>
diff --git a/apps/app/components/modules/modules-list-gantt-chart.tsx b/apps/app/components/modules/modules-list-gantt-chart.tsx
index c6fbf329f..edff17a95 100644
--- a/apps/app/components/modules/modules-list-gantt-chart.tsx
+++ b/apps/app/components/modules/modules-list-gantt-chart.tsx
@@ -27,12 +27,12 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules }) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: { data: IModule }) => (
-    <div className="relative flex w-full h-full overflow-hidden">
+    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
       <div
-        className="flex-shrink-0 w-[4px] h-auto"
+        className="flex-shrink-0 w-[4px] h-full"
         style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data.status)?.color }}
       />
-      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
         {data?.name}
       </div>
     </div>
diff --git a/apps/app/components/views/gantt-chart.tsx b/apps/app/components/views/gantt-chart.tsx
index dbe71fae0..461f46835 100644
--- a/apps/app/components/views/gantt-chart.tsx
+++ b/apps/app/components/views/gantt-chart.tsx
@@ -32,12 +32,12 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex w-full h-full overflow-hidden">
+    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
       <div
-        className="flex-shrink-0 w-[4px] h-auto"
+        className="flex-shrink-0 w-[4px] h-full"
         style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
       />
-      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
         {data?.name}
       </div>
     </div>