feat: glass modal

src/app/boards/[...boardId]/components/NewCardForm.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { api } from "~/trpc/react";
 
 import { HiXMark } from "react-icons/hi2";
@@ -43,12 +43,18 @@ export function NewCardForm({ listPublicId }: listPublicId) {
     },
   });
 
+  useEffect(() => {
+    const titleElement: HTMLElement | null =
+      document?.querySelector<HTMLElement>("#title");
+    if (titleElement) titleElement.focus();
+  }, []);
+
   return (
     <>
       <div className="flex w-full justify-between pb-4">
-        <h2 className="text-sm font-medium text-dark-1000">New card</h2>
+        <h2 className="text-sm font-bold text-dark-1000">New card</h2>
         <button
-          className="rounded p-1 hover:bg-dark-300"
+          className="rounded p-1 hover:bg-dark-300 focus:outline-none"
           onClick={() => closeModal()}
         >
           <HiXMark size={18} className="text-dark-900" />

src/app/boards/[...boardId]/components/NewListForm.tsx

@@ -39,9 +39,9 @@ export function NewListForm({ boardPublicId }: boardPublicId) {
   return (
     <>
       <div className="flex w-full justify-between pb-4">
-        <h2 className="text-sm font-medium text-dark-1000">New list</h2>
+        <h2 className="text-sm font-bold text-dark-1000">New list</h2>
         <button
-          className="rounded p-1 hover:bg-dark-300"
+          className="rounded p-1 hover:bg-dark-300 focus:outline-none"
           onClick={() => closeModal()}
         >
           <HiXMark size={18} className="text-dark-900" />

src/app/boards/components/NewBoardForm.tsx

@@ -30,9 +30,9 @@ export function NewBoardForm() {
   return (
     <>
       <div className="flex w-full justify-between pb-4">
-        <h2 className="text-sm font-medium text-dark-1000">New board</h2>
+        <h2 className="text-sm font-bold text-dark-1000">New board</h2>
         <button
-          className="rounded p-1 hover:bg-dark-300"
+          className="rounded p-1 hover:bg-dark-300 focus:outline-none"
           onClick={() => closeModal()}
         >
           <HiXMark size={18} className="text-dark-900" />

src/app/components/dashboard.tsx

@@ -5,7 +5,7 @@ import { auth } from "~/server/auth";
 import SideNavigation from "./SideNavigation";
 import FeedbackButton from "./FeedbackButton";
 
-export default async function Layout(props: { children: React.ReactNode }) {
+export default async function Dashboard(props: { children: React.ReactNode }) {
   const session = await auth();
 
   if (!session?.user) {

src/app/components/modal.tsx

@@ -24,7 +24,7 @@ const Modal: React.FC<Props> = ({ children }) => {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-dark-50 bg-opacity-5 transition-opacity" />
+          <div className="fixed inset-0 bg-dark-50 bg-opacity-40 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
@@ -38,7 +38,7 @@ const Modal: React.FC<Props> = ({ children }) => {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative mt-[25vh] transform rounded-lg border border-dark-400 bg-dark-100 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:mb-8 sm:w-full sm:max-w-sm sm:p-6">
+              <Dialog.Panel className="shadow-3xl relative mt-[25vh] transform rounded-lg border border-dark-400 bg-dark-100/20 px-4 pb-4 pt-5 text-left backdrop-blur-lg transition-all sm:mb-8 sm:w-full sm:max-w-sm sm:p-6">
                 {children}
               </Dialog.Panel>
             </Transition.Child>