fix: various UI tweaks

src/app/boards/components/ImportBoardsForm.tsx

@@ -259,7 +259,7 @@ export function ImportBoardsForm() {
           New import
         </h2>
         <button
-          className="rounded p-1 hover:bg-dark-300"
+          className="hover:bg-light-200 rounded p-1 dark:hover:bg-dark-300"
           onClick={() => closeModal()}
         >
           <HiXMark size={18} className="text-dark-900" />

src/app/cards/[cardId]/page.tsx

@@ -98,7 +98,7 @@ export default function CardPage() {
       <div className="w-full p-8">
         <div className="mb-8 flex w-full items-center justify-between">
           <Link
-            className="text-light-900 font-medium leading-[2.3rem] tracking-tight dark:text-dark-900 sm:text-[1.2rem]"
+            className="text-light-900 whitespace-nowrap font-medium leading-[2.3rem] tracking-tight dark:text-dark-900 sm:text-[1.2rem]"
             href={`/boards/${board?.publicId}`}
           >
             {board?.name}

src/app/settings/layout.tsx

@@ -0,0 +1,10 @@
+import { WorkspaceProvider } from "~/app/providers/workspace";
+import Dashboard from "~/app/components/dashboard";
+
+export default function Layout(props: { children: React.ReactNode }) {
+  return (
+    <WorkspaceProvider>
+      <Dashboard>{props.children}</Dashboard>;
+    </WorkspaceProvider>
+  );
+}

src/app/settings/page.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useModal } from "~/app/providers/modal";
+import Modal from "~/app/components/modal";
+
+import { NewWorkspaceForm } from "~/app/components/NewWorkspaceForm";
+
+export default function SettingsPage() {
+  const { openModal, modalContentType } = useModal();
+
+  return (
+    <div className="px-28 py-12">
+      <div className="mb-8 flex w-full justify-between">
+        <h1 className="font-medium tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
+          Settings
+        </h1>
+      </div>
+
+      <div className="mt-8 flow-root">
+        <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+          <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+            <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg"></div>
+          </div>
+        </div>
+      </div>
+
+      <Modal>
+        {modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />}
+      </Modal>
+    </div>
+  );
+}