chore: fixes and improvement (#2595)

* fix: project card fix

* chore: bug fixes and ui improvement

web/components/cycles/cycles-list-item.tsx

@@ -149,7 +149,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
         projectId={projectId}
       />
       <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
-        <a className="group flex items-center justify-between gap-5 px-10 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
+        <a className="group flex items-center justify-between gap-5 px-5 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
           <div className="flex items-center gap-3 w-full truncate">
             <div className="flex items-center gap-4 truncate">
               <span className="flex-shrink-0">

web/components/cycles/sidebar.tsx

@@ -305,14 +305,12 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
         <>
           <div className="flex items-center justify-between w-full">
             <div>
-              {peekCycle && (
+              <button
-                <button
+                className="flex items-center justify-center h-5 w-5 rounded-full bg-custom-border-300"
-                  className="flex items-center justify-center h-5 w-5 rounded-full bg-custom-border-300"
+                onClick={() => handleClose()}
-                  onClick={() => handleClose()}
+              >
-                >
+                <ChevronRight className="h-3 w-3 text-white stroke-2" />
-                  <ChevronRight className="h-3 w-3 text-white stroke-2" />
+              </button>
-                </button>
-              )}
             </div>
             <div className="flex items-center gap-3.5">
               <button onClick={handleCopyText}>

web/components/headers/modules-list.tsx

@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 import Link from "next/link";
 import { observer } from "mobx-react-lite";
-import { GanttChart, LayoutGrid, List, Plus } from "lucide-react";
+import { GanttChartSquare, LayoutGrid, List, Plus } from "lucide-react";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
@@ -22,7 +22,7 @@ const moduleViewOptions: { type: "list" | "grid" | "gantt_chart"; icon: any }[]
   },
   {
     type: "gantt_chart",
-    icon: GanttChart,
+    icon: GanttChartSquare,
   },
 ];
 

web/components/modules/module-list-item.tsx

@@ -128,7 +128,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
       )}
       <DeleteModuleModal data={module} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
       <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
-        <a className="group flex items-center justify-between gap-5 px-10 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
+        <a className="group flex items-center justify-between gap-5 px-5 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
           <div className="flex items-center gap-3 w-full truncate">
             <div className="flex items-center gap-4 truncate">
               <span className="flex-shrink-0">

web/components/modules/sidebar.tsx

@@ -238,14 +238,12 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
         <>
           <div className="flex items-center justify-between w-full">
             <div>
-              {peekModule && (
+              <button
-                <button
+                className="flex items-center justify-center h-5 w-5 rounded-full bg-custom-border-300"
-                  className="flex items-center justify-center h-5 w-5 rounded-full bg-custom-border-300"
+                onClick={() => handleClose()}
-                  onClick={() => handleClose()}
+              >
-                >
+                <ChevronRight className="h-3 w-3 text-white stroke-2" />
-                  <ChevronRight className="h-3 w-3 text-white stroke-2" />
+              </button>
-                </button>
-              )}
             </div>
             <div className="flex items-center gap-3.5">
               <button onClick={handleCopyText}>

web/components/project/card.tsx

@@ -113,8 +113,8 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
             className="absolute top-0 left-0 h-full w-full object-cover rounded-t"
           />
 
-          <div className="absolute h-9 w-full bottom-4 z-10 flex items-center justify-between px-4">
+          <div className="absolute h-10 w-full bottom-4 z-10 flex items-center justify-between px-4">
-            <div className="flex items-center gap-2.5">
+            <div className="flex items-center gap-2.5 flex-grow truncate">
               <div className="h-9 w-9 flex item-center justify-center rounded bg-white/90 flex-shrink-0">
                 <span className="flex items-center justify-center">
                   {project.emoji
@@ -125,8 +125,8 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
                 </span>
               </div>
 
-              <div className="flex flex-col gap-0.5 justify-center h-9">
+              <div className="flex flex-col gap-0.5 justify-between w-full truncate">
-                <h3 className="text-white font-semibold line-clamp-1">{project.name}</h3>
+                <h3 className="text-white font-semibold truncate">{project.name}</h3>
                 <span className="flex items-center gap-1.5">
                   <p className="text-xs font-medium text-white">{project.identifier} </p>
                   {project.network === 0 && <Lock className="h-2.5 w-2.5 text-white " />}
@@ -134,7 +134,7 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
               </div>
             </div>
 
-            <div className="flex items-center h-full gap-2">
+            <div className="flex items-center h-full gap-2 flex-shrink-0">
               <button
                 className="flex items-center justify-center h-6 w-6 rounded bg-white/10"
                 onClick={(e) => {

web/constants/cycle.tsx

@@ -1,4 +1,4 @@
-import { GanttChart, Kanban, List } from "lucide-react";
+import { GanttChartSquare, LayoutGrid, List } from "lucide-react";
 
 export const CYCLE_TAB_LIST = [
   {
@@ -26,15 +26,15 @@ export const CYCLE_TAB_LIST = [
 export const CYCLE_VIEWS = [
   {
     key: "list",
-    icon: <List className="h-4 w-4" />,
+    icon: List,
   },
   {
     key: "board",
-    icon: <Kanban className="h-4 w-4" />,
+    icon: LayoutGrid,
   },
   {
     key: "gantt",
-    icon: <GanttChart className="h-4 w-4" />,
+    icon: GanttChartSquare,
   },
 ];
 

web/constants/issue.ts

@@ -1,6 +1,6 @@
 import { v4 as uuidv4 } from "uuid";
 // icons
-import { Calendar, GanttChart, Kanban, List, Sheet } from "lucide-react";
+import { Calendar, GanttChartSquare, Kanban, List, Sheet } from "lucide-react";
 // types
 import {
   IIssueDisplayProperties,
@@ -129,11 +129,11 @@ export const ISSUE_LAYOUTS: {
   { key: "kanban", title: "Kanban Layout", icon: Kanban },
   { key: "calendar", title: "Calendar Layout", icon: Calendar },
   { key: "spreadsheet", title: "Spreadsheet Layout", icon: Sheet },
-  { key: "gantt_chart", title: "Gantt Chart Layout", icon: GanttChart },
+  { key: "gantt_chart", title: "Gantt Chart Layout", icon: GanttChartSquare },
 ];
 
 export const ISSUE_LIST_FILTERS = [
-  { key: "mentions", title: "Mentions"},
+  { key: "mentions", title: "Mentions" },
   { key: "priority", title: "Priority" },
   { key: "state", title: "State" },
   { key: "assignees", title: "Assignees" },
@@ -325,7 +325,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
   },
   issues: {
     list: {
-      filters: ["priority", "state", "assignees", "mentions" ,"created_by", "labels", "start_date", "target_date"],
+      filters: ["priority", "state", "assignees", "mentions", "created_by", "labels", "start_date", "target_date"],
       display_properties: true,
       display_filters: {
         group_by: ["state", "priority", "labels", "assignees", "created_by", null],
@@ -338,7 +338,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       },
     },
     kanban: {
-      filters: ["priority", "state", "assignees", "mentions" ,"created_by", "labels", "start_date", "target_date"],
+      filters: ["priority", "state", "assignees", "mentions", "created_by", "labels", "start_date", "target_date"],
       display_properties: true,
       display_filters: {
         group_by: ["state", "priority", "labels", "assignees", "created_by"],
@@ -352,7 +352,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       },
     },
     calendar: {
-      filters: ["priority", "state", "assignees", "mentions" ,"created_by", "labels", "start_date"],
+      filters: ["priority", "state", "assignees", "mentions", "created_by", "labels", "start_date"],
       display_properties: true,
       display_filters: {
         type: [null, "active", "backlog"],
@@ -363,7 +363,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       },
     },
     spreadsheet: {
-      filters: ["priority", "state", "assignees", "mentions" ,"created_by", "labels", "start_date", "target_date"],
+      filters: ["priority", "state", "assignees", "mentions", "created_by", "labels", "start_date", "target_date"],
       display_properties: true,
       display_filters: {
         order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
@@ -375,7 +375,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       },
     },
     gantt_chart: {
-      filters: ["priority", "state", "assignees", "mentions" ,"created_by", "labels", "start_date", "target_date"],
+      filters: ["priority", "state", "assignees", "mentions", "created_by", "labels", "start_date", "target_date"],
       display_properties: false,
       display_filters: {
         order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],

web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx

@@ -22,6 +22,8 @@ import type { NextPage } from "next";
 import { CYCLE_TAB_LIST, CYCLE_VIEWS } from "constants/cycle";
 // lib cookie
 import { setLocalStorage, getLocalStorage } from "lib/local-storage";
+import { Tooltip } from "@plane/ui";
+import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 
 const ProjectCyclesPage: NextPage = observer(() => {
   const [createModal, setCreateModal] = useState(false);
@@ -135,18 +137,25 @@ const ProjectCyclesPage: NextPage = observer(() => {
                 {CYCLE_VIEWS.map((view) => {
                   if (view.key === "gantt" && cycleStore?.cycleView === "draft") return null;
                   return (
-                    <button
+                    <Tooltip
                       key={view.key}
-                      type="button"
+                      tooltipContent={
-                      className={`grid h-8 w-8 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
+                        <span className="capitalize">{replaceUnderscoreIfSnakeCase(view.key)} Layout</span>
-                        cycleStore?.cycleLayout === view.key
+                      }
-                          ? "bg-custom-background-80 text-custom-text-100"
+                      position="bottom"
-                          : "text-custom-text-200"
-                      }`}
-                      onClick={() => handleCurrentLayout(view.key as TCycleLayout)}
                     >
-                      {view.icon}
+                      <button
-                    </button>
+                        type="button"
+                        className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
+                          cycleStore?.cycleLayout === view.key
+                            ? "bg-custom-sidebar-background-80"
+                            : "text-custom-sidebar-text-200"
+                        }`}
+                        onClick={() => handleCurrentLayout(view.key as TCycleLayout)}
+                      >
+                        <view.icon className="h-3.5 w-3.5" />
+                      </button>
+                    </Tooltip>
                   );
                 })}
               </div>