From 7aa64db983b557c5c167148513c4d1ab785f44df Mon Sep 17 00:00:00 2001
From: Henry <henry_ball@hotmail.co.uk>
Date: Mon, 18 Mar 2024 22:40:24 +0000
Subject: [PATCH] feat: glass modal

---
 .../boards/[...boardId]/components/NewCardForm.tsx   | 12 +++++++++---
 .../boards/[...boardId]/components/NewListForm.tsx   |  4 ++--
 src/app/boards/components/NewBoardForm.tsx           |  4 ++--
 src/app/components/dashboard.tsx                     |  2 +-
 src/app/components/modal.tsx                         |  4 ++--
 5 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/app/boards/[...boardId]/components/NewCardForm.tsx b/src/app/boards/[...boardId]/components/NewCardForm.tsx
index d260b7e3..22606d72 100644
--- a/src/app/boards/[...boardId]/components/NewCardForm.tsx
+++ b/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" />
diff --git a/src/app/boards/[...boardId]/components/NewListForm.tsx b/src/app/boards/[...boardId]/components/NewListForm.tsx
index ddaccb2b..9f7d817f 100644
--- a/src/app/boards/[...boardId]/components/NewListForm.tsx
+++ b/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" />
diff --git a/src/app/boards/components/NewBoardForm.tsx b/src/app/boards/components/NewBoardForm.tsx
index 5ce43e2f..9449e853 100644
--- a/src/app/boards/components/NewBoardForm.tsx
+++ b/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" />
diff --git a/src/app/components/dashboard.tsx b/src/app/components/dashboard.tsx
index 6d3be04f..5e250ba3 100644
--- a/src/app/components/dashboard.tsx
+++ b/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) {
diff --git a/src/app/components/modal.tsx b/src/app/components/modal.tsx
index 07fe1037..4c663352 100644
--- a/src/app/components/modal.tsx
+++ b/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>