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

@@ -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()

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
+                <Button
-                  type="button"
+                  size="sm"
-                  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"
+                  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

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",
                 });
               });

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>
 

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">

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}

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"],
       },