mirror/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2025-12-20 12:50:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

[WEB-5652] fix: kanban quick add UI #8382

Browse Source
This commit is contained in:
Aaryan Khandelwal
2025-12-18 18:40:00 +05:30
committed by GitHub
parent b165e2a3fe
commit 9747bffbe2
4 changed files with 19 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/core/components/editor/sticky-editor/color-palette.tsx
View File

@@ -8,7 +8,7 @@ export const STICKY_COLORS_LIST: {
{
key: "gray",
label: "Gray",
backgroundColor: "var(--background-color-layer-2)",
backgroundColor: "var(--editor-colors-gray-background)",
},
{
key: "peach",

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

@@ -9,7 +9,7 @@ type Props = {
export function FilterHeader({ title, isPreviewEnabled, handleIsPreviewEnabled }: Props) {
return (
<div className="sticky top-0 flex items-center justify-between gap-2">
<div className="sticky top-0 flex items-center justify-between gap-2 bg-surface-1">
<div className="flex-grow truncate text-caption-sm-medium text-placeholder">{title}</div>
<button
type="button"

6
apps/web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx
View File

@@ -7,8 +7,8 @@ export const KanbanQuickAddIssueForm = observer(function KanbanQuickAddIssueForm
const { ref, projectDetail, register, onSubmit, isEpic } = props;
const { t } = useTranslation();
return (
<div className="m-1 overflow-hidden rounded-sm shadow-raised-200">
<form ref={ref} onSubmit={onSubmit} className="flex w-full items-center gap-x-3 bg-surface-1 p-3">
<div className="m-1 overflow-hidden rounded-sm shadow-raised-200 bg-layer-2">
<form ref={ref} onSubmit={onSubmit} className="flex w-full items-center gap-x-3 p-3">
<div className="w-full">
<h4 className="text-11 font-medium leading-5 text-tertiary">{projectDetail?.identifier ?? "..."}</h4>
<input
@@ -21,7 +21,7 @@ export const KanbanQuickAddIssueForm = observer(function KanbanQuickAddIssueForm
/>
</div>
</form>
<div className="px-3 py-2 text-11 italic text-secondary">
<div className="px-3 py-2 text-11 italic text-tertiary bg-layer-3">
{isEpic ? t("epic.add.press_enter") : t("issue.add.press_enter")}
</div>
</div>

29
packages/ui/src/button/helper.tsx
View File

@@ -41,7 +41,7 @@ export const buttonStyling: IButtonStyling = {
default: `text-on-color bg-accent-primary`,
hover: `hover:bg-accent-primary/80`,
pressed: `focus:text-custom-brand-40 focus:bg-accent-primary/80`,
disabled: `cursor-not-allowed !bg-custom-primary-60 hover:bg-custom-primary-60`,
disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
},
"accent-primary": {
default: `bg-accent-primary/20 text-accent-primary`,
@@ -59,7 +59,7 @@ export const buttonStyling: IButtonStyling = {
default: `text-secondary bg-surface-1 border border-subtle`,
hover: `hover:bg-surface-2`,
pressed: `focus:text-tertiary focus:bg-surface-2`,
disabled: `cursor-not-allowed !text-placeholder`,
disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
},
"link-primary": {
default: `text-accent-primary bg-surface-1`,
@@ -67,42 +67,41 @@ export const buttonStyling: IButtonStyling = {
pressed: `focus:text-accent-primary/80 `,
disabled: `cursor-not-allowed !text-accent-primary/60`,
},
danger: {
default: `text-on-color bg-red-500`,
hover: ` hover:bg-red-600`,
pressed: `focus:text-red-200 focus:bg-red-600`,
disabled: `cursor-not-allowed !bg-red-300`,
default: `bg-danger-primary text-on-color`,
hover: ` hover:bg-danger-primary-hover`,
pressed: `focus:bg-danger-primary-active`,
disabled: `cursor-not-allowed bg-layer-disabled! text-disabled!`,
},
"accent-danger": {
default: `text-red-500 bg-red-50`,
hover: `hover:text-red-600 hover:bg-red-100`,
pressed: `focus:text-red-500 focus:bg-red-100`,
disabled: `cursor-not-allowed !text-red-300`,
disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
},
"outline-danger": {
default: `text-red-500 bg-transparent border border-red-500`,
hover: `hover:text-red-400 hover:border-red-400`,
pressed: `focus:text-red-400 focus:border-red-400`,
disabled: `cursor-not-allowed !text-red-300 !border-red-300`,
default: `bg-layer-2 text-danger border border-danger-strong`,
hover: `hover:bg-danger-subtle`,
pressed: `focus:bg-danger-subtle-hover`,
disabled: `cursor-not-allowed text-disabled! border-subtle-1!`,
},
"link-danger": {
default: `text-red-500 bg-surface-1`,
hover: `hover:text-red-400`,
pressed: `focus:text-red-400`,
disabled: `cursor-not-allowed !text-red-300`,
disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
},
"tertiary-danger": {
default: `text-red-500 bg-surface-1 border border-red-200`,
hover: `hover:bg-red-50 hover:border-red-300`,
pressed: `focus:text-red-400`,
disabled: `cursor-not-allowed !text-red-300`,
disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
},
"link-neutral": {
default: `text-tertiary`,
hover: `hover:text-secondary`,
pressed: `focus:text-primary`,
disabled: `cursor-not-allowed !text-placeholder`,
disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
},
};