github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: icon revamp and refactor (#2447)

Browse Source 
* 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 2023-10-16 20:27:22 +05:30 committed by GitHub
parent 1fc5d2bd45
commit 651b252c23
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
270 changed files with 2567 additions and 1480 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
packages/editor/lite-text-editor/src/ui/index.tsx
View File

@ -1,8 +1,13 @@
"use client" "use client";
import * as React from 'react'; import * as React from "react";
import { EditorContainer, EditorContentWrapper, getEditorClassNames, useEditor } from '@plane/editor-core'; import {
import { FixedMenu } from './menus/fixed-menu'; EditorContainer,
import { LiteTextEditorExtensions } from './extensions'; EditorContentWrapper,
getEditorClassNames,
useEditor,
} from "@plane/editor-core";
import { FixedMenu } from "./menus/fixed-menu";
import { LiteTextEditorExtensions } from "./extensions";
export type UploadImage = (file: File) => Promise<string>; export type UploadImage = (file: File) => Promise<string>;
export type DeleteImage = (assetUrlWithWorkspaceId: string) => Promise<any>; export type DeleteImage = (assetUrlWithWorkspaceId: string) => Promise<any>;
@ -16,19 +21,21 @@ interface ILiteTextEditor {
customClassName?: string; customClassName?: string;
editorContentCustomClassNames?: string; editorContentCustomClassNames?: string;
onChange?: (json: any, html: string) => void; onChange?: (json: any, html: string) => void;
setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void; setIsSubmitting?: (
isSubmitting: "submitting" | "submitted" | "saved"
) => void;
setShouldShowAlert?: (showAlert: boolean) => void; setShouldShowAlert?: (showAlert: boolean) => void;
forwardedRef?: any; forwardedRef?: any;
debouncedUpdatesEnabled?: boolean; debouncedUpdatesEnabled?: boolean;
commentAccessSpecifier?: { commentAccessSpecifier?: {
accessValue: string, accessValue: string;
onAccessChange: (accessKey: string) => void, onAccessChange: (accessKey: string) => void;
showAccessSpecifier: boolean, showAccessSpecifier: boolean;
commentAccess: { commentAccess: {
icon: string; icon: any;
key: string; key: string;
label: "Private" | "Public"; label: "Private" | "Public";
}[] }[];
}; };
onEnterKeyPress?: (e?: any) => void; onEnterKeyPress?: (e?: any) => void;
} }
@ -56,7 +63,7 @@ const LiteTextEditor = ({
customClassName, customClassName,
forwardedRef, forwardedRef,
commentAccessSpecifier, commentAccessSpecifier,
onEnterKeyPress onEnterKeyPress,
}: LiteTextEditorProps) => { }: LiteTextEditorProps) => {
const editor = useEditor({ const editor = useEditor({
onChange, onChange,
@ -70,25 +77,37 @@ const LiteTextEditor = ({
extensions: LiteTextEditorExtensions(onEnterKeyPress), extensions: LiteTextEditorExtensions(onEnterKeyPress),
}); });
const editorClassNames = getEditorClassNames({ noBorder, borderOnFocus, customClassName }); const editorClassNames = getEditorClassNames({
noBorder,
borderOnFocus,
customClassName,
});
if (!editor) return null; if (!editor) return null;
return ( return (
<EditorContainer editor={editor} editorClassNames={editorClassNames}> <EditorContainer editor={editor} editorClassNames={editorClassNames}>
<div className="flex flex-col"> <div className="flex flex-col">
<EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} /> <EditorContentWrapper
editor={editor}
editorContentCustomClassNames={editorContentCustomClassNames}
/>
<div className="w-full mt-4"> <div className="w-full mt-4">
<FixedMenu editor={editor} uploadFile={uploadFile} setIsSubmitting={setIsSubmitting} commentAccessSpecifier={commentAccessSpecifier} /> <FixedMenu
editor={editor}
uploadFile={uploadFile}
setIsSubmitting={setIsSubmitting}
commentAccessSpecifier={commentAccessSpecifier}
/>
</div> </div>
</div> </div>
</EditorContainer > </EditorContainer>
); );
}; };
const LiteTextEditorWithRef = React.forwardRef<EditorHandle, ILiteTextEditor>((props, ref) => ( const LiteTextEditorWithRef = React.forwardRef<EditorHandle, ILiteTextEditor>(
<LiteTextEditor {...props} forwardedRef={ref} /> (props, ref) => <LiteTextEditor {...props} forwardedRef={ref} />
)); );
LiteTextEditorWithRef.displayName = "LiteTextEditorWithRef"; LiteTextEditorWithRef.displayName = "LiteTextEditorWithRef";

88
packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
View File

@ -1,7 +1,19 @@
import { Editor } from "@tiptap/react"; import { Editor } from "@tiptap/react";
import { BoldIcon } from "lucide-react"; import { BoldIcon, LucideIcon } from "lucide-react";
import { BoldItem, BulletListItem, cn, CodeItem, ImageItem, ItalicItem, NumberedListItem, QuoteItem, StrikeThroughItem, TableItem, UnderLineItem } from "@plane/editor-core"; import {
BoldItem,
BulletListItem,
cn,
CodeItem,
ImageItem,
ItalicItem,
NumberedListItem,
QuoteItem,
StrikeThroughItem,
TableItem,
UnderLineItem,
} from "@plane/editor-core";
import { Icon } from "./icon"; import { Icon } from "./icon";
import { Tooltip } from "../../tooltip"; import { Tooltip } from "../../tooltip";
import { UploadImage } from "../.."; import { UploadImage } from "../..";
@ -16,18 +28,22 @@ export interface BubbleMenuItem {
type EditorBubbleMenuProps = { type EditorBubbleMenuProps = {
editor: Editor; editor: Editor;
commentAccessSpecifier?: { commentAccessSpecifier?: {
accessValue: string, accessValue: string;
onAccessChange: (accessKey: string) => void, onAccessChange: (accessKey: string) => void;
showAccessSpecifier: boolean, showAccessSpecifier: boolean;
commentAccess: { commentAccess:
icon: string; | {
key: string; icon: any;
label: "Private" | "Public"; key: string;
}[] | undefined; label: "Private" | "Public";
} }[]
| undefined;
};
uploadFile: UploadImage; uploadFile: UploadImage;
setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void; setIsSubmitting?: (
} isSubmitting: "submitting" | "submitted" | "saved"
) => void;
};
export const FixedMenu = (props: EditorBubbleMenuProps) => { export const FixedMenu = (props: EditorBubbleMenuProps) => {
const basicMarkItems: BubbleMenuItem[] = [ const basicMarkItems: BubbleMenuItem[] = [
@ -56,31 +72,33 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
props.commentAccessSpecifier?.onAccessChange(accessKey); props.commentAccessSpecifier?.onAccessChange(accessKey);
}; };
return ( return (
<div <div className="flex w-fit divide-x divide-custom-border-300 rounded border border-custom-border-300 bg-custom-background-100 shadow-xl">
className="flex w-fit divide-x divide-custom-border-300 rounded border border-custom-border-300 bg-custom-background-100 shadow-xl" {props.commentAccessSpecifier && (
> <div className="flex border border-custom-border-300 mt-0 divide-x divide-custom-border-300 rounded overflow-hidden">
{props.commentAccessSpecifier && (<div className="flex border border-custom-border-300 mt-0 divide-x divide-custom-border-300 rounded overflow-hidden"> {props?.commentAccessSpecifier.commentAccess?.map((access) => (
{props?.commentAccessSpecifier.commentAccess?.map((access) => ( <Tooltip key={access.key} tooltipContent={access.label}>
<Tooltip key={access.key} tooltipContent={access.label}> <button
<button type="button"
type="button" onClick={() => handleAccessChange(access.key)}
onClick={() => handleAccessChange(access.key)} className={`grid place-basicMarkItems-center p-1 hover:bg-custom-background-80 ${
className={`grid place-basicMarkItems-center p-1 hover:bg-custom-background-80 ${props.commentAccessSpecifier?.accessValue === access.key ? "bg-custom-background-80" : "" props.commentAccessSpecifier?.accessValue === access.key
? "bg-custom-background-80"
: ""
}`} }`}
> >
<Icon <access.icon
iconName={access.icon} className={`w-4 h-4 ${
className={`w-4 h-4 ${props.commentAccessSpecifier?.accessValue === access.key props.commentAccessSpecifier?.accessValue === access.key
? "!text-custom-text-100" ? "!text-custom-text-100"
: "!text-custom-text-400" : "!text-custom-text-400"
}`} }`}
/> />
</button> </button>
</Tooltip> </Tooltip>
))} ))}
</div>)} </div>
)}
<div className="flex"> <div className="flex">
{basicMarkItems.map((item, index) => ( {basicMarkItems.map((item, index) => (
<button <button

33
packages/ui/src/icons/admin-profile-icon.tsx Normal file
View File

@ -0,0 +1,33 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const AdminProfileIcon: React.FC<ISvgIcons> = ({
className = "text-current",
...rest
}) => (
<svg
viewBox="0 0 24 24"
className={`${className} stroke-2`}
stroke="currentColor"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<path
d="M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M8 19V18C8 16.9391 8.42143 15.9217 9.17157 15.1716C9.92172 14.4214 10.9391 14 12 14C13.0609 14 14.0783 14.4214 14.8284 15.1716C15.5786 15.9217 16 16.9391 16 18V19"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12 14C13.6569 14 15 12.6569 15 11C15 9.34315 13.6569 8 12 8C10.3431 8 9 9.34315 9 11C9 12.6569 10.3431 14 12 14Z"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
);

39
packages/ui/src/icons/archive-icon.tsx Normal file
View File

@ -0,0 +1,39 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const ArchiveIcon: React.FC<ISvgIcons> = ({
className = "text-current",
...rest
}) => (
<svg
viewBox="0 0 24 24"
className={`${className} stroke-2`}
stroke="currentColor"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<path
d="M21 3H3C2.44772 3 2 3.44772 2 4V7C2 7.55228 2.44772 8 3 8H21C21.5523 8 22 7.55228 22 7V4C22 3.44772 21.5523 3 21 3Z"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M4 8V19C4 19.5304 4.21071 20.0391 4.58579 20.4142C4.96086 20.7893 5.46957 21 6 21H8"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M20 8V19C20 19.5304 19.7893 20.0391 19.4142 20.4142C19.0391 20.7893 18.5304 21 18 21H16"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M15 18L12 21L9 18"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path d="M12 21L12 12" stroke-linecap="round" stroke-linejoin="round" />
</svg>
);

31
packages/ui/src/icons/blocked-icon.tsx Normal file
View File

@ -0,0 +1,31 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const BlockedIcon: React.FC<ISvgIcons> = ({
height = "24",
width = "24",
className = "",
...rest
}) => (
<svg
height={height}
width={width}
className={className}
fill="none"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0.5 4.8C0.5 3.52696 1.00797 2.30606 1.91216 1.40589C2.81636 0.505713 4.04271 0 5.32143 0H21.3929C21.6913 0 21.9839 0.0827435 22.2378 0.238959C22.4917 0.395174 22.6968 0.618689 22.8303 0.884458C22.9638 1.15023 23.0203 1.44775 22.9935 1.74369C22.9667 2.03963 22.8576 2.32229 22.6786 2.56L18.5804 8L22.6786 13.44C22.8576 13.6777 22.9667 13.9604 22.9935 14.2563C23.0203 14.5522 22.9638 14.8498 22.8303 15.1155C22.6968 15.3813 22.4917 15.6048 22.2378 15.761C21.9839 15.9173 21.6913 16 21.3929 16H5.32143C4.89519 16 4.4864 16.1686 4.18501 16.4686C3.88361 16.7687 3.71429 17.1757 3.71429 17.6V22.4C3.71429 22.8243 3.54496 23.2313 3.24356 23.5314C2.94217 23.8314 2.53338 24 2.10714 24C1.6809 24 1.27212 23.8314 0.970721 23.5314C0.669323 23.2313 0.5 22.8243 0.5 22.4V4.8Z"
fill="#F76659"
/>
<path
d="M8.5918 20.4812H21.084C21.26 20.4812 21.4056 20.4237 21.5207 20.3086C21.6358 20.1935 21.6934 20.0479 21.6934 19.8719C21.6934 19.6958 21.6358 19.5503 21.5207 19.4352C21.4056 19.3201 21.26 19.2625 21.084 19.2625H8.57148L10.3184 17.5156C10.4267 17.4073 10.4809 17.2719 10.4809 17.1094C10.4809 16.9469 10.4199 16.8047 10.298 16.6828C10.1762 16.5609 10.034 16.5 9.87148 16.5C9.70899 16.5 9.5668 16.5609 9.44492 16.6828L6.68242 19.4453C6.61471 19.513 6.56732 19.5807 6.54023 19.6484C6.51315 19.7161 6.49961 19.7906 6.49961 19.8719C6.49961 19.9531 6.51315 20.0276 6.54023 20.0953C6.56732 20.163 6.61471 20.2307 6.68242 20.2984L9.44492 23.0609C9.58034 23.1964 9.72591 23.2607 9.88164 23.2539C10.0374 23.2471 10.1762 23.1828 10.298 23.0609C10.4199 22.9391 10.4809 22.7935 10.4809 22.6242C10.4809 22.4549 10.4267 22.3161 10.3184 22.2078L8.5918 20.4812Z"
fill="#F76659"
/>
</svg>
);

31
packages/ui/src/icons/blocker-icon.tsx Normal file
View File

@ -0,0 +1,31 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const BlockerIcon: React.FC<ISvgIcons> = ({
height = "24",
width = "24",
className = "",
...rest
}) => (
<svg
height={height}
width={width}
className={className}
fill="none"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0 4.8C0 3.52696 0.507971 2.30606 1.41216 1.40589C2.31636 0.505713 3.54271 0 4.82143 0H20.8929C21.1913 0 21.4839 0.0827435 21.7378 0.238959C21.9917 0.395174 22.1968 0.618689 22.3303 0.884458C22.4638 1.15023 22.5203 1.44775 22.4935 1.74369C22.4667 2.03963 22.3576 2.32229 22.1786 2.56L18.0804 8L22.1786 13.44C22.3576 13.6777 22.4667 13.9604 22.4935 14.2563C22.5203 14.5522 22.4638 14.8498 22.3303 15.1155C22.1968 15.3813 21.9917 15.6048 21.7378 15.761C21.4839 15.9173 21.1913 16 20.8929 16H4.82143C4.39519 16 3.9864 16.1686 3.68501 16.4686C3.38361 16.7687 3.21429 17.1757 3.21429 17.6V22.4C3.21429 22.8243 3.04496 23.2313 2.74356 23.5314C2.44217 23.8314 2.03338 24 1.60714 24C1.1809 24 0.772119 23.8314 0.470721 23.5314C0.169323 23.2313 0 22.8243 0 22.4V4.8Z"
fill="#F7AE59"
/>
<path
d="M18.5391 20.8797H6.04688C5.87083 20.8797 5.72526 20.8221 5.61016 20.707C5.49505 20.5919 5.4375 20.4464 5.4375 20.2703C5.4375 20.0943 5.49505 19.9487 5.61016 19.8336C5.72526 19.7185 5.87083 19.6609 6.04688 19.6609H18.5594L16.8125 17.9141C16.7042 17.8057 16.65 17.6703 16.65 17.5078C16.65 17.3453 16.7109 17.2031 16.8328 17.0813C16.9547 16.9594 17.0969 16.8984 17.2594 16.8984C17.4219 16.8984 17.5641 16.9594 17.6859 17.0813L20.4484 19.8438C20.5161 19.9115 20.5635 19.9792 20.5906 20.0469C20.6177 20.1146 20.6313 20.1891 20.6313 20.2703C20.6313 20.3516 20.6177 20.426 20.5906 20.4938C20.5635 20.5615 20.5161 20.6292 20.4484 20.6969L17.6859 23.4594C17.5505 23.5948 17.4049 23.6591 17.2492 23.6523C17.0935 23.6456 16.9547 23.5812 16.8328 23.4594C16.7109 23.3375 16.65 23.1919 16.65 23.0227C16.65 22.8534 16.7042 22.7146 16.8125 22.6062L18.5391 20.8797Z"
fill="#F7AE59"
/>
</svg>
);

33
packages/ui/src/icons/calendar-after-icon.tsx Normal file
View File

@ -0,0 +1,33 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const CalendarAfterIcon: React.FC<ISvgIcons> = ({
className = "fill-current",
...rest
}) => (
<svg
viewBox="0 0 24 24"
className={`${className} `}
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<g clipPath="url(#clip0_3309_70901)">
<path
d="M10.6125 17V15.875H14.625V7.8125H3.375V11.9375H2.25V4.25C2.25 3.95 2.3625 3.6875 2.5875 3.4625C2.8125 3.2375 3.075 3.125 3.375 3.125H4.59375V2H5.8125V3.125H12.1875V2H13.4063V3.125H14.625C14.925 3.125 15.1875 3.2375 15.4125 3.4625C15.6375 3.6875 15.75 3.95 15.75 4.25V15.875C15.75 16.175 15.6375 16.4375 15.4125 16.6625C15.1875 16.8875 14.925 17 14.625 17H10.6125ZM6 18.2375L5.2125 17.45L7.33125 15.3125H0.9375V14.1875H7.33125L5.2125 12.05L6 11.2625L9.4875 14.75L6 18.2375ZM3.375 6.6875H14.625V4.25H3.375V6.6875Z"
fill="rgb(var(--color-text-200))"
/>
</g>
<defs>
<clipPath id="clip0_3309_70901">
<rect
width="18"
height="18"
fill="white"
transform="translate(0 0.5)"
/>
</clipPath>
</defs>
</svg>
);

39
packages/ui/src/icons/calendar-before-icon.tsx Normal file
View File

@ -0,0 +1,39 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const CalendarBeforeIcon: React.FC<ISvgIcons> = ({
className = "fill-current",
...rest
}) => (
<svg
viewBox="0 0 24 24"
className={`${className} `}
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<g clipPath="url(#clip0_3309_70907)">
<path
d="M10.6125 16.5V15.375H14.625V7.3125H3.375V11.4375H2.25V3.75C2.25 3.45 2.3625 3.1875 2.5875 2.9625C2.8125 2.7375 3.075 2.625 3.375 2.625H4.59375V1.5H5.8125V2.625H12.1875V1.5H13.4062V2.625H14.625C14.925 2.625 15.1875 2.7375 15.4125 2.9625C15.6375 3.1875 15.75 3.45 15.75 3.75V15.375C15.75 15.675 15.6375 15.9375 15.4125 16.1625C15.1875 16.3875 14.925 16.5 14.625 16.5H10.6125ZM3.375 6.1875H14.625V3.75H3.375V6.1875Z"
fill="rgb(var(--color-text-200))"
/>
<g clipPath="url(#clip1_3309_70907)">
<path
d="M3.99967 17.1667L1.33301 14.5L3.99967 11.8334L4.34967 12.1834L2.28301 14.25H8V14.75H2.28301L4.34967 16.8167L3.99967 17.1667Z"
fill="rgb(var(--color-text-200))"
stroke="rgb(var(--color-text-200))"
strokeWidth="0.5"
/>
</g>
</g>
<defs>
<clipPath id="clip0_3309_70907">
<rect width="18" height="18" fill="white" />
</clipPath>
<clipPath id="clip1_3309_70907">
<rect width="8" height="8" fill="white" transform="translate(0 10.5)" />
</clipPath>
</defs>
</svg>
);

29
packages/ui/src/icons/contrast-icon.tsx Normal file
View File

@ -0,0 +1,29 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const ContrastIcon: React.FC<ISvgIcons> = ({
className = "text-current",
...rest
}) => (
<svg
viewBox="0 0 24 24"
className={`${className} stroke-2`}
stroke="currentColor"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<path
d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12 18C13.5913 18 15.1174 17.3679 16.2426 16.2426C17.3679 15.1174 18 13.5913 18 12C18 10.4087 17.3679 8.88258 16.2426 7.75736C15.1174 6.63214 13.5913 6 12 6V18Z"
fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
);

28
packages/ui/src/icons/copy-icon.tsx Normal file
View File

@ -0,0 +1,28 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const CopyIcon: React.FC<ISvgIcons> = ({
className = "text-current",
...rest
}) => (
<svg
viewBox="0 0 24 24"
className={`${className} stroke-2`}
stroke="currentColor"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<path
d="M20 8H10C8.89543 8 8 8.89543 8 10V20C8 21.1046 8.89543 22 10 22H20C21.1046 22 22 21.1046 22 20V10C22 8.89543 21.1046 8 20 8Z"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M4 16C2.9 16 2 15.1 2 14V4C2 2.9 2.9 2 4 2H14C15.1 2 16 2.9 16 4"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
);

25
packages/ui/src/icons/create-icon.tsx Normal file
View File

@ -0,0 +1,25 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const CreateIcon: React.FC<ISvgIcons> = ({
className = "text-current",
...rest
}) => (
<svg
viewBox="0 0 24 24"
className={`${className} stroke-2`}
stroke="currentColor"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<path
d="M21 12V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H12"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path d="M16 5H22" stroke-linecap="round" stroke-linejoin="round" />
<path d="M19 2V8" stroke-linecap="round" stroke-linejoin="round" />
</svg>
);

47
packages/ui/src/icons/dice-icon.tsx Normal file
View File

@ -0,0 +1,47 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const DiceIcon: React.FC<ISvgIcons> = ({
className = "text-current",
...rest
}) => (
<svg
viewBox="0 0 24 24"
className={`${className} stroke-2`}
stroke="currentColor"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<path
d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M8.77778 7H7.22222C7.09949 7 7 7.09949 7 7.22222V8.77778C7 8.90051 7.09949 9 7.22222 9H8.77778C8.90051 9 9 8.90051 9 8.77778V7.22222C9 7.09949 8.90051 7 8.77778 7Z"
fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M8.77778 15H7.22222C7.09949 15 7 15.0995 7 15.2222V16.7778C7 16.9005 7.09949 17 7.22222 17H8.77778C8.90051 17 9 16.9005 9 16.7778V15.2222C9 15.0995 8.90051 15 8.77778 15Z"
fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M16.7778 7H15.2222C15.0995 7 15 7.09949 15 7.22222V8.77778C15 8.90051 15.0995 9 15.2222 9H16.7778C16.9005 9 17 8.90051 17 8.77778V7.22222C17 7.09949 16.9005 7 16.7778 7Z"
fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M16.7778 15H15.2222C15.0995 15 15 15.0995 15 15.2222V16.7778C15 16.9005 15.0995 17 15.2222 17H16.7778C16.9005 17 17 16.9005 17 16.7778V15.2222C17 15.0995 16.9005 15 16.7778 15Z"
fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
);

31
packages/ui/src/icons/discord-icon.tsx Normal file
View File

@ -0,0 +1,31 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const DiscordIcon: React.FC<ISvgIcons> = ({
width = "24",
height = "24",
className,
color,
}) => (
<svg
width={width}
height={height}
className={className}
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_282_229)">
<path
fill={color ? color : "rgb(var(--color-text-200))"}
d="M16.9312 3.64157C15.6346 3.04643 14.2662 2.62206 12.8604 2.37907C12.8476 2.37657 12.8343 2.37821 12.8225 2.38375C12.8106 2.38929 12.8009 2.39845 12.7946 2.4099C12.6196 2.7224 12.4246 3.1299 12.2879 3.45157C10.7724 3.22139 9.23088 3.22139 7.7154 3.45157C7.5633 3.09515 7.39165 2.7474 7.20123 2.4099C7.19467 2.39871 7.18486 2.38977 7.1731 2.38426C7.16135 2.37876 7.1482 2.37695 7.1354 2.37907C5.72944 2.62155 4.36101 3.04595 3.06457 3.64157C3.05359 3.64617 3.04429 3.65402 3.0379 3.66407C0.444567 7.53823 -0.266266 11.3166 0.0829005 15.0474C0.0837487 15.0567 0.0864772 15.0656 0.0909192 15.0738C0.0953611 15.082 0.101423 15.0892 0.108734 15.0949C1.6184 16.2134 3.30716 17.0672 5.1029 17.6199C5.11556 17.6236 5.12903 17.6233 5.14153 17.6191C5.15403 17.615 5.16497 17.6071 5.1729 17.5966C5.55895 17.072 5.90069 16.5162 6.19457 15.9349C6.19866 15.9269 6.20103 15.9182 6.2015 15.9093C6.20198 15.9003 6.20056 15.8914 6.19733 15.8831C6.1941 15.8747 6.18914 15.8671 6.18278 15.8609C6.17641 15.8546 6.16878 15.8497 6.1604 15.8466C5.62159 15.6404 5.09995 15.3918 4.6004 15.1032C4.59124 15.0979 4.58354 15.0905 4.57797 15.0815C4.5724 15.0725 4.56914 15.0622 4.56848 15.0517C4.56782 15.0411 4.56978 15.0306 4.57418 15.021C4.57859 15.0113 4.58531 15.003 4.59373 14.9966C4.69893 14.9179 4.80229 14.8367 4.90373 14.7532C4.91261 14.746 4.92331 14.7414 4.93464 14.74C4.94597 14.7385 4.95748 14.7402 4.9679 14.7449C8.24123 16.2391 11.7846 16.2391 15.0196 14.7449C15.0301 14.74 15.0418 14.7382 15.0533 14.7397C15.0648 14.7412 15.0756 14.7459 15.0846 14.7532C15.1846 14.8349 15.2896 14.9182 15.3954 14.9966C15.4037 15.0029 15.4104 15.0111 15.4148 15.0205C15.4193 15.03 15.4213 15.0404 15.4208 15.0508C15.4203 15.0612 15.4173 15.0714 15.412 15.0804C15.4067 15.0894 15.3993 15.0969 15.3904 15.1024C14.892 15.3937 14.3699 15.6424 13.8296 15.8457C13.8212 15.849 13.8135 15.8539 13.8071 15.8603C13.8008 15.8666 13.7958 15.8743 13.7926 15.8827C13.7894 15.8911 13.788 15.9001 13.7884 15.9091C13.7889 15.9181 13.7913 15.9269 13.7954 15.9349C14.0954 16.5166 14.4387 17.0699 14.8162 17.5957C14.824 17.6064 14.8349 17.6145 14.8475 17.6186C14.86 17.6228 14.8736 17.623 14.8862 17.6191C16.685 17.0681 18.3765 16.2142 19.8879 15.0941C19.8953 15.0889 19.9014 15.0822 19.906 15.0744C19.9106 15.0667 19.9135 15.058 19.9146 15.0491C20.3312 10.7349 19.2162 6.9874 16.9571 3.66573C16.9518 3.65453 16.9426 3.64564 16.9312 3.64073V3.64157ZM6.68373 12.7749C5.6979 12.7749 4.88623 11.8707 4.88623 10.7591C4.88623 9.64823 5.6829 8.74323 6.68373 8.74323C7.69207 8.74323 8.49707 9.65657 8.48123 10.7599C8.48123 11.8707 7.68457 12.7749 6.68373 12.7749ZM13.3296 12.7749C12.3437 12.7749 11.5321 11.8707 11.5321 10.7591C11.5321 9.64823 12.3279 8.74323 13.3296 8.74323C14.3379 8.74323 15.1429 9.65657 15.1271 10.7599C15.1271 11.8707 14.3387 12.7749 13.3296 12.7749Z"
/>
</g>
<defs>
<clipPath id="clip0_282_229">
<rect width={width} height={height} />
</clipPath>
</defs>
</svg>
);

20
packages/ui/src/icons/double-circle-icon.tsx Normal file
View File

@ -0,0 +1,20 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const DoubleCircleIcon: React.FC<ISvgIcons> = ({
className = "text-current",
...rest
}) => (
<svg
viewBox="0 0 24 24"
className={`${className} stroke-2`}
stroke="currentColor"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<circle cx="12" cy="12" r="9" />
<circle cx="12" cy="12" r="5.625" />
</svg>
);

25
packages/ui/src/icons/external-link-icon.tsx Normal file
View File

@ -0,0 +1,25 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const ExternalLinkIcon: React.FC<ISvgIcons> = ({
className = "text-current",
...rest
}) => (
<svg
viewBox="0 0 24 24"
className={`${className} stroke-[1.5]`}
stroke="currentColor"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<path
d="M18 13V19C18 19.5304 17.7893 20.0391 17.4142 20.4142C17.0391 20.7893 16.5304 21 16 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V8C3 7.46957 3.21071 6.96086 3.58579 6.58579C3.96086 6.21071 4.46957 6 5 6H11"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path d="M15 3H21V9" stroke-linecap="round" stroke-linejoin="round" />
<path d="M10 14L21 3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
);

33
packages/ui/src/icons/github-icon.tsx Normal file
View File

@ -0,0 +1,33 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const GithubIcon: React.FC<ISvgIcons> = ({
width = "24",
height = "24",
className,
color,
}) => (
<svg
width={width}
height={height}
className={className}
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_282_232)">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10 0C4.475 0 0 4.475 0 10C0 14.425 2.8625 18.1625 6.8375 19.4875C7.3375 19.575 7.525 19.275 7.525 19.0125C7.525 18.775 7.5125 17.9875 7.5125 17.15C5 17.6125 4.35 16.5375 4.15 15.975C4.0375 15.6875 3.55 14.8 3.125 14.5625C2.775 14.375 2.275 13.9125 3.1125 13.9C3.9 13.8875 4.4625 14.625 4.65 14.925C5.55 16.4375 6.9875 16.0125 7.5625 15.75C7.65 15.1 7.9125 14.6625 8.2 14.4125C5.975 14.1625 3.65 13.3 3.65 9.475C3.65 8.3875 4.0375 7.4875 4.675 6.7875C4.575 6.5375 4.225 5.5125 4.775 4.1375C4.775 4.1375 5.6125 3.875 7.525 5.1625C8.325 4.9375 9.175 4.825 10.025 4.825C10.875 4.825 11.725 4.9375 12.525 5.1625C14.4375 3.8625 15.275 4.1375 15.275 4.1375C15.825 5.5125 15.475 6.5375 15.375 6.7875C16.0125 7.4875 16.4 8.375 16.4 9.475C16.4 13.3125 14.0625 14.1625 11.8375 14.4125C12.2 14.725 12.5125 15.325 12.5125 16.2625C12.5125 17.6 12.5 18.675 12.5 19.0125C12.5 19.275 12.6875 19.5875 13.1875 19.4875C15.1726 18.8173 16.8976 17.5414 18.1197 15.8395C19.3418 14.1375 19.9994 12.0952 20 10C20 4.475 15.525 0 10 0Z"
fill={color ? color : "rgb(var(--color-text-200))"}
/>
</g>
<defs>
<clipPath id="clip0_282_232">
<rect width={width} height={height} />
</clipPath>
</defs>
</svg>
);

28
packages/ui/src/icons/index.tsx Normal file
View File

@ -0,0 +1,28 @@
export * from "./user-group-icon";
export * from "./contrast-icon";
export * from "./dice-icon";
export * from "./layers-icon";
export * from "./photo-filter-icon";
export * from "./archive-icon";
export * from "./admin-profile-icon";
export * from "./create-icon";
export * from "./subscribe-icon";
export * from "./double-circle-icon";
export * from "./external-link-icon";
export * from "./copy-icon";
export * from "./layer-stack";
export * from "./side-peek-icon";
export * from "./modal-peek-icon";
export * from "./panel-center-icon";
export * from "./priority-icon";
export * from "./state";
export * from "./blocked-icon";
export * from "./blocker-icon";
export * from "./related-icon";
export * from "./module";
export * from "./github-icon";
export * from "./discord-icon";
export * from "./transfer-icon";
export * from "./running-icon";
export * from "./calendar-before-icon";
export * from "./calendar-after-icon";

33
packages/ui/src/icons/layer-stack.tsx Normal file
View File

@ -0,0 +1,33 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const LayerStackIcon: React.FC<ISvgIcons> = ({
className = "text-current",
...rest
}) => (
<svg
viewBox="0 0 24 24"
className={`${className} stroke-2`}
stroke="currentColor"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<path
d="M19 22H4C3.46957 22 2.96086 21.8119 2.58579 21.477C2.21071 21.1421 2 20.6879 2 20.2143V11.2857C2 10.8121 2.21071 10.3579 2.58579 10.023C2.96086 9.68814 3.46957 9.5 4 9.5H20C20.5304 9.5 21.0391 9.68814 21.4142 10.023C21.7893 10.3579 22 10.8121 22 11.2857V20.2143C22 20.6879 21.7893 21.1421 21.4142 21.477C21.0391 21.8119 20.5304 22 20 22H19Z"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M4.5 9.5V6.82143C4.5 6.53727 4.65804 6.26475 4.93934 6.06381C5.22064 5.86288 5.60218 5.75 6 5.75H18C18.3978 5.75 18.7794 5.86288 19.0607 6.06381C19.342 6.26475 19.5 6.53727 19.5 6.82143V9.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M7 4.5V2.71429C7 2.52485 7.10536 2.34316 7.29289 2.20921C7.48043 2.07525 7.73478 2 8 2H16C16.2652 2 16.5196 2.07525 16.7071 2.20921C16.8946 2.34316 17 2.52485 17 2.71429V4.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
);

45
packages/ui/src/icons/layers-icon.tsx Normal file
View File

@ -0,0 +1,45 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const LayersIcon: React.FC<ISvgIcons> = ({
className = "text-current",
...rest
}) => (
<svg
viewBox="0 0 24 24"
className={`${className} stroke-2`}
stroke="currentColor"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<g clip-path="url(#clip0_7258_81938)">
<path
d="M16.5953 6.69606L16.6072 5.17376L6.85812 8.92381L6.85812 19.4238L9.00319 18.6961"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12.0953 3.69606L12.1072 2.17376L2.35812 5.92381L2.35812 16.4238L4.50319 15.6961"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M21.7438 17.9461L21.7511 7.44434L12.0021 11.1944L12.0021 21.6944L21.7438 17.9461Z"
stroke-linecap="round"
stroke-linejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_7258_81938">
<rect
width="24"
height="24"
fill="white"
transform="translate(24) rotate(90)"
/>
</clipPath>
</defs>
</svg>
);

29
packages/ui/src/icons/modal-peek-icon.tsx Normal file
View File

@ -0,0 +1,29 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const ModalPeekIcon: React.FC<ISvgIcons> = ({
className = "text-current",
...rest
}) => (
<svg
viewBox="0 0 24 24"
className={`${className} stroke-2`}
stroke="currentColor"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<path
d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M16.6667 6.00001H7.20015C6.50001 5.99999 6.00005 6.00003 6.00017 7.33335C6.00027 8.4402 6.00021 13.8198 6.00018 15.8823L6.00017 16.6667C6.00017 18 6.00017 18 7.20015 18H16.6667C18 18 18 18 18 16.6667V7.33335C18 6.00001 18 6.00001 16.6667 6.00001H16.6667Z"
fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
);

39
packages/ui/src/icons/module/backlog.tsx Normal file
View File

@ -0,0 +1,39 @@
import * as React from "react";
import { ISvgIcons } from "../type";
export const ModuleBacklogIcon: React.FC<ISvgIcons> = ({
width = "20",
height = "20",
className,
color = "#a3a3a3",
}) => (
<svg
height={height}
width={width}
className={className}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 323.15 323.03"
>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<path
fill={color}
d="M163.42,322.92A172.12,172.12,0,0,1,104.8,312.7c-3.92-1.4-5.22-3.05-3.07-7.1,2.4-4.52,3-11.38,6.64-13.48s9.34,2.47,14.23,3.81c29.55,8.11,58.78,7.25,87.57-3.31,4.08-1.5,5.86-1.05,7.09,3.21a82.63,82.63,0,0,0,4.6,11c1.19,2.57,1,4.06-2,5.2a163.84,163.84,0,0,1-40.05,9.76C173.84,322.45,167.89,323.34,163.42,322.92Z"
/>
<path
fill={color}
d="M.07,163a174.76,174.76,0,0,1,10.07-58c1.59-4.57,3.53-5.59,7.8-3.2a61,61,0,0,0,10.11,4.19c3.11,1.06,4.07,2.46,2.71,5.79-6.43,15.73-9.17,32.33-9.23,49.14a132.65,132.65,0,0,0,8.17,47.35c2.44,6.5,2.33,6.57-4.06,9.35-3.35,1.45-6.83,2.63-10.11,4.23-2.44,1.19-3.54.49-4.43-1.86a162.3,162.3,0,0,1-10-41C.51,173.12-.24,167.17.07,163Z"
/>
<path
fill={color}
d="M323,160.16a169.68,169.68,0,0,1-10.2,58.09c-1.45,4.08-3.21,5.07-7.14,3a105.3,105.3,0,0,0-11.48-4.81c-2.23-.85-3.2-1.85-2.16-4.41a133.86,133.86,0,0,0,9.57-48.59,132,132,0,0,0-8.9-50.69c-1.67-4.24-.8-5.79,3.29-7a84,84,0,0,0,11-4.62c2.65-1.24,4.05-.82,5.16,2.12a159.68,159.68,0,0,1,9.68,39C322.56,148.71,323.52,155.17,323,160.16Z"
/>
<path
fill={color}
d="M161.59,0a164.28,164.28,0,0,1,58,10.72c2.81,1,3.75,2,2.41,4.93-2,4.38-3.86,8.84-5.5,13.37-.93,2.56-2.28,2.77-4.53,1.87a137.94,137.94,0,0,0-99.35-.52c-3.43,1.32-5.3,1.35-6.45-2.69a50.33,50.33,0,0,0-4.55-11c-2.25-3.93-.36-5.11,2.9-6.29A165.32,165.32,0,0,1,161.59,0Z"
/>
</g>
</g>
</svg>
);

30
packages/ui/src/icons/module/cancelled.tsx Normal file
View File

@ -0,0 +1,30 @@
import * as React from "react";
import { ISvgIcons } from "../type";
export const ModuleCancelledIcon: React.FC<ISvgIcons> = ({
width = "20",
height = "20",
className,
}) => (
<svg
width={width}
height={height}
className={className}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_4052_100277)">
<path
d="M8 8.84L10.58 11.42C10.7 11.54 10.84 11.6 11 11.6C11.16 11.6 11.3 11.54 11.42 11.42C11.54 11.3 11.6 11.16 11.6 11C11.6 10.84 11.54 10.7 11.42 10.58L8.84 8L11.42 5.42C11.54 5.3 11.6 5.16 11.6 5C11.6 4.84 11.54 4.7 11.42 4.58C11.3 4.46 11.16 4.4 11 4.4C10.84 4.4 10.7 4.46 10.58 4.58L8 7.16L5.42 4.58C5.3 4.46 5.16 4.4 5 4.4C4.84 4.4 4.7 4.46 4.58 4.58C4.46 4.7 4.4 4.84 4.4 5C4.4 5.16 4.46 5.3 4.58 5.42L7.16 8L4.58 10.58C4.46 10.7 4.4 10.84 4.4 11C4.4 11.16 4.46 11.3 4.58 11.42C4.7 11.54 4.84 11.6 5 11.6C5.16 11.6 5.3 11.54 5.42 11.42L8 8.84ZM8 16C6.90667 16 5.87333 15.79 4.9 15.37C3.92667 14.95 3.07667 14.3767 2.35 13.65C1.62333 12.9233 1.05 12.0733 0.63 11.1C0.21 10.1267 0 9.09333 0 8C0 6.89333 0.21 5.85333 0.63 4.88C1.05 3.90667 1.62333 3.06 2.35 2.34C3.07667 1.62 3.92667 1.05 4.9 0.63C5.87333 0.21 6.90667 0 8 0C9.10667 0 10.1467 0.21 11.12 0.63C12.0933 1.05 12.94 1.62 13.66 2.34C14.38 3.06 14.95 3.90667 15.37 4.88C15.79 5.85333 16 6.89333 16 8C16 9.09333 15.79 10.1267 15.37 11.1C14.95 12.0733 14.38 12.9233 13.66 13.65C12.94 14.3767 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16ZM8 14.8C9.89333 14.8 11.5 14.1367 12.82 12.81C14.14 11.4833 14.8 9.88 14.8 8C14.8 6.10667 14.14 4.5 12.82 3.18C11.5 1.86 9.89333 1.2 8 1.2C6.12 1.2 4.51667 1.86 3.19 3.18C1.86333 4.5 1.2 6.10667 1.2 8C1.2 9.88 1.86333 11.4833 3.19 12.81C4.51667 14.1367 6.12 14.8 8 14.8Z"
fill="#ef4444"
/>
</g>
<defs>
<clipPath id="clip0_4052_100277">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
);

23
packages/ui/src/icons/module/completed.tsx Normal file
View File

@ -0,0 +1,23 @@
import * as React from "react";
import { ISvgIcons } from "../type";
export const ModuleCompletedIcon: React.FC<ISvgIcons> = ({
width = "20",
height = "20",
className,
}) => (
<svg
width={width}
height={height}
className={className}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.80486 9.80731L4.84856 7.85103C4.73197 7.73443 4.58542 7.67478 4.4089 7.67208C4.23238 7.66937 4.08312 7.72902 3.96113 7.85103C3.83913 7.97302 3.77814 8.12093 3.77814 8.29474C3.77814 8.46855 3.83913 8.61645 3.96113 8.73844L6.27206 11.0494C6.42428 11.2016 6.60188 11.2777 6.80486 11.2777C7.00782 11.2777 7.18541 11.2016 7.33764 11.0494L12.0227 6.36435C12.1393 6.24776 12.1989 6.10121 12.2016 5.92469C12.2043 5.74817 12.1447 5.59891 12.0227 5.47692C11.9007 5.35493 11.7528 5.29393 11.579 5.29393C11.4051 5.29393 11.2572 5.35493 11.1353 5.47692L6.80486 9.80731ZM8.00141 16C6.89494 16 5.85491 15.79 4.88132 15.3701C3.90772 14.9502 3.06082 14.3803 2.34064 13.6604C1.62044 12.9405 1.05028 12.094 0.63017 11.1208C0.210057 10.1477 0 9.10788 0 8.00141C0 6.89494 0.209966 5.85491 0.629896 4.88132C1.04983 3.90772 1.61972 3.06082 2.33958 2.34064C3.05946 1.62044 3.90598 1.05028 4.87915 0.630171C5.8523 0.210058 6.89212 0 7.99859 0C9.10506 0 10.1451 0.209966 11.1187 0.629897C12.0923 1.04983 12.9392 1.61972 13.6594 2.33959C14.3796 3.05946 14.9497 3.90598 15.3698 4.87915C15.7899 5.8523 16 6.89212 16 7.99859C16 9.10506 15.79 10.1451 15.3701 11.1187C14.9502 12.0923 14.3803 12.9392 13.6604 13.6594C12.9405 14.3796 12.094 14.9497 11.1208 15.3698C10.1477 15.7899 9.10788 16 8.00141 16ZM8 14.7369C9.88071 14.7369 11.4737 14.0842 12.779 12.779C14.0842 11.4737 14.7369 9.88071 14.7369 8C14.7369 6.11929 14.0842 4.52631 12.779 3.22104C11.4737 1.91577 9.88071 1.26314 8 1.26314C6.11929 1.26314 4.52631 1.91577 3.22104 3.22104C1.91577 4.52631 1.26314 6.11929 1.26314 8C1.26314 9.88071 1.91577 11.4737 3.22104 12.779C4.52631 14.0842 6.11929 14.7369 8 14.7369Z"
fill="#16a34a"
/>
</svg>
);

43
packages/ui/src/icons/module/in-progress.tsx Normal file
View File

@ -0,0 +1,43 @@
import * as React from "react";
import { ISvgIcons } from "../type";
export const ModuleInProgressIcon: React.FC<ISvgIcons> = ({
width = "20",
height = "20",
className,
color = "#f39e1f",
}) => (
<svg
height={height}
width={width}
className={className}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 152.93 152.95"
>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<path
fill={color}
d="M77.74,0C35.63-.62.78,32.9,0,74.94c-.77,42.74,33,77.34,76.23,78A76.48,76.48,0,0,0,77.74,0ZM75.46,142.68a66.24,66.24,0,1,1,3-132.45c35.71,1,66.31,31.26,64.16,70.08A66.23,66.23,0,0,1,75.46,142.68Z"
/>
<path
fill={color}
d="M124.29,76.58a49.52,49.52,0,0,1-3.11,16.9c-.38,1-.77,1.27-1.81.78-2.15-1-4.34-1.92-6.56-2.72-1.3-.46-1.51-1-1-2.3a36.61,36.61,0,0,0,.64-23.77c-1-3.48-1.06-3.47,2.38-4.88,1.57-.65,3.15-1.27,4.68-2,.94-.44,1.34-.22,1.69.75A49.74,49.74,0,0,1,124.29,76.58Z"
/>
<path
fill={color}
d="M94.65,32.63c-.1.22-.19.42-.27.63-1,2.5-2.08,5-3.09,7.51-.28.69-.55.89-1.37.59a37.3,37.3,0,0,0-26.82,0c-.91.34-1.15.08-1.46-.7-1-2.46-2-4.92-3.06-7.34-.42-.92-.07-1.18.69-1.46a47.66,47.66,0,0,1,34.43,0C94.06,32,94.68,32,94.65,32.63Z"
/>
<path
fill={color}
d="M28.72,76.67a48.27,48.27,0,0,1,3-17.13c.45-1.25.92-1.34,2-.83,2.25,1,4.56,2,6.87,2.87.86.34,1.05.67.71,1.58a36.85,36.85,0,0,0-.07,26.36c.36,1,.3,1.46-.75,1.86-2.38.9-4.72,1.88-7,2.92-1,.43-1.33.2-1.68-.76A46.76,46.76,0,0,1,28.72,76.67Z"
/>
<path
fill={color}
d="M76.37,124.22a48.11,48.11,0,0,1-16.91-3.08c-1.05-.38-1.26-.8-.79-1.82,1-2.31,2-4.66,2.93-7,.34-.87.69-1.06,1.61-.72a37.06,37.06,0,0,0,26.67,0c.75-.28,1.09-.23,1.39.55,1,2.56,2,5.13,3.18,7.65.49,1.08-.3,1.13-.86,1.34A46.53,46.53,0,0,1,76.37,124.22Z"
/>
</g>
</g>
</svg>
);

7
packages/ui/src/icons/module/index.ts Normal file
View File

@ -0,0 +1,7 @@
export * from "./backlog";
export * from "./cancelled";
export * from "./completed";
export * from "./in-progress";
export * from "./module-status-icon";
export * from "./paused";
export * from "./planned";

67
packages/ui/src/icons/module/module-status-icon.tsx Normal file
View File

@ -0,0 +1,67 @@
import * as React from "react";
import { ModuleBacklogIcon } from "./backlog";
import { ModuleCancelledIcon } from "./cancelled";
import { ModuleCompletedIcon } from "./completed";
import { ModuleInProgressIcon } from "./in-progress";
import { ModulePausedIcon } from "./paused";
import { ModulePlannedIcon } from "./planned";
export type TModuleStatus =
| "backlog"
| "planned"
| "in-progress"
| "paused"
| "completed"
| "cancelled";
type Props = {
status: TModuleStatus;
className?: string;
height?: string;
width?: string;
};
export const ModuleStatusIcon: React.FC<Props> = ({
status,
className,
height = "12px",
width = "12px",
}) => {
if (status === "backlog")
return (
<ModuleBacklogIcon className={className} height={height} width={width} />
);
else if (status === "cancelled")
return (
<ModuleCancelledIcon
className={className}
height={height}
width={width}
/>
);
else if (status === "completed")
return (
<ModuleCompletedIcon
className={className}
height={height}
width={width}
/>
);
else if (status === "in-progress")
return (
<ModuleInProgressIcon
className={className}
height={height}
width={width}
/>
);
else if (status === "paused")
return (
<ModulePausedIcon className={className} height={height} width={width} />
);
else
return (
<ModulePlannedIcon className={className} height={height} width={width} />
);
};

30
packages/ui/src/icons/module/paused.tsx Normal file
View File

@ -0,0 +1,30 @@
import * as React from "react";
import { ISvgIcons } from "../type";
export const ModulePausedIcon: React.FC<ISvgIcons> = ({
width = "20",
height = "20",
className,
}) => (
<svg
width={width}
height={height}
className={className}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_4052_100275)">
<path
d="M6.4435 10.34C6.6145 10.34 6.75667 10.2825 6.87 10.1675C6.98333 10.0525 7.04 9.91 7.04 9.74V6.24C7.04 6.07 6.98217 5.9275 6.8665 5.8125C6.75082 5.6975 6.60749 5.64 6.4365 5.64C6.2655 5.64 6.12333 5.6975 6.01 5.8125C5.89667 5.9275 5.84 6.07 5.84 6.24V9.74C5.84 9.91 5.89783 10.0525 6.0135 10.1675C6.12918 10.2825 6.27251 10.34 6.4435 10.34ZM9.5635 10.34C9.7345 10.34 9.87667 10.2825 9.99 10.1675C10.1033 10.0525 10.16 9.91 10.16 9.74V6.24C10.16 6.07 10.1022 5.9275 9.9865 5.8125C9.87082 5.6975 9.72749 5.64 9.5565 5.64C9.3855 5.64 9.24333 5.6975 9.13 5.8125C9.01667 5.9275 8.96 6.07 8.96 6.24V9.74C8.96 9.91 9.01783 10.0525 9.1335 10.1675C9.24918 10.2825 9.39251 10.34 9.5635 10.34ZM8 16C6.89333 16 5.85333 15.79 4.88 15.37C3.90667 14.95 3.06 14.38 2.34 13.66C1.62 12.94 1.05 12.0933 0.63 11.12C0.21 10.1467 0 9.10667 0 8C0 7.54667 0.0366667 7.09993 0.11 6.6598C0.183333 6.21965 0.293333 5.78639 0.44 5.36C0.493333 5.21333 0.593333 5.11667 0.74 5.07C0.886667 5.02333 1.02667 5.04199 1.16 5.12596C1.30285 5.20993 1.40523 5.33327 1.46714 5.49596C1.52905 5.65865 1.54 5.82 1.5 5.98C1.42 6.31333 1.35 6.64765 1.29 6.98294C1.23 7.31823 1.2 7.65725 1.2 8C1.2 9.89833 1.85875 11.5063 3.17624 12.8238C4.49375 14.1413 6.10167 14.8 8 14.8C9.89833 14.8 11.5063 14.1413 12.8238 12.8238C14.1413 11.5063 14.8 9.89833 14.8 8C14.8 6.10167 14.1413 4.49375 12.8238 3.17624C11.5063 1.85875 9.89833 1.2 8 1.2C7.63235 1.2 7.26852 1.22667 6.90852 1.28C6.54852 1.33333 6.19235 1.41333 5.84 1.52C5.68 1.57333 5.52 1.56667 5.36 1.5C5.2 1.43333 5.08667 1.32667 5.02 1.18C4.95333 1.03333 4.96 0.886667 5.04 0.74C5.12 0.593333 5.23333 0.493333 5.38 0.44C5.79333 0.306667 6.21333 0.2 6.64 0.12C7.06667 0.04 7.49333 0 7.92 0C9.02667 0 10.07 0.21 11.05 0.63C12.03 1.05 12.8863 1.62 13.6189 2.34C14.3516 3.06 14.9316 3.90667 15.3589 4.88C15.7863 5.85333 16 6.89333 16 8C16 9.10667 15.79 10.1467 15.37 11.12C14.95 12.0933 14.38 12.94 13.66 13.66C12.94 14.38 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16ZM2.65764 3.62C2.37921 3.62 2.14333 3.52255 1.95 3.32764C1.75667 3.13275 1.66 2.89608 1.66 2.61764C1.66 2.33921 1.75745 2.10333 1.95236 1.91C2.14725 1.71667 2.38392 1.62 2.66236 1.62C2.94079 1.62 3.17667 1.71745 3.37 1.91236C3.56333 2.10725 3.66 2.34392 3.66 2.62236C3.66 2.90079 3.56255 3.13667 3.36764 3.33C3.17275 3.52333 2.93608 3.62 2.65764 3.62Z"
fill="#525252"
/>
</g>
<defs>
<clipPath id="clip0_4052_100275">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
);

23
packages/ui/src/icons/module/planned.tsx Normal file
View File

@ -0,0 +1,23 @@
import * as React from "react";
import { ISvgIcons } from "../type";
export const ModulePlannedIcon: React.FC<ISvgIcons> = ({
width = "20",
height = "20",
className,
}) => (
<svg
width={width}
height={height}
className={className}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.57177 7.43329L11.3665 10.228C11.4883 10.3498 11.5441 10.4809 11.5339 10.6213C11.5238 10.7617 11.4578 10.8928 11.336 11.0146C11.2142 11.1364 11.0794 11.1973 10.9317 11.1973C10.784 11.1973 10.6492 11.1364 10.5274 11.0146L7.64476 8.12349C7.57709 8.05582 7.52408 7.98139 7.48574 7.90018C7.4474 7.81898 7.42823 7.72538 7.42823 7.61936V3.51362C7.42823 3.35574 7.48405 3.22097 7.5957 3.10932C7.70734 2.99768 7.84211 2.94185 8 2.94185C8.15789 2.94185 8.29266 2.99768 8.4043 3.10932C8.51595 3.22097 8.57177 3.35574 8.57177 3.51362V7.43329ZM0.806954 11.4933C0.573486 11.04 0.390212 10.5655 0.257131 10.0698C0.124064 9.57411 0.0383541 9.07477 0 8.57177H1.15709C1.18077 8.98793 1.24646 9.38746 1.35418 9.77036C1.46188 10.1533 1.60427 10.5297 1.78133 10.8996L0.806954 11.4933ZM0.021992 7.42823C0.0603462 6.92523 0.143806 6.4273 0.272371 5.93444C0.400937 5.4416 0.579131 4.96567 0.806954 4.50665L1.80333 5.07842C1.62062 5.44834 1.47315 5.82983 1.36093 6.22287C1.24872 6.61591 1.18077 7.0177 1.15709 7.42823H0.021992ZM3.52381 14.6128C3.10877 14.3286 2.71855 14.0103 2.35315 13.6578C1.98774 13.3054 1.66294 12.9217 1.37872 12.5067L2.3751 11.9044C2.5939 12.2507 2.84879 12.5656 3.13976 12.8492C3.43073 13.1329 3.74934 13.3914 4.09558 13.6249L3.52381 14.6128ZM2.3751 4.09558L1.37872 3.52381C1.66294 3.09411 1.98408 2.70163 2.34215 2.34637C2.70023 1.99112 3.09411 1.67139 3.52381 1.38719L4.09558 2.3751C3.75837 2.60856 3.44568 2.86571 3.15753 3.14653C2.86937 3.42736 2.60856 3.7437 2.3751 4.09558ZM7.42823 16C6.92523 15.9616 6.4273 15.8745 5.93444 15.7386C5.4416 15.6027 4.96567 15.4209 4.50665 15.193L5.07842 14.2187C5.44834 14.4014 5.82983 14.5452 6.22287 14.6501C6.61591 14.7549 7.0177 14.8192 7.42823 14.8429V16ZM5.10042 1.80333L4.50665 0.806954C4.96567 0.579131 5.4416 0.397272 5.93444 0.261376C6.4273 0.125479 6.92523 0.0383541 7.42823 0V1.15709C7.0177 1.18077 6.61957 1.24872 6.23386 1.36093C5.84815 1.47315 5.47034 1.62062 5.10042 1.80333ZM8.57177 16V14.8429C8.9823 14.8192 9.38409 14.7549 9.77713 14.6501C10.1702 14.5452 10.5517 14.4014 10.9216 14.2187L11.4933 15.193C11.0343 15.4209 10.5584 15.6027 10.0656 15.7386C9.5727 15.8745 9.07477 15.9616 8.57177 16ZM10.9216 1.78133C10.5517 1.59862 10.1702 1.45482 9.77713 1.34994C9.38409 1.24505 8.9823 1.18077 8.57177 1.15709V0C9.07477 0.0383541 9.5727 0.125479 10.0656 0.261376C10.5584 0.397272 11.0343 0.579131 11.4933 0.806954L10.9216 1.78133ZM12.4762 14.6128L11.9044 13.6469C12.2563 13.4134 12.5726 13.149 12.8535 12.8535C13.1343 12.558 13.3914 12.2416 13.6249 11.9044L14.6128 12.4982C14.3286 12.9132 14.0052 13.297 13.6426 13.6494C13.28 14.0018 12.8912 14.323 12.4762 14.6128ZM13.6249 4.08713C13.3914 3.74991 13.1306 3.43862 12.8425 3.15328C12.5543 2.86796 12.2416 2.60856 11.9044 2.3751L12.4762 1.38719C12.8912 1.67703 13.28 1.99817 13.6426 2.3506C14.0052 2.70304 14.3314 3.08678 14.6213 3.50181L13.6249 4.08713ZM14.8429 7.42823C14.8192 7.0177 14.7535 6.61957 14.6458 6.23386C14.5381 5.84815 14.3929 5.46752 14.2102 5.09197L15.193 4.50665C15.4265 4.96003 15.6098 5.43314 15.7429 5.926C15.8759 6.41884 15.9616 6.91958 16 7.42823H14.8429ZM15.193 11.4933L14.2187 10.9216C14.4014 10.5517 14.5452 10.1702 14.6501 9.77713C14.7549 9.38409 14.8192 8.9823 14.8429 8.57177H16C15.9616 9.07477 15.8745 9.5727 15.7386 10.0656C15.6027 10.5584 15.4209 11.0343 15.193 11.4933Z"
fill="#3f76ff"
/>
</svg>
);

29
packages/ui/src/icons/panel-center-icon.tsx Normal file
View File

@ -0,0 +1,29 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const FullScreenPeekIcon: React.FC<ISvgIcons> = ({
className = "text-current",
...rest
}) => (
<svg
viewBox="0 0 24 24"
className={`${className} stroke-2`}
stroke="currentColor"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<path
d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M20 3H12V5V19V21H20C20.5523 21 21 20.1046 21 19V5C21 3.89543 20.5523 3 20 3Z"
fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
);

35
packages/ui/src/icons/photo-filter-icon.tsx Normal file
View File

@ -0,0 +1,35 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const PhotoFilterIcon: React.FC<ISvgIcons> = ({
className = "text-current",
...rest
}) => (
<svg
viewBox="0 0 24 24"
className={`${className} stroke-2`}
stroke="currentColor"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<path
d="M21 12V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H12"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M19 3L18.5778 4.28889C18.5562 4.35583 18.519 4.41668 18.4692 4.46643C18.4195 4.51619 18.3587 4.55344 18.2918 4.57511L17 5L18.2889 5.42222C18.3558 5.44384 18.4167 5.48104 18.4664 5.53076C18.5162 5.58048 18.5534 5.6413 18.5751 5.70822L19 7L19.4222 5.71111C19.4438 5.64417 19.481 5.58332 19.5308 5.53357C19.5805 5.48381 19.6413 5.44656 19.7082 5.42489L21 5L19.7111 4.57778C19.6442 4.55616 19.5833 4.51896 19.5336 4.46924C19.4838 4.41952 19.4466 4.3587 19.4249 4.29178L19 3Z"
fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12 9L11.3667 10.9333C11.3342 11.0337 11.2784 11.125 11.2039 11.1997C11.1293 11.2743 11.038 11.3302 10.9377 11.3627L9 12L10.9333 12.6333C11.0337 12.6658 11.125 12.7216 11.1997 12.7961C11.2743 12.8707 11.3302 12.962 11.3627 13.0623L12 15L12.6333 13.0667C12.6658 12.9663 12.7216 12.875 12.7961 12.8003C12.8707 12.7257 12.962 12.6698 13.0623 12.6373L15 12L13.0667 11.3667C12.9663 11.3342 12.875 11.2784 12.8003 11.2039C12.7257 11.1293 12.6698 11.038 12.6373 10.9377L12 9Z"
fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
);

36
packages/ui/src/icons/priority-icon.tsx Normal file
View File

@ -0,0 +1,36 @@
import * as React from "react";
// icons
import {
AlertCircle,
Ban,
SignalHigh,
SignalLow,
SignalMedium,
} from "lucide-react";
// types
import { IPriorityIcon } from "./type";
export const PriorityIcon: React.FC<IPriorityIcon> = ({
priority,
className = "",
}) => {
if (!className || className === "") className = "h-3.5 w-3.5";
return (
<>
{priority === "urgent" ? (
<AlertCircle className={`${className}`} />
) : priority === "high" ? (
<SignalHigh className={`${className}`} />
) : priority === "medium" ? (
<SignalMedium className={`${className}`} />
) : priority === "low" ? (
<SignalLow className={`${className}`} />
) : (
<Ban className={`${className}`} />
)}
</>
);
};

33
packages/ui/src/icons/related-icon.tsx Normal file
View File

@ -0,0 +1,33 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const RelatedIcon: React.FC<ISvgIcons> = ({
className = "text-current",
...rest
}) => (
<svg
viewBox="0 0 24 24"
className={`${className} stroke-2`}
stroke="currentColor"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<path
d="M20 13V6C20 5.46957 19.7893 4.96086 19.4142 4.58579C19.0391 4.21071 18.5304 4 18 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H11"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12.125 19.25L9 16.125L12.125 13"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M20 22V18.1818C20 17.6032 19.7366 17.0482 19.2678 16.639C18.7989 16.2299 18.163 16 17.5 16H10"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
);

18
packages/ui/src/icons/running-icon.tsx Normal file
View File

@ -0,0 +1,18 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const RunningIcon: React.FC<ISvgIcons> = ({
className = "fill-current",
...rest
}) => (
<svg
viewBox="0 0 24 24"
className={`${className} `}
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<path d="M4.05 12L3.2625 11.2125L10.9125 3.5625H8.25V5.0625H7.125V2.4375H11.3063C11.4813 2.4375 11.65 2.46875 11.8125 2.53125C11.975 2.59375 12.1188 2.6875 12.2438 2.8125L14.4938 5.04375C14.8563 5.40625 15.275 5.68125 15.75 5.86875C16.225 6.05625 16.725 6.1625 17.25 6.1875V7.3125C16.6 7.2875 15.975 7.16563 15.375 6.94688C14.775 6.72813 14.25 6.3875 13.8 5.925L12.9375 5.0625L10.8 7.2L12.4125 8.8125L7.8375 11.4563L7.275 10.4813L10.575 8.56875L9.0375 7.03125L4.05 12ZM2.25 6.75V5.625H6V6.75H2.25ZM0.75 4.3125V3.1875H4.5V4.3125H0.75ZM14.8125 2.8125C14.45 2.8125 14.1406 2.68438 13.8844 2.42813C13.6281 2.17188 13.5 1.8625 13.5 1.5C13.5 1.1375 13.6281 0.828125 13.8844 0.571875C14.1406 0.315625 14.45 0.1875 14.8125 0.1875C15.175 0.1875 15.4844 0.315625 15.7406 0.571875C15.9969 0.828125 16.125 1.1375 16.125 1.5C16.125 1.8625 15.9969 2.17188 15.7406 2.42813C15.4844 2.68438 15.175 2.8125 14.8125 2.8125ZM2.25 1.875V0.75H6V1.875H2.25Z" />
</svg>
);

29
packages/ui/src/icons/side-peek-icon.tsx Normal file
View File

@ -0,0 +1,29 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const SidePeekIcon: React.FC<ISvgIcons> = ({
className = "text-current",
...rest
}) => (
<svg
viewBox="0 0 24 24"
className={`${className} stroke-2`}
stroke="currentColor"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<path
d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M20 3H12V5V19V21H20C20.5523 21 21 20.1046 21 19V5C21 3.89543 20.5523 3 20 3Z"
fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
);

39
packages/ui/src/icons/state/backlog-group-icon.tsx Normal file
View File

@ -0,0 +1,39 @@
import * as React from "react";
import { ISvgIcons } from "../type";
export const BacklogGroupIcon: React.FC<ISvgIcons> = ({
width = "20",
height = "20",
className,
color = "#a3a3a3",
}) => (
<svg
height={height}
width={width}
className={className}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 323.15 323.03"
>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<path
fill={color}
d="M163.42,322.92A172.12,172.12,0,0,1,104.8,312.7c-3.92-1.4-5.22-3.05-3.07-7.1,2.4-4.52,3-11.38,6.64-13.48s9.34,2.47,14.23,3.81c29.55,8.11,58.78,7.25,87.57-3.31,4.08-1.5,5.86-1.05,7.09,3.21a82.63,82.63,0,0,0,4.6,11c1.19,2.57,1,4.06-2,5.2a163.84,163.84,0,0,1-40.05,9.76C173.84,322.45,167.89,323.34,163.42,322.92Z"
/>
<path
fill={color}
d="M.07,163a174.76,174.76,0,0,1,10.07-58c1.59-4.57,3.53-5.59,7.8-3.2a61,61,0,0,0,10.11,4.19c3.11,1.06,4.07,2.46,2.71,5.79-6.43,15.73-9.17,32.33-9.23,49.14a132.65,132.65,0,0,0,8.17,47.35c2.44,6.5,2.33,6.57-4.06,9.35-3.35,1.45-6.83,2.63-10.11,4.23-2.44,1.19-3.54.49-4.43-1.86a162.3,162.3,0,0,1-10-41C.51,173.12-.24,167.17.07,163Z"
/>
<path
fill={color}
d="M323,160.16a169.68,169.68,0,0,1-10.2,58.09c-1.45,4.08-3.21,5.07-7.14,3a105.3,105.3,0,0,0-11.48-4.81c-2.23-.85-3.2-1.85-2.16-4.41a133.86,133.86,0,0,0,9.57-48.59,132,132,0,0,0-8.9-50.69c-1.67-4.24-.8-5.79,3.29-7a84,84,0,0,0,11-4.62c2.65-1.24,4.05-.82,5.16,2.12a159.68,159.68,0,0,1,9.68,39C322.56,148.71,323.52,155.17,323,160.16Z"
/>
<path
fill={color}
d="M161.59,0a164.28,164.28,0,0,1,58,10.72c2.81,1,3.75,2,2.41,4.93-2,4.38-3.86,8.84-5.5,13.37-.93,2.56-2.28,2.77-4.53,1.87a137.94,137.94,0,0,0-99.35-.52c-3.43,1.32-5.3,1.35-6.45-2.69a50.33,50.33,0,0,0-4.55-11c-2.25-3.93-.36-5.11,2.9-6.29A165.32,165.32,0,0,1,161.59,0Z"
/>
</g>
</g>
</svg>
);

32
packages/ui/src/icons/state/cancelled-group-icon.tsx Normal file
View File

@ -0,0 +1,32 @@
import * as React from "react";
import { ISvgIcons } from "../type";
export const CancelledGroupIcon: React.FC<ISvgIcons> = ({
className = "",
color = "#ef4444",
height = "20",
width = "20",
...rest
}) => (
<svg
height={height}
width={width}
className={className}
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<g clipPath="url(#clip0_4052_100277)">
<path
d="M8 8.84L10.58 11.42C10.7 11.54 10.84 11.6 11 11.6C11.16 11.6 11.3 11.54 11.42 11.42C11.54 11.3 11.6 11.16 11.6 11C11.6 10.84 11.54 10.7 11.42 10.58L8.84 8L11.42 5.42C11.54 5.3 11.6 5.16 11.6 5C11.6 4.84 11.54 4.7 11.42 4.58C11.3 4.46 11.16 4.4 11 4.4C10.84 4.4 10.7 4.46 10.58 4.58L8 7.16L5.42 4.58C5.3 4.46 5.16 4.4 5 4.4C4.84 4.4 4.7 4.46 4.58 4.58C4.46 4.7 4.4 4.84 4.4 5C4.4 5.16 4.46 5.3 4.58 5.42L7.16 8L4.58 10.58C4.46 10.7 4.4 10.84 4.4 11C4.4 11.16 4.46 11.3 4.58 11.42C4.7 11.54 4.84 11.6 5 11.6C5.16 11.6 5.3 11.54 5.42 11.42L8 8.84ZM8 16C6.90667 16 5.87333 15.79 4.9 15.37C3.92667 14.95 3.07667 14.3767 2.35 13.65C1.62333 12.9233 1.05 12.0733 0.63 11.1C0.21 10.1267 0 9.09333 0 8C0 6.89333 0.21 5.85333 0.63 4.88C1.05 3.90667 1.62333 3.06 2.35 2.34C3.07667 1.62 3.92667 1.05 4.9 0.63C5.87333 0.21 6.90667 0 8 0C9.10667 0 10.1467 0.21 11.12 0.63C12.0933 1.05 12.94 1.62 13.66 2.34C14.38 3.06 14.95 3.90667 15.37 4.88C15.79 5.85333 16 6.89333 16 8C16 9.09333 15.79 10.1267 15.37 11.1C14.95 12.0733 14.38 12.9233 13.66 13.65C12.94 14.3767 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16ZM8 14.8C9.89333 14.8 11.5 14.1367 12.82 12.81C14.14 11.4833 14.8 9.88 14.8 8C14.8 6.10667 14.14 4.5 12.82 3.18C11.5 1.86 9.89333 1.2 8 1.2C6.12 1.2 4.51667 1.86 3.19 3.18C1.86333 4.5 1.2 6.10667 1.2 8C1.2 9.88 1.86333 11.4833 3.19 12.81C4.51667 14.1367 6.12 14.8 8 14.8Z"
fill={color}
/>
</g>
<defs>
<clipPath id="clip0_4052_100277">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
);

25
packages/ui/src/icons/state/completed-group-icon.tsx Normal file
View File

@ -0,0 +1,25 @@
import * as React from "react";
import { ISvgIcons } from "../type";
export const CompletedGroupIcon: React.FC<ISvgIcons> = ({
className = "",
color = "#16a34a",
height = "20",
width = "20",
...rest
}) => (
<svg
height={height}
width={width}
className={className}
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<path
d="M6.80486 9.80731L4.84856 7.85103C4.73197 7.73443 4.58542 7.67478 4.4089 7.67208C4.23238 7.66937 4.08312 7.72902 3.96113 7.85103C3.83913 7.97302 3.77814 8.12093 3.77814 8.29474C3.77814 8.46855 3.83913 8.61645 3.96113 8.73844L6.27206 11.0494C6.42428 11.2016 6.60188 11.2777 6.80486 11.2777C7.00782 11.2777 7.18541 11.2016 7.33764 11.0494L12.0227 6.36435C12.1393 6.24776 12.1989 6.10121 12.2016 5.92469C12.2043 5.74817 12.1447 5.59891 12.0227 5.47692C11.9007 5.35493 11.7528 5.29393 11.579 5.29393C11.4051 5.29393 11.2572 5.35493 11.1353 5.47692L6.80486 9.80731ZM8.00141 16C6.89494 16 5.85491 15.79 4.88132 15.3701C3.90772 14.9502 3.06082 14.3803 2.34064 13.6604C1.62044 12.9405 1.05028 12.094 0.63017 11.1208C0.210057 10.1477 0 9.10788 0 8.00141C0 6.89494 0.209966 5.85491 0.629896 4.88132C1.04983 3.90772 1.61972 3.06082 2.33958 2.34064C3.05946 1.62044 3.90598 1.05028 4.87915 0.630171C5.8523 0.210058 6.89212 0 7.99859 0C9.10506 0 10.1451 0.209966 11.1187 0.629897C12.0923 1.04983 12.9392 1.61972 13.6594 2.33959C14.3796 3.05946 14.9497 3.90598 15.3698 4.87915C15.7899 5.8523 16 6.89212 16 7.99859C16 9.10506 15.79 10.1451 15.3701 11.1187C14.9502 12.0923 14.3803 12.9392 13.6604 13.6594C12.9405 14.3796 12.094 14.9497 11.1208 15.3698C10.1477 15.7899 9.10788 16 8.00141 16ZM8 14.7369C9.88071 14.7369 11.4737 14.0842 12.779 12.779C14.0842 11.4737 14.7369 9.88071 14.7369 8C14.7369 6.11929 14.0842 4.52631 12.779 3.22104C11.4737 1.91577 9.88071 1.26314 8 1.26314C6.11929 1.26314 4.52631 1.91577 3.22104 3.22104C1.91577 4.52631 1.26314 6.11929 1.26314 8C1.26314 9.88071 1.91577 11.4737 3.22104 12.779C4.52631 14.0842 6.11929 14.7369 8 14.7369Z"
fill={color}
/>
</svg>
);

24
packages/ui/src/icons/state/helper.tsx Normal file
View File

@ -0,0 +1,24 @@
export interface IStateGroupIcon {
className?: string;
color?: string;
stateGroup: TStateGroups;
height?: string;
width?: string;
}
export type TStateGroups =
| "backlog"
| "unstarted"
| "started"
| "completed"
| "cancelled";
export const STATE_GROUP_COLORS: {
[key in TStateGroups]: string;
} = {
backlog: "#d9d9d9",
unstarted: "#3f76ff",
started: "#f59e0b",
completed: "#16a34a",
cancelled: "#dc2626",
};

6
packages/ui/src/icons/state/index.tsx Normal file
View File

@ -0,0 +1,6 @@
export * from "./backlog-group-icon";
export * from "./cancelled-group-icon";
export * from "./completed-group-icon";
export * from "./started-group-icon";
export * from "./state-group-icon";
export * from "./unstarted-group-icon";

43
packages/ui/src/icons/state/started-group-icon.tsx Normal file
View File

@ -0,0 +1,43 @@
import * as React from "react";
import { ISvgIcons } from "../type";
export const StartedGroupIcon: React.FC<ISvgIcons> = ({
width = "20",
height = "20",
className,
color = "#f39e1f",
}) => (
<svg
height={height}
width={width}
className={className}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 152.93 152.95"
>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<path
fill={color}
d="M77.74,0C35.63-.62.78,32.9,0,74.94c-.77,42.74,33,77.34,76.23,78A76.48,76.48,0,0,0,77.74,0ZM75.46,142.68a66.24,66.24,0,1,1,3-132.45c35.71,1,66.31,31.26,64.16,70.08A66.23,66.23,0,0,1,75.46,142.68Z"
/>
<path
fill={color}
d="M124.29,76.58a49.52,49.52,0,0,1-3.11,16.9c-.38,1-.77,1.27-1.81.78-2.15-1-4.34-1.92-6.56-2.72-1.3-.46-1.51-1-1-2.3a36.61,36.61,0,0,0,.64-23.77c-1-3.48-1.06-3.47,2.38-4.88,1.57-.65,3.15-1.27,4.68-2,.94-.44,1.34-.22,1.69.75A49.74,49.74,0,0,1,124.29,76.58Z"
/>
<path
fill={color}
d="M94.65,32.63c-.1.22-.19.42-.27.63-1,2.5-2.08,5-3.09,7.51-.28.69-.55.89-1.37.59a37.3,37.3,0,0,0-26.82,0c-.91.34-1.15.08-1.46-.7-1-2.46-2-4.92-3.06-7.34-.42-.92-.07-1.18.69-1.46a47.66,47.66,0,0,1,34.43,0C94.06,32,94.68,32,94.65,32.63Z"
/>
<path
fill={color}
d="M28.72,76.67a48.27,48.27,0,0,1,3-17.13c.45-1.25.92-1.34,2-.83,2.25,1,4.56,2,6.87,2.87.86.34,1.05.67.71,1.58a36.85,36.85,0,0,0-.07,26.36c.36,1,.3,1.46-.75,1.86-2.38.9-4.72,1.88-7,2.92-1,.43-1.33.2-1.68-.76A46.76,46.76,0,0,1,28.72,76.67Z"
/>
<path
fill={color}
d="M76.37,124.22a48.11,48.11,0,0,1-16.91-3.08c-1.05-.38-1.26-.8-.79-1.82,1-2.31,2-4.66,2.93-7,.34-.87.69-1.06,1.61-.72a37.06,37.06,0,0,0,26.67,0c.75-.28,1.09-.23,1.39.55,1,2.56,2,5.13,3.18,7.65.49,1.08-.3,1.13-.86,1.34A46.53,46.53,0,0,1,76.37,124.22Z"
/>
</g>
</g>
</svg>
);

35
packages/ui/src/icons/state/state-group-icon.tsx Normal file
View File

@ -0,0 +1,35 @@
import * as React from "react";
import { BacklogGroupIcon } from "./backlog-group-icon";
import { CancelledGroupIcon } from "./cancelled-group-icon";
import { CompletedGroupIcon } from "./completed-group-icon";
import { StartedGroupIcon } from "./started-group-icon";
import { UnstartedGroupIcon } from "./unstarted-group-icon";
import { IStateGroupIcon, STATE_GROUP_COLORS } from "./helper";
const iconComponents = {
backlog: BacklogGroupIcon,
cancelled: CancelledGroupIcon,
completed: CompletedGroupIcon,
started: StartedGroupIcon,
unstarted: UnstartedGroupIcon,
};
export const StateGroupIcon: React.FC<IStateGroupIcon> = ({
className = "",
color,
stateGroup,
height = "12px",
width = "12px",
}) => {
const StateIconComponent = iconComponents[stateGroup] || UnstartedGroupIcon;
return (
<StateIconComponent
height={height}
width={width}
color={color ?? STATE_GROUP_COLORS[stateGroup]}
className={`flex-shrink-0 ${className}`}
/>
);
};

21
packages/ui/src/icons/state/unstarted-group-icon.tsx Normal file
View File

@ -0,0 +1,21 @@
import * as React from "react";
import { ISvgIcons } from "../type";
export const UnstartedGroupIcon: React.FC<ISvgIcons> = ({
width = "20",
height = "20",
className,
color = "#3a3a3a",
}) => (
<svg
height={height}
width={width}
className={className}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="8" cy="8" r="7.4" stroke={color} strokeWidth="1.2" />
</svg>
);

33
packages/ui/src/icons/subscribe-icon.tsx Normal file
View File

@ -0,0 +1,33 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const SubscribeIcon: React.FC<ISvgIcons> = ({
className = "text-current",
...rest
}) => (
<svg
viewBox="0 0 24 24"
className={`${className} stroke-2`}
stroke="currentColor"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<path
d="M21 12V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H12"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M15 5.1C15 4.54305 15.2107 4.0089 15.5858 3.61508C15.9609 3.22125 16.4696 3 17 3C17.5304 3 18.0391 3.22125 18.4142 3.61508C18.7893 4.0089 19 4.54305 19 5.1C19 7.55 20 8.25 20 8.25H14C14 8.25 15 7.55 15 5.1Z"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M16.25 11C16.3238 11 16.4324 11 16.5643 11C16.6963 11 16.8467 11 17 11C17.1533 11 17.3037 11 17.4357 11C17.5676 11 17.6762 11 17.75 11"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
);

18
packages/ui/src/icons/transfer-icon.tsx Normal file
View File

@ -0,0 +1,18 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const TransferIcon: React.FC<ISvgIcons> = ({
className = "fill-current",
...rest
}) => (
<svg
viewBox="0 0 24 24"
className={`${className} `}
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<path d="M6.16683 14.6667C4.54183 14.6667 3.16336 14.1007 2.03141 12.9688C0.899468 11.8368 0.333496 10.4583 0.333496 8.83333C0.333496 7.125 0.941135 5.73264 2.15641 4.65625C3.37169 3.57986 4.72933 3.09028 6.22933 3.1875L4.87516 1.83333C4.75016 1.70833 4.68766 1.55903 4.68766 1.38542C4.68766 1.21181 4.75016 1.0625 4.87516 0.9375C5.00016 0.8125 5.14947 0.75 5.32308 0.75C5.49669 0.75 5.646 0.8125 5.771 0.9375L8.22933 3.39583C8.29877 3.46528 8.34739 3.53472 8.37516 3.60417C8.40294 3.67361 8.41683 3.75 8.41683 3.83333C8.41683 3.91667 8.40294 3.99306 8.37516 4.0625C8.34739 4.13194 8.29877 4.20139 8.22933 4.27083L5.771 6.72917C5.646 6.85417 5.50016 6.91319 5.3335 6.90625C5.16683 6.89931 5.021 6.83333 4.896 6.70833C4.771 6.58333 4.7085 6.43403 4.7085 6.26042C4.7085 6.08681 4.771 5.9375 4.896 5.8125L6.29183 4.41667C4.97239 4.38889 3.8578 4.79167 2.94808 5.625C2.03836 6.45833 1.5835 7.52778 1.5835 8.83333C1.5835 10.0972 2.03141 11.1771 2.92725 12.0729C3.82308 12.9688 4.90294 13.4167 6.16683 13.4167H8.04183C8.22239 13.4167 8.37169 13.4757 8.48975 13.5938C8.6078 13.7118 8.66683 13.8611 8.66683 14.0417C8.66683 14.2222 8.6078 14.3715 8.48975 14.4896C8.37169 14.6076 8.22239 14.6667 8.04183 14.6667H6.16683ZM11.5835 14.6667C11.2363 14.6667 10.9411 14.5451 10.6981 14.3021C10.455 14.059 10.3335 13.7639 10.3335 13.4167V10.0833C10.3335 9.73611 10.455 9.44097 10.6981 9.19792C10.9411 8.95486 11.2363 8.83333 11.5835 8.83333H16.5835C16.9307 8.83333 17.2259 8.95486 17.4689 9.19792C17.712 9.44097 17.8335 9.73611 17.8335 10.0833V13.4167C17.8335 13.7639 17.712 14.059 17.4689 14.3021C17.2259 14.5451 16.9307 14.6667 16.5835 14.6667H11.5835ZM11.5835 13.4167H16.5835V10.0833H11.5835V13.4167ZM11.5835 7.16667C11.2363 7.16667 10.9411 7.04514 10.6981 6.80208C10.455 6.55903 10.3335 6.26389 10.3335 5.91667V2.58333C10.3335 2.23611 10.455 1.94097 10.6981 1.69792C10.9411 1.45486 11.2363 1.33333 11.5835 1.33333H16.5835C16.9307 1.33333 17.2259 1.45486 17.4689 1.69792C17.712 1.94097 17.8335 2.23611 17.8335 2.58333V5.91667C17.8335 6.26389 17.712 6.55903 17.4689 6.80208C17.2259 7.04514 16.9307 7.16667 16.5835 7.16667H11.5835Z" />
</svg>
);

10
packages/ui/src/icons/type.d.ts vendored Normal file
View File

@ -0,0 +1,10 @@
export interface ISvgIcons extends React.SVGAttributes<SVGElement> {
className?: string | undefined;
}
export type TIssuePriorities = "urgent" | "high" | "medium" | "low" | "none";
export interface IPriorityIcon {
priority: TIssuePriorities | null;
className?: string;
}

38
packages/ui/src/icons/user-group-icon.tsx Normal file
View File

@ -0,0 +1,38 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const UserGroupIcon: React.FC<ISvgIcons> = ({
className = "text-current",
...rest
}) => (
<svg
viewBox="0 0 24 24"
className={`${className} stroke-2`}
stroke="currentColor"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<path
d="M18 19C18 17.4087 17.3679 15.8826 16.2426 14.7574C15.1174 13.6321 13.5913 13 12 13C10.4087 13 8.88258 13.6321 7.75736 14.7574C6.63214 15.8826 6 17.4087 6 19"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12 13C14.2091 13 16 11.2091 16 9C16 6.79086 14.2091 5 12 5C9.79086 5 8 6.79086 8 9C8 11.2091 9.79086 13 12 13Z"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M23 18C23 16.636 22.4732 15.3279 21.5355 14.3635C20.5979 13.399 19.3261 12.8571 18 12.8571C18.8841 12.8571 19.7319 12.4959 20.357 11.8529C20.9821 11.21 21.3333 10.3379 21.3333 9.42857C21.3333 8.51926 20.9821 7.64719 20.357 7.00421C19.7319 6.36122 18.8841 6 18 6"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M1 18C1 16.636 1.52678 15.3279 2.46447 14.3635C3.40215 13.399 4.67392 12.8571 6 12.8571C5.11595 12.8571 4.2681 12.4959 3.64298 11.8529C3.01786 11.21 2.66667 10.3379 2.66667 9.42857C2.66667 8.51926 3.01786 7.64719 3.64298 7.00421C4.2681 6.36122 5.11595 6 6 6"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
);

1
packages/ui/src/index.tsx
View File

@ -4,3 +4,4 @@ export * from "./progress";
export * from "./spinners"; export * from "./spinners";
export * from "./loader"; export * from "./loader";
export * from "./tooltip"; export * from "./tooltip";
export * from "./icons";

13
web/components/analytics/custom-analytics/sidebar/sidebar.tsx
View File

@ -11,10 +11,9 @@ import { useMobxStore } from "lib/mobx/store-provider";
// components // components
import { CustomAnalyticsSidebarHeader, CustomAnalyticsSidebarProjectsList } from "components/analytics"; import { CustomAnalyticsSidebarHeader, CustomAnalyticsSidebarProjectsList } from "components/analytics";
// ui // ui
import { Button } from "@plane/ui"; import { Button, LayersIcon } from "@plane/ui";
// icons // icons
import { ArrowDownTrayIcon, ArrowPathIcon, CalendarDaysIcon } from "@heroicons/react/24/outline"; import { CalendarDays, Download, RefreshCw } from "lucide-react";
import { LayerDiagonalIcon } from "components/icons";
// helpers // helpers
import { renderShortDate } from "helpers/date-time.helper"; import { renderShortDate } from "helpers/date-time.helper";
// types // types
@ -165,12 +164,12 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer(
> >
<div className="flex items-center gap-2 flex-wrap"> <div className="flex items-center gap-2 flex-wrap">
<div className="flex items-center gap-1 bg-custom-background-80 rounded-md px-3 py-1 text-custom-text-200 text-xs"> <div className="flex items-center gap-1 bg-custom-background-80 rounded-md px-3 py-1 text-custom-text-200 text-xs">
<LayerDiagonalIcon height={14} width={14} /> <LayersIcon height={14} width={14} />
{analytics ? analytics.total : "..."} Issues {analytics ? analytics.total : "..."} Issues
</div> </div>
{isProjectLevel && ( {isProjectLevel && (
<div className="flex items-center gap-1 bg-custom-background-80 rounded-md px-3 py-1 text-custom-text-200 text-xs"> <div className="flex items-center gap-1 bg-custom-background-80 rounded-md px-3 py-1 text-custom-text-200 text-xs">
<CalendarDaysIcon className="h-3.5 w-3.5" /> <CalendarDays className="h-3.5 w-3.5" />
{renderShortDate( {renderShortDate(
(cycleId (cycleId
? cycleDetails?.created_at ? cycleDetails?.created_at
@ -196,7 +195,7 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer(
<div className="flex items-center gap-2 flex-wrap justify-self-end"> <div className="flex items-center gap-2 flex-wrap justify-self-end">
<Button <Button
variant="neutral-primary" variant="neutral-primary"
prependIcon={<ArrowPathIcon className="h-3.5 w-3.5" />} prependIcon={<RefreshCw className="h-3.5 w-3.5" />}
onClick={() => { onClick={() => {
if (!workspaceSlug) return; if (!workspaceSlug) return;
@ -205,7 +204,7 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer(
> >
Refresh Refresh
</Button> </Button>
<Button variant="primary" prependIcon={<ArrowDownTrayIcon />} onClick={exportAnalytics}> <Button variant="primary" prependIcon={<Download className="h-3.5 w-3.5" />} onClick={exportAnalytics}>
Export as CSV Export as CSV
</Button> </Button>
</div> </div>

2
web/components/analytics/custom-analytics/table.tsx
View File

@ -1,7 +1,7 @@
import { BarDatum } from "@nivo/bar"; import { BarDatum } from "@nivo/bar";
// icons // icons
import { PriorityIcon } from "components/icons"; import { PriorityIcon } from "@plane/ui";
// helpers // helpers
import { generateBarColor, generateDisplayName } from "helpers/analytics.helper"; import { generateBarColor, generateDisplayName } from "helpers/analytics.helper";
// types // types

4
web/components/analytics/scope-and-demand/demand.tsx
View File

@ -1,5 +1,5 @@
// icons // icons
import { PlayIcon } from "@heroicons/react/24/outline"; import { Triangle } from "lucide-react";
// types // types
import { IDefaultAnalyticsResponse, TStateGroups } from "types"; import { IDefaultAnalyticsResponse, TStateGroups } from "types";
// constants // constants
@ -52,7 +52,7 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
</div> </div>
<div className="!mt-6 flex w-min items-center gap-2 whitespace-nowrap rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs"> <div className="!mt-6 flex w-min items-center gap-2 whitespace-nowrap rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
<p className="flex items-center gap-1 text-custom-text-200"> <p className="flex items-center gap-1 text-custom-text-200">
<PlayIcon className="h-4 w-4 -rotate-90" aria-hidden="true" /> <Triangle className="h-4 w-4" />
<span>Estimate Demand:</span> <span>Estimate Demand:</span>
</p> </p>
<p className="font-medium"> <p className="font-medium">

4
web/components/auth-screens/project/join-project.tsx
View File

@ -7,7 +7,7 @@ import { ProjectService } from "services/project";
// ui // ui
import { Button } from "@plane/ui"; import { Button } from "@plane/ui";
// icons // icons
import { AssignmentClipboardIcon } from "components/icons"; import { ClipboardList } from "lucide-react";
// images // images
import JoinProjectImg from "public/auth/project-not-authorized.svg"; import JoinProjectImg from "public/auth/project-not-authorized.svg";
// fetch-keys // fetch-keys
@ -52,7 +52,7 @@ export const JoinProject: React.FC = () => {
<div> <div>
<Button <Button
variant="primary" variant="primary"
prependIcon={<AssignmentClipboardIcon color="white" />} prependIcon={<ClipboardList color="white" />}
loading={isJoiningProject} loading={isJoiningProject}
onClick={handleJoin} onClick={handleJoin}
> >

6
web/components/automation/auto-close-automation.tsx
View File

@ -4,10 +4,8 @@ import { useRouter } from "next/router";
// component // component
import { CustomSearchSelect, CustomSelect } from "components/ui"; import { CustomSearchSelect, CustomSelect } from "components/ui";
import { SelectMonthModal } from "components/automation"; import { SelectMonthModal } from "components/automation";
import { ToggleSwitch } from "@plane/ui"; import { ToggleSwitch, StateGroupIcon, DoubleCircleIcon } from "@plane/ui";
// icons // icons
import { Squares2X2Icon } from "@heroicons/react/24/outline";
import { StateGroupIcon } from "components/icons";
import { ArchiveX } from "lucide-react"; import { ArchiveX } from "lucide-react";
// services // services
import { ProjectStateService } from "services/project"; import { ProjectStateService } from "services/project";
@ -157,7 +155,7 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
width="16px" width="16px"
/> />
) : ( ) : (
<Squares2X2Icon className="h-3.5 w-3.5 text-custom-text-200" /> <DoubleCircleIcon className="h-3.5 w-3.5 text-custom-text-200" />
)} )}
{selectedOption?.name {selectedOption?.name
? selectedOption.name ? selectedOption.name

17
web/components/breadcrumbs/index.tsx
View File

@ -2,7 +2,7 @@ import * as React from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import Link from "next/link"; import Link from "next/link";
// icons // icons
import { Icon } from "components/ui"; import { MoveLeft } from "lucide-react";
type BreadcrumbsProps = { type BreadcrumbsProps = {
children: any; children: any;
@ -19,10 +19,7 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
className="group grid h-7 w-7 flex-shrink-0 cursor-pointer place-items-center rounded border border-custom-sidebar-border-200 text-center text-sm hover:bg-custom-sidebar-background-90" className="group grid h-7 w-7 flex-shrink-0 cursor-pointer place-items-center rounded border border-custom-sidebar-border-200 text-center text-sm hover:bg-custom-sidebar-background-90"
onClick={() => router.back()} onClick={() => router.back()}
> >
<Icon <MoveLeft className="h-4 w-4 text-custom-sidebar-text-200 group-hover:text-custom-sidebar-text-100" />
iconName="keyboard_backspace"
className="text-base leading-4 text-custom-sidebar-text-200 group-hover:text-custom-sidebar-text-100"
/>
</button> </button>
{children} {children}
</div> </div>
@ -48,14 +45,8 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
<> <>
{link ? ( {link ? (
<Link href={link}> <Link href={link}>
<a <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm ${linkTruncate ? "truncate" : ""}`}>
className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm ${ <p className={`${linkTruncate ? "truncate" : ""}${icon ? "flex items-center gap-2" : ""}`}>
linkTruncate ? "truncate" : ""
}`}
>
<p
className={`${linkTruncate ? "truncate" : ""}${icon ? "flex items-center gap-2" : ""}`}
>
{icon ?? null} {icon ?? null}
{title} {title}
</p> </p>

4
web/components/command-palette/change-interface-theme.tsx
View File

@ -4,8 +4,8 @@ import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
import { Command } from "cmdk"; import { Command } from "cmdk";
import { THEMES_OBJ } from "constants/themes"; import { THEMES_OBJ } from "constants/themes";
import { useTheme } from "next-themes"; import { useTheme } from "next-themes";
import { SettingIcon } from "components/icons";
import useUser from "hooks/use-user"; import useUser from "hooks/use-user";
import { Settings } from "lucide-react";
// helper // helper
import { unsetCustomCssVariables } from "helpers/theme.helper"; import { unsetCustomCssVariables } from "helpers/theme.helper";
// mobx react lite // mobx react lite
@ -54,7 +54,7 @@ export const ChangeInterfaceTheme: React.FC<Props> = observer(({ setIsPaletteOpe
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 text-custom-text-200"> <div className="flex items-center gap-2 text-custom-text-200">
<SettingIcon className="h-4 w-4 text-custom-text-200" /> <Settings className="h-4 w-4 text-custom-text-200" />
{theme.label} {theme.label}
</div> </div>
</Command.Item> </Command.Item>

65
web/components/command-palette/command-k.tsx
View File

@ -24,8 +24,29 @@ import {
commandGroups, commandGroups,
} from "components/command-palette"; } from "components/command-palette";
// ui // ui
import { Icon } from "components/ui"; import {
import { Loader, ToggleSwitch, Tooltip } from "@plane/ui"; FileText,
FolderPlus,
LinkIcon,
MessageSquare,
Rocket,
Settings,
Signal,
Trash2,
UserMinus2,
UserPlus2,
} from "lucide-react";
import {
ContrastIcon,
DiceIcon,
DoubleCircleIcon,
LayersIcon,
Loader,
PhotoFilterIcon,
ToggleSwitch,
Tooltip,
UserGroupIcon,
} from "@plane/ui";
// icons // icons
import { DiscordIcon, GithubIcon, SettingIcon } from "components/icons"; import { DiscordIcon, GithubIcon, SettingIcon } from "components/icons";
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline"; import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
@ -351,7 +372,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 overflow-hidden text-custom-text-200"> <div className="flex items-center gap-2 overflow-hidden text-custom-text-200">
<Icon iconName={currentSection.icon} /> {currentSection.icon}
<p className="block flex-1 truncate">{currentSection.itemName(item)}</p> <p className="block flex-1 truncate">{currentSection.itemName(item)}</p>
</div> </div>
</Command.Item> </Command.Item>
@ -375,7 +396,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 text-custom-text-200"> <div className="flex items-center gap-2 text-custom-text-200">
<Icon iconName="grid_view" /> <DoubleCircleIcon className="h-3.5 w-3.5" />
Change state... Change state...
</div> </div>
</Command.Item> </Command.Item>
@ -388,7 +409,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 text-custom-text-200"> <div className="flex items-center gap-2 text-custom-text-200">
<Icon iconName="bar_chart" /> <Signal className="h-3.5 w-3.5" />
Change priority... Change priority...
</div> </div>
</Command.Item> </Command.Item>
@ -401,7 +422,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 text-custom-text-200"> <div className="flex items-center gap-2 text-custom-text-200">
<Icon iconName="group" /> <UserGroupIcon className="h-3.5 w-3.5" />
Assign to... Assign to...
</div> </div>
</Command.Item> </Command.Item>
@ -415,12 +436,12 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
<div className="flex items-center gap-2 text-custom-text-200"> <div className="flex items-center gap-2 text-custom-text-200">
{issueDetails?.assignees.includes(user.id) ? ( {issueDetails?.assignees.includes(user.id) ? (
<> <>
<Icon iconName="person_remove" /> <UserMinus2 className="h-3.5 w-3.5" />
Un-assign from me Un-assign from me
</> </>
) : ( ) : (
<> <>
<Icon iconName="person_add" /> <UserPlus2 className="h-3.5 w-3.5" />
Assign to me Assign to me
</> </>
)} )}
@ -428,7 +449,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
</Command.Item> </Command.Item>
<Command.Item onSelect={deleteIssue} className="focus:outline-none"> <Command.Item onSelect={deleteIssue} className="focus:outline-none">
<div className="flex items-center gap-2 text-custom-text-200"> <div className="flex items-center gap-2 text-custom-text-200">
<Icon iconName="delete" /> <Trash2 className="h-3.5 w-3.5" />
Delete issue Delete issue
</div> </div>
</Command.Item> </Command.Item>
@ -440,7 +461,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 text-custom-text-200"> <div className="flex items-center gap-2 text-custom-text-200">
<Icon iconName="link" /> <LinkIcon className="h-3.5 w-3.5" />
Copy issue URL Copy issue URL
</div> </div>
</Command.Item> </Command.Item>
@ -458,7 +479,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
className="focus:bg-custom-background-80" className="focus:bg-custom-background-80"
> >
<div className="flex items-center gap-2 text-custom-text-200"> <div className="flex items-center gap-2 text-custom-text-200">
<Icon iconName="stack" /> <LayersIcon className="h-3.5 w-3.5" />
Create new issue Create new issue
</div> </div>
<kbd>C</kbd> <kbd>C</kbd>
@ -478,7 +499,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 text-custom-text-200"> <div className="flex items-center gap-2 text-custom-text-200">
<Icon iconName="create_new_folder" /> <FolderPlus className="h-3.5 w-3.5" />
Create new project Create new project
</div> </div>
<kbd>P</kbd> <kbd>P</kbd>
@ -500,7 +521,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 text-custom-text-200"> <div className="flex items-center gap-2 text-custom-text-200">
<Icon iconName="contrast" /> <ContrastIcon className="h-3.5 w-3.5" />
Create new cycle Create new cycle
</div> </div>
<kbd>Q</kbd> <kbd>Q</kbd>
@ -518,7 +539,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 text-custom-text-200"> <div className="flex items-center gap-2 text-custom-text-200">
<Icon iconName="dataset" /> <DiceIcon className="h-3.5 w-3.5" />
Create new module Create new module
</div> </div>
<kbd>M</kbd> <kbd>M</kbd>
@ -536,7 +557,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 text-custom-text-200"> <div className="flex items-center gap-2 text-custom-text-200">
<Icon iconName="photo_filter" /> <PhotoFilterIcon className="h-3.5 w-3.5" />
Create new view Create new view
</div> </div>
<kbd>V</kbd> <kbd>V</kbd>
@ -554,7 +575,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 text-custom-text-200"> <div className="flex items-center gap-2 text-custom-text-200">
<Icon iconName="article" /> <FileText className="h-3.5 w-3.5" />
Create new page Create new page
</div> </div>
<kbd>D</kbd> <kbd>D</kbd>
@ -573,7 +594,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 text-custom-text-200"> <div className="flex items-center gap-2 text-custom-text-200">
<Icon iconName="settings" /> <Settings className="h-3.5 w-3.5" />
Search settings... Search settings...
</div> </div>
</Command.Item> </Command.Item>
@ -581,7 +602,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
<Command.Group heading="Account"> <Command.Group heading="Account">
<Command.Item onSelect={createNewWorkspace} className="focus:outline-none"> <Command.Item onSelect={createNewWorkspace} className="focus:outline-none">
<div className="flex items-center gap-2 text-custom-text-200"> <div className="flex items-center gap-2 text-custom-text-200">
<Icon iconName="create_new_folder" /> <FolderPlus className="h-3.5 w-3.5" />
Create new workspace Create new workspace
</div> </div>
</Command.Item> </Command.Item>
@ -594,7 +615,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 text-custom-text-200"> <div className="flex items-center gap-2 text-custom-text-200">
<Icon iconName="settings" /> <Settings className="h-3.5 w-3.5" />
Change interface theme... Change interface theme...
</div> </div>
</Command.Item> </Command.Item>
@ -611,7 +632,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 text-custom-text-200"> <div className="flex items-center gap-2 text-custom-text-200">
<Icon iconName="rocket_launch" /> <Rocket className="h-3.5 w-3.5" />
Open keyboard shortcuts Open keyboard shortcuts
</div> </div>
</Command.Item> </Command.Item>
@ -623,7 +644,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 text-custom-text-200"> <div className="flex items-center gap-2 text-custom-text-200">
<Icon iconName="article" /> <FileText className="h-3.5 w-3.5" />
Open Plane documentation Open Plane documentation
</div> </div>
</Command.Item> </Command.Item>
@ -659,7 +680,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 text-custom-text-200"> <div className="flex items-center gap-2 text-custom-text-200">
<Icon iconName="sms" /> <MessageSquare className="h-3.5 w-3.5" />
Chat with us Chat with us
</div> </div>
</Command.Item> </Command.Item>

21
web/components/command-palette/helpers.tsx
View File

@ -1,4 +1,6 @@
// types // types
import { ContrastIcon, DiceIcon, LayersIcon, PhotoFilterIcon } from "@plane/ui";
import { Briefcase, FileText, LayoutGrid } from "lucide-react";
import { import {
IWorkspaceDefaultSearchResult, IWorkspaceDefaultSearchResult,
IWorkspaceIssueSearchResult, IWorkspaceIssueSearchResult,
@ -8,14 +10,14 @@ import {
export const commandGroups: { export const commandGroups: {
[key: string]: { [key: string]: {
icon: string; icon: JSX.Element;
itemName: (item: any) => React.ReactNode; itemName: (item: any) => React.ReactNode;
path: (item: any) => string; path: (item: any) => string;
title: string; title: string;
}; };
} = { } = {
cycle: { cycle: {
icon: "contrast", icon: <ContrastIcon className="h-3 w-3" />,
itemName: (cycle: IWorkspaceDefaultSearchResult) => ( itemName: (cycle: IWorkspaceDefaultSearchResult) => (
<h6> <h6>
<span className="text-custom-text-200 text-xs">{cycle.project__identifier}</span> <span className="text-custom-text-200 text-xs">{cycle.project__identifier}</span>
@ -28,7 +30,7 @@ export const commandGroups: {
title: "Cycles", title: "Cycles",
}, },
issue: { issue: {
icon: "stack", icon: <LayersIcon className="h-3 w-3" />,
itemName: (issue: IWorkspaceIssueSearchResult) => ( itemName: (issue: IWorkspaceIssueSearchResult) => (
<h6> <h6>
<span className="text-custom-text-200 text-xs">{issue.project__identifier}</span> <span className="text-custom-text-200 text-xs">{issue.project__identifier}</span>
@ -41,7 +43,7 @@ export const commandGroups: {
title: "Issues", title: "Issues",
}, },
issue_view: { issue_view: {
icon: "photo_filter", icon: <PhotoFilterIcon className="h-3 w-3" />,
itemName: (view: IWorkspaceDefaultSearchResult) => ( itemName: (view: IWorkspaceDefaultSearchResult) => (
<h6> <h6>
<span className="text-custom-text-200 text-xs">{view.project__identifier}</span> <span className="text-custom-text-200 text-xs">{view.project__identifier}</span>
@ -54,7 +56,7 @@ export const commandGroups: {
title: "Views", title: "Views",
}, },
module: { module: {
icon: "dataset", icon: <DiceIcon className="h-3 w-3" />,
itemName: (module: IWorkspaceDefaultSearchResult) => ( itemName: (module: IWorkspaceDefaultSearchResult) => (
<h6> <h6>
<span className="text-custom-text-200 text-xs">{module.project__identifier}</span> <span className="text-custom-text-200 text-xs">{module.project__identifier}</span>
@ -67,7 +69,7 @@ export const commandGroups: {
title: "Modules", title: "Modules",
}, },
page: { page: {
icon: "article", icon: <FileText className="h-3 w-3" />,
itemName: (page: IWorkspaceDefaultSearchResult) => ( itemName: (page: IWorkspaceDefaultSearchResult) => (
<h6> <h6>
<span className="text-custom-text-200 text-xs">{page.project__identifier}</span> <span className="text-custom-text-200 text-xs">{page.project__identifier}</span>
@ -80,14 +82,13 @@ export const commandGroups: {
title: "Pages", title: "Pages",
}, },
project: { project: {
icon: "work", icon: <Briefcase className="h-3 w-3" />,
itemName: (project: IWorkspaceProjectSearchResult) => project?.name, itemName: (project: IWorkspaceProjectSearchResult) => project?.name,
path: (project: IWorkspaceProjectSearchResult) => path: (project: IWorkspaceProjectSearchResult) => `/${project?.workspace__slug}/projects/${project?.id}/issues/`,
`/${project?.workspace__slug}/projects/${project?.id}/issues/`,
title: "Projects", title: "Projects",
}, },
workspace: { workspace: {
icon: "grid_view", icon: <LayoutGrid className="h-3 w-3" />,
itemName: (workspace: IWorkspaceSearchResult) => workspace?.name, itemName: (workspace: IWorkspaceSearchResult) => workspace?.name,
path: (workspace: IWorkspaceSearchResult) => `/${workspace?.slug}/`, path: (workspace: IWorkspaceSearchResult) => `/${workspace?.slug}/`,
title: "Workspaces", title: "Workspaces",

4
web/components/command-palette/issue/change-issue-assignee.tsx
View File

@ -11,7 +11,7 @@ import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
// ui // ui
import { Avatar } from "components/ui"; import { Avatar } from "components/ui";
// icons // icons
import { CheckIcon } from "components/icons"; import { Check } from "lucide-react";
// types // types
import { IUser, IIssue } from "types"; import { IUser, IIssue } from "types";
@ -42,7 +42,7 @@ export const ChangeIssueAssignee: FC<Props> = ({ setIsPaletteOpen, issue, user }
</div> </div>
{issue.assignees.includes(member.id) && ( {issue.assignees.includes(member.id) && (
<div> <div>
<CheckIcon className="h-3 w-3" /> <Check className="h-3 w-3" />
</div> </div>
)} )}
</> </>

5
web/components/command-palette/issue/change-issue-priority.tsx
View File

@ -14,7 +14,8 @@ import { IIssue, IUser, TIssuePriorities } from "types";
import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys"; import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
import { PRIORITIES } from "constants/project"; import { PRIORITIES } from "constants/project";
// icons // icons
import { CheckIcon, PriorityIcon } from "components/icons"; import { PriorityIcon } from "@plane/ui";
import { Check } from "lucide-react";
type Props = { type Props = {
setIsPaletteOpen: Dispatch<SetStateAction<boolean>>; setIsPaletteOpen: Dispatch<SetStateAction<boolean>>;
@ -72,7 +73,7 @@ export const ChangeIssuePriority: React.FC<Props> = ({ setIsPaletteOpen, issue,
<PriorityIcon priority={priority} /> <PriorityIcon priority={priority} />
<span className="capitalize">{priority ?? "None"}</span> <span className="capitalize">{priority ?? "None"}</span>
</div> </div>
<div>{priority === issue.priority && <CheckIcon className="h-3 w-3" />}</div> <div>{priority === issue.priority && <Check className="h-3 w-3" />}</div>
</Command.Item> </Command.Item>
))} ))}
</> </>

6
web/components/command-palette/issue/change-issue-state.tsx
View File

@ -10,9 +10,9 @@ import { Command } from "cmdk";
import { IssueService } from "services/issue"; import { IssueService } from "services/issue";
import { ProjectStateService } from "services/project"; import { ProjectStateService } from "services/project";
// ui // ui
import { Spinner } from "@plane/ui"; import { Spinner, StateGroupIcon } from "@plane/ui";
// icons // icons
import { CheckIcon, StateGroupIcon } from "components/icons"; import { Check } from "lucide-react";
// helpers // helpers
import { getStatesList } from "helpers/state.helper"; import { getStatesList } from "helpers/state.helper";
// types // types
@ -85,7 +85,7 @@ export const ChangeIssueState: React.FC<Props> = ({ setIsPaletteOpen, issue, use
<StateGroupIcon stateGroup={state.group} color={state.color} height="16px" width="16px" /> <StateGroupIcon stateGroup={state.group} color={state.color} height="16px" width="16px" />
<p>{state.name}</p> <p>{state.name}</p>
</div> </div>
<div>{state.id === issue.state && <CheckIcon className="h-3 w-3" />}</div> <div>{state.id === issue.state && <Check className="h-3 w-3" />}</div>
</Command.Item> </Command.Item>
)) ))
) : ( ) : (

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

@ -2,9 +2,7 @@ import React, { useEffect, useState } from "react";
// headless ui // headless ui
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
// icons // icons
import { XMarkIcon } from "@heroicons/react/20/solid"; import { Command, Search, X } from "lucide-react";
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { CommandIcon } from "components/icons";
// ui // ui
import { Input } from "@plane/ui"; import { Input } from "@plane/ui";
@ -92,16 +90,13 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
<span>Keyboard Shortcuts</span> <span>Keyboard Shortcuts</span>
<span> <span>
<button type="button" onClick={() => setIsOpen(false)}> <button type="button" onClick={() => setIsOpen(false)}>
<XMarkIcon <X className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100" aria-hidden="true" />
className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100"
aria-hidden="true"
/>
</button> </button>
</span> </span>
</Dialog.Title> </Dialog.Title>
<div> <div>
<div className="flex w-full items-center justify-start gap-1 rounded border-[0.6px] border-custom-border-200 bg-custom-background-90 px-3 py-2"> <div className="flex w-full items-center justify-start gap-1 rounded border-[0.6px] border-custom-border-200 bg-custom-background-90 px-3 py-2">
<MagnifyingGlassIcon className="h-3.5 w-3.5 text-custom-text-200" /> <Search className="h-3.5 w-3.5 text-custom-text-200" />
<Input <Input
id="search" id="search"
name="search" name="search"
@ -126,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">
<CommandIcon className="h-4 w-4 fill-current text-custom-text-200" /> <Command className="h-4 w-4 fill-current 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">
<CommandIcon className="h-4 w-4 fill-current text-custom-text-200" /> <Command className="h-4 w-4 fill-current 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">
@ -169,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">
<CommandIcon className="h-4 w-4 fill-current text-custom-text-200" /> <Command className="h-4 w-4 fill-current 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">
<CommandIcon className="h-4 w-4 fill-current text-custom-text-200" /> <Command className="h-4 w-4 fill-current 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">

7
web/components/common/product-updates-modal.tsx
View File

@ -10,7 +10,7 @@ import { WorkspaceService } from "services/workspace.service";
import { MarkdownRenderer } from "components/ui"; import { MarkdownRenderer } from "components/ui";
import { Loader } from "@plane/ui"; import { Loader } from "@plane/ui";
// icons // icons
import { XMarkIcon } from "@heroicons/react/20/solid"; import { X } from "lucide-react";
// helpers // helpers
import { renderLongDateFormat } from "helpers/date-time.helper"; import { renderLongDateFormat } from "helpers/date-time.helper";
@ -57,10 +57,7 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
<span>Product Updates</span> <span>Product Updates</span>
<span> <span>
<button type="button" onClick={() => setIsOpen(false)}> <button type="button" onClick={() => setIsOpen(false)}>
<XMarkIcon <X className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100" aria-hidden="true" />
className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100"
aria-hidden="true"
/>
</button> </button>
</span> </span>
</Dialog.Title> </Dialog.Title>

11
web/components/core/activity.tsx
View File

@ -7,8 +7,7 @@ import useEstimateOption from "hooks/use-estimate-option";
// services // services
import { IssueLabelService } from "services/issue"; import { IssueLabelService } from "services/issue";
// icons // icons
import { Tooltip } from "@plane/ui"; import { Tooltip, BlockedIcon, BlockerIcon, RelatedIcon, LayersIcon, DiceIcon } from "@plane/ui";
import { Icon } from "components/ui";
import { import {
TagIcon, TagIcon,
CopyPlus, CopyPlus,
@ -23,8 +22,8 @@ import {
LayoutGridIcon, LayoutGridIcon,
SignalMediumIcon, SignalMediumIcon,
MessageSquareIcon, MessageSquareIcon,
UsersIcon,
} from "lucide-react"; } from "lucide-react";
import { BlockedIcon, BlockerIcon, RelatedIcon, StackedLayersHorizontalIcon } from "components/icons";
// helpers // helpers
import { renderShortDateWithYearFormat } from "helpers/date-time.helper"; import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
import { capitalizeFirstLetter } from "helpers/string.helper"; import { capitalizeFirstLetter } from "helpers/string.helper";
@ -359,7 +358,7 @@ const activityDetails: {
if (activity.verb === "created") return "created the issue."; if (activity.verb === "created") return "created the issue.";
else return "deleted an issue."; else return "deleted an issue.";
}, },
icon: <StackedLayersHorizontalIcon width={12} height={12} color="#6b7280" aria-hidden="true" />, icon: <LayersIcon width={12} height={12} color="#6b7280" aria-hidden="true" />,
}, },
labels: { labels: {
message: (activity, showIssue) => { message: (activity, showIssue) => {
@ -517,7 +516,7 @@ const activityDetails: {
</> </>
); );
}, },
icon: <Icon iconName="dataset" className="!text-xs !text-[#6b7280]" aria-hidden="true" />, icon: <DiceIcon className="h-3 w-3 !text-[#6b7280]" aria-hidden="true" />,
}, },
name: { name: {
message: (activity, showIssue) => ( message: (activity, showIssue) => (
@ -563,7 +562,7 @@ const activityDetails: {
</> </>
); );
}, },
icon: <Icon iconName="supervised_user_circle" className="!text-xs !text-[#6b7280]" aria-hidden="true" />, icon: <UsersIcon className="h-3 w-3 !text-[#6b7280]" aria-hidden="true" />,
}, },
priority: { priority: {
message: (activity, showIssue) => ( message: (activity, showIssue) => (

4
web/components/core/filters/date-filter-modal.tsx
View File

@ -8,7 +8,7 @@ import { DateFilterSelect } from "./date-filter-select";
// ui // ui
import { Button } from "@plane/ui"; import { Button } from "@plane/ui";
// icons // icons
import { XMarkIcon } from "@heroicons/react/20/solid"; import { X } from "lucide-react";
// helpers // helpers
import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper"; import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
@ -85,7 +85,7 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
<DateFilterSelect title={title} value={value} onChange={onChange} /> <DateFilterSelect title={title} value={value} onChange={onChange} />
)} )}
/> />
<XMarkIcon className="border-base h-4 w-4 cursor-pointer" onClick={handleClose} /> <X className="h-4 w-4 cursor-pointer" onClick={handleClose} />
</div> </div>
<div className="flex w-full justify-between gap-4"> <div className="flex w-full justify-between gap-4">
<Controller <Controller

5
web/components/core/filters/date-filter-select.tsx
View File

@ -3,7 +3,8 @@ import React from "react";
// ui // ui
import { CustomSelect } from "components/ui"; import { CustomSelect } from "components/ui";
// icons // icons
import { CalendarBeforeIcon, CalendarAfterIcon, CalendarMonthIcon } from "components/icons"; import { CalendarAfterIcon, CalendarBeforeIcon } from "@plane/ui";
import { CalendarDays } from "lucide-react";
// fetch-keys // fetch-keys
type Props = { type Props = {
@ -32,7 +33,7 @@ const dueDateRange: DueDate[] = [
{ {
name: "range", name: "range",
value: "range", value: "range",
icon: <CalendarMonthIcon className="h-4 w-4 " />, icon: <CalendarDays className="h-4 w-4 " />,
}, },
]; ];

54
web/components/core/filters/filters-list.tsx
View File

@ -1,8 +1,7 @@
import React from "react"; import React from "react";
// icons // icons
import { XMarkIcon } from "@heroicons/react/24/outline"; import { PriorityIcon, StateGroupIcon } from "@plane/ui";
import { PriorityIcon, StateGroupIcon } from "components/icons";
// ui // ui
import { Avatar } from "components/ui"; import { Avatar } from "components/ui";
// helpers // helpers
@ -13,6 +12,7 @@ import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
import { IIssueFilterOptions, IIssueLabels, IState, IUserLite, TStateGroups } from "types"; import { IIssueFilterOptions, IIssueLabels, IState, IUserLite, TStateGroups } from "types";
// constants // constants
import { STATE_GROUP_COLORS } from "constants/state"; import { STATE_GROUP_COLORS } from "constants/state";
import { X } from "lucide-react";
type Props = { type Props = {
filters: Partial<IIssueFilterOptions>; filters: Partial<IIssueFilterOptions>;
@ -23,19 +23,10 @@ type Props = {
states: IState[] | undefined; states: IState[] | undefined;
}; };
export const FiltersList: React.FC<Props> = ({ export const FiltersList: React.FC<Props> = ({ filters, setFilters, clearAllFilters, labels, members, states }) => {
filters,
setFilters,
clearAllFilters,
labels,
members,
states,
}) => {
if (!filters) return <></>; if (!filters) return <></>;
const nullFilters = Object.keys(filters).filter( const nullFilters = Object.keys(filters).filter((key) => filters[key as keyof IIssueFilterOptions] === null);
(key) => filters[key as keyof IIssueFilterOptions] === null
);
return ( return (
<div className="flex flex-1 flex-wrap items-center gap-2 text-xs"> <div className="flex flex-1 flex-wrap items-center gap-2 text-xs">
@ -71,10 +62,7 @@ export const FiltersList: React.FC<Props> = ({
}} }}
> >
<span> <span>
<StateGroupIcon <StateGroupIcon stateGroup={state?.group ?? "backlog"} color={state?.color} />
stateGroup={state?.group ?? "backlog"}
color={state?.color}
/>
</span> </span>
<span>{state?.name ?? ""}</span> <span>{state?.name ?? ""}</span>
<span <span
@ -85,7 +73,7 @@ export const FiltersList: React.FC<Props> = ({
}) })
} }
> >
<XMarkIcon className="h-3 w-3" /> <X className="h-3 w-3" />
</span> </span>
</p> </p>
); );
@ -115,7 +103,7 @@ export const FiltersList: React.FC<Props> = ({
}) })
} }
> >
<XMarkIcon className="h-3 w-3" /> <X className="h-3 w-3" />
</span> </span>
</p> </p>
); );
@ -137,7 +125,7 @@ export const FiltersList: React.FC<Props> = ({
}`} }`}
> >
<span> <span>
<PriorityIcon priority={priority} /> <PriorityIcon priority={priority} className="h-3 w-3" />
</span> </span>
<span>{priority === "null" ? "None" : priority}</span> <span>{priority === "null" ? "None" : priority}</span>
<span <span
@ -148,7 +136,7 @@ export const FiltersList: React.FC<Props> = ({
}) })
} }
> >
<XMarkIcon className="h-3 w-3" /> <X className="h-3 w-3" />
</span> </span>
</p> </p>
)) ))
@ -167,13 +155,11 @@ export const FiltersList: React.FC<Props> = ({
className="cursor-pointer" className="cursor-pointer"
onClick={() => onClick={() =>
setFilters({ setFilters({
subscriber: filters.subscriber?.filter( subscriber: filters.subscriber?.filter((p: any) => p !== memberId),
(p: any) => p !== memberId
),
}) })
} }
> >
<XMarkIcon className="h-3 w-3" /> <X className="h-3 w-3" />
</span> </span>
</div> </div>
); );
@ -193,13 +179,11 @@ export const FiltersList: React.FC<Props> = ({
className="cursor-pointer" className="cursor-pointer"
onClick={() => onClick={() =>
setFilters({ setFilters({
created_by: filters.created_by?.filter( created_by: filters.created_by?.filter((p: any) => p !== memberId),
(p: any) => p !== memberId
),
}) })
} }
> >
<XMarkIcon className="h-3 w-3" /> <X className="h-3 w-3" />
</span> </span>
</div> </div>
); );
@ -234,7 +218,7 @@ export const FiltersList: React.FC<Props> = ({
}) })
} }
> >
<XMarkIcon <X
className="h-3 w-3" className="h-3 w-3"
style={{ style={{
color: color, color: color,
@ -267,7 +251,7 @@ export const FiltersList: React.FC<Props> = ({
}) })
} }
> >
<XMarkIcon className="h-3 w-3" /> <X className="h-3 w-3" />
</span> </span>
</div> </div>
); );
@ -295,7 +279,7 @@ export const FiltersList: React.FC<Props> = ({
}) })
} }
> >
<XMarkIcon className="h-3 w-3" /> <X className="h-3 w-3" />
</span> </span>
</div> </div>
); );
@ -309,7 +293,7 @@ export const FiltersList: React.FC<Props> = ({
}) })
} }
> >
<XMarkIcon className="h-3 w-3" /> <X className="h-3 w-3" />
</button> </button>
</div> </div>
</div> </div>
@ -324,7 +308,7 @@ export const FiltersList: React.FC<Props> = ({
}) })
} }
> >
<XMarkIcon className="h-3 w-3" /> <X className="h-3 w-3" />
</button> </button>
</div> </div>
)} )}
@ -338,7 +322,7 @@ export const FiltersList: React.FC<Props> = ({
className="flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-80 px-3 py-1.5 text-xs" className="flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-80 px-3 py-1.5 text-xs"
> >
<span>Clear all filters</span> <span>Clear all filters</span>
<XMarkIcon className="h-3 w-3" /> <X className="h-3 w-3" />
</button> </button>
)} )}
</div> </div>

32
web/components/core/filters/issues-view-filter.tsx
View File

@ -14,14 +14,7 @@ import { SelectFilters } from "components/views";
import { CustomMenu } from "components/ui"; import { CustomMenu } from "components/ui";
import { ToggleSwitch, Tooltip } from "@plane/ui"; import { ToggleSwitch, Tooltip } from "@plane/ui";
// icons // icons
import { ChevronDownIcon } from "@heroicons/react/24/outline"; import { CalendarDays, ChevronDown, GanttChart, Kanban, List, Sheet } from "lucide-react";
import {
CalendarMonthOutlined,
FormatListBulletedOutlined,
GridViewOutlined,
TableChartOutlined,
WaterfallChartOutlined,
} from "@mui/icons-material";
// helpers // helpers
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper"; import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
import { checkIfArraysHaveSameElements } from "helpers/array.helper"; import { checkIfArraysHaveSameElements } from "helpers/array.helper";
@ -33,34 +26,34 @@ import { ISSUE_GROUP_BY_OPTIONS, ISSUE_ORDER_BY_OPTIONS, ISSUE_FILTER_OPTIONS }
const issueViewOptions: { type: TIssueLayouts; Icon: any }[] = [ const issueViewOptions: { type: TIssueLayouts; Icon: any }[] = [
{ {
type: "list", type: "list",
Icon: FormatListBulletedOutlined, Icon: List,
}, },
{ {
type: "kanban", type: "kanban",
Icon: GridViewOutlined, Icon: Kanban,
}, },
{ {
type: "calendar", type: "calendar",
Icon: CalendarMonthOutlined, Icon: CalendarDays,
}, },
{ {
type: "spreadsheet", type: "spreadsheet",
Icon: TableChartOutlined, Icon: Sheet,
}, },
{ {
type: "gantt_chart", type: "gantt_chart",
Icon: WaterfallChartOutlined, Icon: GanttChart,
}, },
]; ];
const issueViewForDraftIssues: { type: TIssueLayouts; Icon: any }[] = [ const issueViewForDraftIssues: { type: TIssueLayouts; Icon: any }[] = [
{ {
type: "list", type: "list",
Icon: FormatListBulletedOutlined, Icon: List,
}, },
{ {
type: "kanban", type: "kanban",
Icon: GridViewOutlined, Icon: Kanban,
}, },
]; ];
@ -96,12 +89,7 @@ export const IssuesFilterView: React.FC = () => {
}`} }`}
onClick={() => setDisplayFilters({ layout: option.type })} onClick={() => setDisplayFilters({ layout: option.type })}
> >
<option.Icon <option.Icon className="h-4 w-4" />
sx={{
fontSize: 16,
}}
className={option.type === "gantt_chart" ? "rotate-90" : ""}
/>
</button> </button>
</Tooltip> </Tooltip>
))} ))}
@ -177,7 +165,7 @@ export const IssuesFilterView: React.FC = () => {
}`} }`}
> >
Display Display
<ChevronDownIcon className="h-3 w-3" aria-hidden="true" /> <ChevronDown className="h-3 w-3" />
</Popover.Button> </Popover.Button>
<Transition <Transition

28
web/components/core/filters/workspace-filters-list.tsx
View File

@ -1,7 +1,7 @@
import { FC } from "react"; import { FC } from "react";
// icons // icons
import { XMarkIcon } from "@heroicons/react/24/outline"; import { X } from "lucide-react";
import { PriorityIcon, StateGroupIcon } from "components/icons"; import { PriorityIcon, StateGroupIcon } from "@plane/ui";
// ui // ui
import { Avatar } from "components/ui"; import { Avatar } from "components/ui";
// helpers // helpers
@ -75,7 +75,7 @@ export const WorkspaceFiltersList: FC<Props> = (props) => {
}) })
} }
> >
<XMarkIcon className="h-3 w-3" /> <X className="h-3 w-3" />
</span> </span>
</p> </p>
); );
@ -108,7 +108,7 @@ export const WorkspaceFiltersList: FC<Props> = (props) => {
}) })
} }
> >
<XMarkIcon className="h-3 w-3" /> <X className="h-3 w-3" />
</span> </span>
</p> </p>
)) ))
@ -130,7 +130,7 @@ export const WorkspaceFiltersList: FC<Props> = (props) => {
}) })
} }
> >
<XMarkIcon className="h-3 w-3" /> <X className="h-3 w-3" />
</span> </span>
</div> </div>
); );
@ -154,7 +154,7 @@ export const WorkspaceFiltersList: FC<Props> = (props) => {
}) })
} }
> >
<XMarkIcon className="h-3 w-3" /> <X className="h-3 w-3" />
</span> </span>
</div> </div>
); );
@ -178,7 +178,7 @@ export const WorkspaceFiltersList: FC<Props> = (props) => {
}) })
} }
> >
<XMarkIcon className="h-3 w-3" /> <X className="h-3 w-3" />
</span> </span>
</div> </div>
); );
@ -213,7 +213,7 @@ export const WorkspaceFiltersList: FC<Props> = (props) => {
}) })
} }
> >
<XMarkIcon <X
className="h-3 w-3" className="h-3 w-3"
style={{ style={{
color: color, color: color,
@ -246,7 +246,7 @@ export const WorkspaceFiltersList: FC<Props> = (props) => {
}) })
} }
> >
<XMarkIcon className="h-3 w-3" /> <X className="h-3 w-3" />
</span> </span>
</div> </div>
); );
@ -274,7 +274,7 @@ export const WorkspaceFiltersList: FC<Props> = (props) => {
}) })
} }
> >
<XMarkIcon className="h-3 w-3" /> <X className="h-3 w-3" />
</span> </span>
</div> </div>
); );
@ -296,7 +296,7 @@ export const WorkspaceFiltersList: FC<Props> = (props) => {
}) })
} }
> >
<XMarkIcon className="h-3 w-3" /> <X className="h-3 w-3" />
</span> </span>
</p> </p>
); );
@ -310,7 +310,7 @@ export const WorkspaceFiltersList: FC<Props> = (props) => {
}) })
} }
> >
<XMarkIcon className="h-3 w-3" /> <X className="h-3 w-3" />
</button> </button>
</div> </div>
</div> </div>
@ -325,7 +325,7 @@ export const WorkspaceFiltersList: FC<Props> = (props) => {
}) })
} }
> >
<XMarkIcon className="h-3 w-3" /> <X className="h-3 w-3" />
</button> </button>
</div> </div>
)} )}
@ -339,7 +339,7 @@ export const WorkspaceFiltersList: FC<Props> = (props) => {
className="flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-80 px-3 py-1.5 text-xs" className="flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-80 px-3 py-1.5 text-xs"
> >
<span>Clear all filters</span> <span>Clear all filters</span>
<XMarkIcon className="h-3 w-3" /> <X className="h-3 w-3" />
</button> </button>
)} )}
</div> </div>

9
web/components/core/modals/bulk-delete-issues-modal.tsx
View File

@ -11,10 +11,9 @@ import { IssueService } from "services/issue";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
import useIssuesView from "hooks/use-issues-view"; import useIssuesView from "hooks/use-issues-view";
// ui // ui
import { Button } from "@plane/ui"; import { Button, LayersIcon } from "@plane/ui";
// icons // icons
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline"; import { Search } from "lucide-react";
import { LayerDiagonalIcon } from "components/icons";
// types // types
import { IUser, IIssue } from "types"; import { IUser, IIssue } from "types";
// fetch keys // fetch keys
@ -170,7 +169,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
}} }}
> >
<div className="relative m-1"> <div className="relative m-1">
<MagnifyingGlassIcon <Search
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40" className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
aria-hidden="true" aria-hidden="true"
/> />
@ -228,7 +227,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
</li> </li>
) : ( ) : (
<div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center"> <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
<LayerDiagonalIcon height="56" width="56" /> <LayersIcon height="56" width="56" />
<h3 className="text-custom-text-200"> <h3 className="text-custom-text-200">
No issues found. Create a new issue with{" "} No issues found. Create a new issue with{" "}
<pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre>. <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre>.

18
web/components/core/modals/existing-issues-list-modal.tsx
View File

@ -13,11 +13,9 @@ import useToast from "hooks/use-toast";
import useIssuesView from "hooks/use-issues-view"; import useIssuesView from "hooks/use-issues-view";
import useDebounce from "hooks/use-debounce"; import useDebounce from "hooks/use-debounce";
// ui // ui
import { Button, Loader, ToggleSwitch, Tooltip } from "@plane/ui"; import { Button, LayersIcon, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
// icons // icons
import { LaunchOutlined } from "@mui/icons-material"; import { Rocket, Search, X } from "lucide-react";
import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { LayerDiagonalIcon } from "components/icons";
// types // types
import { ISearchIssueResponse, TProjectIssuesSearchParams } from "types"; import { ISearchIssueResponse, TProjectIssuesSearchParams } from "types";
// fetch-keys // fetch-keys
@ -153,7 +151,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
}} }}
> >
<div className="relative m-1"> <div className="relative m-1">
<MagnifyingGlassIcon <Search
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40" className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
aria-hidden="true" aria-hidden="true"
/> />
@ -179,7 +177,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
className="group p-1" className="group p-1"
onClick={() => setSelectedIssues((prevData) => prevData.filter((i) => i.id !== issue.id))} onClick={() => setSelectedIssues((prevData) => prevData.filter((i) => i.id !== issue.id))}
> >
<XMarkIcon className="h-3 w-3 text-custom-text-200 group-hover:text-custom-text-100" /> <X className="h-3 w-3 text-custom-text-200 group-hover:text-custom-text-100" />
</button> </button>
</div> </div>
))} ))}
@ -227,7 +225,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
{!isSearching && issues.length === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && ( {!isSearching && issues.length === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
<div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center"> <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
<LayerDiagonalIcon height="52" width="52" /> <LayersIcon height="52" width="52" />
<h3 className="text-custom-text-200"> <h3 className="text-custom-text-200">
No issues found. Create a new issue with{" "} No issues found. Create a new issue with{" "}
<pre className="inline rounded bg-custom-background-80 px-2 py-1 text-sm">C</pre>. <pre className="inline rounded bg-custom-background-80 px-2 py-1 text-sm">C</pre>.
@ -279,11 +277,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
rel="noopener noreferrer" rel="noopener noreferrer"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<LaunchOutlined <Rocket className="h-4 w-4" />
sx={{
fontSize: 16,
}}
/>
</a> </a>
</Combobox.Option> </Combobox.Option>
); );

4
web/components/core/modals/image-upload-modal.tsx
View File

@ -13,7 +13,7 @@ import useWorkspaceDetails from "hooks/use-workspace-details";
// ui // ui
import { Button } from "@plane/ui"; import { Button } from "@plane/ui";
// icons // icons
import { UserCircleIcon } from "components/icons"; import { UserCircle2 } from "lucide-react";
type Props = { type Props = {
value?: string | null; value?: string | null;
@ -159,7 +159,7 @@ export const ImageUploadModal: React.FC<Props> = ({
</> </>
) : ( ) : (
<div> <div>
<UserCircleIcon className="mx-auto h-16 w-16 text-custom-text-200" /> <UserCircle2 className="mx-auto h-16 w-16 text-custom-text-200" />
<span className="mt-2 block text-sm font-medium text-custom-text-200"> <span className="mt-2 block text-sm font-medium text-custom-text-200">
{isDragActive ? "Drop image here to upload" : "Drag & drop image here"} {isDragActive ? "Drop image here to upload" : "Drag & drop image here"}
</span> </span>

4
web/components/core/reaction-selector.tsx
View File

@ -3,7 +3,7 @@ import { Popover, Transition } from "@headlessui/react";
// helper // helper
import { renderEmoji } from "helpers/emoji.helper"; import { renderEmoji } from "helpers/emoji.helper";
// icons // icons
import { Icon } from "components/ui"; import { SmilePlus } from "lucide-react";
const reactionEmojis = ["128077", "128078", "128516", "128165", "128533", "129505", "9992", "128064"]; const reactionEmojis = ["128077", "128078", "128516", "128165", "128533", "129505", "9992", "128064"];
@ -31,7 +31,7 @@ export const ReactionSelector: React.FC<Props> = (props) => {
size === "sm" ? "w-6 h-6" : size === "md" ? "w-7 h-7" : "w-8 h-8" size === "sm" ? "w-6 h-6" : size === "md" ? "w-7 h-7" : "w-8 h-8"
}`} }`}
> >
<Icon iconName="add_reaction" className="text-custom-text-100 scale-125" /> <SmilePlus className="text-custom-text-100 h-3.5 w-3.5" />
</span> </span>
</Popover.Button> </Popover.Button>
<Transition <Transition

17
web/components/core/sidebar/links-list.tsx
View File

@ -1,6 +1,6 @@
// icons // icons
import { ArrowTopRightOnSquareIcon, LinkIcon, TrashIcon } from "@heroicons/react/24/outline"; import { ExternalLinkIcon } from "@plane/ui";
import { Icon } from "components/ui"; import { Pencil, Trash2, LinkIcon } from "lucide-react";
// helpers // helpers
import { timeAgo } from "helpers/date-time.helper"; import { timeAgo } from "helpers/date-time.helper";
// types // types
@ -13,12 +13,7 @@ type Props = {
userAuth: UserAuth; userAuth: UserAuth;
}; };
export const LinksList: React.FC<Props> = ({ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEditLink, userAuth }) => {
links,
handleDeleteLink,
handleEditLink,
userAuth,
}) => {
const isNotAllowed = userAuth.isGuest || userAuth.isViewer; const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return ( return (
@ -32,7 +27,7 @@ export const LinksList: React.FC<Props> = ({
className="grid h-7 w-7 place-items-center rounded bg-custom-background-90 p-1 outline-none hover:bg-custom-background-80" className="grid h-7 w-7 place-items-center rounded bg-custom-background-90 p-1 outline-none hover:bg-custom-background-80"
onClick={() => handleEditLink(link)} onClick={() => handleEditLink(link)}
> >
<Icon iconName="edit" className="text-custom-text-200" /> <Pencil className="text-custom-text-200" />
</button> </button>
<a <a
href={link.url} href={link.url}
@ -40,14 +35,14 @@ export const LinksList: React.FC<Props> = ({
rel="noopener noreferrer" rel="noopener noreferrer"
className="grid h-7 w-7 place-items-center rounded bg-custom-background-90 p-1 outline-none hover:bg-custom-background-80" className="grid h-7 w-7 place-items-center rounded bg-custom-background-90 p-1 outline-none hover:bg-custom-background-80"
> >
<ArrowTopRightOnSquareIcon className="h-4 w-4 text-custom-text-200" /> <ExternalLinkIcon className="h-4 w-4 text-custom-text-200" />
</a> </a>
<button <button
type="button" type="button"
className="grid h-7 w-7 place-items-center rounded bg-custom-background-90 p-1 text-red-500 outline-none duration-300 hover:bg-red-500/20" className="grid h-7 w-7 place-items-center rounded bg-custom-background-90 p-1 text-red-500 outline-none duration-300 hover:bg-red-500/20"
onClick={() => handleDeleteLink(link.id)} onClick={() => handleDeleteLink(link.id)}
> >
<TrashIcon className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
</button> </button>
</div> </div>
)} )}

4
web/components/core/theme/color-picker-input.tsx
View File

@ -16,7 +16,7 @@ import { ColorResult, SketchPicker } from "react-color";
import { Popover, Transition } from "@headlessui/react"; import { Popover, Transition } from "@headlessui/react";
import { Input } from "@plane/ui"; import { Input } from "@plane/ui";
// icons // icons
import { ColorPickerIcon } from "components/icons"; import { Palette } from "lucide-react";
// types // types
import { ICustomTheme } from "types"; import { ICustomTheme } from "types";
@ -98,7 +98,7 @@ export const ColorPickerInput: FC<Props> = (props) => {
}} }}
/> />
) : ( ) : (
<ColorPickerIcon height={14} width={14} className="fill-current text-custom-text-100" /> <Palette className="h-3.5 w-3.5 text-custom-text-100" />
)} )}
</Popover.Button> </Popover.Button>

11
web/components/core/views/spreadsheet-view/issue-column/issue-column.tsx
View File

@ -5,8 +5,7 @@ import { useRouter } from "next/router";
// components // components
import { Popover2 } from "@blueprintjs/popover2"; import { Popover2 } from "@blueprintjs/popover2";
// icons // icons
import { Icon } from "components/ui"; import { MoreHorizontal, LinkIcon, Pencil, Trash2, ChevronRight } from "lucide-react";
import { EllipsisHorizontalIcon, LinkIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// types // types
@ -100,7 +99,7 @@ export const IssueColumn: React.FC<Props> = ({
}} }}
> >
<div className="flex items-center justify-start gap-2"> <div className="flex items-center justify-start gap-2">
<PencilIcon className="h-4 w-4" /> <Pencil className="h-4 w-4" />
<span>Edit issue</span> <span>Edit issue</span>
</div> </div>
</button> </button>
@ -114,7 +113,7 @@ export const IssueColumn: React.FC<Props> = ({
}} }}
> >
<div className="flex items-center justify-start gap-2"> <div className="flex items-center justify-start gap-2">
<TrashIcon className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
<span>Delete issue</span> <span>Delete issue</span>
</div> </div>
</button> </button>
@ -136,7 +135,7 @@ export const IssueColumn: React.FC<Props> = ({
} }
placement="bottom-start" placement="bottom-start"
> >
<EllipsisHorizontalIcon className="h-5 w-5 text-custom-text-200" /> <MoreHorizontal className="h-5 w-5 text-custom-text-200" />
</Popover2> </Popover2>
</div> </div>
)} )}
@ -148,7 +147,7 @@ export const IssueColumn: React.FC<Props> = ({
className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer" className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
onClick={() => handleToggleExpand(issue.id)} onClick={() => handleToggleExpand(issue.id)}
> >
<Icon iconName="chevron_right" className={`${expanded ? "rotate-90" : ""}`} /> <ChevronRight className={`h-3.5 w-3.5 ${expanded ? "rotate-90" : ""}`} />
</button> </button>
</div> </div>
)} )}

11
web/components/core/views/spreadsheet-view/single-issue.tsx
View File

@ -7,8 +7,7 @@ import { ViewDueDateSelect, ViewEstimateSelect, ViewStartDateSelect } from "comp
import { LabelSelect, MembersSelect, PrioritySelect } from "components/project"; import { LabelSelect, MembersSelect, PrioritySelect } from "components/project";
import { StateSelect } from "components/states"; import { StateSelect } from "components/states";
// icons // icons
import { Icon } from "components/ui"; import { MoreHorizontal, LinkIcon, Pencil, Trash2, ChevronRight } from "lucide-react";
import { EllipsisHorizontalIcon, LinkIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
// services // services
import { IssueService } from "services/issue"; import { IssueService } from "services/issue";
import { TrackEventService } from "services/track_event.service"; import { TrackEventService } from "services/track_event.service";
@ -281,7 +280,7 @@ export const SingleSpreadsheetIssue: FC<Props> = (props) => {
}} }}
> >
<div className="flex items-center justify-start gap-2"> <div className="flex items-center justify-start gap-2">
<PencilIcon className="h-4 w-4" /> <Pencil className="h-4 w-4" />
<span>Edit issue</span> <span>Edit issue</span>
</div> </div>
</button> </button>
@ -295,7 +294,7 @@ export const SingleSpreadsheetIssue: FC<Props> = (props) => {
}} }}
> >
<div className="flex items-center justify-start gap-2"> <div className="flex items-center justify-start gap-2">
<TrashIcon className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
<span>Delete issue</span> <span>Delete issue</span>
</div> </div>
</button> </button>
@ -317,7 +316,7 @@ export const SingleSpreadsheetIssue: FC<Props> = (props) => {
} }
placement="bottom-start" placement="bottom-start"
> >
<EllipsisHorizontalIcon className="h-5 w-5 text-custom-text-200" /> <MoreHorizontal className="h-5 w-5 text-custom-text-200" />
</Popover2> </Popover2>
</div> </div>
)} )}
@ -329,7 +328,7 @@ export const SingleSpreadsheetIssue: FC<Props> = (props) => {
className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer" className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
onClick={() => handleToggleExpand(issue.id)} onClick={() => handleToggleExpand(issue.id)}
> >
<Icon iconName="chevron_right" className={`${expanded ? "rotate-90" : ""}`} /> <ChevronRight className={`h-3.5 w-3.5 ${expanded ? "rotate-90" : ""}`} />
</button> </button>
</div> </div>
)} )}

64
web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
View File

@ -18,13 +18,22 @@ import {
SpreadsheetStateColumn, SpreadsheetStateColumn,
SpreadsheetUpdatedOnColumn, SpreadsheetUpdatedOnColumn,
} from "components/core"; } from "components/core";
import { CustomMenu, Icon } from "components/ui"; import { CustomMenu } from "components/ui";
import { IssuePeekOverview } from "components/issues"; import { IssuePeekOverview } from "components/issues";
import { Spinner } from "@plane/ui"; import { Spinner } from "@plane/ui";
// types // types
import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssueOrderByOptions } from "types"; import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssueOrderByOptions } from "types";
// icon // icon
import { CheckIcon, ChevronDownIcon, PlusIcon } from "lucide-react"; import {
ArrowDownWideNarrow,
ArrowUpNarrowWide,
CheckIcon,
ChevronDownIcon,
Eraser,
ListFilter,
MoveRight,
PlusIcon,
} from "lucide-react";
type Props = { type Props = {
displayProperties: IIssueDisplayProperties; displayProperties: IIssueDisplayProperties;
@ -98,11 +107,8 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
}`} }`}
> >
{activeSortingProperty === propertyName && ( {activeSortingProperty === propertyName && (
<div className="absolute top-1 right-1.5"> <div className="absolute top-1 right-1.5 bg-custom-primary rounded-full flex items-center justify-center h-3.5 w-3.5">
<Icon <ListFilter className="h-3 w-3 text-white" />
iconName="filter_list"
className="flex items-center justify-center h-3.5 w-3.5 rounded-full bg-custom-primary text-xs text-white"
/>
</div> </div>
)} )}
@ -127,32 +133,23 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">
{propertyName === "assignee" || propertyName === "labels" ? ( {propertyName === "assignee" || propertyName === "labels" ? (
<> <>
<span className="relative flex items-center h-6 w-6"> <ArrowDownWideNarrow className="h-4 w-4 stroke-[1.5]" />
<Icon iconName="east" className="absolute left-0 rotate-90 text-xs leading-3" />
<Icon iconName="sort" className="absolute right-0 text-sm" />
</span>
<span>A</span> <span>A</span>
<Icon iconName="east" className="text-sm" /> <MoveRight className="h-3.5 w-3.5" />
<span>Z</span> <span>Z</span>
</> </>
) : propertyName === "due_date" || propertyName === "created_on" || propertyName === "updated_on" ? ( ) : propertyName === "due_date" || propertyName === "created_on" || propertyName === "updated_on" ? (
<> <>
<span className="relative flex items-center h-6 w-6"> <ArrowDownWideNarrow className="h-4 w-4 stroke-[1.5]" />
<Icon iconName="east" className="absolute left-0 rotate-90 text-xs leading-3" />
<Icon iconName="sort" className="absolute right-0 text-sm" />
</span>
<span>New</span> <span>New</span>
<Icon iconName="east" className="text-sm" /> <MoveRight className="h-3.5 w-3.5" />
<span>Old</span> <span>Old</span>
</> </>
) : ( ) : (
<> <>
<span className="relative flex items-center h-6 w-6"> <ArrowDownWideNarrow className="h-4 w-4 stroke-[1.5]" />
<Icon iconName="east" className="absolute left-0 rotate-90 text-xs leading-3" />
<Icon iconName="sort" className="absolute right-0 text-sm" />
</span>
<span>First</span> <span>First</span>
<Icon iconName="east" className="text-sm" /> <MoveRight className="h-3.5 w-3.5" />
<span>Last</span> <span>Last</span>
</> </>
)} )}
@ -184,32 +181,23 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">
{propertyName === "assignee" || propertyName === "labels" ? ( {propertyName === "assignee" || propertyName === "labels" ? (
<> <>
<span className="relative flex items-center h-6 w-6"> <ArrowUpNarrowWide className="h-4 w-4 stroke-[1.5]" />
<Icon iconName="east" className="absolute left-0 -rotate-90 text-xs leading-3" />
<Icon iconName="sort" className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm" />
</span>
<span>Z</span> <span>Z</span>
<Icon iconName="east" className="text-sm" /> <MoveRight className="h-3.5 w-3.5" />
<span>A</span> <span>A</span>
</> </>
) : propertyName === "due_date" ? ( ) : propertyName === "due_date" ? (
<> <>
<span className="relative flex items-center h-6 w-6"> <ArrowUpNarrowWide className="h-4 w-4 stroke-[1.5]" />
<Icon iconName="east" className="absolute left-0 -rotate-90 text-xs leading-3" />
<Icon iconName="sort" className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm" />
</span>
<span>Old</span> <span>Old</span>
<Icon iconName="east" className="text-sm" /> <MoveRight className="h-3.5 w-3.5" />
<span>New</span> <span>New</span>
</> </>
) : ( ) : (
<> <>
<span className="relative flex items-center h-6 w-6"> <ArrowUpNarrowWide className="h-4 w-4 stroke-[1.5]" />
<Icon iconName="east" className="absolute left-0 -rotate-90 text-xs leading-3" />
<Icon iconName="sort" className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm" />
</span>
<span>Last</span> <span>Last</span>
<Icon iconName="east" className="text-sm" /> <MoveRight className="h-3.5 w-3.5" />
<span>First</span> <span>First</span>
</> </>
)} )}
@ -238,7 +226,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
<div className={`group flex gap-1.5 px-1 items-center justify-between `}> <div className={`group flex gap-1.5 px-1 items-center justify-between `}>
<div className="flex gap-1.5 items-center"> <div className="flex gap-1.5 items-center">
<span className="relative flex items-center justify-center h-6 w-6"> <span className="relative flex items-center justify-center h-6 w-6">
<Icon iconName="ink_eraser" className="text-sm" /> <Eraser className="h-3.5 w-3.5" />
</span> </span>
<span>Clear sorting</span> <span>Clear sorting</span>

46
web/components/cycles/active-cycle-details.tsx
View File

@ -10,25 +10,23 @@ import { useMobxStore } from "lib/mobx/store-provider";
// ui // ui
import { AssigneesList } from "components/ui/avatar"; import { AssigneesList } from "components/ui/avatar";
import { SingleProgressStats } from "components/core"; import { SingleProgressStats } from "components/core";
import { Loader, Tooltip, LinearProgressIndicator } from "@plane/ui"; import {
Loader,
Tooltip,
LinearProgressIndicator,
ContrastIcon,
RunningIcon,
LayersIcon,
StateGroupIcon,
PriorityIcon,
} from "@plane/ui";
// components // components
import ProgressChart from "components/core/sidebar/progress-chart"; import ProgressChart from "components/core/sidebar/progress-chart";
import { ActiveCycleProgressStats } from "components/cycles"; import { ActiveCycleProgressStats } from "components/cycles";
import { ViewIssueLabel } from "components/issues"; import { ViewIssueLabel } from "components/issues";
// icons // icons
import { CalendarDaysIcon } from "@heroicons/react/20/solid"; import { AlarmClock, AlertTriangle, ArrowRight, CalendarDays, Star, Target } from "lucide-react";
import { PriorityIcon } from "components/icons/priority-icon";
import {
TargetIcon,
ContrastIcon,
PersonRunningIcon,
ArrowRightIcon,
TriangleExclamationIcon,
AlarmClockIcon,
LayerDiagonalIcon,
StateGroupIcon,
} from "components/icons";
import { StarIcon } from "@heroicons/react/24/outline";
// helpers // helpers
import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper"; import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
import { truncateText } from "helpers/string.helper"; import { truncateText } from "helpers/string.helper";
@ -229,12 +227,12 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
> >
{cycleStatus === "current" ? ( {cycleStatus === "current" ? (
<span className="flex gap-1 whitespace-nowrap"> <span className="flex gap-1 whitespace-nowrap">
<PersonRunningIcon className="h-4 w-4" /> <RunningIcon className="h-4 w-4" />
{findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left {findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left
</span> </span>
) : cycleStatus === "upcoming" ? ( ) : cycleStatus === "upcoming" ? (
<span className="flex gap-1 whitespace-nowrap"> <span className="flex gap-1 whitespace-nowrap">
<AlarmClockIcon className="h-4 w-4" /> <AlarmClock className="h-4 w-4" />
{findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left {findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left
</span> </span>
) : cycleStatus === "completed" ? ( ) : cycleStatus === "completed" ? (
@ -246,7 +244,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
}`} }`}
> >
<span> <span>
<TriangleExclamationIcon className="h-3.5 w-3.5 fill-current" /> <AlertTriangle className="h-3.5 w-3.5" />
</span> </span>
</Tooltip> </Tooltip>
)}{" "} )}{" "}
@ -262,7 +260,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
handleRemoveFromFavorites(e); handleRemoveFromFavorites(e);
}} }}
> >
<StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" /> <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
</button> </button>
) : ( ) : (
<button <button
@ -270,7 +268,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
handleAddToFavorites(e); handleAddToFavorites(e);
}} }}
> >
<StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" /> <Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
</button> </button>
)} )}
</span> </span>
@ -278,12 +276,12 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
<div className="flex items-center justify-start gap-5 text-custom-text-200"> <div className="flex items-center justify-start gap-5 text-custom-text-200">
<div className="flex items-start gap-1"> <div className="flex items-start gap-1">
<CalendarDaysIcon className="h-4 w-4" /> <CalendarDays className="h-4 w-4" />
<span>{renderShortDateWithYearFormat(startDate)}</span> <span>{renderShortDateWithYearFormat(startDate)}</span>
</div> </div>
<ArrowRightIcon className="h-4 w-4 text-custom-text-200" /> <ArrowRight className="h-4 w-4 text-custom-text-200" />
<div className="flex items-start gap-1"> <div className="flex items-start gap-1">
<TargetIcon className="h-4 w-4" /> <Target className="h-4 w-4" />
<span>{renderShortDateWithYearFormat(endDate)}</span> <span>{renderShortDateWithYearFormat(endDate)}</span>
</div> </div>
</div> </div>
@ -315,7 +313,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
<div className="flex items-center gap-4 text-custom-text-200"> <div className="flex items-center gap-4 text-custom-text-200">
<div className="flex gap-2"> <div className="flex gap-2">
<LayerDiagonalIcon className="h-4 w-4 flex-shrink-0" /> <LayersIcon className="h-4 w-4 flex-shrink-0" />
{cycle.total_issues} issues {cycle.total_issues} issues
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@ -468,7 +466,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<span> <span>
<LayerDiagonalIcon className="h-5 w-5 flex-shrink-0 text-custom-text-200" /> <LayersIcon className="h-5 w-5 flex-shrink-0 text-custom-text-200" />
</span> </span>
<span>Pending Issues - {cycle.total_issues - (cycle.completed_issues + cycle.cancelled_issues)}</span> <span>Pending Issues - {cycle.total_issues - (cycle.completed_issues + cycle.cancelled_issues)}</span>
</div> </div>

44
web/components/cycles/cycles-board-card.tsx
View File

@ -12,18 +12,20 @@ import { CycleDeleteModal } from "./cycle-delete-modal";
// ui // ui
import { CustomMenu } from "components/ui"; import { CustomMenu } from "components/ui";
import { AssigneesList } from "components/ui/avatar"; import { AssigneesList } from "components/ui/avatar";
import { Tooltip, LinearProgressIndicator } from "@plane/ui"; import { Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
// icons // icons
import { CalendarDaysIcon } from "@heroicons/react/20/solid";
import { import {
TargetIcon, AlarmClock,
ContrastIcon, AlertTriangle,
PersonRunningIcon, ArrowRight,
ArrowRightIcon, CalendarDays,
TriangleExclamationIcon, ChevronDown,
AlarmClockIcon, LinkIcon,
} from "components/icons"; Pencil,
import { ChevronDownIcon, LinkIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline"; Star,
Target,
Trash2,
} from "lucide-react";
// helpers // helpers
import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper"; import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
import { copyTextToClipboard, truncateText } from "helpers/string.helper"; import { copyTextToClipboard, truncateText } from "helpers/string.helper";
@ -202,12 +204,12 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
> >
{cycleStatus === "current" ? ( {cycleStatus === "current" ? (
<span className="flex gap-1 whitespace-nowrap"> <span className="flex gap-1 whitespace-nowrap">
<PersonRunningIcon className="h-4 w-4" /> <RunningIcon className="h-4 w-4" />
{findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left {findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left
</span> </span>
) : cycleStatus === "upcoming" ? ( ) : cycleStatus === "upcoming" ? (
<span className="flex gap-1 whitespace-nowrap"> <span className="flex gap-1 whitespace-nowrap">
<AlarmClockIcon className="h-4 w-4" /> <AlarmClock className="h-4 w-4" />
{findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left {findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left
</span> </span>
) : cycleStatus === "completed" ? ( ) : cycleStatus === "completed" ? (
@ -219,7 +221,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
}`} }`}
> >
<span> <span>
<TriangleExclamationIcon className="h-3.5 w-3.5 fill-current" /> <AlertTriangle className="h-3.5 w-3.5" />
</span> </span>
</Tooltip> </Tooltip>
)}{" "} )}{" "}
@ -231,11 +233,11 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
</span> </span>
{cycle.is_favorite ? ( {cycle.is_favorite ? (
<button onClick={handleRemoveFromFavorites}> <button onClick={handleRemoveFromFavorites}>
<StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" /> <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
</button> </button>
) : ( ) : (
<button onClick={handleAddToFavorites}> <button onClick={handleAddToFavorites}>
<StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" /> <Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
</button> </button>
)} )}
</span> </span>
@ -244,12 +246,12 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
{cycleStatus !== "draft" && ( {cycleStatus !== "draft" && (
<> <>
<div className="flex items-start gap-1"> <div className="flex items-start gap-1">
<CalendarDaysIcon className="h-4 w-4" /> <CalendarDays className="h-4 w-4" />
<span>{renderShortDateWithYearFormat(startDate)}</span> <span>{renderShortDateWithYearFormat(startDate)}</span>
</div> </div>
<ArrowRightIcon className="h-4 w-4" /> <ArrowRight className="h-4 w-4" />
<div className="flex items-start gap-1"> <div className="flex items-start gap-1">
<TargetIcon className="h-4 w-4" /> <Target className="h-4 w-4" />
<span>{renderShortDateWithYearFormat(endDate)}</span> <span>{renderShortDateWithYearFormat(endDate)}</span>
</div> </div>
</> </>
@ -298,7 +300,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
}} }}
className="cursor-pointer rounded p-1 text-custom-text-200 duration-300 hover:bg-custom-background-80" className="cursor-pointer rounded p-1 text-custom-text-200 duration-300 hover:bg-custom-background-80"
> >
<PencilIcon className="h-4 w-4" /> <Pencil className="h-4 w-4" />
</button> </button>
)} )}
@ -311,7 +313,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
}} }}
> >
<span className="flex items-center justify-start gap-2"> <span className="flex items-center justify-start gap-2">
<TrashIcon className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
<span>Delete cycle</span> <span>Delete cycle</span>
</span> </span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
@ -375,7 +377,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
</Tooltip> </Tooltip>
<Disclosure.Button> <Disclosure.Button>
<span className="p-1"> <span className="p-1">
<ChevronDownIcon className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" /> <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
</span> </span>
</Disclosure.Button> </Disclosure.Button>
</div> </div>

44
web/components/cycles/cycles-list-item.tsx
View File

@ -6,26 +6,26 @@ import useToast from "hooks/use-toast";
import { CycleCreateEditModal } from "./cycle-create-edit-modal"; import { CycleCreateEditModal } from "./cycle-create-edit-modal";
import { CycleDeleteModal } from "./cycle-delete-modal"; import { CycleDeleteModal } from "./cycle-delete-modal";
// ui // ui
import { RadialProgressBar, Tooltip, LinearProgressIndicator } from "@plane/ui"; import { RadialProgressBar, Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
import { CustomMenu } from "components/ui"; import { CustomMenu } from "components/ui";
// icons // icons
import { CalendarDaysIcon } from "@heroicons/react/20/solid";
import { import {
TargetIcon, AlarmClock,
ContrastIcon, AlertTriangle,
PersonRunningIcon, ArrowRight,
ArrowRightIcon, CalendarDays,
TriangleExclamationIcon, LinkIcon,
AlarmClockIcon, Pencil,
} from "components/icons"; Star,
// hooks Target,
import { useMobxStore } from "lib/mobx/store-provider"; Trash2,
import { LinkIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline"; } from "lucide-react";
// helpers // helpers
import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper"; import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
import { copyTextToClipboard } from "helpers/string.helper"; import { copyTextToClipboard } from "helpers/string.helper";
// types // types
import { ICycle } from "types"; import { ICycle } from "types";
import { useMobxStore } from "lib/mobx/store-provider";
type TCyclesListItem = { type TCyclesListItem = {
cycle: ICycle; cycle: ICycle;
@ -188,12 +188,12 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
> >
{cycleStatus === "current" ? ( {cycleStatus === "current" ? (
<span className="flex items-center gap-1 whitespace-nowrap"> <span className="flex items-center gap-1 whitespace-nowrap">
<PersonRunningIcon className="h-3.5 w-3.5" /> <RunningIcon className="h-3.5 w-3.5" />
{findHowManyDaysLeft(cycle.end_date ?? new Date())} days left {findHowManyDaysLeft(cycle.end_date ?? new Date())} days left
</span> </span>
) : cycleStatus === "upcoming" ? ( ) : cycleStatus === "upcoming" ? (
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">
<AlarmClockIcon className="h-3.5 w-3.5" /> <AlarmClock className="h-3.5 w-3.5" />
{findHowManyDaysLeft(cycle.start_date ?? new Date())} days left {findHowManyDaysLeft(cycle.start_date ?? new Date())} days left
</span> </span>
) : cycleStatus === "completed" ? ( ) : cycleStatus === "completed" ? (
@ -205,7 +205,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
}`} }`}
> >
<span> <span>
<TriangleExclamationIcon className="h-3.5 w-3.5 fill-current" /> <AlertTriangle className="h-3.5 w-3.5" />
</span> </span>
</Tooltip> </Tooltip>
)}{" "} )}{" "}
@ -220,14 +220,14 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
{cycleStatus !== "draft" && ( {cycleStatus !== "draft" && (
<div className="flex items-center justify-start gap-2 text-custom-text-200"> <div className="flex items-center justify-start gap-2 text-custom-text-200">
<div className="flex items-start gap-1 whitespace-nowrap"> <div className="flex items-start gap-1 whitespace-nowrap">
<CalendarDaysIcon className="h-4 w-4" /> <CalendarDays className="h-4 w-4" />
<span>{renderShortDateWithYearFormat(startDate)}</span> <span>{renderShortDateWithYearFormat(startDate)}</span>
</div> </div>
<ArrowRightIcon className="h-4 w-4" /> <ArrowRight className="h-4 w-4" />
<div className="flex items-start gap-1 whitespace-nowrap"> <div className="flex items-start gap-1 whitespace-nowrap">
<TargetIcon className="h-4 w-4" /> <Target className="h-4 w-4" />
<span>{renderShortDateWithYearFormat(endDate)}</span> <span>{renderShortDateWithYearFormat(endDate)}</span>
</div> </div>
</div> </div>
@ -306,11 +306,11 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
{/* cycle favorite */} {/* cycle favorite */}
{cycle.is_favorite ? ( {cycle.is_favorite ? (
<button type="button" onClick={handleRemoveFromFavorites}> <button type="button" onClick={handleRemoveFromFavorites}>
<StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" /> <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
</button> </button>
) : ( ) : (
<button type="button" onClick={handleAddToFavorites}> <button type="button" onClick={handleAddToFavorites}>
<StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" /> <Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
</button> </button>
)} )}
</div> </div>
@ -323,7 +323,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
{!isCompleted && ( {!isCompleted && (
<CustomMenu.MenuItem onClick={() => setUpdateModal(true)}> <CustomMenu.MenuItem onClick={() => setUpdateModal(true)}>
<span className="flex items-center justify-start gap-2"> <span className="flex items-center justify-start gap-2">
<PencilIcon className="h-4 w-4" /> <Pencil className="h-4 w-4" />
<span>Edit Cycle</span> <span>Edit Cycle</span>
</span> </span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
@ -332,7 +332,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
{!isCompleted && ( {!isCompleted && (
<CustomMenu.MenuItem onClick={() => setDeleteModal(true)}> <CustomMenu.MenuItem onClick={() => setDeleteModal(true)}>
<span className="flex items-center justify-start gap-2"> <span className="flex items-center justify-start gap-2">
<TrashIcon className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
<span>Delete cycle</span> <span>Delete cycle</span>
</span> </span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>

4
web/components/cycles/gantt-chart/blocks.tsx
View File

@ -1,9 +1,7 @@
import { useRouter } from "next/router"; import { useRouter } from "next/router";
// ui // ui
import { Tooltip } from "@plane/ui"; import { Tooltip, ContrastIcon } from "@plane/ui";
// icons
import { ContrastIcon } from "components/icons";
// helpers // helpers
import { getDateRangeStatus, renderShortDate } from "helpers/date-time.helper"; import { getDateRangeStatus, renderShortDate } from "helpers/date-time.helper";
// types // types

8
web/components/cycles/select.tsx
View File

@ -4,8 +4,8 @@ import useSWR from "swr";
import useUserAuth from "hooks/use-user-auth"; import useUserAuth from "hooks/use-user-auth";
import { Listbox, Transition } from "@headlessui/react"; import { Listbox, Transition } from "@headlessui/react";
// icons // icons
import { PlusIcon } from "@heroicons/react/24/outline"; import { ContrastIcon } from "@plane/ui";
import { CyclesIcon } from "components/icons"; import { Plus } from "lucide-react";
// services // services
import { CycleService } from "services/cycle.service"; import { CycleService } from "services/cycle.service";
// components // components
@ -57,7 +57,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({ projectId, value,
<Listbox.Button <Listbox.Button
className={`flex cursor-pointer items-center gap-1 rounded-md border border-custom-border-200 px-2 py-1 text-xs shadow-sm duration-300 hover:bg-custom-background-90 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`} className={`flex cursor-pointer items-center gap-1 rounded-md border border-custom-border-200 px-2 py-1 text-xs shadow-sm duration-300 hover:bg-custom-background-90 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
> >
<CyclesIcon className="h-3 w-3 text-custom-text-200" /> <ContrastIcon className="h-3 w-3 text-custom-text-200" />
<div className="flex items-center gap-2 truncate"> <div className="flex items-center gap-2 truncate">
{cycles?.find((c) => c.id === value)?.name ?? "Cycles"} {cycles?.find((c) => c.id === value)?.name ?? "Cycles"}
</div> </div>
@ -104,7 +104,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({ projectId, value,
className="relative w-full flex select-none items-center gap-x-2 p-2 text-gray-400 hover:bg-indigo-50 hover:text-custom-text-100" className="relative w-full flex select-none items-center gap-x-2 p-2 text-gray-400 hover:bg-indigo-50 hover:text-custom-text-100"
onClick={openCycleModal} onClick={openCycleModal}
> >
<PlusIcon className="h-4 w-4 text-gray-400" aria-hidden="true" /> <Plus className="h-4 w-4 text-gray-400" aria-hidden="true" />
<span>Create cycle</span> <span>Create cycle</span>
</button> </button>
</div> </div>

46
web/components/cycles/sidebar.tsx
View File

@ -17,16 +17,16 @@ import { CustomMenu, CustomRangeDatePicker } from "components/ui";
import { Loader, ProgressBar } from "@plane/ui"; import { Loader, ProgressBar } from "@plane/ui";
// icons // icons
import { import {
CalendarDaysIcon, CalendarDays,
ChartPieIcon, ChevronDown,
ArrowLongRightIcon, File,
TrashIcon, MoveRight,
UserCircleIcon,
ChevronDownIcon,
DocumentIcon,
LinkIcon, LinkIcon,
} from "@heroicons/react/24/outline"; PieChart,
import { ExclamationIcon } from "components/icons"; Trash2,
UserCircle2,
AlertCircle,
} from "lucide-react";
// helpers // helpers
import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper"; import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper";
import { isDateGreaterThanToday, renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper"; import { isDateGreaterThanToday, renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
@ -299,7 +299,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ cycle, isOpen, cycleStatu
cycle.start_date ? "" : "text-custom-text-200" cycle.start_date ? "" : "text-custom-text-200"
}`} }`}
> >
<CalendarDaysIcon className="h-3 w-3" /> <CalendarDays className="h-3 w-3" />
<span> <span>
{renderShortDateWithYearFormat( {renderShortDateWithYearFormat(
new Date(`${watch("start_date") ? watch("start_date") : cycle?.start_date}`), new Date(`${watch("start_date") ? watch("start_date") : cycle?.start_date}`),
@ -336,7 +336,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ cycle, isOpen, cycleStatu
)} )}
</Popover> </Popover>
<span> <span>
<ArrowLongRightIcon className="h-3 w-3 text-custom-text-200" /> <MoveRight className="h-3 w-3 text-custom-text-200" />
</span> </span>
<Popover className="flex h-full items-center justify-center rounded-lg"> <Popover className="flex h-full items-center justify-center rounded-lg">
{({}) => ( {({}) => (
@ -347,7 +347,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ cycle, isOpen, cycleStatu
cycle.end_date ? "" : "text-custom-text-200" cycle.end_date ? "" : "text-custom-text-200"
}`} }`}
> >
<CalendarDaysIcon className="h-3 w-3" /> <CalendarDays className="h-3 w-3" />
<span> <span>
{renderShortDateWithYearFormat( {renderShortDateWithYearFormat(
@ -397,7 +397,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ cycle, isOpen, cycleStatu
{!isCompleted && ( {!isCompleted && (
<CustomMenu.MenuItem onClick={() => setCycleDeleteModal(true)}> <CustomMenu.MenuItem onClick={() => setCycleDeleteModal(true)}>
<span className="flex items-center justify-start gap-2"> <span className="flex items-center justify-start gap-2">
<TrashIcon className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
<span>Delete</span> <span>Delete</span>
</span> </span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
@ -419,7 +419,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ cycle, isOpen, cycleStatu
<div className="flex flex-col gap-4 text-sm"> <div className="flex flex-col gap-4 text-sm">
<div className="flex items-center justify-start gap-1"> <div className="flex items-center justify-start gap-1">
<div className="flex w-40 items-center justify-start gap-2 text-custom-text-200"> <div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
<UserCircleIcon className="h-5 w-5" /> <UserCircle2 className="h-5 w-5" />
<span>Lead</span> <span>Lead</span>
</div> </div>
@ -443,7 +443,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ cycle, isOpen, cycleStatu
<div className="flex items-center justify-start gap-1"> <div className="flex items-center justify-start gap-1">
<div className="flex w-40 items-center justify-start gap-2 text-custom-text-200"> <div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
<ChartPieIcon className="h-5 w-5" /> <PieChart className="h-5 w-5" />
<span>Progress</span> <span>Progress</span>
</div> </div>
@ -474,14 +474,11 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ cycle, isOpen, cycleStatu
</div> </div>
{isStartValid && isEndValid ? ( {isStartValid && isEndValid ? (
<Disclosure.Button> <Disclosure.Button>
<ChevronDownIcon <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
aria-hidden="true"
/>
</Disclosure.Button> </Disclosure.Button>
) : ( ) : (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<ExclamationIcon height={14} width={14} className="fill-current text-custom-text-200" /> <AlertCircle className="h-3.5 w-3.5 text-custom-text-200" />
<span className="text-xs italic text-custom-text-200"> <span className="text-xs italic text-custom-text-200">
{cycleStatus === "upcoming" {cycleStatus === "upcoming"
? "Cycle is yet to start." ? "Cycle is yet to start."
@ -497,7 +494,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ cycle, isOpen, cycleStatu
<div className="flex items-start justify-between gap-4 py-2 text-xs"> <div className="flex items-start justify-between gap-4 py-2 text-xs">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<span> <span>
<DocumentIcon className="h-3 w-3 text-custom-text-200" /> <File className="h-3 w-3 text-custom-text-200" />
</span> </span>
<span> <span>
Pending Issues -{" "} Pending Issues -{" "}
@ -545,14 +542,11 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ cycle, isOpen, cycleStatu
{cycle.total_issues > 0 ? ( {cycle.total_issues > 0 ? (
<Disclosure.Button> <Disclosure.Button>
<ChevronDownIcon <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
aria-hidden="true"
/>
</Disclosure.Button> </Disclosure.Button>
) : ( ) : (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<ExclamationIcon height={14} width={14} className="fill-current text-custom-text-200" /> <AlertCircle className="h-3.5 w-3.5 text-custom-text-200" />
<span className="text-xs italic text-custom-text-200"> <span className="text-xs italic text-custom-text-200">
No issues found. Please add issue. No issues found. Please add issue.
</span> </span>

44
web/components/cycles/single-cycle-card.tsx
View File

@ -10,20 +10,22 @@ import useToast from "hooks/use-toast";
// components // components
import { SingleProgressStats } from "components/core"; import { SingleProgressStats } from "components/core";
// ui // ui
import { Tooltip, LinearProgressIndicator } from "@plane/ui"; import { Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
import { CustomMenu } from "components/ui"; import { CustomMenu } from "components/ui";
import { AssigneesList } from "components/ui/avatar"; import { AssigneesList } from "components/ui/avatar";
// icons // icons
import { CalendarDaysIcon } from "@heroicons/react/20/solid";
import { import {
TargetIcon, AlarmClock,
ContrastIcon, AlertTriangle,
PersonRunningIcon, ArrowRight,
ArrowRightIcon, CalendarDays,
TriangleExclamationIcon, ChevronDown,
AlarmClockIcon, LinkIcon,
} from "components/icons"; Pencil,
import { ChevronDownIcon, LinkIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline"; Star,
Target,
Trash2,
} from "lucide-react";
// helpers // helpers
import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper"; import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
import { copyTextToClipboard, truncateText } from "helpers/string.helper"; import { copyTextToClipboard, truncateText } from "helpers/string.helper";
@ -155,12 +157,12 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
> >
{cycleStatus === "current" ? ( {cycleStatus === "current" ? (
<span className="flex gap-1 whitespace-nowrap"> <span className="flex gap-1 whitespace-nowrap">
<PersonRunningIcon className="h-4 w-4" /> <RunningIcon className="h-4 w-4" />
{findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left {findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left
</span> </span>
) : cycleStatus === "upcoming" ? ( ) : cycleStatus === "upcoming" ? (
<span className="flex gap-1 whitespace-nowrap"> <span className="flex gap-1 whitespace-nowrap">
<AlarmClockIcon className="h-4 w-4" /> <AlarmClock className="h-4 w-4" />
{findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left {findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left
</span> </span>
) : cycleStatus === "completed" ? ( ) : cycleStatus === "completed" ? (
@ -172,7 +174,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
}`} }`}
> >
<span> <span>
<TriangleExclamationIcon className="h-3.5 w-3.5 fill-current" /> <AlertTriangle className="h-3.5 w-3.5" />
</span> </span>
</Tooltip> </Tooltip>
)}{" "} )}{" "}
@ -189,7 +191,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
handleRemoveFromFavorites(); handleRemoveFromFavorites();
}} }}
> >
<StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" /> <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
</button> </button>
) : ( ) : (
<button <button
@ -198,7 +200,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
handleAddToFavorites(); handleAddToFavorites();
}} }}
> >
<StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" /> <Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
</button> </button>
)} )}
</span> </span>
@ -207,12 +209,12 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
{cycleStatus !== "draft" && ( {cycleStatus !== "draft" && (
<> <>
<div className="flex items-start gap-1"> <div className="flex items-start gap-1">
<CalendarDaysIcon className="h-4 w-4" /> <CalendarDays className="h-4 w-4" />
<span>{renderShortDateWithYearFormat(startDate)}</span> <span>{renderShortDateWithYearFormat(startDate)}</span>
</div> </div>
<ArrowRightIcon className="h-4 w-4" /> <ArrowRight className="h-4 w-4" />
<div className="flex items-start gap-1"> <div className="flex items-start gap-1">
<TargetIcon className="h-4 w-4" /> <Target className="h-4 w-4" />
<span>{renderShortDateWithYearFormat(endDate)}</span> <span>{renderShortDateWithYearFormat(endDate)}</span>
</div> </div>
</> </>
@ -261,7 +263,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
}} }}
className="cursor-pointer rounded p-1 text-custom-text-200 duration-300 hover:bg-custom-background-80" className="cursor-pointer rounded p-1 text-custom-text-200 duration-300 hover:bg-custom-background-80"
> >
<PencilIcon className="h-4 w-4" /> <Pencil className="h-4 w-4" />
</button> </button>
)} )}
@ -274,7 +276,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
}} }}
> >
<span className="flex items-center justify-start gap-2"> <span className="flex items-center justify-start gap-2">
<TrashIcon className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
<span>Delete cycle</span> <span>Delete cycle</span>
</span> </span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
@ -338,7 +340,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
</Tooltip> </Tooltip>
<Disclosure.Button> <Disclosure.Button>
<span className="p-1"> <span className="p-1">
<ChevronDownIcon className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" /> <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
</span> </span>
</Disclosure.Button> </Disclosure.Button>
</div> </div>

41
web/components/cycles/single-cycle-list.tsx
View File

@ -7,18 +7,19 @@ import { useRouter } from "next/router";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// ui // ui
import { CustomMenu } from "components/ui"; import { CustomMenu } from "components/ui";
import { Tooltip, LinearProgressIndicator } from "@plane/ui"; import { Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
// icons // icons
import { CalendarDaysIcon } from "@heroicons/react/20/solid";
import { import {
TargetIcon, AlarmClock,
ContrastIcon, AlertTriangle,
PersonRunningIcon, ArrowRight,
ArrowRightIcon, CalendarDays,
TriangleExclamationIcon, LinkIcon,
AlarmClockIcon, Pencil,
} from "components/icons"; Star,
import { LinkIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline"; Target,
Trash2,
} from "lucide-react";
// helpers // helpers
import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper"; import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
import { copyTextToClipboard, truncateText } from "helpers/string.helper"; import { copyTextToClipboard, truncateText } from "helpers/string.helper";
@ -190,12 +191,12 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
> >
{cycleStatus === "current" ? ( {cycleStatus === "current" ? (
<span className="flex gap-1 whitespace-nowrap"> <span className="flex gap-1 whitespace-nowrap">
<PersonRunningIcon className="h-4 w-4" /> <RunningIcon className="h-4 w-4" />
{findHowManyDaysLeft(cycle.end_date ?? new Date())} days left {findHowManyDaysLeft(cycle.end_date ?? new Date())} days left
</span> </span>
) : cycleStatus === "upcoming" ? ( ) : cycleStatus === "upcoming" ? (
<span className="flex gap-1"> <span className="flex gap-1">
<AlarmClockIcon className="h-4 w-4" /> <AlarmClock className="h-4 w-4" />
{findHowManyDaysLeft(cycle.start_date ?? new Date())} days left {findHowManyDaysLeft(cycle.start_date ?? new Date())} days left
</span> </span>
) : cycleStatus === "completed" ? ( ) : cycleStatus === "completed" ? (
@ -207,7 +208,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
}`} }`}
> >
<span> <span>
<TriangleExclamationIcon className="h-3.5 w-3.5 fill-current" /> <AlertTriangle className="h-3.5 w-3.5" />
</span> </span>
</Tooltip> </Tooltip>
)}{" "} )}{" "}
@ -221,12 +222,12 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
{cycleStatus !== "draft" && ( {cycleStatus !== "draft" && (
<div className="flex items-center justify-start gap-2 text-custom-text-200"> <div className="flex items-center justify-start gap-2 text-custom-text-200">
<div className="flex items-start gap-1 whitespace-nowrap"> <div className="flex items-start gap-1 whitespace-nowrap">
<CalendarDaysIcon className="h-4 w-4" /> <CalendarDays className="h-4 w-4" />
<span>{renderShortDateWithYearFormat(startDate)}</span> <span>{renderShortDateWithYearFormat(startDate)}</span>
</div> </div>
<ArrowRightIcon className="h-4 w-4" /> <ArrowRight className="h-4 w-4" />
<div className="flex items-start gap-1 whitespace-nowrap"> <div className="flex items-start gap-1 whitespace-nowrap">
<TargetIcon className="h-4 w-4" /> <Target className="h-4 w-4" />
<span>{renderShortDateWithYearFormat(endDate)}</span> <span>{renderShortDateWithYearFormat(endDate)}</span>
</div> </div>
</div> </div>
@ -305,7 +306,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
handleRemoveFromFavorites(); handleRemoveFromFavorites();
}} }}
> >
<StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" /> <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
</button> </button>
) : ( ) : (
<button <button
@ -314,7 +315,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
handleAddToFavorites(); handleAddToFavorites();
}} }}
> >
<StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" /> <Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
</button> </button>
)} )}
<div className="flex items-center"> <div className="flex items-center">
@ -327,7 +328,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
}} }}
> >
<span className="flex items-center justify-start gap-2"> <span className="flex items-center justify-start gap-2">
<PencilIcon className="h-4 w-4" /> <Pencil className="h-4 w-4" />
<span>Edit Cycle</span> <span>Edit Cycle</span>
</span> </span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
@ -340,7 +341,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
}} }}
> >
<span className="flex items-center justify-start gap-2"> <span className="flex items-center justify-start gap-2">
<TrashIcon className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
<span>Delete cycle</span> <span>Delete cycle</span>
</span> </span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>

12
web/components/cycles/transfer-issues-modal.tsx
View File

@ -8,8 +8,8 @@ import { CycleService } from "services/cycle.service";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
import useIssuesView from "hooks/use-issues-view"; import useIssuesView from "hooks/use-issues-view";
//icons //icons
import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline"; import { ContrastIcon, TransferIcon } from "@plane/ui";
import { ContrastIcon, ExclamationIcon, TransferIcon } from "components/icons"; import { AlertCircle, Search, X } from "lucide-react";
// fetch-key // fetch-key
import { CYCLE_ISSUES_WITH_PARAMS, INCOMPLETE_CYCLES_LIST } from "constants/fetch-keys"; import { CYCLE_ISSUES_WITH_PARAMS, INCOMPLETE_CYCLES_LIST } from "constants/fetch-keys";
// types // types
@ -104,15 +104,15 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="flex items-center justify-between px-5"> <div className="flex items-center justify-between px-5">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<TransferIcon className="h-4 w-5" color="#495057" /> <TransferIcon className="h-4 w-4" color="#495057" />
<h4 className="text-xl font-medium text-custom-text-100">Transfer Issues</h4> <h4 className="text-xl font-medium text-custom-text-100">Transfer Issues</h4>
</div> </div>
<button onClick={handleClose}> <button onClick={handleClose}>
<XMarkIcon className="h-4 w-4" /> <X className="h-4 w-4" />
</button> </button>
</div> </div>
<div className="flex items-center gap-2 border-b border-custom-border-200 px-5 pb-3"> <div className="flex items-center gap-2 border-b border-custom-border-200 px-5 pb-3">
<MagnifyingGlassIcon className="h-4 w-4 text-custom-text-200" /> <Search className="h-4 w-4 text-custom-text-200" />
<input <input
className="bg-custom-background-90 outline-none" className="bg-custom-background-90 outline-none"
placeholder="Search for a cycle..." placeholder="Search for a cycle..."
@ -145,7 +145,7 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
)) ))
) : ( ) : (
<div className="flex w-full items-center justify-center gap-4 p-5 text-sm"> <div className="flex w-full items-center justify-center gap-4 p-5 text-sm">
<ExclamationIcon height={14} width={14} className="fill-current text-custom-text-200" /> <AlertCircle className="h-3.5 w-3.5 text-custom-text-200" />
<span className="text-center text-custom-text-200"> <span className="text-center text-custom-text-200">
You don’t have any current cycle. Please create one to transfer the issues. You don’t have any current cycle. Please create one to transfer the issues.
</span> </span>

6
web/components/cycles/transfer-issues.tsx
View File

@ -5,9 +5,9 @@ import { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
// component // component
import { Button } from "@plane/ui"; import { Button, TransferIcon } from "@plane/ui";
// icon // icon
import { ExclamationIcon, TransferIcon } from "components/icons"; import { AlertCircle } from "lucide-react";
// services // services
import { CycleService } from "services/cycle.service"; import { CycleService } from "services/cycle.service";
// fetch-key // fetch-key
@ -36,7 +36,7 @@ export const TransferIssues: React.FC<Props> = ({ handleClick }) => {
return ( return (
<div className="-mt-2 mb-4 flex items-center justify-between px-8 pt-6"> <div className="-mt-2 mb-4 flex items-center justify-between px-8 pt-6">
<div className="flex items-center gap-2 text-sm text-custom-text-200"> <div className="flex items-center gap-2 text-sm text-custom-text-200">
<ExclamationIcon height={14} width={14} className="fill-current text-custom-text-200" /> <AlertCircle className="h-3.5 w-3.5 text-custom-text-200" />
<span>Completed cycles are not editable.</span> <span>Completed cycles are not editable.</span>
</div> </div>

4
web/components/estimates/delete-estimate-modal.tsx
View File

@ -6,7 +6,7 @@ import { Dialog, Transition } from "@headlessui/react";
import { IEstimate } from "types"; import { IEstimate } from "types";
// icons // icons
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline"; import { AlertTriangle } from "lucide-react";
// ui // ui
import { Button } from "@plane/ui"; import { Button } from "@plane/ui";
@ -59,7 +59,7 @@ export const DeleteEstimateModal: React.FC<Props> = ({ isOpen, handleClose, data
<div className="flex flex-col gap-6 p-6"> <div className="flex flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6"> <div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-red-500/20 p-4"> <span className="place-items-center rounded-full bg-red-500/20 p-4">
<ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" /> <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
</span> </span>
<span className="flex items-center justify-start"> <span className="flex items-center justify-start">
<h3 className="text-xl font-medium 2xl:text-2xl">Delete Estimate</h3> <h3 className="text-xl font-medium 2xl:text-2xl">Delete Estimate</h3>

6
web/components/estimates/single-estimate.tsx
View File

@ -13,7 +13,7 @@ import { DeleteEstimateModal } from "components/estimates";
import { Button } from "@plane/ui"; import { Button } from "@plane/ui";
import { CustomMenu } from "components/ui"; import { CustomMenu } from "components/ui";
//icons //icons
import { PencilIcon, TrashIcon } from "@heroicons/react/24/outline"; import { Pencil, Trash2 } from "lucide-react";
// helpers // helpers
import { orderArrayBy } from "helpers/array.helper"; import { orderArrayBy } from "helpers/array.helper";
// types // types
@ -89,7 +89,7 @@ export const SingleEstimate: React.FC<Props> = ({ user, estimate, editEstimate,
}} }}
> >
<div className="flex items-center justify-start gap-2"> <div className="flex items-center justify-start gap-2">
<PencilIcon className="h-3.5 w-3.5" /> <Pencil className="h-3.5 w-3.5" />
<span>Edit estimate</span> <span>Edit estimate</span>
</div> </div>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
@ -100,7 +100,7 @@ export const SingleEstimate: React.FC<Props> = ({ user, estimate, editEstimate,
}} }}
> >
<div className="flex items-center justify-start gap-2"> <div className="flex items-center justify-start gap-2">
<TrashIcon className="h-3.5 w-3.5" /> <Trash2 className="h-3.5 w-3.5" />
<span>Delete estimate</span> <span>Delete estimate</span>
</div> </div>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>

9
web/components/exporter/guide.tsx
View File

@ -14,9 +14,8 @@ import { IntegrationService } from "services/integrations";
import { Exporter, SingleExport } from "components/exporter"; import { Exporter, SingleExport } from "components/exporter";
// ui // ui
import { Button, Loader } from "@plane/ui"; import { Button, Loader } from "@plane/ui";
import { Icon } from "components/ui";
// icons // icons
import { ArrowPathIcon } from "@heroicons/react/24/outline"; import { MoveLeft, MoveRight, RefreshCw } from "lucide-react";
// fetch-keys // fetch-keys
import { EXPORT_SERVICES_LIST } from "constants/fetch-keys"; import { EXPORT_SERVICES_LIST } from "constants/fetch-keys";
// constants // constants
@ -92,7 +91,7 @@ const IntegrationGuide = () => {
); );
}} }}
> >
<ArrowPathIcon className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />{" "} <RefreshCw className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />{" "}
{refreshing ? "Refreshing..." : "Refresh status"} {refreshing ? "Refreshing..." : "Refresh status"}
</button> </button>
</div> </div>
@ -106,7 +105,7 @@ const IntegrationGuide = () => {
: "cursor-not-allowed opacity-75" : "cursor-not-allowed opacity-75"
}`} }`}
> >
<Icon iconName="keyboard_arrow_left" className="!text-lg" /> <MoveLeft className="h-4 w-4" />
<div className="pr-1">Prev</div> <div className="pr-1">Prev</div>
</button> </button>
<button <button
@ -119,7 +118,7 @@ const IntegrationGuide = () => {
}`} }`}
> >
<div className="pl-1">Next</div> <div className="pl-1">Next</div>
<Icon iconName="keyboard_arrow_right" className="!text-lg" /> <MoveRight className="h-4 w-4" />
</button> </button>
</div> </div>
</div> </div>

9
web/components/gantt-chart/chart/index.tsx
View File

@ -2,7 +2,6 @@ import { FC, useEffect, useState } from "react";
// next // next
import { useRouter } from "next/router"; import { useRouter } from "next/router";
// icons // icons
import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/20/solid";
// components // components
import { GanttChartBlocks } from "components/gantt-chart"; import { GanttChartBlocks } from "components/gantt-chart";
import { GanttSidebar } from "../sidebar"; import { GanttSidebar } from "../sidebar";
@ -14,7 +13,7 @@ import { MonthChartView } from "./month";
// import { QuarterChartView } from "./quarter"; // import { QuarterChartView } from "./quarter";
// import { YearChartView } from "./year"; // import { YearChartView } from "./year";
// icons // icons
import { PlusIcon } from "lucide-react"; import { Expand, PlusIcon, Shrink } from "lucide-react";
// views // views
import { import {
// generateHourChart, // generateHourChart,
@ -275,11 +274,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
className="transition-all border border-custom-border-200 p-1 flex justify-center items-center cursor-pointer rounded-sm hover:bg-custom-background-80" className="transition-all border border-custom-border-200 p-1 flex justify-center items-center cursor-pointer rounded-sm hover:bg-custom-background-80"
onClick={() => setFullScreenMode((prevData) => !prevData)} onClick={() => setFullScreenMode((prevData) => !prevData)}
> >
{fullScreenMode ? ( {fullScreenMode ? <Shrink className="h-4 w-4" /> : <Expand className="h-4 w-4" />}
<ArrowsPointingInIcon className="h-4 w-4" />
) : (
<ArrowsPointingOutIcon className="h-4 w-4" />
)}
</div> </div>
</div> </div>

29
web/components/gantt-chart/helpers/draggable.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect, useRef, useState } from "react"; import React, { useEffect, useRef, useState } from "react";
// icons // icons
import { Icon } from "components/ui"; import { ArrowLeft, ArrowRight } from "lucide-react";
// hooks // hooks
import { useChart } from "../hooks"; import { useChart } from "../hooks";
// types // types
@ -48,10 +48,7 @@ export const ChartDraggable: React.FC<Props> = ({
const posFromLeft = e.clientX; const posFromLeft = e.clientX;
// manually scroll to left if reached the left end while dragging // manually scroll to left if reached the left end while dragging
if ( if (posFromLeft - (ganttContainer.getBoundingClientRect().left + ganttSidebar.clientWidth) <= SCROLL_THRESHOLD) {
posFromLeft - (ganttContainer.getBoundingClientRect().left + ganttSidebar.clientWidth) <=
SCROLL_THRESHOLD
) {
if (e.movementX > 0) return 0; if (e.movementX > 0) return 0;
delWidth = -5; delWidth = -5;
@ -82,8 +79,7 @@ export const ChartDraggable: React.FC<Props> = ({
const columnWidth = currentViewData.data.width; const columnWidth = currentViewData.data.width;
const blockInitialWidth = const blockInitialWidth = resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
let initialWidth = resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10); let initialWidth = resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
let initialMarginLeft = parseInt(resizableDiv.style.marginLeft); let initialMarginLeft = parseInt(resizableDiv.style.marginLeft);
@ -116,9 +112,7 @@ export const ChartDraggable: React.FC<Props> = ({
document.removeEventListener("mousemove", handleMouseMove); document.removeEventListener("mousemove", handleMouseMove);
document.removeEventListener("mouseup", handleMouseUp); document.removeEventListener("mouseup", handleMouseUp);
const totalBlockShifts = Math.ceil( const totalBlockShifts = Math.ceil((resizableDiv.clientWidth - blockInitialWidth) / columnWidth);
(resizableDiv.clientWidth - blockInitialWidth) / columnWidth
);
handleBlock(totalBlockShifts, "left"); handleBlock(totalBlockShifts, "left");
}; };
@ -137,8 +131,7 @@ export const ChartDraggable: React.FC<Props> = ({
const columnWidth = currentViewData.data.width; const columnWidth = currentViewData.data.width;
const blockInitialWidth = const blockInitialWidth = resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
let initialWidth = resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10); let initialWidth = resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
@ -162,9 +155,7 @@ export const ChartDraggable: React.FC<Props> = ({
document.removeEventListener("mousemove", handleMouseMove); document.removeEventListener("mousemove", handleMouseMove);
document.removeEventListener("mouseup", handleMouseUp); document.removeEventListener("mouseup", handleMouseUp);
const totalBlockShifts = Math.ceil( const totalBlockShifts = Math.ceil((resizableDiv.clientWidth - blockInitialWidth) / columnWidth);
(resizableDiv.clientWidth - blockInitialWidth) / columnWidth
);
handleBlock(totalBlockShifts, "right"); handleBlock(totalBlockShifts, "right");
}; };
@ -254,7 +245,7 @@ export const ChartDraggable: React.FC<Props> = ({
className="fixed ml-1 mt-1.5 z-[1] h-8 w-8 grid place-items-center border border-custom-border-300 rounded cursor-pointer bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100" className="fixed ml-1 mt-1.5 z-[1] h-8 w-8 grid place-items-center border border-custom-border-300 rounded cursor-pointer bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
onClick={handleScrollToBlock} onClick={handleScrollToBlock}
> >
<Icon iconName="arrow_back" /> <ArrowLeft className="h-3.5 w-3.5" />
</div> </div>
)} )}
{/* move to right side hidden block button */} {/* move to right side hidden block button */}
@ -263,7 +254,7 @@ export const ChartDraggable: React.FC<Props> = ({
className="fixed right-1 mt-1.5 z-[1] h-8 w-8 grid place-items-center border border-custom-border-300 rounded cursor-pointer bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100" className="fixed right-1 mt-1.5 z-[1] h-8 w-8 grid place-items-center border border-custom-border-300 rounded cursor-pointer bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
onClick={handleScrollToBlock} onClick={handleScrollToBlock}
> >
<Icon iconName="arrow_forward" /> <ArrowRight className="h-3.5 w-3.5" />
</div> </div>
)} )}
<div <div
@ -292,9 +283,7 @@ export const ChartDraggable: React.FC<Props> = ({
</> </>
)} )}
<div <div
className={`relative z-[2] rounded h-8 w-full flex items-center ${ className={`relative z-[2] rounded h-8 w-full flex items-center ${isMoving ? "pointer-events-none" : ""}`}
isMoving ? "pointer-events-none" : ""
}`}
onMouseDown={handleBlockMove} onMouseDown={handleBlockMove}
> >
<BlockRender data={block.data} /> <BlockRender data={block.data} />

6
web/components/gantt-chart/sidebar.tsx
View File

@ -7,7 +7,7 @@ import { useChart } from "./hooks";
// ui // ui
import { Loader } from "@plane/ui"; import { Loader } from "@plane/ui";
// icons // icons
import { EllipsisVerticalIcon } from "@heroicons/react/24/outline"; import { MoreVertical } from "lucide-react";
// helpers // helpers
import { findTotalDaysInRange } from "helpers/date-time.helper"; import { findTotalDaysInRange } from "helpers/date-time.helper";
// types // types
@ -124,8 +124,8 @@ export const GanttSidebar: React.FC<Props> = (props) => {
className="rounded p-0.5 text-custom-sidebar-text-200 flex flex-shrink-0 opacity-0 group-hover:opacity-100" className="rounded p-0.5 text-custom-sidebar-text-200 flex flex-shrink-0 opacity-0 group-hover:opacity-100"
{...provided.dragHandleProps} {...provided.dragHandleProps}
> >
<EllipsisVerticalIcon className="h-4" /> <MoreVertical className="h-4" />
<EllipsisVerticalIcon className="h-4 -ml-5" /> <MoreVertical className="h-4 -ml-5" />
</button> </button>
)} )}
<div className="flex-grow truncate h-full flex items-center justify-between gap-2"> <div className="flex-grow truncate h-full flex items-center justify-between gap-2">

4
web/components/headers/project-views.tsx
View File

@ -5,7 +5,7 @@ import { CreateUpdateProjectViewModal } from "components/views";
// ui // ui
import { PrimaryButton } from "components/ui"; import { PrimaryButton } from "components/ui";
// icons // icons
import { PlusIcon } from "lucide-react"; import { Plus } from "lucide-react";
export const ProjectViewsHeader = () => { export const ProjectViewsHeader = () => {
const [createViewModal, setCreateViewModal] = useState(false); const [createViewModal, setCreateViewModal] = useState(false);
@ -22,7 +22,7 @@ export const ProjectViewsHeader = () => {
document.dispatchEvent(e); document.dispatchEvent(e);
}} }}
> >
<PlusIcon size={14} strokeWidth={2} /> <Plus size={14} strokeWidth={2} />
Create View Create View
</PrimaryButton> </PrimaryButton>
</div> </div>

2
web/components/inbox/filters-dropdown.tsx
View File

@ -6,7 +6,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
// ui // ui
import { MultiLevelDropdown } from "components/ui"; import { MultiLevelDropdown } from "components/ui";
// icons // icons
import { PriorityIcon } from "components/icons"; import { PriorityIcon } from "@plane/ui";
// types // types
import { IInboxFilterOptions } from "types"; import { IInboxFilterOptions } from "types";
// constants // constants

14
web/components/inbox/filters-list.tsx
View File

@ -4,8 +4,8 @@ import { observer } from "mobx-react-lite";
// mobx store // mobx store
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
// icons // icons
import { XMarkIcon } from "@heroicons/react/24/outline"; import { X } from "lucide-react";
import { PriorityIcon } from "components/icons"; import { PriorityIcon } from "@plane/ui";
// helpers // helpers
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper"; import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
// types // types
@ -97,7 +97,7 @@ export const InboxFiltersList = observer(() => {
}) })
} }
> >
<XMarkIcon className="h-3 w-3" /> <X className="h-3 w-3" />
</button> </button>
</div> </div>
))} ))}
@ -109,7 +109,7 @@ export const InboxFiltersList = observer(() => {
}) })
} }
> >
<XMarkIcon className="h-3 w-3" /> <X className="h-3 w-3" />
</button> </button>
</div> </div>
) : filterKey === "inbox_status" ? ( ) : filterKey === "inbox_status" ? (
@ -129,7 +129,7 @@ export const InboxFiltersList = observer(() => {
}) })
} }
> >
<XMarkIcon className="h-3 w-3" /> <X className="h-3 w-3" />
</button> </button>
</div> </div>
))} ))}
@ -141,7 +141,7 @@ export const InboxFiltersList = observer(() => {
}) })
} }
> >
<XMarkIcon className="h-3 w-3" /> <X className="h-3 w-3" />
</button> </button>
</div> </div>
) : ( ) : (
@ -158,7 +158,7 @@ export const InboxFiltersList = observer(() => {
className="flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-80 px-3 py-1.5 text-custom-text-200 hover:text-custom-text-100" className="flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-80 px-3 py-1.5 text-custom-text-200 hover:text-custom-text-100"
> >
<span>Clear all</span> <span>Clear all</span>
<XMarkIcon className="h-3 w-3" /> <X className="h-3 w-3" />
</button> </button>
</div> </div>
); );

7
web/components/inbox/issue-card.tsx
View File

@ -2,10 +2,9 @@ import { useRouter } from "next/router";
import Link from "next/link"; import Link from "next/link";
// ui // ui
import { Tooltip } from "@plane/ui"; import { Tooltip, PriorityIcon } from "@plane/ui";
// icons // icons
import { PriorityIcon } from "components/icons"; import { AlertTriangle, CalendarDays, CheckCircle2, Clock, Copy, XCircle } from "lucide-react";
import { AlertTriangle, Calendar, CheckCircle2, Clock, Copy, XCircle } from "lucide-react";
// helpers // helpers
import { renderShortDateWithYearFormat } from "helpers/date-time.helper"; import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
// types // types
@ -64,7 +63,7 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
tooltipContent={`${renderShortDateWithYearFormat(issue.created_at ?? "")}`} tooltipContent={`${renderShortDateWithYearFormat(issue.created_at ?? "")}`}
> >
<div className="flex items-center gap-1 rounded border border-custom-border-200 shadow-sm text-xs px-2 py-[0.19rem] text-custom-text-200"> <div className="flex items-center gap-1 rounded border border-custom-border-200 shadow-sm text-xs px-2 py-[0.19rem] text-custom-text-200">
<Calendar size={12} strokeWidth={1.5} /> <CalendarDays size={12} strokeWidth={1.5} />
<span>{renderShortDateWithYearFormat(issue.created_at ?? "")}</span> <span>{renderShortDateWithYearFormat(issue.created_at ?? "")}</span>
</div> </div>
</Tooltip> </Tooltip>

4
web/components/inbox/modals/accept-issue-modal.tsx
View File

@ -2,7 +2,7 @@ import React, { useState } from "react";
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
// icons // icons
import { CheckCircleIcon } from "@heroicons/react/24/outline"; import { CheckCircle } from "lucide-react";
// ui // ui
import { Button } from "@plane/ui"; import { Button } from "@plane/ui";
// types // types
@ -59,7 +59,7 @@ export const AcceptIssueModal: React.FC<Props> = ({ isOpen, onClose, data, onSub
<div className="flex flex-col gap-6 p-6"> <div className="flex flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6"> <div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-green-500/20 p-4"> <span className="place-items-center rounded-full bg-green-500/20 p-4">
<CheckCircleIcon className="h-6 w-6 text-green-600" aria-hidden="true" /> <CheckCircle className="h-6 w-6 text-green-600" aria-hidden="true" />
</span> </span>
<span className="flex items-center justify-start"> <span className="flex items-center justify-start">
<h3 className="text-xl font-medium 2xl:text-2xl">Accept Issue</h3> <h3 className="text-xl font-medium 2xl:text-2xl">Accept Issue</h3>

4
web/components/inbox/modals/decline-issue-modal.tsx
View File

@ -2,7 +2,7 @@ import React, { useState } from "react";
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
// icons // icons
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline"; import { AlertTriangle } from "lucide-react";
// ui // ui
import { Button } from "@plane/ui"; import { Button } from "@plane/ui";
// types // types
@ -59,7 +59,7 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, onClose, data, onSu
<div className="flex flex-col gap-6 p-6"> <div className="flex flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6"> <div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-red-500/20 p-4"> <span className="place-items-center rounded-full bg-red-500/20 p-4">
<ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" /> <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
</span> </span>
<span className="flex items-center justify-start"> <span className="flex items-center justify-start">
<h3 className="text-xl font-medium 2xl:text-2xl">Decline Issue</h3> <h3 className="text-xl font-medium 2xl:text-2xl">Decline Issue</h3>

4
web/components/inbox/modals/delete-issue-modal.tsx
View File

@ -8,7 +8,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// icons // icons
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline"; import { AlertTriangle } from "lucide-react";
// ui // ui
import { Button } from "@plane/ui"; import { Button } from "@plane/ui";
// types // types
@ -96,7 +96,7 @@ export const DeleteInboxIssueModal: React.FC<Props> = observer(({ isOpen, onClos
<div className="flex flex-col gap-6 p-6"> <div className="flex flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6"> <div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-red-500/20 p-4"> <span className="place-items-center rounded-full bg-red-500/20 p-4">
<ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" /> <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
</span> </span>
<span className="flex items-center justify-start"> <span className="flex items-center justify-start">
<h3 className="text-xl font-medium 2xl:text-2xl">Delete Issue</h3> <h3 className="text-xl font-medium 2xl:text-2xl">Delete Issue</h3>

9
web/components/inbox/modals/select-duplicate.tsx
View File

@ -8,10 +8,9 @@ import useToast from "hooks/use-toast";
// services // services
import { IssueService } from "services/issue"; import { IssueService } from "services/issue";
// ui // ui
import { Button } from "@plane/ui"; import { Button, LayersIcon } from "@plane/ui";
// icons // icons
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline"; import { Search } from "lucide-react";
import { LayerDiagonalIcon } from "components/icons";
// fetch-keys // fetch-keys
import { PROJECT_ISSUES_LIST } from "constants/fetch-keys"; import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
@ -103,7 +102,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
}} }}
> >
<div className="relative m-1"> <div className="relative m-1">
<MagnifyingGlassIcon <Search
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40" className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
aria-hidden="true" aria-hidden="true"
/> />
@ -155,7 +154,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
</li> </li>
) : ( ) : (
<div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center"> <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
<LayerDiagonalIcon height="56" width="56" /> <LayersIcon height="56" width="56" />
<h3 className="text-sm text-custom-text-200"> <h3 className="text-sm text-custom-text-200">
No issues found. Create a new issue with{" "} No issues found. Create a new issue with{" "}
<pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre>. <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre>.

Some files were not shown because too many files have changed in this diff Show More