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

chore: update modal design

Browse Source
This commit is contained in:
Henry
2024-08-15 21:38:10 +01:00
parent 918acf8b99
commit 31128119ac
9 changed files with 260 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/board/components/NewCardForm.tsx
View File

@@ -55,12 +55,12 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
const position = watch("position");
const createCard = api.card.create.useMutation({
onSuccess: () => {
refetchBoard();
onSuccess: async () => {
await refetchBoard();
},
onError: () => {
onError: async () => {
closeModal();
refetchBoard();
await refetchBoard();
showPopup({
header: "Unable to create card",
message: "Please try again later, or contact customer support.",

59
src/views/board/components/NewListForm.tsx
View File

@@ -36,10 +36,12 @@ export function NewListForm({ boardPublicId }: { boardPublicId: string }) {
const isCreateAnotherEnabled = watch("isCreateAnotherEnabled");
const createList = api.list.create.useMutation({
onSuccess: () => refetchBoard(),
onError: () => {
onSuccess: async () => {
await refetchBoard();
},
onError: async () => {
closeModal();
refetchBoard();
await refetchBoard();
showPopup({
header: "Unable to create list",
message: "Please try again later, or contact customer support.",
@@ -69,32 +71,32 @@ export function NewListForm({ boardPublicId }: { boardPublicId: string }) {
};
return (
<div className="p-5">
<div className="flex w-full items-center justify-between pb-4">
<h2 className="text-sm font-bold text-neutral-900 dark:text-dark-1000">
New list
</h2>
<button
className="rounded p-1 hover:bg-light-200 focus:outline-none dark:hover:bg-dark-300"
onClick={() => closeModal()}
>
<HiXMark size={18} className="text-light-900 dark:text-dark-900" />
</button>
</div>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="px-5 pt-5">
<div className="flex w-full items-center justify-between pb-4">
<h2 className="text-sm font-bold text-neutral-900 dark:text-dark-1000">
New list
</h2>
<button
className="rounded p-1 hover:bg-light-200 focus:outline-none dark:hover:bg-dark-300"
onClick={(e) => {
e.preventDefault();
closeModal();
}}
>
<HiXMark size={18} className="text-light-900 dark:text-dark-900" />
</button>
</div>
<form onSubmit={handleSubmit(onSubmit)}>
<label
htmlFor="list-name"
className="block pb-2 text-sm font-normal leading-6 text-neutral-900 dark:text-dark-1000"
>
Name
</label>
<input
id="list-name"
placeholder="List name"
{...register("name", { required: true })}
className="block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-600 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
className="block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-neutral-900 placeholder-dark-800 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-600 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
/>
<div className="mt-3 flex items-center justify-end">
</div>
<div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
<div className="mr-4 flex items-center justify-end">
<span className="mr-2 text-xs text-light-900 dark:text-dark-900">
Create more
</span>
@@ -110,7 +112,7 @@ export function NewListForm({ boardPublicId }: { boardPublicId: string }) {
"relative inline-flex h-4 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none",
)}
>
<span className="sr-only">Create more</span>
<span className="sr-only">Create another</span>
<span
aria-hidden="true"
className={classNames(
@@ -120,7 +122,8 @@ export function NewListForm({ boardPublicId }: { boardPublicId: string }) {
/>
</Switch>
</div>
<div className="mt-5 sm:mt-6">
<div>
<button
type="submit"
className="inline-flex w-full justify-center rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
@@ -128,7 +131,7 @@ export function NewListForm({ boardPublicId }: { boardPublicId: string }) {
Create list
</button>
</div>
</form>
</div>
</div>
</form>
);
}