dev: gantt ui changes

apps/app/components/gantt-chart/blocks/index.tsx

@@ -18,7 +18,7 @@ export const GanttChartBlocks: FC<{
 
   return (
     <div
-      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"
+      className="relative z-10 mt-[58px] h-full w-[4000px] divide-x divide-gray-300 overflow-hidden overflow-y-auto"
       style={{ width: `${itemsContainerWidth}px` }}
     >
       <div className="w-full">
@@ -44,7 +44,7 @@ export const GanttChartBlocks: FC<{
                     </div>
 
                     <div
-                      className="rounded-sm shadow-sm bg-brand-base overflow-hidden relative flex items-center h-[34px] border border-brand-base"
+                      className="rounded shadow-sm bg-brand-base overflow-hidden relative flex items-center h-[34px] border border-brand-base"
                       style={{
                         width: `${block?.position?.width}px`,
                       }}

apps/app/components/gantt-chart/chart/index.tsx

@@ -37,6 +37,7 @@ import { datePreview, currentViewDataWithView } from "../data";
 import { useChart } from "../hooks";
 
 type ChartViewRootProps = {
+  border: boolean;
   title: null | string;
   loaderTitle: string;
   blocks: any;
@@ -46,6 +47,7 @@ type ChartViewRootProps = {
 };
 
 export const ChartViewRoot: FC<ChartViewRootProps> = ({
+  border,
   title,
   blocks = null,
   loaderTitle,
@@ -214,10 +216,12 @@ 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 bg-brand-base shadow`}
+      } ${
+        border ? `border border-brand-base` : ``
+      } flex h-full flex-col rounded-sm 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">
+      {/* <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">
         {title && (
           <div className="text-lg font-medium flex gap-2 items-center">
             <div>{title}</div>
@@ -233,7 +237,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
             {blocks.length} {loaderTitle}
           </div>
         )}
-      </div>
+      </div> */}
 
       {/* chart header */}
       <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2">
@@ -248,10 +252,23 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
           )}
         </div> */}
 
-        <div className="mr-auto text-sm font-medium">
+        {title && (
-          {`${datePreview(currentViewData?.data?.startDate)} - ${datePreview(
+          <div className="text-lg font-medium flex gap-2 items-center">
-            currentViewData?.data?.endDate
+            <div>{title}</div>
-          )}`}
+            <div className="text-xs rounded-full px-2 py-1 font-bold border border-brand-accent/75 bg-brand-accent/5 text-brand-base">
+              Gantt View Beta
+            </div>
+          </div>
+        )}
+
+        <div className="ml-auto">
+          {blocks === null ? (
+            <div className="text-sm font-medium ml-auto">Loading...</div>
+          ) : (
+            <div className="text-sm font-medium ml-auto">
+              {blocks.length} {loaderTitle}
+            </div>
+          )}
         </div>
 
         <div className="flex flex-wrap items-center gap-2">
@@ -260,7 +277,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
             allViews.map((_chatView: any, _idx: any) => (
               <div
                 key={_chatView?.key}
-                className={`cursor-pointer rounded-sm border border-brand-base p-1 px-2 text-sm font-medium ${
+                className={`cursor-pointer rounded-sm border border-brand-base p-1 px-2 text-xs ${
                   currentView === _chatView?.key ? `bg-brand-surface-2` : `hover:bg-brand-surface-1`
                 }`}
                 onClick={() => handleChartView(_chatView?.key)}
@@ -272,7 +289,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
 
         <div className="flex items-center gap-1">
           <div
-            className={`cursor-pointer rounded-sm border border-brand-base p-1 px-2 text-sm font-medium hover:bg-brand-surface-2`}
+            className={`cursor-pointer rounded-sm border border-brand-base p-1 px-2 text-xs hover:bg-brand-surface-2`}
             onClick={handleToday}
           >
             Today

apps/app/components/gantt-chart/chart/month.tsx

@@ -37,7 +37,7 @@ export const MonthChartView: FC<any> = () => {
                       <div
                         className={`relative h-full w-full flex-1 flex justify-center ${
                           ["sat", "sun"].includes(_item?.dayData?.shortTitle || "")
-                            ? `bg-brand-surface-2`
+                            ? `bg-brand-surface-1`
                             : ``
                         }`}
                       >

apps/app/components/gantt-chart/root.tsx

@@ -5,6 +5,7 @@ import { ChartViewRoot } from "./chart";
 import { ChartContextProvider } from "./contexts";
 
 type GanttChartRootProps = {
+  border: boolean;
   title: null | string;
   loaderTitle: string;
   blocks: any;
@@ -14,6 +15,7 @@ type GanttChartRootProps = {
 };
 
 export const GanttChartRoot: FC<GanttChartRootProps> = ({
+  border = true,
   title = null,
   blocks,
   loaderTitle = "blocks",
@@ -23,6 +25,7 @@ export const GanttChartRoot: FC<GanttChartRootProps> = ({
 }) => (
   <ChartContextProvider>
     <ChartViewRoot
+      border={border}
       title={title}
       blocks={blocks}
       loaderTitle={loaderTitle}

apps/app/components/issues/gantt-chart.tsx

@@ -32,7 +32,7 @@ export const IssueGanttChartView: FC<Props> = ({}) => {
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
     <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${data?.id}`}>
-      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm font-normal">
         <div
           className="flex-shrink-0 w-[4px] h-full"
           style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
@@ -68,8 +68,9 @@ export const IssueGanttChartView: FC<Props> = ({}) => {
       : [];
 
   return (
-    <div className="w-full h-full p-3">
+    <div className="w-full h-full">
       <GanttChartRoot
+        border={false}
         title="Issues"
         loaderTitle="Issues"
         blocks={ganttIssues ? blockFormat(ganttIssues) : null}