From 87c628dfcc5a86f90a74e728035d4694643700b8 Mon Sep 17 00:00:00 2001
From: Jake Prins <jakeprins@outlook.com>
Date: Thu, 21 Dec 2023 21:19:44 +0100
Subject: [PATCH] Add themeStyle option to modal

---
 src/components/Modal.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index dc56c13..c9707ec 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -12,6 +12,7 @@ export interface Props extends React.HTMLAttributes<HTMLDivElement> {
   preventBackdropClick?: boolean
   backdropClassName?: string
   style?: CSSProperties
+  themeStyle?: 1 | 2 | 3
 }
 
 export const Modal = React.forwardRef<HTMLDivElement, Props>(function Modal(props, ref) {
@@ -23,6 +24,7 @@ export const Modal = React.forwardRef<HTMLDivElement, Props>(function Modal(prop
     preventBackdropClick,
     className = '',
     backdropClassName = '',
+    themeStyle = 1,
     style = {},
     ...other
   } = props
@@ -62,7 +64,16 @@ export const Modal = React.forwardRef<HTMLDivElement, Props>(function Modal(prop
             leave="transition ease-in duration-150"
             leaveFrom="opacity-100 scale-100"
             leaveTo="opacity-0  transform translate-y-1/4 scale-95"
-            className={`relative w-full p-5 overflow-y-auto bg-white dark:bg-gray-800 dark:text-gray-400 shadow-lg rounded-t-lg sm:p-6 no-scrollbar sm:rounded-lg sm:m-4 sm:max-w-xl ${className}`}
+            className={classNames(
+              'relative w-full p-5 overflow-y-auto bg-white dark:text-gray-400 rounded-t-lg sm:p-6 no-scrollbar sm:rounded-lg sm:m-4 sm:max-w-xl',
+              className,
+              {
+                'dark:bg-gray-800 shadow-lg': themeStyle === 1,
+                'dark:bg-gray-900 shadow-lg': themeStyle === 2,
+                'ring-1 ring-black ring-opacity-5 dark:bg-gray-900/90 dark:backdrop-blur dark:ring-gray-800/70':
+                  themeStyle === 3
+              }
+            )}
             style={{ maxHeight: '90%', ...style }}
             ref={ref}
             role="dialog"