From 3355be9c9c2878eeed2aa46b97dfe81e97585fce Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Sat, 11 May 2024 14:47:56 +0530
Subject: [PATCH] [WEB-1254] chore: list layout indentation enhancement and
 cycle list page ui improvement (#4435)

* chore: list layout indentation improvement

* chore: cycle list layout spacing and date ui updated

* chore: platform ui improvement
---
 .../cycles/board/cycles-board-card.tsx        | 16 +++++----
 .../cycles/list/cycle-list-item-action.tsx    | 14 +++++---
 .../cycles/list/cycles-list-item.tsx          |  2 +-
 web/components/headers/cycle-issues.tsx       |  1 -
 web/components/headers/cycles.tsx             |  1 -
 web/components/headers/global-issues.tsx      |  4 +--
 web/components/headers/module-issues.tsx      |  1 -
 web/components/headers/modules-list.tsx       |  1 -
 web/components/headers/page-details.tsx       |  4 +--
 web/components/headers/pages.tsx              |  3 +-
 web/components/headers/project-inbox.tsx      |  2 +-
 web/components/headers/project-issues.tsx     |  1 -
 .../headers/project-view-issues.tsx           |  1 -
 web/components/headers/project-views.tsx      |  9 ++---
 web/components/headers/projects.tsx           |  1 -
 .../issues/issue-layouts/list/block-root.tsx  |  2 +-
 .../issues/issue-layouts/list/block.tsx       | 33 ++++++++++---------
 .../issues/issue-layouts/list/default.tsx     |  2 +-
 .../issues/issue-layouts/save-filter-view.tsx |  2 +-
 .../pages/list/block-item-action.tsx          | 26 +++++----------
 20 files changed, 58 insertions(+), 68 deletions(-)

diff --git a/web/components/cycles/board/cycles-board-card.tsx b/web/components/cycles/board/cycles-board-card.tsx
index ec6d80921cb..6410077987b 100644
--- a/web/components/cycles/board/cycles-board-card.tsx
+++ b/web/components/cycles/board/cycles-board-card.tsx
@@ -2,7 +2,7 @@ import { FC, MouseEvent, useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { Info } from "lucide-react";
+import { CalendarCheck2, CalendarClock, Info, MoveRight } from "lucide-react";
 // types
 import type { TCycleGroups } from "@plane/types";
 // ui
@@ -226,12 +226,14 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
             </Tooltip>
 
             <div className="flex items-center justify-between">
-              {isDateValid ? (
-                <span className="text-xs text-custom-text-300">
-                  {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
-                </span>
-              ) : (
-                <span className="text-xs text-custom-text-400">No due date</span>
+              {isDateValid && (
+                <div className="h-6 flex items-center gap-1.5 text-custom-text-300 border-[0.5px] border-custom-border-300 rounded text-xs px-2 cursor-default">
+                  <CalendarClock className="h-3 w-3 flex-shrink-0" />
+                  <span className="flex-grow truncate">{renderFormattedDate(startDate)}</span>
+                  <MoveRight className="h-3 w-3 flex-shrink-0" />
+                  <CalendarCheck2 className="h-3 w-3 flex-shrink-0" />
+                  <span className="flex-grow truncate">{renderFormattedDate(endDate)}</span>
+                </div>
               )}
             </div>
           </div>
diff --git a/web/components/cycles/list/cycle-list-item-action.tsx b/web/components/cycles/list/cycle-list-item-action.tsx
index 1f3d2ef6525..05db2e2fa5f 100644
--- a/web/components/cycles/list/cycle-list-item-action.tsx
+++ b/web/components/cycles/list/cycle-list-item-action.tsx
@@ -1,6 +1,6 @@
 import React, { FC, MouseEvent } from "react";
 import { observer } from "mobx-react";
-import { User2 } from "lucide-react";
+import { CalendarCheck2, CalendarClock, MoveRight, User2 } from "lucide-react";
 // types
 import { ICycle, TCycleGroups } from "@plane/types";
 // ui
@@ -106,9 +106,15 @@ export const CycleListItemAction: FC<Props> = observer((props) => {
 
   return (
     <>
-      <div className="text-xs text-custom-text-300 flex-shrink-0">
-        {renderDate && `${renderFormattedDate(startDate) ?? `_ _`} - ${renderFormattedDate(endDate) ?? `_ _`}`}
-      </div>
+      {renderDate && (
+        <div className="h-6 flex items-center gap-1.5 text-custom-text-300 border-[0.5px] border-custom-border-300 rounded text-xs px-2 cursor-default">
+          <CalendarClock className="h-3 w-3 flex-shrink-0" />
+          <span className="flex-grow truncate">{renderFormattedDate(startDate)}</span>
+          <MoveRight className="h-3 w-3 flex-shrink-0" />
+          <CalendarCheck2 className="h-3 w-3 flex-shrink-0" />
+          <span className="flex-grow truncate">{renderFormattedDate(endDate)}</span>
+        </div>
+      )}
 
       {currentCycle && (
         <div
diff --git a/web/components/cycles/list/cycles-list-item.tsx b/web/components/cycles/list/cycles-list-item.tsx
index 1f70d79c28c..92c11dd6919 100644
--- a/web/components/cycles/list/cycles-list-item.tsx
+++ b/web/components/cycles/list/cycles-list-item.tsx
@@ -94,7 +94,7 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
           ) : progress === 100 ? (
             <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
           ) : (
-            <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
+            <span className="text-[9px] text-custom-text-300">{`${progress}%`}</span>
           )}
         </CircularProgressIndicator>
       }
diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx
index e9e89256b11..602e32235c1 100644
--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@@ -281,7 +281,6 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                       toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
                     }}
                     size="sm"
-                    prependIcon={<Plus />}
                   >
                     Add Issue
                   </Button>
diff --git a/web/components/headers/cycles.tsx b/web/components/headers/cycles.tsx
index e5c88d3f5a8..d58bcb31bb7 100644
--- a/web/components/headers/cycles.tsx
+++ b/web/components/headers/cycles.tsx
@@ -61,7 +61,6 @@ export const CyclesHeader: FC = observer(() => {
           <Button
             variant="primary"
             size="sm"
-            prependIcon={<Plus />}
             onClick={() => {
               setTrackElement("Cycles page");
               toggleCreateCycleModal(true);
diff --git a/web/components/headers/global-issues.tsx b/web/components/headers/global-issues.tsx
index 761f5cf4449..dfacf30e024 100644
--- a/web/components/headers/global-issues.tsx
+++ b/web/components/headers/global-issues.tsx
@@ -134,8 +134,8 @@ export const GlobalIssuesHeader: React.FC = observer(() => {
             </FiltersDropdown>
           </>
           {isAuthorizedUser && (
-            <Button variant="primary" size="sm" prependIcon={<PlusIcon />} onClick={() => setCreateViewModal(true)}>
-              New View
+            <Button variant="primary" size="sm" onClick={() => setCreateViewModal(true)}>
+              Add View
             </Button>
           )}
         </div>
diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx
index 5bbaa83e1fa..d28cdb988d3 100644
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@@ -288,7 +288,6 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                     toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
                   }}
                   size="sm"
-                  prependIcon={<Plus />}
                 >
                   Add Issue
                 </Button>
diff --git a/web/components/headers/modules-list.tsx b/web/components/headers/modules-list.tsx
index 881af67aaf4..e1b2378098b 100644
--- a/web/components/headers/modules-list.tsx
+++ b/web/components/headers/modules-list.tsx
@@ -63,7 +63,6 @@ export const ModulesListHeader: React.FC = observer(() => {
           <Button
             variant="primary"
             size="sm"
-            prependIcon={<Plus />}
             onClick={() => {
               setTrackElement("Modules page");
               toggleCreateModuleModal(true);
diff --git a/web/components/headers/page-details.tsx b/web/components/headers/page-details.tsx
index 81b7c5bbe23..2dab6b92f0d 100644
--- a/web/components/headers/page-details.tsx
+++ b/web/components/headers/page-details.tsx
@@ -79,8 +79,8 @@ export const PageDetailsHeader: FC<IPagesHeaderProps> = observer((props) => {
       </div>
       {showButton && (
         <div className="flex items-center gap-2">
-          <Button variant="primary" prependIcon={<Plus />} size="sm" onClick={() => toggleCreatePageModal(true)}>
-            Create Page
+          <Button variant="primary" size="sm" onClick={() => toggleCreatePageModal(true)}>
+            Add Page
           </Button>
         </div>
       )}
diff --git a/web/components/headers/pages.tsx b/web/components/headers/pages.tsx
index aed050848a5..707048af4d5 100644
--- a/web/components/headers/pages.tsx
+++ b/web/components/headers/pages.tsx
@@ -59,14 +59,13 @@ export const PagesHeader = observer(() => {
         <div className="flex items-center gap-2">
           <Button
             variant="primary"
-            prependIcon={<Plus />}
             size="sm"
             onClick={() => {
               setTrackElement("Project pages page");
               toggleCreatePageModal(true);
             }}
           >
-            Create Page
+            Add Page
           </Button>
         </div>
       )}
diff --git a/web/components/headers/project-inbox.tsx b/web/components/headers/project-inbox.tsx
index 80a39862b49..c5661fe919d 100644
--- a/web/components/headers/project-inbox.tsx
+++ b/web/components/headers/project-inbox.tsx
@@ -70,7 +70,7 @@ export const ProjectInboxHeader: FC = observer(() => {
             issue={undefined}
           />
 
-          <Button variant="primary" prependIcon={<Plus />} size="sm" onClick={() => setCreateIssueModal(true)}>
+          <Button variant="primary" size="sm" onClick={() => setCreateIssueModal(true)}>
             Add Issue
           </Button>
         </div>
diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index 9f64c0d3a0b..f3e6cd0e873 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -229,7 +229,6 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
                 toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
               }}
               size="sm"
-              prependIcon={<Plus />}
             >
               <div className="hidden sm:block">Add</div> Issue
             </Button>
diff --git a/web/components/headers/project-view-issues.tsx b/web/components/headers/project-view-issues.tsx
index 1e21d10c749..3d8d151d083 100644
--- a/web/components/headers/project-view-issues.tsx
+++ b/web/components/headers/project-view-issues.tsx
@@ -241,7 +241,6 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
               toggleCreateIssueModal(true, EIssuesStoreType.PROJECT_VIEW);
             }}
             size="sm"
-            prependIcon={<Plus />}
           >
             Add Issue
           </Button>
diff --git a/web/components/headers/project-views.tsx b/web/components/headers/project-views.tsx
index c79934aec2f..e3093e72aed 100644
--- a/web/components/headers/project-views.tsx
+++ b/web/components/headers/project-views.tsx
@@ -61,13 +61,8 @@ export const ProjectViewsHeader: React.FC = observer(() => {
           <div className="flex flex-shrink-0 items-center gap-2">
             <ViewListHeader />
             <div>
-              <Button
-                variant="primary"
-                size="sm"
-                prependIcon={<Plus className="h-3.5 w-3.5 stroke-2" />}
-                onClick={() => toggleCreateViewModal(true)}
-              >
-                Create View
+              <Button variant="primary" size="sm" onClick={() => toggleCreateViewModal(true)}>
+                Add View
               </Button>
             </div>
           </div>
diff --git a/web/components/headers/projects.tsx b/web/components/headers/projects.tsx
index ba75832e0b2..4326038178f 100644
--- a/web/components/headers/projects.tsx
+++ b/web/components/headers/projects.tsx
@@ -167,7 +167,6 @@ export const ProjectsHeader = observer(() => {
         </div>
         {isAuthorizedUser && (
           <Button
-            prependIcon={<Plus />}
             size="sm"
             onClick={() => {
               setTrackElement("Projects page");
diff --git a/web/components/issues/issue-layouts/list/block-root.tsx b/web/components/issues/issue-layouts/list/block-root.tsx
index a311d643a75..04cce339ee9 100644
--- a/web/components/issues/issue-layouts/list/block-root.tsx
+++ b/web/components/issues/issue-layouts/list/block-root.tsx
@@ -80,7 +80,7 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
             canEditProperties={canEditProperties}
             displayProperties={displayProperties}
             nestingLevel={nestingLevel + 1}
-            spacingLeft={spacingLeft + (displayProperties?.key ? 19 : 0)}
+            spacingLeft={spacingLeft + (displayProperties?.key ? 12 : 0)}
             containerRef={containerRef}
           />
         ))}
diff --git a/web/components/issues/issue-layouts/list/block.tsx b/web/components/issues/issue-layouts/list/block.tsx
index 46499020e07..1e90bf5bd33 100644
--- a/web/components/issues/issue-layouts/list/block.tsx
+++ b/web/components/issues/issue-layouts/list/block.tsx
@@ -86,25 +86,28 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
     <div
       ref={parentRef}
       className={cn(
-        "min-h-[52px] relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 p-3 pl-8 text-sm",
+        "min-h-11 relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 p-3 pl-1.5 text-sm",
         {
           "border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id),
           "last:border-b-transparent": !getIsIssuePeeked(issue.id),
         }
       )}
     >
-      <div className="flex w-full truncate" style={nestingLevel !== 0 ? { paddingLeft } : {}}>
+      <div className="flex w-full truncate" style={issue.parent_id && nestingLevel !== 0 ? { paddingLeft } : {}}>
         <div className="flex flex-grow items-center gap-3 truncate">
-          <div className="flex items-center gap-1.5">
-            <div className="flex h-5 w-5 items-center justify-center">
-              {subIssuesCount > 0 && (
-                <button
-                  className="flex items-center justify-center h-5 w-5 cursor-pointer rounded-sm text-custom-text-400  hover:text-custom-text-300"
-                  onClick={handleToggleExpand}
-                >
-                  <ChevronRight className={`h-4 w-4 ${isExpanded ? "rotate-90" : ""}`} />
-                </button>
-              )}
+          <div className="flex items-center gap-0.5">
+            <div className="flex items-center group">
+              <span className="size-3.5" />
+              <div className="flex h-4 w-4 items-center justify-center">
+                {issue.sub_issues_count > 0 && (
+                  <button
+                    className="flex items-center justify-center h-4 w-4 cursor-pointer rounded-sm text-custom-text-400  hover:text-custom-text-300"
+                    onClick={handleToggleExpand}
+                  >
+                    <ChevronRight className={`h-4 w-4 ${isExpanded ? "rotate-90" : ""}`} />
+                  </button>
+                )}
+              </div>
             </div>
             {displayProperties && displayProperties?.key && (
               <div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
@@ -118,7 +121,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
           </div>
 
           {issue?.is_draft ? (
-            <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
+            <Tooltip tooltipContent={issue.name} isMobile={isMobile} position="top-left">
               <p className="truncate">{issue.name}</p>
             </Tooltip>
           ) : (
@@ -132,7 +135,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
               className="w-full truncate cursor-pointer text-sm text-custom-text-100"
               disabled={!!issue?.tempId}
             >
-              <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
+              <Tooltip tooltipContent={issue.name} isMobile={isMobile} position="top-left">
                 <p className="truncate">{issue.name}</p>
               </Tooltip>
             </ControlLink>
@@ -151,7 +154,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
         {!issue?.tempId ? (
           <>
             <IssueProperties
-              className="relative flex flex-wrap items-center gap-2 whitespace-nowrap md:flex-shrink-0 md:flex-grow"
+              className="relative flex flex-wrap md:flex-grow md:flex-shrink-0 items-center gap-2 whitespace-nowrap"
               issue={issue}
               isReadOnly={!canEditIssueProperties}
               updateIssue={updateIssue}
diff --git a/web/components/issues/issue-layouts/list/default.tsx b/web/components/issues/issue-layouts/list/default.tsx
index d34908896c6..80d4a9a3f4d 100644
--- a/web/components/issues/issue-layouts/list/default.tsx
+++ b/web/components/issues/issue-layouts/list/default.tsx
@@ -133,7 +133,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
           (_list: IGroupByColumn) =>
             validateEmptyIssueGroups(is_list ? issueIds : issueIds?.[_list.id]) && (
               <div key={_list.id} className={`flex flex-shrink-0 flex-col`}>
-                <div className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 px-3 py-1">
+                <div className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 px-3 pl-5 py-1">
                   <HeaderGroupByCard
                     icon={_list.icon}
                     title={_list.name || ""}
diff --git a/web/components/issues/issue-layouts/save-filter-view.tsx b/web/components/issues/issue-layouts/save-filter-view.tsx
index 67cf6cbadb6..14bd5e62d1d 100644
--- a/web/components/issues/issue-layouts/save-filter-view.tsx
+++ b/web/components/issues/issue-layouts/save-filter-view.tsx
@@ -25,7 +25,7 @@ export const SaveFilterView: FC<ISaveFilterView> = (props) => {
         onClose={() => setViewModal(false)}
       />
 
-      <Button size="sm" prependIcon={<Plus />} onClick={() => setViewModal(true)}>
+      <Button size="sm" onClick={() => setViewModal(true)}>
         Save View
       </Button>
     </div>
diff --git a/web/components/pages/list/block-item-action.tsx b/web/components/pages/list/block-item-action.tsx
index f9fb57f0fa7..dbe9269a816 100644
--- a/web/components/pages/list/block-item-action.tsx
+++ b/web/components/pages/list/block-item-action.tsx
@@ -50,24 +50,16 @@ export const BlockItemAction: FC<Props> = observer((props) => {
   return (
     <>
       {/* page details */}
-      <div className="flex items-center gap-2 text-custom-text-400">
-        {/* <span className="text-xs">Labels</span>
-           <Circle className="h-1 w-1 fill-custom-text-300" /> */}
-        <div className="cursor-default">
-          <Tooltip tooltipHeading="Owned by" tooltipContent={ownerDetails?.display_name}>
-            <Avatar src={ownerDetails?.avatar} name={ownerDetails?.display_name} />
-          </Tooltip>
-        </div>
-        <Circle className="h-1 w-1 fill-custom-text-300" />
-        {/* <span className="text-xs cursor-default">10m read</span>
-           <Circle className="h-1 w-1 fill-custom-text-300" /> */}
-        <div className="cursor-default">
-          <Tooltip tooltipContent={access === 0 ? "Public" : "Private"}>
-            {access === 0 ? <Earth className="h-3 w-3" /> : <Lock className="h-3 w-3" />}
-          </Tooltip>
-        </div>
+      <div className="cursor-default">
+        <Tooltip tooltipHeading="Owned by" tooltipContent={ownerDetails?.display_name}>
+          <Avatar src={ownerDetails?.avatar} name={ownerDetails?.display_name} />
+        </Tooltip>
+      </div>
+      <div className="cursor-default text-custom-text-300">
+        <Tooltip tooltipContent={access === 0 ? "Public" : "Private"}>
+          {access === 0 ? <Earth className="h-4 w-4" /> : <Lock className="h-4 w-4" />}
+        </Tooltip>
       </div>
-
       {/* vertical divider */}
       <Minus className="h-5 w-5 text-custom-text-400 rotate-90 -mx-3" strokeWidth={1} />