From 734f27122bf5bbb60000a341c0ace449365cbf14 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Wed, 22 Nov 2023 12:58:55 +0530
Subject: [PATCH] Style: UI improvements (#2824)

* style: update notification Read status toast alert description.

* style: update issue subscribe button design.

* fix: remove group_by `none` display filter from the kanban view in profile and draft issues.

* style: design improvement in members settings.
* style: add display name for all user role.
* style: remove email for user roles other than admin.
* style: fix border color as per designs.
---
 web/components/issues/issue-peek-overview/view.tsx  |  1 +
 web/components/issues/sidebar.tsx                   | 13 +++++++------
 web/components/notifications/notification-card.tsx  |  2 +-
 web/components/project/member-list-item.tsx         | 12 ++++++++++--
 .../workspace/settings/members-list-item.tsx        | 12 ++++++++++--
 web/components/workspace/settings/members-list.tsx  |  2 +-
 web/constants/issue.ts                              |  4 ++--
 7 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/web/components/issues/issue-peek-overview/view.tsx b/web/components/issues/issue-peek-overview/view.tsx
index 3d29c1545..88afbd487 100644
--- a/web/components/issues/issue-peek-overview/view.tsx
+++ b/web/components/issues/issue-peek-overview/view.tsx
@@ -225,6 +225,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                       size="sm"
                       prependIcon={<Bell className="h-3 w-3" />}
                       variant="outline-primary"
+                      className="hover:!bg-custom-primary-100/20"
                       onClick={() =>
                         issueSubscription && issueSubscription.subscribed
                           ? issueSubscriptionRemove()
diff --git a/web/components/issues/sidebar.tsx b/web/components/issues/sidebar.tsx
index e67b73baa..c0bb2da18 100644
--- a/web/components/issues/sidebar.tsx
+++ b/web/components/issues/sidebar.tsx
@@ -33,7 +33,7 @@ import {
 import { CustomDatePicker } from "components/ui";
 // icons
 import { Bell, CalendarDays, LinkIcon, Plus, Signal, Tag, Trash2, Triangle, User2 } from "lucide-react";
-import { ContrastIcon, DiceIcon, DoubleCircleIcon, UserGroupIcon } from "@plane/ui";
+import { Button, ContrastIcon, DiceIcon, DoubleCircleIcon, UserGroupIcon } from "@plane/ui";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
@@ -273,17 +273,18 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               !issueDetail?.assignees.includes(user?.id ?? "") &&
               !router.pathname.includes("[archivedIssueId]") &&
               (fieldsToShow.includes("all") || fieldsToShow.includes("subscribe")) && (
-                <button
-                  type="button"
-                  className="rounded-md flex items-center gap-2 border border-custom-primary-100 px-2 py-1 text-xs text-custom-primary-100 shadow-sm duration-300 focus:outline-none"
+                <Button
+                  size="sm"
+                  prependIcon={<Bell className="h-3 w-3" />}
+                  variant="outline-primary"
+                  className="hover:!bg-custom-primary-100/20"
                   onClick={() => {
                     if (subscribed) handleUnsubscribe();
                     else handleSubscribe();
                   }}
                 >
-                  <Bell className="h-3.5 w-3.5" />
                   {loading ? "Loading..." : subscribed ? "Unsubscribe" : "Subscribe"}
-                </button>
+                </Button>
               )}
             {(fieldsToShow.includes("all") || fieldsToShow.includes("link")) && (
               <button
diff --git a/web/components/notifications/notification-card.tsx b/web/components/notifications/notification-card.tsx
index 978d13f0a..774d9a6d8 100644
--- a/web/components/notifications/notification-card.tsx
+++ b/web/components/notifications/notification-card.tsx
@@ -168,7 +168,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
             onClick: () => {
               markNotificationReadStatusToggle(notification.id).then(() => {
                 setToastAlert({
-                  title: notification.read_at ? "Notification marked as unread" : "Notification marked as read",
+                  title: notification.read_at ? "Notification marked as read" : "Notification marked as unread",
                   type: "success",
                 });
               });
diff --git a/web/components/project/member-list-item.tsx b/web/components/project/member-list-item.tsx
index 84d29079c..308ca8827 100644
--- a/web/components/project/member-list-item.tsx
+++ b/web/components/project/member-list-item.tsx
@@ -11,7 +11,7 @@ import { ConfirmProjectMemberRemove } from "components/project";
 // ui
 import { CustomSelect, Tooltip } from "@plane/ui";
 // icons
-import { ChevronDown, XCircle } from "lucide-react";
+import { ChevronDown, Dot, XCircle } from "lucide-react";
 // constants
 import { ROLE } from "constants/workspace";
 // types
@@ -116,7 +116,15 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
             ) : (
               <h4 className="text-sm cursor-default">{member.display_name || member.email}</h4>
             )}
-            <p className="mt-0.5 text-xs text-custom-sidebar-text-300">{member.email ?? member.display_name}</p>
+            <div className="flex items-center">
+              <p className="text-xs text-custom-text-300">{member.display_name}</p>
+              {isAdmin && (
+                <>
+                  <Dot height={16} width={16} className="text-custom-text-300" />
+                  <p className="text-xs text-custom-text-300">{member.email}</p>
+                </>
+              )}
+            </div>
           </div>
         </div>
 
diff --git a/web/components/workspace/settings/members-list-item.tsx b/web/components/workspace/settings/members-list-item.tsx
index d98846e74..7c00f4f12 100644
--- a/web/components/workspace/settings/members-list-item.tsx
+++ b/web/components/workspace/settings/members-list-item.tsx
@@ -11,7 +11,7 @@ import { ConfirmWorkspaceMemberRemove } from "components/workspace";
 // ui
 import { CustomSelect, Tooltip } from "@plane/ui";
 // icons
-import { ChevronDown, XCircle } from "lucide-react";
+import { ChevronDown, Dot, XCircle } from "lucide-react";
 // constants
 import { ROLE } from "constants/workspace";
 import { TUserWorkspaceRole } from "types";
@@ -132,7 +132,15 @@ export const WorkspaceMembersListItem: FC<Props> = (props) => {
             ) : (
               <h4 className="text-sm cursor-default">{member.display_name || member.email}</h4>
             )}
-            <p className="mt-0.5 text-xs text-custom-sidebar-text-300">{member.email ?? member.display_name}</p>
+            <div className="flex items-center">
+              <p className="text-xs text-custom-text-300">{member.display_name}</p>
+              {isAdmin && (
+                <>
+                  <Dot height={16} width={16} className="text-custom-text-300" />
+                  <p className="text-xs text-custom-text-300">{member.email}</p>
+                </>
+              )}
+            </div>
           </div>
         </div>
         <div className="flex items-center gap-2 text-xs">
diff --git a/web/components/workspace/settings/members-list.tsx b/web/components/workspace/settings/members-list.tsx
index b4f263c49..2244c5cad 100644
--- a/web/components/workspace/settings/members-list.tsx
+++ b/web/components/workspace/settings/members-list.tsx
@@ -56,7 +56,7 @@ export const WorkspaceMembersList: FC<{ searchQuery: string }> = observer(({ sea
     );
 
   return (
-    <div className="divide-y-[0.5px] divide-custom-border-200">
+    <div className="divide-y-[0.5px] divide-custom-border-100">
       {workspaceMembersWithInvitations.length > 0
         ? searchedMembers?.map((member) => <WorkspaceMembersListItem key={member.id} member={member} />)
         : null}
diff --git a/web/constants/issue.ts b/web/constants/issue.ts
index d80430d0f..7979672fd 100644
--- a/web/constants/issue.ts
+++ b/web/constants/issue.ts
@@ -239,7 +239,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       filters: ["priority", "state_group", "labels", "start_date", "target_date"],
       display_properties: true,
       display_filters: {
-        group_by: ["state_detail.group", "priority", "project", "labels", null],
+        group_by: ["state_detail.group", "priority", "project", "labels"],
         order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
         type: [null, "active", "backlog"],
       },
@@ -282,7 +282,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       filters: ["priority", "state_group", "labels", "start_date", "target_date"],
       display_properties: true,
       display_filters: {
-        group_by: ["state_detail.group", "priority", "project", "labels", null],
+        group_by: ["state_detail.group", "priority", "project", "labels"],
         order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
         type: [null, "active", "backlog"],
       },