From c982bd733003c37e0ecf428b77a186a6f8c1cd2e Mon Sep 17 00:00:00 2001
From: Henry <henry_ball@hotmail.co.uk>
Date: Mon, 1 Apr 2024 23:11:56 +0100
Subject: [PATCH] feat: light mode tweaks

---
 .../boards/[...boardId]/components/List.tsx   |  6 +--
 .../[...boardId]/components/ListDropdown.tsx  | 18 ++++----
 src/app/boards/[...boardId]/page.tsx          | 12 +++---
 .../boards/components/ImportBoardsForm.tsx    | 43 ++++++++++---------
 src/app/boards/components/NewBoardForm.tsx    | 14 +++---
 src/app/components/UserMenu.tsx               | 26 +++++------
 src/app/components/modal.tsx                  |  4 +-
 tailwind.config.ts                            |  3 +-
 8 files changed, 64 insertions(+), 62 deletions(-)

diff --git a/src/app/boards/[...boardId]/components/List.tsx b/src/app/boards/[...boardId]/components/List.tsx
index c8124949..0e36e9ac 100644
--- a/src/app/boards/[...boardId]/components/List.tsx
+++ b/src/app/boards/[...boardId]/components/List.tsx
@@ -66,7 +66,7 @@ export default function List({
           ref={provided.innerRef}
           {...provided.draggableProps}
           {...provided.dragHandleProps}
-          className="mr-5 h-fit min-w-[18rem] max-w-[18rem] rounded-md border border-dark-400 bg-dark-200 py-2 pl-2 pr-1"
+          className="bg-light-300 border-light-400 dark-text-dark-1000 mr-5 h-fit min-w-[18rem] max-w-[18rem] rounded-md border py-2 pl-2 pr-1 text-neutral-900 dark:border-dark-400 dark:bg-dark-200"
         >
           <div className="flex justify-between">
             <form
@@ -80,12 +80,12 @@ export default function List({
                 value={formik.values.name}
                 onChange={formik.handleChange}
                 onBlur={formik.submitForm}
-                className="mb-4 block border-0 bg-transparent px-4 pt-1 text-sm font-medium text-dark-1000 focus:ring-0 focus-visible:outline-none"
+                className="font-mediumfocus:ring-0 mb-4 block border-0 bg-transparent px-4 pt-1 text-sm focus-visible:outline-none"
               />
             </form>
             <div>
               <button
-                className="mx-1 inline-flex h-fit items-center rounded-md p-1 px-1 text-sm font-semibold text-dark-50 hover:bg-dark-400"
+                className="hover:bg-light-400 mx-1 inline-flex h-fit items-center rounded-md p-1 px-1 text-sm font-semibold text-dark-50 dark:hover:bg-dark-400"
                 onClick={() => openNewCardForm(list.publicId)}
               >
                 <HiOutlinePlusSmall
diff --git a/src/app/boards/[...boardId]/components/ListDropdown.tsx b/src/app/boards/[...boardId]/components/ListDropdown.tsx
index b89d86de..284356dc 100644
--- a/src/app/boards/[...boardId]/components/ListDropdown.tsx
+++ b/src/app/boards/[...boardId]/components/ListDropdown.tsx
@@ -22,7 +22,7 @@ export default function ListDropdown({
   return (
     <Menu as="div" className="relative inline-block text-left">
       <div>
-        <Menu.Button className="mr-1 inline-flex h-fit items-center rounded-md p-1 px-1 text-sm font-semibold text-dark-50 hover:bg-dark-400">
+        <Menu.Button className="hover:bg-light-400 mr-1 inline-flex h-fit items-center rounded-md p-1 px-1 text-sm font-semibold text-dark-50 dark:hover:bg-dark-400">
           <HiEllipsisHorizontal className="h-5 w-5 text-dark-900" />
         </Menu.Button>
       </div>
@@ -36,17 +36,15 @@ export default function ListDropdown({
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md border border-dark-400 bg-dark-300 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <Menu.Items className="bg-light-50 dark-text-dark-1000 border-light-400 absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md border text-neutral-900 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-400 dark:bg-dark-300">
           <div className="flex">
             <Menu.Item>
-              {() => (
-                <button
-                  onClick={handleOpenDeleteListConfirmation}
-                  className="m-1 w-full rounded-[5px] px-3 py-2 text-left text-sm text-dark-1000 hover:bg-dark-400"
-                >
-                  Delete list
-                </button>
-              )}
+              <button
+                onClick={handleOpenDeleteListConfirmation}
+                className="hover:bg-light-400 m-1 w-full rounded-[5px] px-3 py-2 text-left text-sm dark:hover:bg-dark-400"
+              >
+                Delete list
+              </button>
             </Menu.Item>
           </div>
         </Menu.Items>
diff --git a/src/app/boards/[...boardId]/page.tsx b/src/app/boards/[...boardId]/page.tsx
index 84d866ed..87ca5cdc 100644
--- a/src/app/boards/[...boardId]/page.tsx
+++ b/src/app/boards/[...boardId]/page.tsx
@@ -201,7 +201,7 @@ export default function BoardPage() {
         </svg>
       </div>
 
-      <div className="z-10 flex w-full justify-between p-8">
+      <div className="z-10 flex w-full justify-between p-8 ">
         <form
           onSubmit={formik.handleSubmit}
           className="focus-visible:outline-none"
@@ -213,13 +213,13 @@ export default function BoardPage() {
             value={formik.values.name}
             onChange={formik.handleChange}
             onBlur={formik.submitForm}
-            className="block border-0 bg-transparent p-0 py-0 font-medium leading-[2.3rem] tracking-tight text-dark-1000 focus:ring-0 focus-visible:outline-none sm:text-[1.2rem]"
+            className="dark-text-dark-1000 block border-0 bg-transparent p-0 py-0 font-medium leading-[2.3rem] tracking-tight text-neutral-900 focus:ring-0 focus-visible:outline-none sm:text-[1.2rem]"
           />
         </form>
         <div className="flex items-center">
           <button
             type="button"
-            className="mr-2 inline-flex items-center gap-x-1.5 rounded-md bg-dark-1000 px-3 py-2 text-sm font-semibold text-dark-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+            className="bg-light-1000 text-light-50 mr-2 inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-dark-1000 dark:text-dark-50"
             onClick={() => openNewListForm(boardId)}
           >
             <HiOutlinePlusSmall
@@ -268,7 +268,7 @@ export default function BoardPage() {
                                 <Link
                                   key={card.publicId}
                                   href={`/cards/${card.publicId}`}
-                                  className="mb-2 flex !cursor-pointer flex-col rounded-md border border-dark-200 bg-dark-500 px-3 py-2 text-sm text-dark-1000"
+                                  className="bg-light-50 border-light-200 mb-2 flex !cursor-pointer flex-col rounded-md border px-3 py-2 text-sm text-neutral-900 dark:border-dark-200 dark:bg-dark-500 dark:text-dark-1000"
                                   ref={provided.innerRef}
                                   {...provided.draggableProps}
                                   {...provided.dragHandleProps}
@@ -280,7 +280,7 @@ export default function BoardPage() {
                                       {card.labels?.map(({ label }) => (
                                         <span
                                           key={label.publicId}
-                                          className="inline-flex w-fit items-center gap-x-1.5 rounded-full px-2 py-1 text-[10px] font-medium text-dark-1000 ring-1 ring-inset ring-dark-800"
+                                          className="ring-light-600 inline-flex w-fit items-center gap-x-1.5 rounded-full px-2 py-1 text-[10px] font-medium text-neutral-600 ring-1 ring-inset dark:text-dark-1000 dark:ring-dark-800"
                                         >
                                           <svg
                                             fill={label.colourCode}
@@ -297,7 +297,7 @@ export default function BoardPage() {
                                         {card.members?.map(({ member }) => (
                                           <span
                                             key={member.publicId}
-                                            className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-500 ring-2 ring-dark-500"
+                                            className="ring-light-50 bg-light-900 inline-flex h-6 w-6 items-center justify-center rounded-full ring-2 dark:bg-gray-500 dark:ring-dark-500"
                                           >
                                             <span className="text-[10px] font-medium leading-none text-white">
                                               {member.user.name
diff --git a/src/app/boards/components/ImportBoardsForm.tsx b/src/app/boards/components/ImportBoardsForm.tsx
index fd36bae1..761082b0 100644
--- a/src/app/boards/components/ImportBoardsForm.tsx
+++ b/src/app/boards/components/ImportBoardsForm.tsx
@@ -33,7 +33,7 @@ const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {
     <form onSubmit={formik.handleSubmit}>
       <label
         htmlFor="name"
-        className="block pb-2 text-sm font-normal leading-6 text-dark-1000"
+        className="block pb-2 text-sm font-normal leading-6 text-neutral-900 dark:text-dark-1000"
       >
         Source
       </label>
@@ -41,7 +41,7 @@ const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {
         {({ open }) => (
           <>
             <div className="relative">
-              <Listbox.Button className="block w-full rounded-md border-0 bg-dark-300 bg-white/5 px-4 py-1.5 text-dark-1000 shadow-sm ring-1 ring-inset ring-dark-700 focus:ring-2 focus:ring-inset focus:ring-dark-700 sm:text-sm sm:leading-6">
+              <Listbox.Button className="ring-light-600 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 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">
@@ -63,21 +63,19 @@ const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-                <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-dark-300 py-2 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                <Listbox.Options className="bg-light-50 ring-light-600 absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md py-1 text-base text-neutral-900 shadow-lg ring-1 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-2 text-dark-1000 "
+                      className="relative cursor-default select-none px-1"
                       value={source}
                     >
-                      {() => (
-                        <div className="flex items-center rounded-[5px] p-2 hover:bg-dark-400">
-                          <FaTrello />
-                          <span className="ml-2 block truncate font-normal">
-                            {source}
-                          </span>
-                        </div>
-                      )}
+                      <div className="hover:bg-light-200 flex items-center rounded-[5px] p-1 dark:hover:bg-dark-400">
+                        <FaTrello className="ml-1" />
+                        <span className="ml-2 block truncate font-normal">
+                          {source}
+                        </span>
+                      </div>
                     </Listbox.Option>
                   ))}
                 </Listbox.Options>
@@ -89,7 +87,7 @@ const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {
       <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"
+          className="bg-light-1000 text-light-50 inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
         >
           Select source
         </button>
@@ -208,37 +206,40 @@ const ImportTrello: React.FC = () => {
     );
 
   return (
-    <form onSubmit={formik.handleSubmit}>
+    <form
+      onSubmit={formik.handleSubmit}
+      className="text-neutral-900 dark:text-dark-1000"
+    >
       <label
         htmlFor="apiKey"
-        className="block pb-2 text-sm font-normal leading-6 text-dark-1000"
+        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 text-dark-1000 shadow-sm ring-1 ring-inset ring-dark-700 focus:ring-2 focus:ring-inset focus:ring-dark-700 sm:text-sm sm:leading-6"
+        className="ring-light-600 focus:ring-light-700 mb-2 block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset 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 text-dark-1000"
+        className="block pb-2 text-sm font-normal leading-6"
       >
         Token
       </label>
       <input
         id="token"
         name="token"
-        className="block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-dark-1000 shadow-sm ring-1 ring-inset ring-dark-700 focus:ring-2 focus:ring-inset focus:ring-dark-700 sm:text-sm sm:leading-6"
+        className="ring-light-600 focus:ring-light-700 mb-2 block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset 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-dark-1000 px-3 py-2 text-sm font-semibold text-dark-50 shadow-sm focus-visible:outline-none"
+          className="bg-light-1000 text-light-50 inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
         >
           Fetch boards
         </button>
@@ -254,7 +255,9 @@ export function ImportBoardsForm() {
   return (
     <>
       <div className="flex w-full justify-between pb-4">
-        <h2 className="text-sm font-medium text-dark-1000">New import</h2>
+        <h2 className="text-sm font-medium text-neutral-900 dark:text-dark-1000">
+          New import
+        </h2>
         <button
           className="rounded p-1 hover:bg-dark-300"
           onClick={() => closeModal()}
diff --git a/src/app/boards/components/NewBoardForm.tsx b/src/app/boards/components/NewBoardForm.tsx
index 9449e853..ac3d89e0 100644
--- a/src/app/boards/components/NewBoardForm.tsx
+++ b/src/app/boards/components/NewBoardForm.tsx
@@ -29,13 +29,13 @@ export function NewBoardForm() {
 
   return (
     <>
-      <div className="flex w-full justify-between pb-4">
-        <h2 className="text-sm font-bold text-dark-1000">New board</h2>
+      <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-dark-300 focus:outline-none"
+          className="hover:bg-light-300 rounded p-1 focus:outline-none dark:hover:bg-dark-300"
           onClick={() => closeModal()}
         >
-          <HiXMark size={18} className="text-dark-900" />
+          <HiXMark size={18} className="text-light-900 dark:text-dark-900" />
         </button>
       </div>
 
@@ -53,19 +53,19 @@ export function NewBoardForm() {
         <Form>
           <label
             htmlFor="name"
-            className="block pb-2 text-sm font-normal leading-6 text-dark-1000"
+            className="block pb-2 text-sm font-normal leading-6 text-neutral-900 dark:text-dark-1000"
           >
             Name
           </label>
           <Field
             id="name"
             name="name"
-            className="block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-dark-1000 shadow-sm ring-1 ring-inset ring-dark-700 focus:ring-2 focus:ring-inset focus:ring-dark-700 sm:text-sm sm:leading-6"
+            className="ring-light-600 focus:ring-light-600 block w-full rounded-md border-0 bg-white/5 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset 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-dark-1000 px-3 py-2 text-sm font-semibold text-dark-50 shadow-sm focus-visible:outline-none"
+              className="bg-light-1000 text-light-50 inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
             >
               Create board
             </button>
diff --git a/src/app/components/UserMenu.tsx b/src/app/components/UserMenu.tsx
index a94c6e79..474e685b 100644
--- a/src/app/components/UserMenu.tsx
+++ b/src/app/components/UserMenu.tsx
@@ -21,7 +21,7 @@ export default function UserMenu({ imageUrl, email }: UserMenuProps) {
   return (
     <Menu as="div" className="relative inline-block w-full text-left">
       <div>
-        <Menu.Button className="flex w-full items-center rounded-md p-1.5 text-dark-900 hover:bg-dark-200 hover:text-dark-1000">
+        <Menu.Button className="hover:bg-light-200 flex w-full items-center rounded-md p-1.5 text-neutral-900 dark:text-dark-900 dark:hover:bg-dark-200 dark:hover:text-dark-1000">
           {imageUrl ? (
             <Image
               src={imageUrl ?? ""}
@@ -31,7 +31,7 @@ export default function UserMenu({ imageUrl, email }: UserMenuProps) {
               alt=""
             />
           ) : (
-            <span className="inline-block h-6 w-6 overflow-hidden rounded-full bg-dark-400">
+            <span className="bg-light-400 inline-block h-6 w-6 overflow-hidden rounded-full dark:bg-dark-400">
               <svg
                 className="h-full w-full text-dark-700"
                 fill="currentColor"
@@ -54,21 +54,21 @@ export default function UserMenu({ imageUrl, email }: UserMenuProps) {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute bottom-[40px] left-0 z-10 mt-2 w-full origin-top-left rounded-md border border-dark-500 bg-dark-300 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-          <div className="flex flex-col">
+        <Menu.Items className="border-light-600 bg-light-50 absolute bottom-[40px] left-0 z-10 mt-2 w-full origin-top-left rounded-md border shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-600 dark:bg-dark-300">
+          <div className="flex flex-col text-neutral-900 dark:text-dark-1000">
             <div className="p-1">
-              <div className="flex w-full items-center px-3 py-2 text-left text-xs text-dark-1000">
+              <div className="flex w-full items-center px-3 py-2 text-left text-xs">
                 <span>Theme</span>
               </div>
               <Menu.Item>
                 <button
                   onClick={() => switchTheme("system")}
-                  className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs text-dark-1000 hover:bg-dark-400"
+                  className="hover:bg-light-200 flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs dark:hover:bg-dark-400"
                 >
                   <span
                     className={classNames(
                       theme === "system" ? "visible" : "invisible",
-                      "mr-4 h-[6px] w-[6px] rounded-full bg-dark-900",
+                      "bg-light-900 mr-4 h-[6px] w-[6px] rounded-full dark:bg-dark-900",
                     )}
                   />
                   System
@@ -77,12 +77,12 @@ export default function UserMenu({ imageUrl, email }: UserMenuProps) {
               <Menu.Item>
                 <button
                   onClick={() => switchTheme("dark")}
-                  className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs text-dark-1000 hover:bg-dark-400"
+                  className="hover:bg-light-200 flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs dark:hover:bg-dark-400"
                 >
                   <span
                     className={classNames(
                       theme === "dark" ? "visible" : "invisible",
-                      "mr-4 h-[6px] w-[6px] rounded-full bg-dark-900",
+                      "bg-light-900 mr-4 h-[6px] w-[6px] rounded-full dark:bg-dark-900",
                     )}
                   />
                   Dark
@@ -91,23 +91,23 @@ export default function UserMenu({ imageUrl, email }: UserMenuProps) {
               <Menu.Item>
                 <button
                   onClick={() => switchTheme("light")}
-                  className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs text-dark-1000 hover:bg-dark-400"
+                  className="hover:bg-light-200 flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs dark:hover:bg-dark-400"
                 >
                   <span
                     className={classNames(
                       theme === "light" ? "visible" : "invisible",
-                      "mr-4 h-[6px] w-[6px] rounded-full bg-dark-900",
+                      "bg-light-900 mr-4 h-[6px] w-[6px] rounded-full dark:bg-dark-900",
                     )}
                   />
                   Light
                 </button>
               </Menu.Item>
             </div>
-            <div className="border-t-[1px] border-dark-500 p-1">
+            <div className="light-border-600 border-t-[1px] p-1 dark:border-dark-600">
               <Menu.Item>
                 <button
                   onClick={() => signOut({ callbackUrl: "/boards" })}
-                  className=" flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs text-dark-1000 hover:bg-dark-400"
+                  className=" hover:bg-light-200 flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs dark:hover:bg-dark-400"
                 >
                   Logout
                 </button>
diff --git a/src/app/components/modal.tsx b/src/app/components/modal.tsx
index 4c663352..a343eeb5 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-40 transition-opacity" />
+          <div className="bg-light-50 fixed inset-0 bg-opacity-40 transition-opacity dark:bg-dark-50 dark:bg-opacity-40" />
         </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="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">
+              <Dialog.Panel className="shadow-3xl-light dark:shadow-3xl-dark bg-light-50 border-light-600 relative mt-[25vh] transform rounded-lg border px-4 pb-4 pt-5 text-left transition-all dark:border-dark-600 dark:bg-dark-100/20 dark:backdrop-blur-lg sm:mb-8 sm:w-full sm:max-w-sm sm:p-6">
                 {children}
               </Dialog.Panel>
             </Transition.Child>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 467e09bf..804f136e 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -12,7 +12,8 @@ export default {
         sm: "0.8rem",
       },
       boxShadow: {
-        '3xl': '0px 16px 70px rgba(0, 0, 0, 0.5)',
+        '3xl-dark': '0px 16px 70px rgba(0, 0, 0, 0.5)',
+        '3xl-light': 'rgba(0, 0, 0, 0.12) 0px 4px 30px, rgba(0, 0, 0, 0.04) 0px 3px 17px, rgba(0, 0, 0, 0.04) 0px 2px 8px, rgba(0, 0, 0, 0.04) 0px 1px 1px'
       },
       colors: {
         "dark-50": "#161616",