binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: icon improvement (#2456)

Browse source 
* style: app sidebar icon improvement

* style: profile section icon improvement

* style: notification popover icon improvement

* style: shortcut modal icon improvement
This commit is contained in:
Anmol Singh Bhatia 2023-10-17 15:27:38 +05:30 • committed by GitHub
parent 0b79f8687e
commit 399af30b9a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 68 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

75
web/components/notifications/notification-card.tsx
View file

@ -9,7 +9,7 @@ import useToast from "hooks/use-toast";
// icons
import { CustomMenu } from "components/ui";
import { ArchiveIcon, Tooltip } from "@plane/ui";
import { ArchiveRestore, Clock, User2 } from "lucide-react";
import { ArchiveRestore, Clock, MessageSquare, User2 } from "lucide-react";
// helper
import { stripHTML, replaceUnderscoreIfSnakeCase, truncateText } from "helpers/string.helper";
@ -160,7 +160,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
{
id: 1,
name: notification.read_at ? "Mark as unread" : "Mark as read",
icon: "chat_bubble",
icon: <MessageSquare className="h-3.5 w-3.5 text-custom-text-300" />,
onClick: () => {
markNotificationReadStatusToggle(notification.id).then(() => {
setToastAlert({
@ -174,9 +174,9 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
id: 2,
name: notification.archived_at ? "Unarchive" : "Archive",
icon: notification.archived_at ? (
<ArchiveRestore className="h-4 w-4 text-custom-text-300" />
<ArchiveRestore className="h-3.5 w-3.5 text-custom-text-300" />
) : (
<ArchiveIcon className="h-4 w-4 text-custom-text-300" />
<ArchiveIcon className="h-3.5 w-3.5 text-custom-text-300" />
),
onClick: () => {
markNotificationArchivedStatus(notification.id).then(() => {
@ -204,43 +204,42 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
))}
<Tooltip tooltipContent="Snooze">
<div>
<CustomMenu
menuButtonOnClick={(e: { stopPropagation: () => void }) => {
e.stopPropagation();
}}
customButton={
<div className="text-sm flex w-full items-center gap-x-2 bg-custom-background-80 hover:bg-custom-background-100 p-0.5 rounded">
<Clock className="h-4 w-4 text-custom-text-300" />
</div>
}
optionsClassName="!z-20"
>
{snoozeOptions.map((item) => (
<CustomMenu.MenuItem
key={item.label}
renderAs="button"
onClick={(e) => {
e.stopPropagation();
<CustomMenu
className="flex items-center"
menuButtonOnClick={(e: { stopPropagation: () => void }) => {
e.stopPropagation();
}}
customButton={
<div className="text-sm flex w-full items-center gap-x-2 bg-custom-background-80 hover:bg-custom-background-100 p-0.5 rounded">
<Clock className="h-3.5 w-3.5 text-custom-text-300" />
</div>
}
optionsClassName="!z-20"
>
{snoozeOptions.map((item) => (
<CustomMenu.MenuItem
key={item.label}
renderAs="button"
onClick={(e) => {
e.stopPropagation();
if (!item.value) {
setSelectedNotificationForSnooze(notification.id);
return;
}
if (!item.value) {
setSelectedNotificationForSnooze(notification.id);
return;
}
markSnoozeNotification(notification.id, item.value).then(() => {
setToastAlert({
title: `Notification snoozed till ${renderLongDateFormat(item.value)}`,
type: "success",
});
markSnoozeNotification(notification.id, item.value).then(() => {
setToastAlert({
title: `Notification snoozed till ${renderLongDateFormat(item.value)}`,
type: "success",
});
}}
>
{item.label}
</CustomMenu.MenuItem>
))}
</CustomMenu>
</div>
});
}}
>
{item.label}
</CustomMenu.MenuItem>
))}
</CustomMenu>
</Tooltip>
</div>
</div>

2
web/components/notifications/notification-popover.tsx
View file

@ -75,7 +75,7 @@ export const NotificationPopover = () => {
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
} ${store?.theme?.sidebarCollapsed ? "justify-center" : ""}`}
>
<Bell className="h-5 w-5" />
<Bell className="h-[18px] w-[18px]" />
{store?.theme?.sidebarCollapsed ? null : <span>Notifications</span>}
{totalNotificationCount && totalNotificationCount > 0 ? (
store?.theme?.sidebarCollapsed ? (