thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/components/command-palette/shortcuts-modal.tsx
View File

@ -121,11 +121,11 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
<span key={index} className="flex items-center gap-1"> <span key={index} className="flex items-center gap-1">
{key === "Ctrl" ? ( {key === "Ctrl" ? (
<span className="flex h-full items-center rounded-sm border border-custom-border-200 bg-custom-background-90 p-1.5"> <span className="flex h-full items-center rounded-sm border border-custom-border-200 bg-custom-background-90 p-1.5">
<Command className="h-4 w-4 fill-current text-custom-text-200" /> <Command className="h-4 w-4 text-custom-text-200" />
</span> </span>
) : key === "Ctrl" ? ( ) : key === "Ctrl" ? (
<kbd className="rounded-sm border border-custom-border-200 bg-custom-background-90 p-1.5 text-sm font-medium text-custom-text-200"> <kbd className="rounded-sm border border-custom-border-200 bg-custom-background-90 p-1.5 text-sm font-medium text-custom-text-200">
<Command className="h-4 w-4 fill-current text-custom-text-200" /> <Command className="h-4 w-4 text-custom-text-200" />
</kbd> </kbd>
) : ( ) : (
<kbd className="rounded-sm border border-custom-border-200 bg-custom-background-90 px-2 py-1 text-sm font-medium text-custom-text-200"> <kbd className="rounded-sm border border-custom-border-200 bg-custom-background-90 px-2 py-1 text-sm font-medium text-custom-text-200">
@ -164,11 +164,11 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
<span key={index} className="flex items-center gap-1"> <span key={index} className="flex items-center gap-1">
{key === "Ctrl" ? ( {key === "Ctrl" ? (
<span className="flex h-full items-center rounded-sm border border-custom-border-200 bg-custom-background-90 p-1.5 text-custom-text-200"> <span className="flex h-full items-center rounded-sm border border-custom-border-200 bg-custom-background-90 p-1.5 text-custom-text-200">
<Command className="h-4 w-4 fill-current text-custom-text-200" /> <Command className="h-4 w-4 text-custom-text-200" />
</span> </span>
) : key === "Ctrl" ? ( ) : key === "Ctrl" ? (
<kbd className="rounded-sm border border-custom-border-200 bg-custom-background-90 p-1.5 text-sm font-medium text-custom-text-200"> <kbd className="rounded-sm border border-custom-border-200 bg-custom-background-90 p-1.5 text-sm font-medium text-custom-text-200">
<Command className="h-4 w-4 fill-current text-custom-text-200" /> <Command className="h-4 w-4 text-custom-text-200" />
</kbd> </kbd>
) : ( ) : (
<kbd className="rounded-sm border border-custom-border-200 bg-custom-background-90 px-2 py-1 text-sm font-medium text-custom-text-200"> <kbd className="rounded-sm border border-custom-border-200 bg-custom-background-90 px-2 py-1 text-sm font-medium text-custom-text-200">

4
web/components/issues/issue-layouts/filters/header/layout-selection.tsx
View File

@ -30,7 +30,9 @@ export const LayoutSelection: React.FC<Props> = (props) => {
<layout.icon <layout.icon
size={14} size={14}
strokeWidth={2} strokeWidth={2}
className={`${selectedLayout == layout.key ? "text-custom-text-100" : "text-custom-text-200"}`} className={`h-3.5 w-3.5 ${
selectedLayout == layout.key ? "text-custom-text-100" : "text-custom-text-200"
}`}
/> />
</button> </button>
</Tooltip> </Tooltip>

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

@ -9,7 +9,7 @@ import useToast from "hooks/use-toast";
// icons // icons
import { CustomMenu } from "components/ui"; import { CustomMenu } from "components/ui";
import { ArchiveIcon, Tooltip } from "@plane/ui"; import { ArchiveIcon, Tooltip } from "@plane/ui";
import { ArchiveRestore, Clock, User2 } from "lucide-react"; import { ArchiveRestore, Clock, MessageSquare, User2 } from "lucide-react";
// helper // helper
import { stripHTML, replaceUnderscoreIfSnakeCase, truncateText } from "helpers/string.helper"; import { stripHTML, replaceUnderscoreIfSnakeCase, truncateText } from "helpers/string.helper";
@ -160,7 +160,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
{ {
id: 1, id: 1,
name: notification.read_at ? "Mark as unread" : "Mark as read", 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: () => { onClick: () => {
markNotificationReadStatusToggle(notification.id).then(() => { markNotificationReadStatusToggle(notification.id).then(() => {
setToastAlert({ setToastAlert({
@ -174,9 +174,9 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
id: 2, id: 2,
name: notification.archived_at ? "Unarchive" : "Archive", name: notification.archived_at ? "Unarchive" : "Archive",
icon: notification.archived_at ? ( 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: () => { onClick: () => {
markNotificationArchivedStatus(notification.id).then(() => { markNotificationArchivedStatus(notification.id).then(() => {
@ -204,43 +204,42 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
))} ))}
<Tooltip tooltipContent="Snooze"> <Tooltip tooltipContent="Snooze">
<div> <CustomMenu
<CustomMenu className="flex items-center"
menuButtonOnClick={(e: { stopPropagation: () => void }) => { menuButtonOnClick={(e: { stopPropagation: () => void }) => {
e.stopPropagation(); e.stopPropagation();
}} }}
customButton={ 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"> <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" /> <Clock className="h-3.5 w-3.5 text-custom-text-300" />
</div> </div>
} }
optionsClassName="!z-20" optionsClassName="!z-20"
> >
{snoozeOptions.map((item) => ( {snoozeOptions.map((item) => (
<CustomMenu.MenuItem <CustomMenu.MenuItem
key={item.label} key={item.label}
renderAs="button" renderAs="button"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
if (!item.value) { if (!item.value) {
setSelectedNotificationForSnooze(notification.id); setSelectedNotificationForSnooze(notification.id);
return; return;
} }
markSnoozeNotification(notification.id, item.value).then(() => { markSnoozeNotification(notification.id, item.value).then(() => {
setToastAlert({ setToastAlert({
title: `Notification snoozed till ${renderLongDateFormat(item.value)}`, title: `Notification snoozed till ${renderLongDateFormat(item.value)}`,
type: "success", type: "success",
});
}); });
}} });
> }}
{item.label} >
</CustomMenu.MenuItem> {item.label}
))} </CustomMenu.MenuItem>
</CustomMenu> ))}
</div> </CustomMenu>
</Tooltip> </Tooltip>
</div> </div>
</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" : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
} ${store?.theme?.sidebarCollapsed ? "justify-center" : ""}`} } ${store?.theme?.sidebarCollapsed ? "justify-center" : ""}`}
> >
<Bell className="h-5 w-5" /> <Bell className="h-[18px] w-[18px]" />
{store?.theme?.sidebarCollapsed ? null : <span>Notifications</span>} {store?.theme?.sidebarCollapsed ? null : <span>Notifications</span>}
{totalNotificationCount && totalNotificationCount > 0 ? ( {totalNotificationCount && totalNotificationCount > 0 ? (
store?.theme?.sidebarCollapsed ? ( store?.theme?.sidebarCollapsed ? (

7
web/components/profile/profile-issues-view-options.tsx
View File

@ -69,12 +69,7 @@ export const ProfileIssuesViewOptions: React.FC = () => {
}`} }`}
onClick={() => setDisplayFilters({ layout: option.type })} onClick={() => setDisplayFilters({ layout: option.type })}
> >
<option.Icon <option.Icon className="h-3.5 w-3.5" />
sx={{
fontSize: 16,
}}
className={option.type === "gantt_chart" ? "rotate-90" : ""}
/>
</button> </button>
</Tooltip> </Tooltip>
))} ))}

26
web/components/project/sidebar-list-item.tsx
View File

@ -151,13 +151,13 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
> >
<button <button
type="button" type="button"
className={`absolute top-1/2 -translate-y-1/2 -left-4 hidden rounded p-0.5 text-custom-sidebar-text-400 ${ className={`absolute top-1/2 -translate-y-1/2 -left-2.5 hidden rounded p-0.5 text-custom-sidebar-text-400 ${
isCollapsed ? "" : "group-hover:!flex" isCollapsed ? "" : "group-hover:!flex"
} ${project.sort_order === null ? "opacity-60 cursor-not-allowed" : ""}`} } ${project.sort_order === null ? "opacity-60 cursor-not-allowed" : ""}`}
{...provided?.dragHandleProps} {...provided?.dragHandleProps}
> >
<MoreVertical className="h-4" /> <MoreVertical className="h-3.5" />
<MoreVertical className="-ml-5 h-4" /> <MoreVertical className="-ml-5 h-3.5" />
</button> </button>
</Tooltip> </Tooltip>
)} )}
@ -210,7 +210,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
{!shortContextMenu && isAdmin && ( {!shortContextMenu && isAdmin && (
<CustomMenu.MenuItem onClick={handleDeleteProjectClick}> <CustomMenu.MenuItem onClick={handleDeleteProjectClick}>
<span className="flex items-center justify-start gap-2 "> <span className="flex items-center justify-start gap-2 ">
<Trash2 className="h-4 w-4" /> <Trash2 className="h-3.5 w-3.5 stroke-[1.5]" />
<span>Delete project</span> <span>Delete project</span>
</span> </span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
@ -218,7 +218,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
{!project.is_favorite && ( {!project.is_favorite && (
<CustomMenu.MenuItem onClick={handleAddToFavorites}> <CustomMenu.MenuItem onClick={handleAddToFavorites}>
<span className="flex items-center justify-start gap-2"> <span className="flex items-center justify-start gap-2">
<Star className="h-4 w-4" /> <Star className="h-3.5 w-3.5 stroke-[1.5]" />
<span>Add to favorites</span> <span>Add to favorites</span>
</span> </span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
@ -226,14 +226,14 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
{project.is_favorite && ( {project.is_favorite && (
<CustomMenu.MenuItem onClick={handleRemoveFromFavorites}> <CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
<span className="flex items-center justify-start gap-2"> <span className="flex items-center justify-start gap-2">
<Star className="h-4 w-4 text-orange-400" fill="#f6ad55" /> <Star className="h-3.5 w-3.5 stroke-[1.5] text-orange-400" fill="#f6ad55" />
<span>Remove from favorites</span> <span>Remove from favorites</span>
</span> </span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
)} )}
<CustomMenu.MenuItem onClick={handleCopyText}> <CustomMenu.MenuItem onClick={handleCopyText}>
<span className="flex items-center justify-start gap-2"> <span className="flex items-center justify-start gap-2">
<LinkIcon className="h-4 w-4" /> <LinkIcon className="h-3.5 w-3.5 stroke-[1.5]" />
<span>Copy project link</span> <span>Copy project link</span>
</span> </span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
@ -243,7 +243,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
<CustomMenu.MenuItem onClick={() => projectPublish.handleProjectModal(project?.id)}> <CustomMenu.MenuItem onClick={() => projectPublish.handleProjectModal(project?.id)}>
<div className="flex-shrink-0 relative flex items-center justify-start gap-2"> <div className="flex-shrink-0 relative flex items-center justify-start gap-2">
<div className="rounded transition-all w-4 h-4 flex justify-center items-center text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 duration-300 cursor-pointer"> <div className="rounded transition-all w-4 h-4 flex justify-center items-center text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 duration-300 cursor-pointer">
<Share2 className="h-4 w-4" /> <Share2 className="h-3.5 w-3.5 stroke-[1.5]" />
</div> </div>
<div>{project.is_deployed ? "Publish settings" : "Publish"}</div> <div>{project.is_deployed ? "Publish settings" : "Publish"}</div>
</div> </div>
@ -255,7 +255,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/archived-issues/`)} onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/archived-issues/`)}
> >
<div className="flex items-center justify-start gap-2"> <div className="flex items-center justify-start gap-2">
<ArchiveIcon className="h-3.5 w-3.5" /> <ArchiveIcon className="h-3.5 w-3.5 stroke-[1.5]" />
<span>Archived Issues</span> <span>Archived Issues</span>
</div> </div>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
@ -264,7 +264,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/draft-issues`)} onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/draft-issues`)}
> >
<div className="flex items-center justify-start gap-2"> <div className="flex items-center justify-start gap-2">
<PenSquare className="!text-base !leading-4 w-[14px] h-[14px] text-custom-text-300" /> <PenSquare className="h-3.5 w-3.5 stroke-[1.5] text-custom-text-300" />
<span>Draft Issues</span> <span>Draft Issues</span>
</div> </div>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
@ -272,7 +272,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/settings`)} onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/settings`)}
> >
<div className="flex items-center justify-start gap-2"> <div className="flex items-center justify-start gap-2">
<Settings className="h-4 w-4" /> <Settings className="h-3.5 w-3.5 stroke-[1.5]" />
<span>Settings</span> <span>Settings</span>
</div> </div>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
@ -281,7 +281,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
{isViewerOrGuest && ( {isViewerOrGuest && (
<CustomMenu.MenuItem onClick={handleLeaveProject}> <CustomMenu.MenuItem onClick={handleLeaveProject}>
<div className="flex items-center justify-start gap-2"> <div className="flex items-center justify-start gap-2">
<LogOut className="h-4 w-4" /> <LogOut className="h-3.5 w-3.5 stroke-[1.5]" />
<span>Leave Project</span> <span>Leave Project</span>
</div> </div>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
@ -324,7 +324,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80" : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
} ${isCollapsed ? "justify-center" : ""}`} } ${isCollapsed ? "justify-center" : ""}`}
> >
<item.Icon className="h-4 w-4" /> <item.Icon className="h-4 w-4 stroke-[1.5]" />
{!isCollapsed && item.name} {!isCollapsed && item.name}
</div> </div>
</Tooltip> </Tooltip>

2
web/components/project/sidebar-list.tsx
View File

@ -198,7 +198,7 @@ export const ProjectSidebarList: FC = observer(() => {
<Disclosure.Button <Disclosure.Button
as="button" as="button"
type="button" type="button"
className="flex items-center gap-1 font-semibold text-left whitespace-nowrap" className="group flex items-center gap-1 px-1.5 text-xs font-semibold text-custom-sidebar-text-400 text-left hover:bg-custom-sidebar-background-80 rounded w-full whitespace-nowrap"
> >
Projects Projects
{open ? ( {open ? (

4
web/components/ui/multi-level-dropdown.tsx
View File

@ -93,9 +93,9 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
direction === "right" ? "justify-between" : "" direction === "right" ? "justify-between" : ""
}`} }`}
> >
{direction === "left" && option.hasChildren && <ChevronLeft className="h-4 w-4" />} {direction === "left" && option.hasChildren && <ChevronLeft className="h-3.5 w-3.5" />}
<span>{option.label}</span> <span>{option.label}</span>
{direction === "right" && option.hasChildren && <ChevronRight className="h-4 w-4" />} {direction === "right" && option.hasChildren && <ChevronRight className="h-3.5 w-3.5" />}
</div> </div>
</> </>
)} )}

2
web/components/workspace/help-section.tsx
View File

@ -148,7 +148,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
className="flex w-full items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80" className="flex w-full items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80"
> >
<div className="grid place-items-center flex-shrink-0"> <div className="grid place-items-center flex-shrink-0">
<Icon className="text-custom-text-200 h-3.5 w-3.5" size={14} /> <Icon className="text-custom-text-200 h-3.5 w-3.5" />
</div> </div>
<span className="text-xs">{name}</span> <span className="text-xs">{name}</span>
</button> </button>

4
web/components/workspace/sidebar-dropdown.tsx
View File

@ -266,7 +266,7 @@ export const WorkspaceSidebarDropdown = () => {
<Menu.Item key={index} as="button" type="button"> <Menu.Item key={index} as="button" type="button">
<Link href={link.link}> <Link href={link.link}>
<a className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"> <a className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80">
<link.icon className="h-4 w-4" /> <link.icon className="h-4 w-4 stroke-[1.5]" />
{link.name} {link.name}
</a> </a>
</Link> </Link>
@ -280,7 +280,7 @@ export const WorkspaceSidebarDropdown = () => {
className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80" className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
onClick={handleSignOut} onClick={handleSignOut}
> >
<LogOut className="h-5 w-5" /> <LogOut className="h-4 w-4 stroke-[1.5]" />
Sign out Sign out
</Menu.Item> </Menu.Item>
</div> </div>

6
web/components/workspace/sidebar-menu.tsx
View File

@ -5,7 +5,7 @@ import { useRouter } from "next/router";
import { NotificationPopover } from "components/notifications"; import { NotificationPopover } from "components/notifications";
import { Tooltip } from "@plane/ui"; import { Tooltip } from "@plane/ui";
// icons // icons
import { BarChart, Briefcase, CheckCircle, LayoutGrid } from "lucide-react"; import { BarChart2, Briefcase, CheckCircle, LayoutGrid } from "lucide-react";
// mobx store // mobx store
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
@ -17,7 +17,7 @@ const workspaceLinks = (workspaceSlug: string) => [
href: `/${workspaceSlug}`, href: `/${workspaceSlug}`,
}, },
{ {
Icon: BarChart, Icon: BarChart2,
name: "Analytics", name: "Analytics",
href: `/${workspaceSlug}/analytics`, href: `/${workspaceSlug}/analytics`,
}, },
@ -60,7 +60,7 @@ export const WorkspaceSidebarMenu = observer(() => {
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80" : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
} ${themeStore?.sidebarCollapsed ? "justify-center" : ""}`} } ${themeStore?.sidebarCollapsed ? "justify-center" : ""}`}
> >
{<link.Icon className="h-5 w-5" />} {<link.Icon className="h-[18px] w-[18px]" />}
{!themeStore?.sidebarCollapsed && link.name} {!themeStore?.sidebarCollapsed && link.name}
</div> </div>
</Tooltip> </Tooltip>