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: updated primary colors

Browse Source
This commit is contained in:
Aaryan Khandelwal 2024-02-09 22:22:56 +05:30
commit 32dcf6cca5
51 changed files with 210 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/editor/core/src/ui/mentions/mention-node-view.tsx
View File

@ -19,7 +19,7 @@ export const MentionNodeView = (props) => {
return ( return (
<NodeViewWrapper className="mention-component inline w-fit"> <NodeViewWrapper className="mention-component inline w-fit">
<span <span
className={cn("mention rounded bg-custom-primary-100/20 px-1 py-0.5 font-medium text-primary-text-subtle", { className={cn("mention rounded bg-primary-solid/20 px-1 py-0.5 font-medium text-primary-text-subtle", {
"bg-warning-component-surface-light text-warning-text-subtle": highlights "bg-warning-component-surface-light text-warning-text-subtle": highlights
? highlights.includes(props.node.attrs.id) ? highlights.includes(props.node.attrs.id)
: false, : false,

2
packages/editor/document-editor/src/ui/components/summary-popover.tsx
View File

@ -34,7 +34,7 @@ export const SummaryPopover: React.FC<Props> = (props) => {
type="button" type="button"
ref={setReferenceElement} ref={setReferenceElement}
className={`grid h-7 w-7 place-items-center rounded ${ className={`grid h-7 w-7 place-items-center rounded ${
sidePeekVisible ? "bg-custom-primary-100/20 text-primary-text-subtle" : "text-neutral-text-medium" sidePeekVisible ? "bg-primary-solid/20 text-primary-text-subtle" : "text-neutral-text-medium"
}`} }`}
onClick={() => setSidePeekVisible(!sidePeekVisible)} onClick={() => setSidePeekVisible(!sidePeekVisible)}
> >

4
packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-renderer.tsx
View File

@ -164,9 +164,9 @@ const IssueSuggestionList = ({
{sectionItems.map((item: IssueSuggestionProps, index: number) => ( {sectionItems.map((item: IssueSuggestionProps, index: number) => (
<button <button
className={cn( className={cn(
`flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-neutral-text-medium hover:bg-custom-primary-100/5 hover:text-neutral-text-strong`, `flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-neutral-text-medium hover:bg-primary-solid/5 hover:text-neutral-text-strong`,
{ {
"bg-custom-primary-100/5 text-neutral-text-strong": "bg-primary-solid/5 text-neutral-text-strong":
section === currentSection && index === selectedIndex, section === currentSection && index === selectedIndex,
} }
)} )}

4
packages/editor/extensions/src/extensions/slash-commands.tsx
View File

@ -297,9 +297,9 @@ const CommandList = ({ items, command }: { items: CommandItemProps[]; command: a
<button <button
key={item.key} key={item.key}
className={cn( className={cn(
`flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-sm text-neutral-text-strong hover:bg-custom-primary-100/5`, `flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-sm text-neutral-text-strong hover:bg-primary-solid/5`,
{ {
"bg-custom-primary-100/5": index === selectedIndex, "bg-primary-solid/5": index === selectedIndex,
} }
)} )}
onClick={() => selectItem(index)} onClick={() => selectItem(index)}

4
packages/editor/rich-text-editor/src/ui/menus/bubble-menu/index.tsx
View File

@ -123,9 +123,9 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
type="button" type="button"
onClick={item.command} onClick={item.command}
className={cn( className={cn(
"p-2 text-neutral-text-medium transition-colors hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5", "p-2 text-neutral-text-medium transition-colors hover:bg-primary-solid/5 active:bg-primary-solid/5",
{ {
"bg-custom-primary-100/5 text-neutral-text-strong": item.isActive(), "bg-primary-solid/5 text-neutral-text-strong": item.isActive(),
} }
)} )}
> >

6
packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx
View File

@ -48,7 +48,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
<button <button
type="button" type="button"
onClick={() => setIsOpen(!isOpen)} onClick={() => setIsOpen(!isOpen)}
className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-neutral-text-medium hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5" className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-neutral-text-medium hover:bg-primary-solid/5 active:bg-primary-solid/5"
> >
<span>{activeItem?.name}</span> <span>{activeItem?.name}</span>
<ChevronDown className="h-4 w-4" /> <ChevronDown className="h-4 w-4" />
@ -65,9 +65,9 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
setIsOpen(false); setIsOpen(false);
}} }}
className={cn( className={cn(
"flex items-center justify-between rounded-sm px-2 py-1 text-sm text-neutral-text-medium hover:bg-custom-primary-100/5 hover:text-neutral-text-strong", "flex items-center justify-between rounded-sm px-2 py-1 text-sm text-neutral-text-medium hover:bg-primary-solid/5 hover:text-neutral-text-strong",
{ {
"bg-custom-primary-100/5 text-neutral-text-strong": activeItem.name === item.name, "bg-primary-solid/5 text-neutral-text-strong": activeItem.name === item.name,
} }
)} )}
> >

2
packages/ui/src/badge/helper.tsx
View File

@ -41,7 +41,7 @@ enum badgeIconStyling {
export const badgeStyling: IBadgeStyling = { export const badgeStyling: IBadgeStyling = {
primary: { primary: {
default: `text-white bg-custom-primary-100`, default: `text-white bg-primary-solid`,
hover: `hover:bg-custom-primary-200`, hover: `hover:bg-custom-primary-200`,
disabled: `cursor-not-allowed !bg-custom-primary-60 hover:bg-custom-primary-60`, disabled: `cursor-not-allowed !bg-custom-primary-60 hover:bg-custom-primary-60`,
}, },

2
packages/ui/src/button/toggle-switch.tsx
View File

@ -22,7 +22,7 @@ const ToggleSwitch: React.FC<IToggleSwitchProps> = (props) => {
className={`relative inline-flex flex-shrink-0 ${ className={`relative inline-flex flex-shrink-0 ${
size === "sm" ? "h-4 w-6" : size === "md" ? "h-5 w-8" : "h-6 w-10" size === "sm" ? "h-4 w-6" : size === "md" ? "h-5 w-8" : "h-6 w-10"
} flex-shrink-0 cursor-pointer rounded-full border border-neutral-border-medium transition-colors duration-200 ease-in-out focus:outline-none ${ } flex-shrink-0 cursor-pointer rounded-full border border-neutral-border-medium transition-colors duration-200 ease-in-out focus:outline-none ${
value ? "bg-custom-primary-100" : "bg-primary-solid" value ? "bg-primary-solid" : "bg-primary-solid"
} ${className || ""} ${disabled ? "cursor-not-allowed" : ""}`} } ${className || ""} ${disabled ? "cursor-not-allowed" : ""}`}
> >
<span className="sr-only">{label}</span> <span className="sr-only">{label}</span>

67
packages/ui/src/form-fields/checkbox.tsx Normal file
View File

@ -0,0 +1,67 @@
import * as React from "react";
export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
intermediate?: boolean;
className?: string;
}
const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
const { id, name, checked, intermediate = false, disabled, className = "", ...rest } = props;
return (
<div className={`relative w-full flex gap-2 ${className}`}>
<input
id={id}
ref={ref}
type="checkbox"
name={name}
checked={checked}
className={`
appearance-none shrink-0 w-4 h-4 border rounded-[3px] focus:outline-1 focus:outline-offset-4 focus:outline-custom-primary-50
${
disabled
? "border-neutral-border-medium bg-neutral-component-surface-dark cursor-not-allowed"
: `cursor-pointer ${
checked || intermediate
? "border-custom-primary-40 bg-primary-solid hover:bg-custom-primary-200"
: "border-neutral-border-medium hover:border-neutral-border-strong bg-white"
}`
}
`}
disabled={disabled}
{...rest}
/>
<svg
className={`absolute w-4 h-4 p-0.5 pointer-events-none outline-none ${
disabled ? "stroke-custom-text-400 opacity-40" : "stroke-white"
} ${checked ? "block" : "hidden"}`}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="3"
strokeLinecap="round"
strokeLinejoin="round"
>
<polyline points="20 6 9 17 4 12" />
</svg>
<svg
className={`absolute w-4 h-4 p-0.5 pointer-events-none outline-none ${
disabled ? "stroke-custom-text-400 opacity-40" : "stroke-white"
} ${intermediate && !checked ? "block" : "hidden"}`}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 8 8"
fill="none"
stroke="currentColor"
strokeWidth="3"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M5.75 4H2.25" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
);
});
Checkbox.displayName = "form-checkbox-field";
export { Checkbox };

1
packages/ui/src/form-fields/index.ts
View File

@ -1,3 +1,4 @@
export * from "./input"; export * from "./input";
export * from "./textarea"; export * from "./textarea";
export * from "./input-color-picker"; export * from "./input-color-picker";
export * from "./checkbox";

20
packages/ui/src/icons/priority-icon.tsx
View File

@ -16,11 +16,11 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
const { priority, className = "", containerClassName = "", size = 14, withContainer = false } = props; const { priority, className = "", containerClassName = "", size = 14, withContainer = false } = props;
const priorityClasses = { const priorityClasses = {
urgent: "bg-danger-solid text-danger-text-medium border-danger-90", urgent: "bg-danger-solid text-danger-text-medium border-danger-solid",
high: "bg-orange-30 text-orange-80 border-orange-80", high: "bg-orange-30 text-orange-110 border-orange-90",
medium: "bg-warning-20 text-warning-80 border-warning-80", medium: "bg-warning-component-surface-light text-warning-text-medium border-warning-solid",
low: "bg-primary-30 text-primary-90 border-primary-90", low: "bg-primary-component-surface-light text-primary-text-medium border-primary-90",
none: "bg-neutral-40 text-neutral-text-medium border-neutral-border-strong", none: "bg-neutral-component-surface-light text-neutral-text-medium border-neutral-border-strong",
}; };
// get priority icon // get priority icon
@ -64,11 +64,11 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
size={size} size={size}
className={cn( className={cn(
{ {
"text-danger-text-medium": priority === "urgent", "text-danger-solid": priority === "urgent",
"text-orange-500": priority === "high", "text-orange-90": priority === "high",
"text-warning-text-subtle": priority === "medium", "text-warning-text-solid": priority === "medium",
"text-primary-text-subtle": priority === "low", "text-primary-text-solid": priority === "low",
"text-neutral-text-medium": priority === "none", "text-neutral-text-solid": priority === "none",
}, },
className className
)} )}

2
space/components/issues/filters/helpers/filter-option.tsx
View File

@ -21,7 +21,7 @@ export const FilterOption: React.FC<Props> = (props) => {
> >
<div <div
className={`grid h-3 w-3 flex-shrink-0 place-items-center border bg-neutral-component-surface-medium ${ className={`grid h-3 w-3 flex-shrink-0 place-items-center border bg-neutral-component-surface-medium ${
isChecked ? "border-custom-primary-100 bg-custom-primary-100 text-white" : "border-neutral-border-medium" isChecked ? "border-custom-primary-100 bg-primary-solid text-white" : "border-neutral-border-medium"
} ${multiple ? "rounded-sm" : "rounded-full"}`} } ${multiple ? "rounded-sm" : "rounded-full"}`}
> >
{isChecked && <Check size={10} strokeWidth={3} />} {isChecked && <Check size={10} strokeWidth={3} />}

2
space/components/issues/peek-overview/comment/comment-reactions.tsx
View File

@ -107,7 +107,7 @@ export const CommentReactions: React.FC<Props> = observer((props) => {
commentReactions?.some( commentReactions?.some(
(r) => r.actor_detail.id === userStore.currentUser?.id && r.reaction === reaction (r) => r.actor_detail.id === userStore.currentUser?.id && r.reaction === reaction
) )
? "bg-custom-primary-100/10" ? "bg-primary-solid/10"
: "bg-neutral-component-surface-dark" : "bg-neutral-component-surface-dark"
}`} }`}
> >

2
space/components/issues/peek-overview/issue-emoji-reactions.tsx
View File

@ -86,7 +86,7 @@ export const IssueEmojiReactions: React.FC = observer(() => {
}} }}
className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-neutral-text-strong ${ className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-neutral-text-strong ${
reactions?.some((r) => r.actor_detail.id === user?.id && r.reaction === reaction) reactions?.some((r) => r.actor_detail.id === user?.id && r.reaction === reaction)
? "bg-custom-primary-100/10" ? "bg-primary-solid/10"
: "bg-neutral-component-surface-dark" : "bg-neutral-component-surface-dark"
}`} }`}
> >

2
space/components/ui/reaction-selector.tsx
View File

@ -64,7 +64,7 @@ export const ReactionSelector: React.FC<Props> = (props) => {
}} }}
className={`grid select-none place-items-center rounded-md p-1 text-sm ${ className={`grid select-none place-items-center rounded-md p-1 text-sm ${
selected.includes(emoji) selected.includes(emoji)
? "bg-custom-primary-100/10" ? "bg-primary-solid/10"
: "hover:bg-sidebar-neutral-component-surface-dark" : "hover:bg-sidebar-neutral-component-surface-dark"
}`} }`}
> >

2
web/components/dashboard/widgets/assigned-issues.tsx
View File

@ -71,7 +71,7 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />; if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
return ( return (
<div className="bg-neutral-component-surface-light rounded-xl border-[0.5px] border-neutral-border-medium w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96"> <div className="bg-neutral-page-surface-default rounded-xl border-[0.5px] border-neutral-border-subtle w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
<div className="flex items-center justify-between gap-2 p-6 pl-7"> <div className="flex items-center justify-between gap-2 p-6 pl-7">
<Link <Link
href={`/${workspaceSlug}/workspace-views/assigned/${filterParams}`} href={`/${workspaceSlug}/workspace-views/assigned/${filterParams}`}

2
web/components/dashboard/widgets/created-issues.tsx
View File

@ -68,7 +68,7 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />; if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
return ( return (
<div className="bg-neutral-component-surface-light rounded-xl border-[0.5px] border-neutral-border-medium w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96"> <div className="bg-neutral-page-surface-default rounded-xl border-[0.5px] border-neutral-border-subtle w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
<div className="flex items-center justify-between gap-2 p-6 pl-7"> <div className="flex items-center justify-between gap-2 p-6 pl-7">
<Link <Link
href={`/${workspaceSlug}/workspace-views/created/${filterParams}`} href={`/${workspaceSlug}/workspace-views/created/${filterParams}`}

12
web/components/dashboard/widgets/issue-panels/issue-list-item.tsx
View File

@ -38,7 +38,7 @@ export const AssignedUpcomingIssueListItem: React.FC<IssueListItemProps> = obser
<ControlLink <ControlLink
href={`/${workspaceSlug}/projects/${issueDetails.project_id}/issues/${issueDetails.id}`} href={`/${workspaceSlug}/projects/${issueDetails.project_id}/issues/${issueDetails.id}`}
onClick={() => onClick(issueDetails)} onClick={() => onClick(issueDetails)}
className="py-2 px-3 hover:bg-neutral-component-surface-dark rounded grid grid-cols-6 gap-1" className="py-2 px-3 hover:bg-neutral-component-surface-medium rounded grid grid-cols-6 gap-1"
> >
<div className="col-span-4 flex items-center gap-3"> <div className="col-span-4 flex items-center gap-3">
<PriorityIcon priority={issueDetails.priority} withContainer /> <PriorityIcon priority={issueDetails.priority} withContainer />
@ -89,7 +89,7 @@ export const AssignedOverdueIssueListItem: React.FC<IssueListItemProps> = observ
<ControlLink <ControlLink
href={`/${workspaceSlug}/projects/${issueDetails.project_id}/issues/${issueDetails.id}`} href={`/${workspaceSlug}/projects/${issueDetails.project_id}/issues/${issueDetails.id}`}
onClick={() => onClick(issueDetails)} onClick={() => onClick(issueDetails)}
className="py-2 px-3 hover:bg-neutral-component-surface-dark rounded grid grid-cols-6 gap-1" className="py-2 px-3 hover:bg-neutral-component-surface-medium rounded grid grid-cols-6 gap-1"
> >
<div className="col-span-4 flex items-center gap-3"> <div className="col-span-4 flex items-center gap-3">
<PriorityIcon priority={issueDetails.priority} withContainer /> <PriorityIcon priority={issueDetails.priority} withContainer />
@ -130,7 +130,7 @@ export const AssignedCompletedIssueListItem: React.FC<IssueListItemProps> = obse
<ControlLink <ControlLink
href={`/${workspaceSlug}/projects/${issueDetails.project_id}/issues/${issueDetails.id}`} href={`/${workspaceSlug}/projects/${issueDetails.project_id}/issues/${issueDetails.id}`}
onClick={() => onClick(issueDetails)} onClick={() => onClick(issueDetails)}
className="py-2 px-3 hover:bg-neutral-component-surface-dark rounded grid grid-cols-6 gap-1" className="py-2 px-3 hover:bg-neutral-component-surface-medium rounded grid grid-cols-6 gap-1"
> >
<div className="col-span-6 flex items-center gap-3"> <div className="col-span-6 flex items-center gap-3">
<PriorityIcon priority={issueDetails.priority} withContainer /> <PriorityIcon priority={issueDetails.priority} withContainer />
@ -162,7 +162,7 @@ export const CreatedUpcomingIssueListItem: React.FC<IssueListItemProps> = observ
<ControlLink <ControlLink
href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`} href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
onClick={() => onClick(issue)} onClick={() => onClick(issue)}
className="py-2 px-3 hover:bg-neutral-component-surface-dark rounded grid grid-cols-6 gap-1" className="py-2 px-3 hover:bg-neutral-component-surface-medium rounded grid grid-cols-6 gap-1"
> >
<div className="col-span-4 flex items-center gap-3"> <div className="col-span-4 flex items-center gap-3">
<PriorityIcon priority={issue.priority} withContainer /> <PriorityIcon priority={issue.priority} withContainer />
@ -218,7 +218,7 @@ export const CreatedOverdueIssueListItem: React.FC<IssueListItemProps> = observe
<ControlLink <ControlLink
href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`} href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
onClick={() => onClick(issue)} onClick={() => onClick(issue)}
className="py-2 px-3 hover:bg-neutral-component-surface-dark rounded grid grid-cols-6 gap-1" className="py-2 px-3 hover:bg-neutral-component-surface-medium rounded grid grid-cols-6 gap-1"
> >
<div className="col-span-4 flex items-center gap-3"> <div className="col-span-4 flex items-center gap-3">
<PriorityIcon priority={issue.priority} withContainer /> <PriorityIcon priority={issue.priority} withContainer />
@ -268,7 +268,7 @@ export const CreatedCompletedIssueListItem: React.FC<IssueListItemProps> = obser
<ControlLink <ControlLink
href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`} href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
onClick={() => onClick(issue)} onClick={() => onClick(issue)}
className="py-2 px-3 hover:bg-neutral-component-surface-dark rounded grid grid-cols-6 gap-1" className="py-2 px-3 hover:bg-neutral-component-surface-medium rounded grid grid-cols-6 gap-1"
> >
<div className="col-span-5 flex items-center gap-3"> <div className="col-span-5 flex items-center gap-3">
<PriorityIcon priority={issue.priority} withContainer /> <PriorityIcon priority={issue.priority} withContainer />

2
web/components/dashboard/widgets/issue-panels/issues-list.tsx
View File

@ -74,7 +74,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
})} })}
> >
Issues Issues
<span className="flex-shrink-0 bg-custom-primary-100/20 text-primary-text-subtle text-xs font-medium rounded-xl px-3 flex items-center text-center justify-center"> <span className="flex-shrink-0 bg-primary-solid/20 text-primary-text-subtle text-xs font-medium rounded-xl px-3 flex items-center text-center justify-center">
{totalIssues} {totalIssues}
</span> </span>
</h6> </h6>

6
web/components/dashboard/widgets/issue-panels/tabs-list.tsx
View File

@ -21,14 +21,14 @@ export const TabsList: React.FC<Props> = observer((props) => {
return ( return (
<Tab.List <Tab.List
as="div" as="div"
className="relative border-[0.5px] border-neutral-border-medium rounded bg-neutral-component-surface-dark p-[1px] grid" className="relative border-[0.5px] border-neutral-border-medium rounded bg-neutral-page-surface-medium p-[1px] grid"
style={{ style={{
gridTemplateColumns: `repeat(${tabsList.length}, 1fr)`, gridTemplateColumns: `repeat(${tabsList.length}, 1fr)`,
}} }}
> >
<div <div
className={cn( className={cn(
"absolute top-1/2 left-[1px] bg-neutral-component-surface-light rounded-[3px] transition-all duration-500 ease-in-out", "absolute top-1/2 left-[1px] bg-neutral-page-surface-default rounded-[3px] transition-all duration-500 ease-in-out",
{ {
// right shadow // right shadow
"shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== tabsList.length - 1, "shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== tabsList.length - 1,
@ -48,7 +48,7 @@ export const TabsList: React.FC<Props> = observer((props) => {
className={cn( className={cn(
"relative z-[1] font-semibold text-xs rounded-[3px] py-1.5 text-neutral-text-subtle focus:outline-none transition duration-500", "relative z-[1] font-semibold text-xs rounded-[3px] py-1.5 text-neutral-text-subtle focus:outline-none transition duration-500",
{ {
"text-neutral-text-strong bg-neutral-component-surface-light": selectedTab === tab.key, "text-neutral-text-strong": selectedTab === tab.key,
"hover:text-neutral-text-medium": selectedTab !== tab.key, "hover:text-neutral-text-medium": selectedTab !== tab.key,
} }
)} )}

2
web/components/dashboard/widgets/issues-by-priority.tsx
View File

@ -132,7 +132,7 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
}; };
return ( return (
<div className="bg-neutral-component-surface-light rounded-xl border-[0.5px] border-neutral-border-medium w-full py-6 hover:shadow-custom-shadow-4xl duration-300 overflow-hidden min-h-96 flex flex-col"> <div className="bg-neutral-page-surface-default rounded-xl border-[0.5px] border-neutral-border-subtle w-full py-6 hover:shadow-custom-shadow-4xl duration-300 overflow-hidden min-h-96 flex flex-col">
<div className="flex items-center justify-between gap-2 pl-7 pr-6"> <div className="flex items-center justify-between gap-2 pl-7 pr-6">
<Link <Link
href={`/${workspaceSlug}/workspace-views/assigned`} href={`/${workspaceSlug}/workspace-views/assigned`}

2
web/components/dashboard/widgets/issues-by-state-group.tsx
View File

@ -130,7 +130,7 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
}; };
return ( return (
<div className="bg-neutral-component-surface-light rounded-xl border-[0.5px] border-neutral-border-medium w-full py-6 hover:shadow-custom-shadow-4xl duration-300 overflow-hidden min-h-96 flex flex-col"> <div className="bg-neutral-page-surface-default rounded-xl border-[0.5px] border-neutral-border-subtle w-full py-6 hover:shadow-custom-shadow-4xl duration-300 overflow-hidden min-h-96 flex flex-col">
<div className="flex items-center justify-between gap-2 pl-7 pr-6"> <div className="flex items-center justify-between gap-2 pl-7 pr-6">
<Link <Link
href={`/${workspaceSlug}/workspace-views/assigned`} href={`/${workspaceSlug}/workspace-views/assigned`}

6
web/components/dashboard/widgets/overview-stats.tsx
View File

@ -7,9 +7,9 @@ import { useDashboard } from "hooks/store";
import { WidgetLoader } from "components/dashboard/widgets"; import { WidgetLoader } from "components/dashboard/widgets";
// helpers // helpers
import { renderFormattedPayloadDate } from "helpers/date-time.helper"; import { renderFormattedPayloadDate } from "helpers/date-time.helper";
import { cn } from "helpers/common.helper";
// types // types
import { TOverviewStatsWidgetResponse } from "@plane/types"; import { TOverviewStatsWidgetResponse } from "@plane/types";
import { cn } from "helpers/common.helper";
export type WidgetProps = { export type WidgetProps = {
dashboardId: string; dashboardId: string;
@ -64,7 +64,7 @@ export const OverviewStatsWidget: React.FC<WidgetProps> = observer((props) => {
return ( return (
<div <div
className="bg-neutral-component-surface-light rounded-xl border-[0.5px] border-neutral-border-medium w-full grid lg:grid-cols-4 md:grid-cols-2 sm:grid-cols-2 grid-cols-2 p-0.5 hover:shadow-custom-shadow-4xl duration-300 className="bg-neutral-page-surface-default rounded-xl border-[0.5px] border-neutral-border-subtle w-full grid lg:grid-cols-4 md:grid-cols-2 sm:grid-cols-2 grid-cols-2 p-0.5 hover:shadow-custom-shadow-4xl duration-300
[&>div>a>div]:border-r [&>div>a>div]:border-r
[&>div:last-child>a>div]:border-0 [&>div:last-child>a>div]:border-0
[&>div>a>div]:border-neutral-border-medium [&>div>a>div]:border-neutral-border-medium
@ -75,7 +75,7 @@ export const OverviewStatsWidget: React.FC<WidgetProps> = observer((props) => {
{STATS_LIST.map((stat, index) => ( {STATS_LIST.map((stat, index) => (
<div <div
className={cn( className={cn(
`w-full flex flex-col gap-2 hover:bg-neutral-component-surface-dark`, `w-full flex flex-col gap-2 hover:bg-neutral-component-surface-medium`,
index === 0 ? "rounded-tl-xl lg:rounded-l-xl" : "", index === 0 ? "rounded-tl-xl lg:rounded-l-xl" : "",
index === STATS_LIST.length - 1 ? "rounded-br-xl lg:rounded-r-xl" : "", index === STATS_LIST.length - 1 ? "rounded-br-xl lg:rounded-r-xl" : "",
index === 1 ? "rounded-tr-xl lg:rounded-[0px]" : "", index === 1 ? "rounded-tr-xl lg:rounded-[0px]" : "",

2
web/components/dashboard/widgets/recent-activity.tsx
View File

@ -34,7 +34,7 @@ export const RecentActivityWidget: React.FC<WidgetProps> = observer((props) => {
if (!widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />; if (!widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
return ( return (
<div className="bg-neutral-component-surface-light rounded-xl border-[0.5px] border-neutral-border-medium w-full py-6 hover:shadow-custom-shadow-4xl duration-300 min-h-96"> <div className="bg-neutral-page-surface-default rounded-xl border-[0.5px] border-neutral-border-subtle w-full py-6 hover:shadow-custom-shadow-4xl duration-300 min-h-96">
<Link href="/profile/activity" className="text-lg font-semibold text-neutral-text-medium mx-7 hover:underline"> <Link href="/profile/activity" className="text-lg font-semibold text-neutral-text-medium mx-7 hover:underline">
Your issue activities Your issue activities
</Link> </Link>

2
web/components/dashboard/widgets/recent-collaborators.tsx
View File

@ -66,7 +66,7 @@ export const RecentCollaboratorsWidget: React.FC<WidgetProps> = observer((props)
if (!widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />; if (!widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
return ( return (
<div className="bg-neutral-component-surface-light rounded-xl border-[0.5px] border-neutral-border-medium w-full hover:shadow-custom-shadow-4xl duration-300"> <div className="bg-neutral-page-surface-default rounded-xl border-[0.5px] border-neutral-border-subtle w-full hover:shadow-custom-shadow-4xl duration-300">
<div className="px-7 pt-6"> <div className="px-7 pt-6">
<h4 className="text-lg font-semibold text-neutral-text-medium">Most active members</h4> <h4 className="text-lg font-semibold text-neutral-text-medium">Most active members</h4>
<p className="mt-2 text-xs font-medium text-neutral-text-medium"> <p className="mt-2 text-xs font-medium text-neutral-text-medium">

4
web/components/dashboard/widgets/recent-projects.tsx
View File

@ -91,7 +91,7 @@ export const RecentProjectsWidget: React.FC<WidgetProps> = observer((props) => {
if (!widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />; if (!widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
return ( return (
<div className="bg-neutral-component-surface-light rounded-xl border-[0.5px] border-neutral-border-medium w-full py-6 hover:shadow-custom-shadow-4xl duration-300 min-h-96"> <div className="bg-neutral-page-surface-default rounded-xl border-[0.5px] border-neutral-border-subtle w-full py-6 hover:shadow-custom-shadow-4xl duration-300 min-h-96">
<Link <Link
href={`/${workspaceSlug}/projects`} href={`/${workspaceSlug}/projects`}
className="text-lg font-semibold text-neutral-text-medium mx-7 hover:underline" className="text-lg font-semibold text-neutral-text-medium mx-7 hover:underline"
@ -110,7 +110,7 @@ export const RecentProjectsWidget: React.FC<WidgetProps> = observer((props) => {
toggleCreateProjectModal(true); toggleCreateProjectModal(true);
}} }}
> >
<div className="h-[3.375rem] w-[3.375rem] bg-custom-primary-100/20 text-primary-text-subtle grid place-items-center rounded border border-dashed border-custom-primary-60 flex-shrink-0"> <div className="h-[3.375rem] w-[3.375rem] bg-primary-solid/20 text-primary-text-subtle grid place-items-center rounded border border-dashed border-custom-primary-60 flex-shrink-0">
<Plus className="h-6 w-6" /> <Plus className="h-6 w-6" />
</div> </div>
<p className="text-sm text-neutral-text-medium font-medium group-hover:underline group-hover:text-neutral-text-strong"> <p className="text-sm text-neutral-text-medium font-medium group-hover:underline group-hover:text-neutral-text-strong">

73
web/components/dropdowns/priority.tsx
View File

@ -2,7 +2,6 @@ import { Fragment, ReactNode, useRef, useState } from "react";
import { Combobox } from "@headlessui/react"; import { Combobox } from "@headlessui/react";
import { usePopper } from "react-popper"; import { usePopper } from "react-popper";
import { Check, ChevronDown, Search } from "lucide-react"; import { Check, ChevronDown, Search } from "lucide-react";
import { useTheme } from "next-themes";
// hooks // hooks
import { useDropdownKeyDown } from "hooks/use-dropdown-key-down"; import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
import useOutsideClickDetector from "hooks/use-outside-click-detector"; import useOutsideClickDetector from "hooks/use-outside-click-detector";
@ -39,6 +38,34 @@ type ButtonProps = {
showTooltip: boolean; showTooltip: boolean;
}; };
const PRIORITY_CLASSES = {
urgent: {
border: "border-danger-border-strong",
bg: "bg-danger-component-surface-medium",
text: "text-danger-text-strong",
},
high: {
border: "border-orange-70",
bg: "bg-orange-40",
text: "text-orange-120",
},
medium: {
border: "border-warning-border-strong",
bg: "bg-warning-page-surface-medium",
text: "text-warning-text-strong",
},
low: {
border: "border-primary-border-strong",
bg: "bg-primary-component-surface-light",
text: "text-primary-text-strong",
},
none: {
border: "border-neutral-border-medium",
bg: "bg-neutral-component-surface-medium",
text: "text-neutral-text-strong",
},
};
const BorderButton = (props: ButtonProps) => { const BorderButton = (props: ButtonProps) => {
const { const {
className, className,
@ -53,25 +80,19 @@ const BorderButton = (props: ButtonProps) => {
const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority); const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
const priorityClasses = {
urgent: "bg-danger-component-surface-dark text-red-950 border-red-500",
high: "bg-orange-500/20 text-orange-950 border-orange-500",
medium: "bg-warning-component-surface-light text-warning-text-subtle border-yellow-500",
low: "bg-custom-primary-100/20 text-custom-primary-950 border-custom-primary-100",
none: "bg-neutral-component-surface-dark border-neutral-border-medium",
};
return ( return (
<Tooltip tooltipHeading="Priority" tooltipContent={priorityDetails?.title ?? "None"} disabled={!showTooltip}> <Tooltip tooltipHeading="Priority" tooltipContent={priorityDetails?.title ?? "None"} disabled={!showTooltip}>
<div <div
className={cn( className={cn(
"h-full flex items-center gap-1.5 border-[0.5px] rounded text-xs px-2 py-0.5", "h-full flex items-center gap-1.5 border-[0.5px] rounded text-xs px-2 py-0.5",
priorityClasses[priority], PRIORITY_CLASSES[priority].border,
PRIORITY_CLASSES[priority].bg,
PRIORITY_CLASSES[priority].text,
{ {
// compact the icons if text is hidden // compact the icons if text is hidden
"px-0.5": hideText, "px-0.5": hideText,
// highlight the whole button if text is hidden and priority is urgent // highlight the whole button if text is hidden and priority is urgent
"bg-danger-solid border-red-500": priority === "urgent" && hideText && highlightUrgent, "bg-danger-solid border-danger-solid": priority === "urgent" && hideText && highlightUrgent,
}, },
className className
)} )}
@ -122,25 +143,18 @@ const BackgroundButton = (props: ButtonProps) => {
const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority); const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
const priorityClasses = {
urgent: "bg-danger-component-surface-dark text-red-950",
high: "bg-orange-500/20 text-orange-950",
medium: "bg-warning-component-surface-light text-warning-text-subtle",
low: "bg-blue-500/20 text-blue-950",
none: "bg-neutral-component-surface-dark",
};
return ( return (
<Tooltip tooltipHeading="Priority" tooltipContent={priorityDetails?.title ?? "None"} disabled={!showTooltip}> <Tooltip tooltipHeading="Priority" tooltipContent={priorityDetails?.title ?? "None"} disabled={!showTooltip}>
<div <div
className={cn( className={cn(
"h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5", "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5",
priorityClasses[priority], PRIORITY_CLASSES[priority].border,
PRIORITY_CLASSES[priority].text,
{ {
// compact the icons if text is hidden // compact the icons if text is hidden
"px-0.5": hideText, "px-0.5": hideText,
// highlight the whole button if text is hidden and priority is urgent // highlight the whole button if text is hidden and priority is urgent
"bg-danger-solid border-red-500": priority === "urgent" && hideText && highlightUrgent, "bg-danger-solid border-danger-solid": priority === "urgent" && hideText && highlightUrgent,
}, },
className className
)} )}
@ -192,20 +206,12 @@ const TransparentButton = (props: ButtonProps) => {
const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority); const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
const priorityClasses = {
urgent: "text-red-950",
high: "text-orange-950",
medium: "text-warning-text-subtle",
low: "text-blue-950",
none: "",
};
return ( return (
<Tooltip tooltipHeading="Priority" tooltipContent={priorityDetails?.title ?? "None"} disabled={!showTooltip}> <Tooltip tooltipHeading="Priority" tooltipContent={priorityDetails?.title ?? "None"} disabled={!showTooltip}>
<div <div
className={cn( className={cn(
"h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 hover:bg-neutral-component-surface-dark", "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 hover:bg-neutral-component-surface-dark",
priorityClasses[priority], PRIORITY_CLASSES[priority].text,
{ {
// compact the icons if text is hidden // compact the icons if text is hidden
"px-0.5": hideText, "px-0.5": hideText,
@ -287,9 +293,6 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
}, },
], ],
}); });
// next-themes
// TODO: remove this after new theming implementation
const { resolvedTheme } = useTheme();
const options = ISSUE_PRIORITIES.map((priority) => ({ const options = ISSUE_PRIORITIES.map((priority) => ({
value: priority.key, value: priority.key,
@ -385,9 +388,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
> >
<ButtonToRender <ButtonToRender
priority={value} priority={value}
className={cn(buttonClassName, { className={buttonClassName}
"text-white": resolvedTheme === "dark",
})}
highlightUrgent={highlightUrgent} highlightUrgent={highlightUrgent}
dropdownArrow={dropdownArrow && !disabled} dropdownArrow={dropdownArrow && !disabled}
dropdownArrowClassName={dropdownArrowClassName} dropdownArrowClassName={dropdownArrowClassName}

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

@ -108,7 +108,7 @@ const IntegrationGuide = observer(() => {
onClick={() => exporterServices?.prev_page_results && setCursor(exporterServices?.prev_cursor)} onClick={() => exporterServices?.prev_page_results && setCursor(exporterServices?.prev_cursor)}
className={`flex items-center rounded border border-custom-primary-100 px-1 text-primary-text-subtle ${ className={`flex items-center rounded border border-custom-primary-100 px-1 text-primary-text-subtle ${
exporterServices?.prev_page_results exporterServices?.prev_page_results
? "cursor-pointer hover:bg-custom-primary-100 hover:text-white" ? "cursor-pointer hover:bg-primary-solid hover:text-white"
: "cursor-not-allowed opacity-75" : "cursor-not-allowed opacity-75"
}`} }`}
> >
@ -120,7 +120,7 @@ const IntegrationGuide = observer(() => {
onClick={() => exporterServices?.next_page_results && setCursor(exporterServices?.next_cursor)} onClick={() => exporterServices?.next_page_results && setCursor(exporterServices?.next_cursor)}
className={`flex items-center rounded border border-custom-primary-100 px-1 text-primary-text-subtle ${ className={`flex items-center rounded border border-custom-primary-100 px-1 text-primary-text-subtle ${
exporterServices?.next_page_results exporterServices?.next_page_results
? "cursor-pointer hover:bg-custom-primary-100 hover:text-white" ? "cursor-pointer hover:bg-primary-solid hover:text-white"
: "cursor-not-allowed opacity-75" : "cursor-not-allowed opacity-75"
}`} }`}
> >

2
web/components/gantt-chart/chart/month.tsx
View File

@ -34,7 +34,7 @@ export const MonthChartView: FC<any> = () => {
> >
<div className="space-x-1 text-xs"> <div className="space-x-1 text-xs">
<span className="text-neutral-text-medium">{monthDay.dayData.shortTitle[0]}</span>{" "} <span className="text-neutral-text-medium">{monthDay.dayData.shortTitle[0]}</span>{" "}
<span className={monthDay.today ? "rounded-full bg-custom-primary-100 px-1 text-white" : ""}> <span className={monthDay.today ? "rounded-full bg-primary-solid px-1 text-white" : ""}>
{monthDay.day} {monthDay.day}
</span> </span>
</div> </div>

2
web/components/headers/project-issues.tsx
View File

@ -163,7 +163,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
{currentProjectDetails?.is_deployed && deployUrl && ( {currentProjectDetails?.is_deployed && deployUrl && (
<a <a
href={`${deployUrl}/${workspaceSlug}/${currentProjectDetails?.id}`} href={`${deployUrl}/${workspaceSlug}/${currentProjectDetails?.id}`}
className="group flex items-center gap-1.5 rounded bg-custom-primary-100/10 px-2.5 py-1 text-xs font-medium text-primary-text-subtle" className="group flex items-center gap-1.5 rounded bg-primary-solid/10 px-2.5 py-1 text-xs font-medium text-primary-text-subtle"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >

2
web/components/issues/issue-detail/reactions/issue-comment.tsx
View File

@ -102,7 +102,7 @@ export const IssueCommentReaction: FC<TIssueCommentReaction> = observer((props)
onClick={() => issueCommentReactionOperations.react(reaction)} onClick={() => issueCommentReactionOperations.react(reaction)}
key={reaction} key={reaction}
className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-neutral-text-strong ${ className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-neutral-text-strong ${
userReactions.includes(reaction) ? "bg-custom-primary-100/10" : "bg-neutral-component-surface-dark" userReactions.includes(reaction) ? "bg-primary-solid/10" : "bg-neutral-component-surface-dark"
}`} }`}
> >
<span>{renderEmoji(reaction)}</span> <span>{renderEmoji(reaction)}</span>

2
web/components/issues/issue-detail/reactions/issue.tsx
View File

@ -87,7 +87,7 @@ export const IssueReaction: FC<TIssueReaction> = observer((props) => {
onClick={() => issueReactionOperations.react(reaction)} onClick={() => issueReactionOperations.react(reaction)}
key={reaction} key={reaction}
className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-neutral-text-strong ${ className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-neutral-text-strong ${
userReactions.includes(reaction) ? "bg-custom-primary-100/10" : "bg-neutral-component-surface-dark" userReactions.includes(reaction) ? "bg-primary-solid/10" : "bg-neutral-component-surface-dark"
}`} }`}
> >
<span>{renderEmoji(reaction)}</span> <span>{renderEmoji(reaction)}</span>

2
web/components/issues/issue-detail/subscription.tsx
View File

@ -54,7 +54,7 @@ export const IssueSubscription: FC<TIssueSubscription> = observer((props) => {
size="sm" size="sm"
prependIcon={<Bell className="h-3 w-3" />} prependIcon={<Bell className="h-3 w-3" />}
variant="outline-primary" variant="outline-primary"
className="hover:!bg-custom-primary-100/20" className="hover:!bg-primary-solid/20"
onClick={handleSubscription} onClick={handleSubscription}
> >
{loading ? "Loading..." : subscription?.subscribed ? "Unsubscribe" : "Subscribe"} {loading ? "Loading..." : subscription?.subscribed ? "Unsubscribe" : "Subscribe"}

2
web/components/issues/issue-layouts/calendar/week-header.tsx
View File

@ -18,7 +18,7 @@ export const CalendarWeekHeader: React.FC<Props> = observer((props) => {
}`} }`}
> >
{isLoading && ( {isLoading && (
<div className="absolute h-[1.5px] w-3/4 animate-[bar-loader_2s_linear_infinite] bg-custom-primary-100" /> <div className="absolute h-[1.5px] w-3/4 animate-[bar-loader_2s_linear_infinite] bg-primary-solid" />
)} )}
{Object.values(DAYS_LIST).map((day) => { {Object.values(DAYS_LIST).map((day) => {
if (!showWeekends && ["Sat", "Sun"].includes(day.shortTitle)) return null; if (!showWeekends && ["Sat", "Sun"].includes(day.shortTitle)) return null;

2
web/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx
View File

@ -33,7 +33,7 @@ export const FilterDisplayProperties: React.FC<Props> = observer((props) => {
type="button" type="button"
className={`rounded border px-2 py-0.5 text-xs transition-all ${ className={`rounded border px-2 py-0.5 text-xs transition-all ${
displayProperties?.[displayProperty.key] displayProperties?.[displayProperty.key]
? "border-custom-primary-100 bg-custom-primary-100 text-white" ? "border-primary-solid bg-primary-solid text-white"
: "border-neutral-border-medium hover:bg-neutral-component-surface-dark" : "border-neutral-border-medium hover:bg-neutral-component-surface-dark"
}`} }`}
onClick={() => onClick={() =>

2
web/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
View File

@ -21,7 +21,7 @@ export const FilterOption: React.FC<Props> = (props) => {
> >
<div <div
className={`grid h-3 w-3 flex-shrink-0 place-items-center border bg-neutral-component-surface-medium ${ className={`grid h-3 w-3 flex-shrink-0 place-items-center border bg-neutral-component-surface-medium ${
isChecked ? "border-custom-primary-100 bg-custom-primary-100 text-white" : "border-neutral-border-medium" isChecked ? "border-primary-solid bg-primary-solid text-white" : "border-neutral-border-medium"
} ${multiple ? "rounded-sm" : "rounded-full"}`} } ${multiple ? "rounded-sm" : "rounded-full"}`}
> >
{isChecked && <Check size={10} strokeWidth={3} />} {isChecked && <Check size={10} strokeWidth={3} />}

7
web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
View File

@ -248,11 +248,8 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
</div> </div>
)} )}
<div <div className="flex horizontal-scroll-enable relative h-full w-full overflow-auto" ref={scrollableContainerRef}>
className="flex horizontal-scroll-enable relative h-full w-full overflow-auto bg-neutral-component-surface-medium" <div className="relative h-max w-max min-w-full px-2">
ref={scrollableContainerRef}
>
<div className="relative h-max w-max min-w-full bg-neutral-component-surface-medium px-2">
<DragDropContext onDragStart={onDragStart} onDragEnd={onDragEnd}> <DragDropContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
{/* drag and delete component */} {/* drag and delete component */}
<div <div

2
web/components/issues/issue-layouts/list/blocks-list.tsx
View File

@ -29,7 +29,7 @@ export const IssueBlocksList: FC<Props> = (props) => {
key={`${issueId}`} key={`${issueId}`}
defaultHeight="3rem" defaultHeight="3rem"
root={containerRef} root={containerRef}
classNames={"relative border border-transparent border-b-custom-border-200 last:border-b-transparent"} classNames={"relative border border-transparent border-b-neutral-border-subtle last:border-b-transparent"}
changingReference={issueIds} changingReference={issueIds}
> >
<IssueBlock <IssueBlock

2
web/components/modules/module-list-item.tsx
View File

@ -221,7 +221,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
{isEditingAllowed && {isEditingAllowed &&
(moduleDetails.is_favorite ? ( (moduleDetails.is_favorite ? (
<button type="button" onClick={handleRemoveFromFavorites} className="z-[1]"> <button type="button" onClick={handleRemoveFromFavorites} className="z-[1]">
<Star className="h-3.5 w-3.5 fill-current text-amber-500" /> <Star className="h-3.5 w-3.5 fill-current text-warning-solid" />
</button> </button>
) : ( ) : (
<button type="button" onClick={handleAddToFavorites} className="z-[1]"> <button type="button" onClick={handleAddToFavorites} className="z-[1]">

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

@ -136,7 +136,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
}`} }`}
> >
{notification.read_at === null && ( {notification.read_at === null && (
<span className="absolute left-2 top-1/2 h-1.5 w-1.5 -translate-y-1/2 rounded-full bg-custom-primary-100" /> <span className="absolute left-2 top-1/2 h-1.5 w-1.5 -translate-y-1/2 rounded-full bg-primary-solid" />
)} )}
<div className="relative h-12 w-12 rounded-full"> <div className="relative h-12 w-12 rounded-full">
{notification.triggered_by_details.avatar && notification.triggered_by_details.avatar !== "" ? ( {notification.triggered_by_details.avatar && notification.triggered_by_details.avatar !== "" ? (

4
web/components/notifications/select-snooze-till-modal.tsx
View File

@ -215,7 +215,7 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
}} }}
className={`flex h-full w-1/2 cursor-pointer items-center justify-center text-center ${ className={`flex h-full w-1/2 cursor-pointer items-center justify-center text-center ${
watch("period") === "AM" watch("period") === "AM"
? "bg-custom-primary-100/90 text-custom-primary-0" ? "bg-primary-solid/90 text-custom-primary-0"
: "bg-neutral-component-surface-dark" : "bg-neutral-component-surface-dark"
}`} }`}
> >
@ -227,7 +227,7 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
}} }}
className={`flex h-full w-1/2 cursor-pointer items-center justify-center text-center ${ className={`flex h-full w-1/2 cursor-pointer items-center justify-center text-center ${
watch("period") === "PM" watch("period") === "PM"
? "bg-custom-primary-100/90 text-custom-primary-0" ? "bg-primary-solid/90 text-custom-primary-0"
: "bg-neutral-component-surface-dark" : "bg-neutral-component-surface-dark"
}`} }`}
> >

10
web/components/onboarding/step-indicator.tsx
View File

@ -2,17 +2,17 @@ import React from "react";
export const OnboardingStepIndicator = ({ step }: { step: number }) => ( export const OnboardingStepIndicator = ({ step }: { step: number }) => (
<div className="flex items-center justify-center"> <div className="flex items-center justify-center">
<div className="z-10 h-3 w-3 rounded-full bg-custom-primary-100" /> <div className="z-10 h-3 w-3 rounded-full bg-primary-solid" />
<div className={`-ml-1 h-1 w-14 ${step >= 2 ? "bg-custom-primary-100" : "bg-onboarding-background-100"}`} /> <div className={`-ml-1 h-1 w-14 ${step >= 2 ? "bg-primary-solid" : "bg-onboarding-background-100"}`} />
<div <div
className={` z-10 -ml-1 rounded-full ${ className={` z-10 -ml-1 rounded-full ${
step >= 2 ? "h-3 w-3 bg-custom-primary-100" : " h-2 w-2 bg-onboarding-background-100" step >= 2 ? "h-3 w-3 bg-primary-solid" : " h-2 w-2 bg-onboarding-background-100"
}`} }`}
/> />
<div className={`-ml-1 h-1 w-14 ${step >= 3 ? "bg-custom-primary-100" : "bg-onboarding-background-100"}`} /> <div className={`-ml-1 h-1 w-14 ${step >= 3 ? "bg-primary-solid" : "bg-onboarding-background-100"}`} />
<div <div
className={`z-10 -ml-1 rounded-full ${ className={`z-10 -ml-1 rounded-full ${
step >= 3 ? "h-3 w-3 bg-custom-primary-100" : "h-2 w-2 bg-onboarding-background-100" step >= 3 ? "h-3 w-3 bg-primary-solid" : "h-2 w-2 bg-onboarding-background-100"
}`} }`}
/> />
</div> </div>

4
web/components/onboarding/tour/root.tsx
View File

@ -92,7 +92,7 @@ export const TourRoot: React.FC<Props> = observer((props) => {
{step === "welcome" ? ( {step === "welcome" ? (
<div className="h-3/4 w-4/5 overflow-hidden rounded-[10px] bg-neutral-component-surface-light md:w-1/2 lg:w-2/5"> <div className="h-3/4 w-4/5 overflow-hidden rounded-[10px] bg-neutral-component-surface-light md:w-1/2 lg:w-2/5">
<div className="h-full overflow-hidden"> <div className="h-full overflow-hidden">
<div className="grid h-3/5 place-items-center bg-custom-primary-100"> <div className="grid h-3/5 place-items-center bg-primary-solid">
<Image src={PlaneWhiteLogo} alt="Plane White Logo" /> <Image src={PlaneWhiteLogo} alt="Plane White Logo" />
</div> </div>
<div className="flex h-2/5 flex-col overflow-y-auto p-6"> <div className="flex h-2/5 flex-col overflow-y-auto p-6">
@ -141,7 +141,7 @@ export const TourRoot: React.FC<Props> = observer((props) => {
<TourSidebar step={step} setStep={setStep} /> <TourSidebar step={step} setStep={setStep} />
<div className="col-span-10 h-full overflow-hidden lg:col-span-7"> <div className="col-span-10 h-full overflow-hidden lg:col-span-7">
<div <div
className={`flex h-1/2 items-end overflow-hidden bg-custom-primary-100 sm:h-3/5 ${ className={`flex h-1/2 items-end overflow-hidden bg-primary-solid sm:h-3/5 ${
currentStepIndex % 2 === 0 ? "justify-end" : "justify-start" currentStepIndex % 2 === 0 ? "justify-end" : "justify-start"
}`} }`}
> >

2
web/components/page-views/workspace-dashboard.tsx
View File

@ -64,7 +64,7 @@ export const WorkspaceDashboardView = observer(() => {
{joinedProjectIds.length > 0 ? ( {joinedProjectIds.length > 0 ? (
<> <>
<IssuePeekOverview /> <IssuePeekOverview />
<div className="space-y-7 p-7 bg-neutral-page-surface-default h-full w-full flex flex-col overflow-y-auto"> <div className="space-y-7 p-7 bg-neutral-page-surface-medium h-full w-full flex flex-col overflow-y-auto">
{currentUser && <UserGreetingsView user={currentUser} />} {currentUser && <UserGreetingsView user={currentUser} />}
{currentUser && !currentUser.is_tour_completed && ( {currentUser && !currentUser.is_tour_completed && (
<div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity"> <div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity">

39
web/components/profile/preferences/email-notification-form.tsx
View File

@ -1,7 +1,7 @@
import { FC } from "react"; import React, { FC } from "react";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
// ui // ui
import { Button } from "@plane/ui"; import { Button, Checkbox } from "@plane/ui";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// services // services
@ -23,6 +23,7 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
// form data // form data
const { const {
handleSubmit, handleSubmit,
watch,
control, control,
setValue, setValue,
formState: { isSubmitting, isDirty, dirtyFields }, formState: { isSubmitting, isDirty, dirtyFields },
@ -78,12 +79,7 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
control={control} control={control}
name="property_change" name="property_change"
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<input <Checkbox checked={value} onChange={() => onChange(!value)} className="mx-2" />
type="checkbox"
checked={value}
onChange={() => onChange(!value)}
className="w-3.5 h-3.5 mx-2 cursor-pointer !border-neutral-border-subtle"
/>
)} )}
/> />
</div> </div>
@ -100,14 +96,14 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
control={control} control={control}
name="state_change" name="state_change"
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<input <Checkbox
type="checkbox"
checked={value} checked={value}
intermediate={!value && watch("issue_completed")}
onChange={() => { onChange={() => {
setValue("issue_completed", !value); setValue("issue_completed", !value);
onChange(!value); onChange(!value);
}} }}
className="w-3.5 h-3.5 mx-2 cursor-pointer" className="mx-2"
/> />
)} )}
/> />
@ -125,12 +121,7 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
control={control} control={control}
name="issue_completed" name="issue_completed"
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<input <Checkbox checked={value} onChange={() => onChange(!value)} className="mx-2" />
type="checkbox"
checked={value}
onChange={() => onChange(!value)}
className="w-3.5 h-3.5 mx-2 cursor-pointer"
/>
)} )}
/> />
</div> </div>
@ -147,12 +138,7 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
control={control} control={control}
name="comment" name="comment"
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<input <Checkbox checked={value} onChange={() => onChange(!value)} className="mx-2" />
type="checkbox"
checked={value}
onChange={() => onChange(!value)}
className="w-3.5 h-3.5 mx-2 cursor-pointer"
/>
)} )}
/> />
</div> </div>
@ -169,12 +155,7 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
control={control} control={control}
name="mention" name="mention"
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<input <Checkbox checked={value} onChange={() => onChange(!value)} className="mx-2" />
type="checkbox"
checked={value}
onChange={() => onChange(!value)}
className="w-3.5 h-3.5 mx-2 cursor-pointer"
/>
)} )}
/> />
</div> </div>

14
web/constants/dashboard.ts
View File

@ -145,14 +145,12 @@ export const DURATION_FILTER_OPTIONS: {
// random background colors for project cards // random background colors for project cards
export const PROJECT_BACKGROUND_COLORS = [ export const PROJECT_BACKGROUND_COLORS = [
"bg-primary-solid/20", "bg-primary-30",
"bg-success-component-surface-dark", "bg-success-30",
"bg-danger-component-surface-dark", "bg-warning-30",
"bg-orange-500/20", "bg-danger-30",
"bg-blue-500/20", "bg-info-30",
"bg-warning-component-surface-light", "bg-orange-30",
"bg-pink-500/20",
"bg-purple-500/20",
]; ];
// assigned and created issues widgets tabs list // assigned and created issues widgets tabs list

2
web/layouts/app-layout/sidebar.tsx
View File

@ -42,7 +42,7 @@ export const AppSidebar: FC<IAppSidebar> = observer(() => {
return ( return (
<div <div
className={`inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-sidebar-neutral-border-medium bg-sidebar-neutral-page-surface-default duration-300 className={`inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r-[0.5px] border-sidebar-neutral-border-medium bg-sidebar-neutral-page-surface-default duration-300
fixed md:relative fixed md:relative
${themStore.sidebarCollapsed ? "-ml-[280px]" : ""} ${themStore.sidebarCollapsed ? "-ml-[280px]" : ""}
sm:${themStore.sidebarCollapsed ? "-ml-[280px]" : ""} sm:${themStore.sidebarCollapsed ? "-ml-[280px]" : ""}

2
web/layouts/settings-layout/workspace/sidebar.tsx
View File

@ -30,7 +30,7 @@ export const WorkspaceSettingsSidebar = () => {
<div <div
className={`rounded-md px-4 py-2 text-sm font-medium ${ className={`rounded-md px-4 py-2 text-sm font-medium ${
link.highlight(router.asPath, `/${workspaceSlug}`) link.highlight(router.asPath, `/${workspaceSlug}`)
? "bg-custom-primary-100/10 text-primary-text-subtle" ? "bg-primary-solid/10 text-primary-text-subtle"
: "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark" : "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark"
}`} }`}
> >

16
web/pages/buttons.tsx
View File

@ -1,16 +0,0 @@
import { Button } from "@plane/ui";
const ButtonsPage = () => (
<div className="m-72 space-y-4">
<Button variant="primary">Primary</Button>
<Button variant="surface-primary">Surface Primary</Button>
<Button variant="outline-primary">Outline Primary</Button>
<Button variant="surface-neutral">Surface Neutral</Button>
<Button variant="outline-neutral">Outline Neutral</Button>
<Button variant="text-neutral">Text Neutral</Button>
<Button variant="warning">Danger</Button>
<Button variant="danger">Danger</Button>
</div>
);
export default ButtonsPage;

2
web/pages/god-mode/ai.tsx
View File

@ -38,7 +38,7 @@ const InstanceAdminAIPage: NextPageWithLayout = observer(() => {
</div> </div>
<InstanceAIForm config={formattedConfig} /> <InstanceAIForm config={formattedConfig} />
<div className="my-2 flex"> <div className="my-2 flex">
<div className="flex items-center gap-2 rounded border border-custom-primary-100/20 bg-custom-primary-100/10 px-4 py-2 text-xs text-custom-primary-200"> <div className="flex items-center gap-2 rounded border border-custom-primary-100/20 bg-primary-solid/10 px-4 py-2 text-xs text-custom-primary-200">
<Lightbulb height="14" width="14" /> <Lightbulb height="14" width="14" />
<div>If you have a preferred AI models vendor, please get in touch with us.</div> <div>If you have a preferred AI models vendor, please get in touch with us.</div>
</div> </div>

14
web/pages/profile/preferences/email.tsx
View File

@ -2,6 +2,8 @@ import { ReactElement } from "react";
import useSWR from "swr"; import useSWR from "swr";
// layouts // layouts
import { ProfilePreferenceSettingsLayout } from "layouts/settings-layout/profile/preferences"; import { ProfilePreferenceSettingsLayout } from "layouts/settings-layout/profile/preferences";
// ui
import { Loader } from "@plane/ui";
// components // components
import { EmailNotificationForm } from "components/profile/preferences"; import { EmailNotificationForm } from "components/profile/preferences";
// services // services
@ -14,10 +16,20 @@ const userService = new UserService();
const ProfilePreferencesThemePage: NextPageWithLayout = () => { const ProfilePreferencesThemePage: NextPageWithLayout = () => {
// fetching user email notification settings // fetching user email notification settings
const { data } = useSWR("CURRENT_USER_EMAIL_NOTIFICATION_SETTINGS", () => const { data, isLoading } = useSWR("CURRENT_USER_EMAIL_NOTIFICATION_SETTINGS", () =>
userService.currentUserEmailNotificationSettings() userService.currentUserEmailNotificationSettings()
); );
if (isLoading) {
return (
<Loader className="space-y-4 mt-8 px-6 lg:px-20">
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
</Loader>
);
}
if (!data) { if (!data) {
return null; return null;
} }