From 505b14e3a6fa76bba328bf41b7f4b7fb562ce275 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 21 Mar 2023 12:47:10 +0530
Subject: [PATCH] fix: ui fixes and improvement (#479)

* fix: list view longer title tooltip fix

* fix: module and cycle sidebar ui improvement
---
 .../components/core/list-view/single-issue.tsx   |  2 +-
 apps/app/components/cycles/sidebar.tsx           | 13 ++++++++-----
 apps/app/components/icons/exclamation-icon.tsx   | 16 ++++++++++++++++
 apps/app/components/icons/index.ts               |  1 +
 .../components/issues/my-issues-list-item.tsx    |  2 +-
 apps/app/components/modules/sidebar.tsx          | 16 ++++++++--------
 6 files changed, 35 insertions(+), 15 deletions(-)
 create mode 100644 apps/app/components/icons/exclamation-icon.tsx

diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx
index e1b5fa9ed..c9ff6626d 100644
--- a/apps/app/components/core/list-view/single-issue.tsx
+++ b/apps/app/components/core/list-view/single-issue.tsx
@@ -189,7 +189,7 @@ export const SingleListIssue: React.FC<Props> = ({
                   </span>
                 </Tooltip>
               )}
-              <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
+              <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
                 <span className="text-sm text-gray-800">{truncateText(issue.name, 50)}</span>
               </Tooltip>
             </a>
diff --git a/apps/app/components/cycles/sidebar.tsx b/apps/app/components/cycles/sidebar.tsx
index 44e89604d..d3c7a2306 100644
--- a/apps/app/components/cycles/sidebar.tsx
+++ b/apps/app/components/cycles/sidebar.tsx
@@ -19,7 +19,6 @@ import {
   UserCircleIcon,
   ChevronDownIcon,
   DocumentIcon,
-  ExclamationCircleIcon,
 } from "@heroicons/react/24/outline";
 // ui
 import { CustomMenu, Loader, ProgressBar } from "components/ui";
@@ -31,6 +30,8 @@ import cyclesService from "services/cycles.service";
 import { SidebarProgressStats } from "components/core";
 import ProgressChart from "components/core/sidebar/progress-chart";
 import { DeleteCycleModal } from "components/cycles";
+// icons
+import { ExclamationIcon } from "components/icons";
 // helpers
 import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper";
 import { groupBy } from "helpers/array.helper";
@@ -346,8 +347,8 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ cycle, isOpen, cycleStatu
                         </Disclosure.Button>
                       ) : (
                         <div className="flex items-center gap-1">
-                          <ExclamationCircleIcon className="h-3 w-3" />
-                          <span className="text-xs italic">
+                          <ExclamationIcon height={14} width={14} />
+                          <span className="text-xs italic text-gray-500">
                             Invalid date. Please enter valid date.
                           </span>
                         </div>
@@ -417,8 +418,10 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ cycle, isOpen, cycleStatu
                         </Disclosure.Button>
                       ) : (
                         <div className="flex items-center gap-1">
-                          <ExclamationCircleIcon className="h-3 w-3" />
-                          <span className="text-xs italic">No issues found. Please add issue.</span>
+                          <ExclamationIcon height={14} width={14} />
+                          <span className="text-xs italic text-gray-500">
+                            No issues found. Please add issue.
+                          </span>
                         </div>
                       )}
                     </div>
diff --git a/apps/app/components/icons/exclamation-icon.tsx b/apps/app/components/icons/exclamation-icon.tsx
new file mode 100644
index 000000000..d904263f5
--- /dev/null
+++ b/apps/app/components/icons/exclamation-icon.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const ExclamationIcon: React.FC<Props> = ({ width, height, className }) => (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 14 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+     <path d="M7.55321 11.042C7.70668 11.042 7.83359 10.9918 7.93394 10.8915C8.03428 10.7911 8.08446 10.6642 8.08446 10.5107V7.30553C8.08446 7.16387 8.03133 7.04286 7.92508 6.94251C7.81883 6.84217 7.69487 6.79199 7.55321 6.79199C7.39973 6.79199 7.27283 6.84217 7.17248 6.94251C7.07213 7.04286 7.02196 7.16977 7.02196 7.32324V10.5285C7.02196 10.6701 7.07508 10.7911 7.18133 10.8915C7.28758 10.9918 7.41154 11.042 7.55321 11.042ZM7.50008 5.48158C7.66536 5.48158 7.80407 5.42845 7.91623 5.3222C8.02838 5.21595 8.08446 5.08019 8.08446 4.91491C8.08446 4.74963 8.02838 4.60796 7.91623 4.48991C7.80407 4.37185 7.66536 4.31283 7.50008 4.31283C7.3348 4.31283 7.19609 4.37185 7.08394 4.48991C6.97178 4.60796 6.91571 4.74963 6.91571 4.91491C6.91571 5.08019 6.97178 5.21595 7.08394 5.3222C7.19609 5.42845 7.3348 5.48158 7.50008 5.48158ZM7.50008 14.5837C6.49661 14.5837 5.56397 14.4036 4.70217 14.0436C3.84036 13.6835 3.09071 13.1847 2.45321 12.5472C1.81571 11.9097 1.31692 11.16 0.956852 10.2982C0.596783 9.43644 0.416748 8.5038 0.416748 7.50033C0.416748 6.50866 0.596783 5.58192 0.956852 4.72012C1.31692 3.85831 1.81571 3.10866 2.45321 2.47116C3.09071 1.83366 3.84036 1.33192 4.70217 0.965951C5.56397 0.599978 6.49661 0.416992 7.50008 0.416992C8.49175 0.416992 9.41848 0.599978 10.2803 0.965951C11.1421 1.33192 11.8917 1.83366 12.5292 2.47116C13.1667 3.10866 13.6685 3.85831 14.0345 4.72012C14.4004 5.58192 14.5834 6.50866 14.5834 7.50033C14.5834 8.5038 14.4004 9.43644 14.0345 10.2982C13.6685 11.16 13.1667 11.9097 12.5292 12.5472C11.8917 13.1847 11.1421 13.6835 10.2803 14.0436C9.41848 14.4036 8.49175 14.5837 7.50008 14.5837ZM7.50008 13.5212C9.15286 13.5212 10.5695 12.9309 11.7501 11.7503C12.9306 10.5698 13.5209 9.1531 13.5209 7.50033C13.5209 5.84755 12.9306 4.43088 11.7501 3.25033C10.5695 2.06977 9.15286 1.47949 7.50008 1.47949C5.8473 1.47949 4.43064 2.06977 3.25008 3.25033C2.06953 4.43088 1.47925 5.84755 1.47925 7.50033C1.47925 9.1531 2.06953 10.5698 3.25008 11.7503C4.43064 12.9309 5.8473 13.5212 7.50008 13.5212Z" fill="#858E96"/>
+    </svg>
+  );
diff --git a/apps/app/components/icons/index.ts b/apps/app/components/icons/index.ts
index 4adfbac5e..f9f395880 100644
--- a/apps/app/components/icons/index.ts
+++ b/apps/app/components/icons/index.ts
@@ -43,3 +43,4 @@ export * from "./contrast-icon";
 export * from "./people-group-icon";
 export * from "./cmd-icon";
 export * from "./view-list-icon";
+export * from "./exclamation-icon";
diff --git a/apps/app/components/issues/my-issues-list-item.tsx b/apps/app/components/issues/my-issues-list-item.tsx
index f2b051c76..f933e95f9 100644
--- a/apps/app/components/issues/my-issues-list-item.tsx
+++ b/apps/app/components/issues/my-issues-list-item.tsx
@@ -92,7 +92,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
                 </span>
               </Tooltip>
             )}
-            <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
+            <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
               <span className="break-all text-sm text-gray-800">
                 {truncateText(issue.name, 50)}
               </span>
diff --git a/apps/app/components/modules/sidebar.tsx b/apps/app/components/modules/sidebar.tsx
index 5e4407841..7f360a419 100644
--- a/apps/app/components/modules/sidebar.tsx
+++ b/apps/app/components/modules/sidebar.tsx
@@ -14,7 +14,6 @@ import {
   ChevronDownIcon,
   DocumentDuplicateIcon,
   DocumentIcon,
-  ExclamationCircleIcon,
   TrashIcon,
 } from "@heroicons/react/24/outline";
 
@@ -28,10 +27,9 @@ import useToast from "hooks/use-toast";
 import { LinkModal, SidebarProgressStats } from "components/core";
 import { DeleteModuleModal, SidebarLeadSelect, SidebarMembersSelect } from "components/modules";
 import ProgressChart from "components/core/sidebar/progress-chart";
-
-// components
-// ui
 import { CustomMenu, CustomSelect, Loader, ProgressBar } from "components/ui";
+// icon
+import { ExclamationIcon } from "components/icons";
 // helpers
 import { renderDateFormat, renderShortDate } from "helpers/date-time.helper";
 import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper";
@@ -424,8 +422,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                         </Disclosure.Button>
                       ) : (
                         <div className="flex items-center gap-1">
-                          <ExclamationCircleIcon className="h-3 w-3" />
-                          <span className="text-xs italic">
+                          <ExclamationIcon height={14} width={14} />
+                          <span className="text-xs italic text-gray-500">
                             Invalid date. Please enter valid date.
                           </span>
                         </div>
@@ -495,8 +493,10 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                         </Disclosure.Button>
                       ) : (
                         <div className="flex items-center gap-1">
-                          <ExclamationCircleIcon className="h-3 w-3" />
-                          <span className="text-xs italic">No issues found. Please add issue.</span>
+                          <ExclamationIcon height={14} width={14} />
+                          <span className="text-xs italic text-gray-500">
+                            No issues found. Please add issue.
+                          </span>
                         </div>
                       )}
                     </div>