From 31128119ac1e8657a9899273e11ea018c56238e2 Mon Sep 17 00:00:00 2001
From: Henry <henry_ball@hotmail.co.uk>
Date: Thu, 15 Aug 2024 21:38:10 +0100
Subject: [PATCH] chore: update modal design

---
 src/components/Button.tsx                     |  43 +++
 src/components/Input.tsx                      |  18 ++
 src/components/NewWorkspaceForm.tsx           |   6 +-
 src/components/modal.tsx                      |   2 +-
 src/views/board/components/NewCardForm.tsx    |   8 +-
 src/views/board/components/NewListForm.tsx    |  59 ++--
 src/views/boards/components/BoardsList.tsx    |   2 +-
 .../boards/components/ImportBoardsForm.tsx    | 271 ++++++++----------
 src/views/boards/components/NewBoardForm.tsx  |  90 +++---
 9 files changed, 260 insertions(+), 239 deletions(-)
 create mode 100644 src/components/Button.tsx
 create mode 100644 src/components/Input.tsx

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 00000000..280816ae
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,43 @@
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  isLoading?: boolean;
+}
+
+const Button = ({ children, isLoading, ...props }: ButtonProps) => {
+  return (
+    <button
+      className="inline-flex items-center 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"
+      disabled={isLoading}
+      {...props}
+    >
+      <span className="relative flex items-center justify-center">
+        {isLoading && (
+          <span className="absolute inset-0 flex items-center justify-center">
+            <svg
+              className="h-5 w-5 animate-spin text-white dark:text-dark-800"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle
+                className="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="4"
+              ></circle>
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
+            </svg>
+          </span>
+        )}
+        <span className={isLoading ? "invisible" : "visible"}>{children}</span>
+      </span>
+    </button>
+  );
+};
+
+export default Button;
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
new file mode 100644
index 00000000..38c03ca6
--- /dev/null
+++ b/src/components/Input.tsx
@@ -0,0 +1,18 @@
+import React, { forwardRef } from "react";
+
+const Input = forwardRef<
+  HTMLInputElement,
+  React.InputHTMLAttributes<HTMLInputElement>
+>(({ ...props }, ref) => {
+  return (
+    <input
+      ref={ref}
+      className="block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 shadow-sm ring-1 ring-inset ring-light-600 placeholder:text-dark-800 focus:ring-2 focus:ring-inset focus:ring-light-700 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
+      {...props}
+    />
+  );
+});
+
+Input.displayName = "Input";
+
+export default Input;
diff --git a/src/components/NewWorkspaceForm.tsx b/src/components/NewWorkspaceForm.tsx
index 9b0ff2c7..ef3d9d99 100644
--- a/src/components/NewWorkspaceForm.tsx
+++ b/src/components/NewWorkspaceForm.tsx
@@ -12,11 +12,7 @@ interface FormValues {
 export function NewWorkspaceForm() {
   const { closeModal } = useModal();
   const { switchWorkspace } = useWorkspace();
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<FormValues>();
+  const { register, handleSubmit } = useForm<FormValues>();
 
   const createWorkspace = api.workspace.create.useMutation({
     onSuccess: (values) => {
diff --git a/src/components/modal.tsx b/src/components/modal.tsx
index 81ef9065..1f1f70fc 100644
--- a/src/components/modal.tsx
+++ b/src/components/modal.tsx
@@ -46,7 +46,7 @@ const Modal: React.FC<Props> = ({ children, modalSize = "sm" }) => {
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
               <Dialog.Panel
-                className={`relative mt-[25vh] w-full transform rounded-lg border border-light-600 bg-dark-1000 bg-light-50 text-left shadow-3xl-light transition-all dark:border-dark-600 dark:bg-dark-100/20 dark:shadow-3xl-dark dark:backdrop-blur-lg ${modalSizeMap[modalSize]}`}
+                className={`bg-white/1 relative mt-[25vh] w-full transform rounded-lg border border-light-600 text-left shadow-3xl-light backdrop-blur-[10px] transition-all dark:border-dark-600 dark:bg-dark-100/20 dark:shadow-3xl-dark ${modalSizeMap[modalSize]}`}
               >
                 {children}
               </Dialog.Panel>
diff --git a/src/views/board/components/NewCardForm.tsx b/src/views/board/components/NewCardForm.tsx
index 0ff9deea..cae4dc25 100644
--- a/src/views/board/components/NewCardForm.tsx
+++ b/src/views/board/components/NewCardForm.tsx
@@ -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.",
diff --git a/src/views/board/components/NewListForm.tsx b/src/views/board/components/NewListForm.tsx
index a5b02613..9792a2e9 100644
--- a/src/views/board/components/NewListForm.tsx
+++ b/src/views/board/components/NewListForm.tsx
@@ -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>
   );
 }
diff --git a/src/views/boards/components/BoardsList.tsx b/src/views/boards/components/BoardsList.tsx
index 10d43ede..a914f997 100644
--- a/src/views/boards/components/BoardsList.tsx
+++ b/src/views/boards/components/BoardsList.tsx
@@ -27,7 +27,7 @@ export function BoardsList() {
     <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xxl:grid-cols-5">
       {data?.map((board) => (
         <Link key={board.publicId} href={`boards/${board.publicId}`}>
-          <div className="align-center relative mr-5 flex h-[150px] w-full items-center justify-center rounded-md border border-dashed border-light-600 bg-light-50 shadow-sm hover:bg-light-200 dark:border-dark-600 dark:bg-dark-100 dark:hover:bg-dark-200">
+          <div className="align-center relative mr-5 flex h-[150px] w-full items-center justify-center rounded-md border border-dashed border-light-600 bg-light-50 shadow-sm hover:bg-light-200 dark:border-dark-600 dark:bg-dark-50 dark:hover:bg-dark-100">
             <PatternedBackground />
             <p className="text-md px-4 font-medium text-neutral-900 dark:text-dark-1000">
               {board.name}
diff --git a/src/views/boards/components/ImportBoardsForm.tsx b/src/views/boards/components/ImportBoardsForm.tsx
index 7c2acfdb..35427f1d 100644
--- a/src/views/boards/components/ImportBoardsForm.tsx
+++ b/src/views/boards/components/ImportBoardsForm.tsx
@@ -1,6 +1,7 @@
 import { Fragment, useState } from "react";
 import { api } from "~/utils/api";
 import { Listbox, Transition } from "@headlessui/react";
+import { useForm, Controller } from "react-hook-form";
 
 import { FaTrello } from "react-icons/fa";
 import { HiChevronUpDown, HiXMark } from "react-icons/hi2";
@@ -8,7 +9,8 @@ import { HiChevronUpDown, HiXMark } from "react-icons/hi2";
 import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
 
-import { useFormik } from "formik";
+import Button from "~/components/Button";
+import Input from "~/components/Input";
 
 interface TrelloFormValues {
   apiKey: string;
@@ -18,77 +20,78 @@ interface TrelloFormValues {
 const sources = [{ source: "Trello" }];
 
 const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {
-  const formik = useFormik({
-    initialValues: {
+  const { control, handleSubmit } = useForm({
+    defaultValues: {
       source: "Trello",
     },
-    onSubmit: () => {
-      handleNextStep();
-    },
   });
 
-  return (
-    <form onSubmit={formik.handleSubmit}>
-      <label
-        htmlFor="name"
-        className="block pb-2 text-sm font-normal leading-6 text-neutral-900 dark:text-dark-1000"
-      >
-        Source
-      </label>
-      <Listbox value={formik.values.source} onChange={formik.handleChange}>
-        {({ open }) => (
-          <>
-            <div className="relative">
-              <Listbox.Button className="focus-ring-light-700 block w-full rounded-md border-0 bg-dark-300 bg-white/5 px-4 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6">
-                <span className="flex items-center">
-                  <FaTrello />
-                  <span className="ml-2 block truncate">
-                    {formik.values.source}
-                  </span>
-                </span>
-                <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                  <HiChevronUpDown
-                    className="h-5 w-5 text-gray-400"
-                    aria-hidden="true"
-                  />
-                </span>
-              </Listbox.Button>
+  const onSubmit = () => {
+    handleNextStep();
+  };
 
-              <Transition
-                show={open}
-                as={Fragment}
-                leave="transition ease-in duration-100"
-                leaveFrom="opacity-100"
-                leaveTo="opacity-0"
-              >
-                <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-light-50 py-1 text-base text-neutral-900 shadow-lg ring-1 ring-light-600 ring-opacity-5 focus:outline-none dark:bg-dark-300 dark:text-dark-1000 sm:text-sm">
-                  {sources.map(({ source }, index) => (
-                    <Listbox.Option
-                      key={`source_${index}`}
-                      className="relative cursor-default select-none px-1"
-                      value={source}
-                    >
-                      <div className="flex items-center rounded-[5px] p-1 hover:bg-light-200 dark:hover:bg-dark-400">
-                        <FaTrello className="ml-1" />
-                        <span className="ml-2 block truncate font-normal">
-                          {source}
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="px-5">
+        <Controller
+          name="source"
+          control={control}
+          render={({ field }) => (
+            <Listbox {...field}>
+              {({ open }) => (
+                <>
+                  <div className="relative">
+                    <Listbox.Button className="focus-ring-light-700 block w-full rounded-md border-0 bg-dark-300 bg-white/5 px-4 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6">
+                      <span className="flex items-center">
+                        <FaTrello />
+                        <span className="ml-2 block truncate">
+                          {field.value}
                         </span>
-                      </div>
-                    </Listbox.Option>
-                  ))}
-                </Listbox.Options>
-              </Transition>
-            </div>
-          </>
-        )}
-      </Listbox>
-      <div className="mt-5 sm:mt-6">
-        <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"
-        >
-          Select source
-        </button>
+                      </span>
+                      <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                        <HiChevronUpDown
+                          className="h-5 w-5 text-gray-400"
+                          aria-hidden="true"
+                        />
+                      </span>
+                    </Listbox.Button>
+
+                    <Transition
+                      show={open}
+                      as={Fragment}
+                      leave="transition ease-in duration-100"
+                      leaveFrom="opacity-100"
+                      leaveTo="opacity-0"
+                    >
+                      <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-light-50 py-1 text-base text-neutral-900 shadow-lg ring-1 ring-light-600 ring-opacity-5 focus:outline-none dark:bg-dark-300 dark:text-dark-1000 sm:text-sm">
+                        {sources.map(({ source }, index) => (
+                          <Listbox.Option
+                            key={`source_${index}`}
+                            className="relative cursor-default select-none px-1"
+                            value={source}
+                          >
+                            <div className="flex items-center rounded-[5px] p-1 hover:bg-light-200 dark:hover:bg-dark-400">
+                              <FaTrello className="ml-1" />
+                              <span className="ml-2 block truncate font-normal">
+                                {source}
+                              </span>
+                            </div>
+                          </Listbox.Option>
+                        ))}
+                      </Listbox.Options>
+                    </Transition>
+                  </div>
+                </>
+              )}
+            </Listbox>
+          )}
+        />
+      </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>
+          <Button type="submit">Select source</Button>
+        </div>
       </div>
     </form>
   );
@@ -126,121 +129,85 @@ const ImportTrello: React.FC = () => {
     },
   });
 
-  const formik = useFormik({
-    initialValues: {
+  const { register, handleSubmit } = useForm<TrelloFormValues>({
+    defaultValues: {
       apiKey: "",
       token: "",
     },
-    onSubmit: (values: TrelloFormValues) => {
-      handleSetAuthDetails(values.apiKey, values.token);
-    },
   });
 
-  const boardsFormik = useFormik({
-    initialValues: {
-      ...Object.fromEntries(
+  const onSubmit = (values: TrelloFormValues) => {
+    handleSetAuthDetails(values.apiKey, values.token);
+  };
+
+  const { register: registerBoards, handleSubmit: handleSubmitBoards } =
+    useForm({
+      defaultValues: Object.fromEntries(
         boards?.data?.map((board) => [board.id, true]) ?? [],
       ),
-    },
-    onSubmit: () => {
-      const boardIds = Object.keys(boardsFormik.values).filter(
-        (key) => boardsFormik.values[key] === true,
-      );
+    });
 
-      importBoards.mutate({
-        boardIds,
-        apiKey: formik.values.apiKey,
-        token: formik.values.token,
-        workspacePublicId: workspace?.publicId,
-      });
-    },
-    enableReinitialize: true,
-  });
+  const onSubmitBoards = (values: Record<string, boolean>) => {
+    const boardIds = Object.keys(values).filter((key) => values[key] === true);
+
+    importBoards.mutate({
+      boardIds,
+      apiKey,
+      token,
+      workspacePublicId: workspace?.publicId,
+    });
+  };
 
   if (boards?.data?.length)
     return (
-      <form onSubmit={boardsFormik.handleSubmit}>
-        <div className="h-[105px] overflow-scroll">
+      <form onSubmit={handleSubmitBoards(onSubmitBoards)}>
+        <div className="h-[105px] overflow-scroll px-5">
           {boards.data.map((board) => (
             <div key={board.id}>
-              <div
-                className="flex items-center rounded-[5px] p-2 hover:bg-dark-300"
-                onClick={async (e) => {
-                  e.preventDefault();
-                  await boardsFormik.setFieldValue(
-                    board.id,
-                    !boardsFormik.values[board.id],
-                  );
-                }}
+              <label
+                className="flex cursor-pointer items-center rounded-[5px] p-2 hover:bg-light-100 dark:hover:bg-dark-300"
+                htmlFor={board.id}
               >
                 <input
                   id={board.id}
-                  name={board.id}
                   type="checkbox"
-                  className="h-[14px] w-[14px] rounded bg-transparent"
-                  onClick={(event) => event.stopPropagation()}
-                  checked={boardsFormik.values[board.id]}
+                  className="h-[14px] w-[14px] rounded bg-transparent ring-0 focus:outline-none focus:ring-0 focus:ring-offset-0"
+                  {...registerBoards(board.id)}
                 />
-                <label
-                  htmlFor={board.id}
-                  className="ml-3 text-sm text-dark-1000"
-                >
+                <span className="ml-3 text-sm text-neutral-900 dark:text-dark-1000">
                   {board.name}
-                </label>
-              </div>
+                </span>
+              </label>
             </div>
           ))}
         </div>
 
-        <div className="mt-5 sm:mt-6">
-          <button
-            type="submit"
-            className="inline-flex w-full justify-center rounded-md bg-dark-1000 px-3 py-2 text-sm font-semibold text-dark-50 shadow-sm focus-visible:outline-none"
-          >
-            Import selected
-          </button>
+        <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>
+            <Button type="submit" isLoading={importBoards.isPending}>
+              Import boards
+            </Button>
+          </div>
         </div>
       </form>
     );
 
   return (
     <form
-      onSubmit={formik.handleSubmit}
+      onSubmit={handleSubmit(onSubmit)}
       className="text-neutral-900 dark:text-dark-1000"
     >
-      <label
-        htmlFor="apiKey"
-        className="block pb-2 text-sm font-normal leading-6"
-      >
-        API Key
-      </label>
-      <input
-        id="apiKey"
-        name="apiKey"
-        className="mb-2 block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-700 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
-        value={formik.values.apiKey}
-        onChange={formik.handleChange}
-      />
-      <label
-        htmlFor="token"
-        className="block pb-2 text-sm font-normal leading-6"
-      >
-        Token
-      </label>
-      <input
-        id="token"
-        name="token"
-        className="mb-2 block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-700 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
-        value={formik.values.token}
-        onChange={formik.handleChange}
-      />
-      <div className="mt-5 sm:mt-6">
-        <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"
-        >
-          Fetch boards
-        </button>
+      <div className="space-y-4 px-5">
+        <Input id="apiKey" placeholder="API key" {...register("apiKey")} />
+        <Input id="token" placeholder="Token" {...register("token")} />
+      </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>
+          <Button type="submit" isLoading={boards.isLoading}>
+            Fetch boards
+          </Button>
+        </div>
       </div>
     </form>
   );
@@ -251,8 +218,8 @@ export function ImportBoardsForm() {
   const [step, setStep] = useState(1);
 
   return (
-    <div className="p-5">
-      <div className="flex w-full justify-between pb-4">
+    <div>
+      <div className="flex w-full items-center justify-between px-5 pb-4 pt-5">
         <h2 className="text-sm font-medium text-neutral-900 dark:text-dark-1000">
           New import
         </h2>
diff --git a/src/views/boards/components/NewBoardForm.tsx b/src/views/boards/components/NewBoardForm.tsx
index 026fbc32..c24ec113 100644
--- a/src/views/boards/components/NewBoardForm.tsx
+++ b/src/views/boards/components/NewBoardForm.tsx
@@ -1,12 +1,8 @@
 import { api } from "~/utils/api";
-
 import { HiXMark } from "react-icons/hi2";
-
 import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
-
-import { Formik, Form, Field } from "formik";
-
+import { useForm } from "react-hook-form";
 import { type NewBoardInput } from "~/types/router.types";
 
 export function NewBoardForm() {
@@ -14,6 +10,13 @@ export function NewBoardForm() {
   const { closeModal } = useModal();
   const { workspace } = useWorkspace();
 
+  const { register, handleSubmit } = useForm<NewBoardInput>({
+    defaultValues: {
+      name: "",
+      workspacePublicId: workspace?.publicId || "",
+    },
+  });
+
   const refetchBoards = () => utils.board.all.refetch();
 
   const createBoard = api.board.create.useMutation({
@@ -23,52 +26,43 @@ export function NewBoardForm() {
     },
   });
 
+  const onSubmit = (data: NewBoardInput) => {
+    createBoard.mutate(data);
+  };
+
   return (
-    <>
-      <div className="flex w-full items-center justify-between pb-4 text-neutral-900 dark:text-dark-1000">
-        <h2 className="text-sm font-bold">New board</h2>
-        <button
-          className="rounded p-1 hover:bg-light-300 focus:outline-none dark:hover:bg-dark-300"
-          onClick={() => closeModal()}
-        >
-          <HiXMark size={18} className="text-light-900 dark:text-dark-900" />
-        </button>
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="px-5 pt-5">
+        <div className="text-neutral-9000 flex w-full items-center justify-between pb-4 dark:text-dark-1000">
+          <h2 className="text-sm font-bold">New board</h2>
+          <button
+            className="hover:bg-li ght-300 rounded  p-1 focus:outline-none dark:hover:bg-dark-300"
+            onClick={(e) => {
+              e.preventDefault();
+              closeModal();
+            }}
+          >
+            <HiXMark size={18} className="dark:text-dark-9000 text-light-900" />
+          </button>
+        </div>
+        <input
+          id="name"
+          placeholder="Name"
+          {...register("name", { required: true })}
+          className="block w-full rounded-md border-0 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:bg-dark-300 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
+        />
       </div>
 
-      <Formik
-        initialValues={{
-          name: "",
-          workspacePublicId: "",
-        }}
-        onSubmit={(values: NewBoardInput) => {
-          createBoard.mutate({
-            name: values.name,
-            workspacePublicId: workspace?.publicId,
-          });
-        }}
-      >
-        <Form>
-          <label
-            htmlFor="name"
-            className="block pb-2 text-sm font-normal leading-6 text-neutral-900 dark:text-dark-1000"
+      <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>
+          <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"
           >
-            Name
-          </label>
-          <Field
-            id="name"
-            name="name"
-            className="block w-full rounded-md border-0 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:bg-dark-300 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
-          />
-          <div className="mt-5 sm:mt-6">
-            <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"
-            >
-              Create board
-            </button>
-          </div>
-        </Form>
-      </Formik>
-    </>
+            Create board
+          </button>
+        </div>
+      </div>
+    </form>
   );
 }