shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: tweak new checklist item form styling

Browse Source
This commit is contained in:
Henry
2025-08-13 12:59:58 +01:00
parent 85fea3a4d2
commit 4f278b0567
1 changed files with 3 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
apps/web/src/views/card/components/NewChecklistItemForm.tsx
View File

@@ -120,28 +120,14 @@ const NewChecklistItemForm = ({
}, []); }, []);
return ( return (
<form onSubmit={(e) => e.preventDefault()} className="mt-1"> <form onSubmit={(e) => e.preventDefault()}>
<div className="group relative flex h-9 items-center gap-3 rounded-md pl-4 hover:bg-light-100 dark:hover:bg-dark-100"> <div className="group relative flex h-9 items-center gap-3 rounded-md pl-4 hover:bg-light-100 dark:hover:bg-dark-100">
<label className="relative inline-flex h-[16px] w-[16px] flex-shrink-0 cursor-default items-center justify-center"> <label className="relative inline-flex h-[16px] w-[16px] flex-shrink-0 cursor-default items-center justify-center">
<input <input
type="checkbox" type="checkbox"
disabled disabled
className="peer h-[16px] w-[16px] appearance-none rounded-full border border-light-500 bg-transparent outline-none ring-0 hover:border-light-500 hover:bg-transparent focus:outline-none focus:ring-0 focus-visible:outline-none dark:border-dark-500 dark:hover:border-dark-500" className="peer h-[16px] w-[16px] appearance-none rounded-md border border-light-500 bg-transparent outline-none ring-0 hover:border-light-500 hover:bg-transparent focus:outline-none focus:ring-0 focus-visible:outline-none dark:border-dark-500 dark:hover:border-dark-500"
/> />
<svg
viewBox="0 0 20 20"
className="pointer-events-none absolute left-1/2 top-1/2 hidden h-[12px] w-[12px] -translate-x-1/2 -translate-y-1/2 text-white peer-checked:block"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 10.5l3 3 7-7"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</label> </label>
<div className="flex-1 pr-7"> <div className="flex-1 pr-7">
<ContentEditable <ContentEditable
@@ -151,7 +137,7 @@ const NewChecklistItemForm = ({
html={title} html={title}
disabled={false} disabled={false}
onChange={(e) => setValue("title", e.target.value)} onChange={(e) => setValue("title", e.target.value)}
className="m-0 min-h-[20px] w-full p-0 text-sm leading-5 text-light-900 outline-none focus-visible:outline-none dark:text-dark-1000" className="m-0 min-h-[20px] w-full p-0 text-sm leading-5 text-light-900 outline-none focus-visible:outline-none dark:text-dark-950"
onBlur={() => submitIfNotEmpty(false)} onBlur={() => submitIfNotEmpty(false)}
onKeyDown={async (e) => { onKeyDown={async (e) => {
if (e.key === "Enter") { if (e.key === "Enter") {