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">
{key === "Ctrl" ? (
<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>
) : 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">
<Command className="h-4 w-4 fill-current text-custom-text-200" />
<Command className="h-4 w-4 text-custom-text-200" />
</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">
@ -164,11 +164,11 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
<span key={index} className="flex items-center gap-1">
{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">
<Command className="h-4 w-4 fill-current text-custom-text-200" />
<Command className="h-4 w-4 text-custom-text-200" />
</span>
) : 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">
<Command className="h-4 w-4 fill-current text-custom-text-200" />
<Command className="h-4 w-4 text-custom-text-200" />
</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">

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
size={14}
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>
</Tooltip>

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 ? (

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 })}
>
<option.Icon
sx={{
fontSize: 16,
}}
className={option.type === "gantt_chart" ? "rotate-90" : ""}
/>
<option.Icon className="h-3.5 w-3.5" />
</button>
</Tooltip>
))}

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

@ -151,13 +151,13 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
>
<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"
} ${project.sort_order === null ? "opacity-60 cursor-not-allowed" : ""}`}
{...provided?.dragHandleProps}
>
<MoreVertical className="h-4" />
<MoreVertical className="-ml-5 h-4" />
<MoreVertical className="h-3.5" />
<MoreVertical className="-ml-5 h-3.5" />
</button>
</Tooltip>
)}
@ -210,7 +210,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
{!shortContextMenu && isAdmin && (
<CustomMenu.MenuItem onClick={handleDeleteProjectClick}>
<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>
</CustomMenu.MenuItem>
@ -218,7 +218,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
{!project.is_favorite && (
<CustomMenu.MenuItem onClick={handleAddToFavorites}>
<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>
</CustomMenu.MenuItem>
@ -226,14 +226,14 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
{project.is_favorite && (
<CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
<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>
</CustomMenu.MenuItem>
)}
<CustomMenu.MenuItem onClick={handleCopyText}>
<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>
</CustomMenu.MenuItem>
@ -243,7 +243,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
<CustomMenu.MenuItem onClick={() => projectPublish.handleProjectModal(project?.id)}>
<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">
<Share2 className="h-4 w-4" />
<Share2 className="h-3.5 w-3.5 stroke-[1.5]" />
</div>
<div>{project.is_deployed ? "Publish settings" : "Publish"}</div>
</div>
@ -255,7 +255,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/archived-issues/`)}
>
<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>
</div>
</CustomMenu.MenuItem>
@ -264,7 +264,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/draft-issues`)}
>
<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>
</div>
</CustomMenu.MenuItem>
@ -272,7 +272,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/settings`)}
>
<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>
</div>
</CustomMenu.MenuItem>
@ -281,7 +281,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
{isViewerOrGuest && (
<CustomMenu.MenuItem onClick={handleLeaveProject}>
<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>
</div>
</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"
} ${isCollapsed ? "justify-center" : ""}`}
>
<item.Icon className="h-4 w-4" />
<item.Icon className="h-4 w-4 stroke-[1.5]" />
{!isCollapsed && item.name}
</div>
</Tooltip>

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

@ -198,7 +198,7 @@ export const ProjectSidebarList: FC = observer(() => {
<Disclosure.Button
as="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
{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 === "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>
{direction === "right" && option.hasChildren && <ChevronRight className="h-4 w-4" />}
{direction === "right" && option.hasChildren && <ChevronRight className="h-3.5 w-3.5" />}
</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"
>
<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>
<span className="text-xs">{name}</span>
</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">
<Link href={link.link}>
<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}
</a>
</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"
onClick={handleSignOut}
>
<LogOut className="h-5 w-5" />
<LogOut className="h-4 w-4 stroke-[1.5]" />
Sign out
</Menu.Item>
</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 { Tooltip } from "@plane/ui";
// icons
import { BarChart, Briefcase, CheckCircle, LayoutGrid } from "lucide-react";
import { BarChart2, Briefcase, CheckCircle, LayoutGrid } from "lucide-react";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
import { observer } from "mobx-react-lite";
@ -17,7 +17,7 @@ const workspaceLinks = (workspaceSlug: string) => [
href: `/${workspaceSlug}`,
},
{
Icon: BarChart,
Icon: BarChart2,
name: "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"
} ${themeStore?.sidebarCollapsed ? "justify-center" : ""}`}
>
{<link.Icon className="h-5 w-5" />}
{<link.Icon className="h-[18px] w-[18px]" />}
{!themeStore?.sidebarCollapsed && link.name}
</div>
</Tooltip>