From ae1eb9527a20575bcba98760c45cdd8a7ac3f98d Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 19 May 2023 15:22:09 +0530
Subject: [PATCH] style: ui improvement (#1077)

* style: assignee, sub-issue and due date display properties styling

* style: cycle view  indicator added
---
 .../core/board-view/single-issue.tsx          | 16 ++++--
 .../core/calendar-view/single-issue.tsx       | 17 +++---
 .../core/list-view/single-issue.tsx           | 22 +++++---
 apps/app/components/cycles/cycles-view.tsx    |  8 ++-
 .../components/issues/my-issues-list-item.tsx | 52 +++++++++++--------
 .../issues/view-select/assignee.tsx           |  4 +-
 apps/app/styles/react-datepicker.css          |  5 ++
 7 files changed, 78 insertions(+), 46 deletions(-)

diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx
index 926f0e81a..6da636efb 100644
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/apps/app/components/core/board-view/single-issue.tsx
@@ -37,6 +37,7 @@ import {
   ArrowTopRightOnSquareIcon,
   PaperClipIcon,
 } from "@heroicons/react/24/outline";
+import { LayerDiagonalIcon } from "components/icons";
 // helpers
 import { handleIssuesMutation } from "constants/issue";
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
@@ -337,11 +338,6 @@ export const SingleBoardIssue: React.FC<Props> = ({
                 isNotAllowed={isNotAllowed}
               />
             )}
-            {properties.sub_issue_count && (
-              <div className="flex flex-shrink-0 items-center gap-1 rounded-md border border-brand-base px-2 py-1 text-xs text-brand-secondary shadow-sm">
-                {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
-              </div>
-            )}
             {properties.labels && issue.label_details.length > 0 && (
               <div className="flex flex-wrap gap-1">
                 {issue.label_details.map((label) => (
@@ -377,6 +373,16 @@ export const SingleBoardIssue: React.FC<Props> = ({
                 selfPositioned
               />
             )}
+            {properties.sub_issue_count && (
+              <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+                <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
+                  <div className="flex items-center gap-1 text-brand-secondary">
+                    <LayerDiagonalIcon className="h-3.5 w-3.5" />
+                    {issue.sub_issues_count}
+                  </div>
+                </Tooltip>
+              </div>
+            )}
             {properties.link && (
               <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
diff --git a/apps/app/components/core/calendar-view/single-issue.tsx b/apps/app/components/core/calendar-view/single-issue.tsx
index fd07fda42..9102f7338 100644
--- a/apps/app/components/core/calendar-view/single-issue.tsx
+++ b/apps/app/components/core/calendar-view/single-issue.tsx
@@ -24,6 +24,7 @@ import {
 } from "components/issues";
 // icons
 import { LinkIcon, PaperClipIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
+import { LayerDiagonalIcon } from "components/icons";
 // helper
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 // type
@@ -201,11 +202,6 @@ export const SingleCalendarIssue: React.FC<Props> = ({
                 isNotAllowed={isNotAllowed}
               />
             )}
-            {properties.sub_issue_count && (
-              <div className="flex items-center gap-1 rounded-md border border-brand-base px-2 py-1 text-xs text-brand-secondary shadow-sm">
-                {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
-              </div>
-            )}
             {properties.labels && issue.label_details.length > 0 ? (
               <div className="flex flex-wrap gap-1">
                 {issue.label_details.map((label) => (
@@ -242,7 +238,16 @@ export const SingleCalendarIssue: React.FC<Props> = ({
                 isNotAllowed={isNotAllowed}
               />
             )}
-
+            {properties.sub_issue_count && (
+              <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+                <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
+                  <div className="flex items-center gap-1 text-brand-secondary">
+                    <LayerDiagonalIcon className="h-3.5 w-3.5" />
+                    {issue.sub_issues_count}
+                  </div>
+                </Tooltip>
+              </div>
+            )}
             {properties.link && (
               <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx
index 49e11ca2f..6f6a5ab4f 100644
--- a/apps/app/components/core/list-view/single-issue.tsx
+++ b/apps/app/components/core/list-view/single-issue.tsx
@@ -31,6 +31,7 @@ import {
   ArrowTopRightOnSquareIcon,
   PaperClipIcon,
 } from "@heroicons/react/24/outline";
+import { LayerDiagonalIcon } from "components/icons";
 // helpers
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 import { handleIssuesMutation } from "constants/issue";
@@ -205,7 +206,7 @@ export const SingleListIssue: React.FC<Props> = ({
         </a>
       </ContextMenu>
       <div
-        className="flex flex-wrap items-center justify-between gap-2 border-b border-brand-base bg-brand-base last:border-b-0"
+        className="flex flex-wrap items-center justify-between px-4 py-2.5 gap-2 border-b border-brand-base bg-brand-base last:border-b-0"
         onContextMenu={(e) => {
           e.preventDefault();
           setContextMenu(true);
@@ -213,7 +214,7 @@ export const SingleListIssue: React.FC<Props> = ({
         }}
       >
         <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
-          <div className="flex-grow cursor-pointer px-4 pt-2.5 md:py-2.5">
+          <div className="flex-grow cursor-pointer">
             <a className="group relative flex items-center gap-2">
               {properties.key && (
                 <Tooltip
@@ -234,7 +235,7 @@ export const SingleListIssue: React.FC<Props> = ({
           </div>
         </Link>
 
-        <div className="flex w-full flex-shrink flex-wrap items-center gap-2 px-4 pb-2.5 text-xs sm:w-auto md:px-0 md:py-2.5 md:pr-4">
+        <div className="flex w-full flex-shrink flex-wrap items-center gap-2 text-xs sm:w-auto">
           {properties.priority && (
             <ViewPrioritySelect
               issue={issue}
@@ -258,11 +259,6 @@ export const SingleListIssue: React.FC<Props> = ({
               isNotAllowed={isNotAllowed}
             />
           )}
-          {properties.sub_issue_count && (
-            <div className="flex items-center gap-1 rounded-md border border-brand-base px-2 py-1 text-xs text-brand-secondary shadow-sm">
-              {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
-            </div>
-          )}
           {properties.labels && issue.label_details.length > 0 ? (
             <div className="flex flex-wrap gap-1">
               {issue.label_details.map((label) => (
@@ -299,6 +295,16 @@ export const SingleListIssue: React.FC<Props> = ({
               isNotAllowed={isNotAllowed}
             />
           )}
+          {properties.sub_issue_count && (
+            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+              <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
+                <div className="flex items-center gap-1 text-brand-secondary">
+                  <LayerDiagonalIcon className="h-3.5 w-3.5" />
+                  {issue.sub_issues_count}
+                </div>
+              </Tooltip>
+            </div>
+          )}
           {properties.link && (
             <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
diff --git a/apps/app/components/cycles/cycles-view.tsx b/apps/app/components/cycles/cycles-view.tsx
index ac4c19e27..35677364d 100644
--- a/apps/app/components/cycles/cycles-view.tsx
+++ b/apps/app/components/cycles/cycles-view.tsx
@@ -116,14 +116,18 @@ export const CyclesView: React.FC<Props> = ({
             <div className="flex items-center gap-x-1">
               <button
                 type="button"
-                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2`}
+                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 ${
+                  cycleView === "list" ? "bg-brand-surface-2" : ""
+                } hover:bg-brand-surface-2`}
                 onClick={() => setCycleView("list")}
               >
                 <ListBulletIcon className="h-4 w-4 text-brand-secondary" />
               </button>
               <button
                 type="button"
-                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2`}
+                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 ${
+                  cycleView === "board" ? "bg-brand-surface-2" : ""
+                } hover:bg-brand-surface-2`}
                 onClick={() => setCycleView("board")}
               >
                 <Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
diff --git a/apps/app/components/issues/my-issues-list-item.tsx b/apps/app/components/issues/my-issues-list-item.tsx
index fc8e5c28f..06cd6f87f 100644
--- a/apps/app/components/issues/my-issues-list-item.tsx
+++ b/apps/app/components/issues/my-issues-list-item.tsx
@@ -17,6 +17,7 @@ import {
 } from "components/issues/view-select";
 // icon
 import { LinkIcon, PaperClipIcon } from "@heroicons/react/24/outline";
+import { LayerDiagonalIcon } from "components/icons";
 // ui
 import { AssigneesList } from "components/ui/avatar";
 import { CustomMenu, Tooltip } from "components/ui";
@@ -126,11 +127,6 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
               isNotAllowed={isNotAllowed}
             />
           )}
-          {properties.sub_issue_count && (
-            <div className="flex items-center gap-1 rounded-md border border-brand-base px-2 py-1 text-xs text-brand-secondary shadow-sm">
-              {issue?.sub_issues_count} {issue?.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
-            </div>
-          )}
           {properties.labels && issue.label_details.length > 0 ? (
             <div className="flex flex-wrap gap-1">
               {issue.label_details.map((label) => (
@@ -152,23 +148,35 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
             ""
           )}
           {properties.assignee && (
-            <Tooltip
-              position="top-right"
-              tooltipHeading="Assignees"
-              tooltipContent={
-                issue.assignee_details.length > 0
-                  ? issue.assignee_details
-                      .map((assignee) =>
-                        assignee?.first_name !== "" ? assignee?.first_name : assignee?.email
-                      )
-                      .join(", ")
-                  : "No Assignee"
-              }
-            >
-              <div className="flex items-center gap-1">
-                <AssigneesList userIds={issue.assignees ?? []} />
-              </div>
-            </Tooltip>
+            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm">
+              <Tooltip
+                position="top-right"
+                tooltipHeading="Assignees"
+                tooltipContent={
+                  issue.assignee_details.length > 0
+                    ? issue.assignee_details
+                        .map((assignee) =>
+                          assignee?.first_name !== "" ? assignee?.first_name : assignee?.email
+                        )
+                        .join(", ")
+                    : "No Assignee"
+                }
+              >
+                <div className="flex h-4 items-center gap-1">
+                  <AssigneesList userIds={issue.assignees ?? []} />
+                </div>
+              </Tooltip>
+            </div>
+          )}
+          {properties.sub_issue_count && (
+            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+              <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
+                <div className="flex items-center gap-1 text-brand-secondary">
+                  <LayerDiagonalIcon className="h-3.5 w-3.5" />
+                  {issue.sub_issues_count}
+                </div>
+              </Tooltip>
+            </div>
           )}
           {properties.link && (
             <div className="flex cursor-default items-center rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm">
diff --git a/apps/app/components/issues/view-select/assignee.tsx b/apps/app/components/issues/view-select/assignee.tsx
index 483f003e3..e5c0eec37 100644
--- a/apps/app/components/issues/view-select/assignee.tsx
+++ b/apps/app/components/issues/view-select/assignee.tsx
@@ -107,13 +107,11 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
           >
             {issue.assignees && issue.assignees.length > 0 && Array.isArray(issue.assignees) ? (
               <div className="-my-0.5 flex items-center justify-center gap-2">
-                <AssigneesList userIds={issue.assignees} length={3} showLength={false} />
-                <span className="text-brand-secondary">{issue.assignees.length} Assignees</span>
+                <AssigneesList userIds={issue.assignees} length={5} showLength={true} />
               </div>
             ) : (
               <div className="flex items-center justify-center gap-2">
                 <UserGroupIcon className="h-4 w-4 text-brand-secondary" />
-                <span className="text-brand-secondary">Assignee</span>
               </div>
             )}
           </div>
diff --git a/apps/app/styles/react-datepicker.css b/apps/app/styles/react-datepicker.css
index ecf5bb9fb..59ce4d9d9 100644
--- a/apps/app/styles/react-datepicker.css
+++ b/apps/app/styles/react-datepicker.css
@@ -21,6 +21,11 @@
   background-color: rgba(var(--color-bg-base)) !important;
 }
 
+.react-datepicker-wrapper,
+.react-datepicker__input-container {
+  border-radius: 0.375rem;
+}
+
 .react-datepicker {
   font-family: "Inter" !important;
   background-color: rgba(var(--color-bg-base)) !important;