chore: icon revamp and refactor (#2447)
* chore: svg icons added in plane/ui package * chore: swap priority and state icon with plane/ui icons * chore: replace core folder icons with lucide and plane ui icons * style: priority icon size * chore: replace icons with lucide and plane/ui icons * chore: replace cycle folder icons with lucide and plane/ui icons * chore: replace existing icons with lucide and plane/ui icons * chore: replace existing icons with lucide and plane/ui icons * chore: replace existing icons with lucide and plane/ui icons * chore: replace existing icons with lucide and plane/ui icons * chore: replace existing icons with lucide and plane/ui icons * fix: build error * fix: build error * fix: build error
This commit is contained in:
Anmol Singh Bhatia
GitHub
parent
1fc5d2bd45
commit
651b252c23
270 changed files with 2567 additions and 1480 deletions
|
|
@ -3,9 +3,10 @@ import Link from "next/link";
|
|||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// ui
|
||||
import { CustomSelect, Icon } from "components/ui";
|
||||
import { CustomSelect } from "components/ui";
|
||||
// icons
|
||||
import { East, OpenInFull } from "@mui/icons-material";
|
||||
import { FullScreenPeekIcon, ModalPeekIcon, SidePeekIcon } from "@plane/ui";
|
||||
import { LinkIcon, MoveRight, Trash2 } from "lucide-react";
|
||||
// helpers
|
||||
import { copyTextToClipboard } from "helpers/string.helper";
|
||||
// types
|
||||
|
|
@ -23,18 +24,18 @@ type Props = {
|
|||
|
||||
const peekModes: {
|
||||
key: TPeekOverviewModes;
|
||||
icon: string;
|
||||
icon: any;
|
||||
label: string;
|
||||
}[] = [
|
||||
{ key: "side", icon: "side_navigation", label: "Side Peek" },
|
||||
{ key: "side", icon: SidePeekIcon, label: "Side Peek" },
|
||||
{
|
||||
key: "modal",
|
||||
icon: "dialogs",
|
||||
icon: ModalPeekIcon,
|
||||
label: "Modal Peek",
|
||||
},
|
||||
{
|
||||
key: "full",
|
||||
icon: "nearby",
|
||||
icon: FullScreenPeekIcon,
|
||||
label: "Full Screen Peek",
|
||||
},
|
||||
];
|
||||
|
|
@ -61,48 +62,34 @@ export const PeekOverviewHeader: React.FC<Props> = ({
|
|||
});
|
||||
};
|
||||
|
||||
const currentMode = peekModes.find((m) => m.key === mode);
|
||||
|
||||
return (
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center gap-4">
|
||||
{mode === "side" && (
|
||||
<button type="button" onClick={handleClose}>
|
||||
<East
|
||||
sx={{
|
||||
fontSize: "14px",
|
||||
}}
|
||||
/>
|
||||
<MoveRight className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
)}
|
||||
<Link href={`/${workspaceSlug}/projects/${issue?.project}/issues/${issue?.id}`}>
|
||||
<a>
|
||||
<OpenInFull
|
||||
sx={{
|
||||
fontSize: "14px",
|
||||
}}
|
||||
/>
|
||||
<FullScreenPeekIcon className="h-3.5 w-3.5" />
|
||||
</a>
|
||||
</Link>
|
||||
<CustomSelect
|
||||
value={mode}
|
||||
onChange={(val: TPeekOverviewModes) => setMode(val)}
|
||||
customButton={
|
||||
<button
|
||||
type="button"
|
||||
className={`grid place-items-center ${mode === "full" ? "rotate-45" : ""}`}
|
||||
>
|
||||
<Icon iconName={peekModes.find((m) => m.key === mode)?.icon ?? ""} />
|
||||
<button type="button" className={`grid place-items-center ${mode === "full" ? "rotate-45" : ""}`}>
|
||||
{currentMode && <currentMode.icon className="h-3.5 w-3.5" />}
|
||||
</button>
|
||||
}
|
||||
>
|
||||
{peekModes.map((mode) => (
|
||||
<CustomSelect.Option key={mode.key} value={mode.key}>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Icon
|
||||
iconName={mode.icon}
|
||||
className={`!text-base flex-shrink-0 -my-1 ${
|
||||
mode.key === "full" ? "rotate-45" : ""
|
||||
}`}
|
||||
/>
|
||||
<mode.icon className={`h-4 w-4 flex-shrink-0 -my-1 ${mode.key === "full" ? "rotate-45" : ""}`} />
|
||||
{mode.label}
|
||||
</div>
|
||||
</CustomSelect.Option>
|
||||
|
|
@ -112,10 +99,10 @@ export const PeekOverviewHeader: React.FC<Props> = ({
|
|||
{(mode === "side" || mode === "modal") && (
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
<button type="button" onClick={handleCopyLink} className="-rotate-45">
|
||||
<Icon iconName="link" />
|
||||
<LinkIcon className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<button type="button" onClick={handleDeleteIssue}>
|
||||
<Icon iconName="delete" />
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { FC } from "react";
|
||||
// components
|
||||
import { StateGroupIcon } from "components/icons";
|
||||
import { DoubleCircleIcon, StateGroupIcon, UserGroupIcon } from "@plane/ui";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
|
|
@ -11,11 +11,12 @@ import {
|
|||
TPeekOverviewModes,
|
||||
} from "components/issues";
|
||||
// ui
|
||||
import { CustomDatePicker, Icon } from "components/ui";
|
||||
import { CustomDatePicker } from "components/ui";
|
||||
// helpers
|
||||
import { copyTextToClipboard } from "helpers/string.helper";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
import { CalendarDays, LinkIcon, Signal, Trash2 } from "lucide-react";
|
||||
|
||||
type Props = {
|
||||
handleDeleteIssue: () => void;
|
||||
|
|
@ -62,10 +63,10 @@ export const PeekOverviewIssueProperties: FC<Props> = (props) => {
|
|||
</h6>
|
||||
<div className="flex items-center gap-2">
|
||||
<button type="button" onClick={handleCopyLink} className="-rotate-45">
|
||||
<Icon iconName="link" />
|
||||
<LinkIcon className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<button type="button" onClick={handleDeleteIssue}>
|
||||
<Icon iconName="delete" />
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -73,7 +74,7 @@ export const PeekOverviewIssueProperties: FC<Props> = (props) => {
|
|||
<div className={`space-y-4 ${mode === "full" ? "pt-3" : ""}`}>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
|
||||
<Icon iconName="radio_button_checked" className="!text-base flex-shrink-0" />
|
||||
<DoubleCircleIcon className="h-3.5 w-3.5 flex-shrink-0" />
|
||||
<span className="flex-grow truncate">State</span>
|
||||
</div>
|
||||
<div className="w-3/4">
|
||||
|
|
@ -86,7 +87,7 @@ export const PeekOverviewIssueProperties: FC<Props> = (props) => {
|
|||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
|
||||
<Icon iconName="group" className="!text-base flex-shrink-0" />
|
||||
<UserGroupIcon className="h-3.5 w-3.5" />
|
||||
<span className="flex-grow truncate">Assignees</span>
|
||||
</div>
|
||||
<div className="w-3/4">
|
||||
|
|
@ -99,7 +100,7 @@ export const PeekOverviewIssueProperties: FC<Props> = (props) => {
|
|||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
|
||||
<Icon iconName="signal_cellular_alt" className="!text-base flex-shrink-0" />
|
||||
<Signal className="h-3.5 w-3.5" />
|
||||
<span className="flex-grow truncate">Priority</span>
|
||||
</div>
|
||||
<div className="w-3/4">
|
||||
|
|
@ -112,7 +113,7 @@ export const PeekOverviewIssueProperties: FC<Props> = (props) => {
|
|||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
|
||||
<Icon iconName="calendar_today" className="!text-base flex-shrink-0" />
|
||||
<CalendarDays className="h-3.5 w-3.5" />
|
||||
<span className="flex-grow truncate">Start date</span>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -132,7 +133,7 @@ export const PeekOverviewIssueProperties: FC<Props> = (props) => {
|
|||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
|
||||
<Icon iconName="calendar_today" className="!text-base flex-shrink-0" />
|
||||
<CalendarDays className="h-3.5 w-3.5" />
|
||||
<span className="flex-grow truncate">Due date</span>
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue