From d1b0a499a8fd3ce634557ffa65ac16c3c1935138 Mon Sep 17 00:00:00 2001
From: Mattrixwv <m_ellison@ymail.com>
Date: Tue, 25 Feb 2025 23:19:45 -0500
Subject: [PATCH] Update modal

---
 src/components/modal/Modal.tsx           | 9 ++++++++-
 src/components/modal/ModalBackground.tsx | 6 +++++-
 src/components/modal/ModalHeader.tsx     | 6 +++++-
 src/index.css                            | 1 -
 src/interface/ModalInterfaces.ts         | 6 +++---
 src/pages/public/HomePage.tsx            | 5 +++--
 6 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
index d7b71a5..c2de9e4 100644
--- a/src/components/modal/Modal.tsx
+++ b/src/components/modal/Modal.tsx
@@ -12,6 +12,13 @@ export default function Modal(props: ModalProps){
 		className,
 		children
 	} = props;
+	const divProps = {...props};
+	delete divProps["children"];
+	delete divProps["display"];
+	delete divProps["backgroundType"];
+	delete divProps["backgroundClassName"];
+	delete divProps["close"];
+	delete divProps["className"];
 
 
 	return (
@@ -25,7 +32,7 @@ export default function Modal(props: ModalProps){
 						close={close}
 					/>
 					<div
-						{...props}
+						{...divProps}
 						className={clsx(
 							"fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50",
 							"flex flex-col rounded-lg max-h-full shadow-lg shadow-[#00000066]",
diff --git a/src/components/modal/ModalBackground.tsx b/src/components/modal/ModalBackground.tsx
index ca670f3..1cf786b 100644
--- a/src/components/modal/ModalBackground.tsx
+++ b/src/components/modal/ModalBackground.tsx
@@ -8,6 +8,10 @@ export default function ModalBackground(props: ModalBackgroundProps){
 		close,
 		className
 	} = props;
+	const divProps = { ...props };
+	delete divProps["backgroundType"];
+	delete divProps["close"];
+	delete divProps["className"];
 
 
 	if(backgroundType === "none"){
@@ -17,7 +21,7 @@ export default function ModalBackground(props: ModalBackgroundProps){
 
 	return (
 		<div
-			{...props}
+			{...divProps}
 			className={clsx(
 				"fixed left-0 top-0 w-full h-full z-40",
 				"flex flex-row justify-center items-center",
diff --git a/src/components/modal/ModalHeader.tsx b/src/components/modal/ModalHeader.tsx
index 4426566..3d871b9 100644
--- a/src/components/modal/ModalHeader.tsx
+++ b/src/components/modal/ModalHeader.tsx
@@ -9,11 +9,15 @@ export default function ModalHeader(props: ModalHeaderProps){
 		className,
 		children
 	} = props;
+	const divProps = {...props};
+	delete divProps["close"];
+	delete divProps["className"];
+	delete divProps["children"];
 
 
 	return (
 		<div
-			{...props}
+			{...divProps}
 			className={clsx(
 				"flex flex-row justify-center w-full rounded-t-lg",
 				className
diff --git a/src/index.css b/src/index.css
index fd8d007..212bc60 100644
--- a/src/index.css
+++ b/src/index.css
@@ -34,7 +34,6 @@ a.active {
 }
 
 body {
-	display: flex;
 	place-items: center;
 	min-width: 320px;
 	min-height: 100vh;
diff --git a/src/interface/ModalInterfaces.ts b/src/interface/ModalInterfaces.ts
index df340ed..3258e2b 100644
--- a/src/interface/ModalInterfaces.ts
+++ b/src/interface/ModalInterfaces.ts
@@ -7,14 +7,14 @@ export type ModalHeaderFooterBackgroundType = "darken" | "lighten" | "none";
 
 export interface ModalBackgroundProps extends HTMLProps<HTMLDivElement>{
 	backgroundType?: ModalBackgroundType;
-	close: () => void;
+	close?: () => void;
 }
 
 export interface ModalProps extends HTMLProps<HTMLDivElement>{
-	display: boolean;
+	display?: boolean;
 	backgroundType?: ModalBackgroundType;
 	backgroundClassName?: string;
-	close: () => void;
+	close?: () => void;
 	children: React.ReactNode;
 }
 
diff --git a/src/pages/public/HomePage.tsx b/src/pages/public/HomePage.tsx
index fa009cb..dace3a8 100644
--- a/src/pages/public/HomePage.tsx
+++ b/src/pages/public/HomePage.tsx
@@ -20,7 +20,7 @@ export default function HomePage(){
 
 	return (
 		<main>
-			Home Page
+			<div>Home Page</div>
 			<button
 				onClick={showModal}
 			>
@@ -29,7 +29,8 @@ export default function HomePage(){
 			<Modal
 				display={displayModal}
 				close={hideModal}
-				backgroundType="darken-blur"
+				backgroundType="lighten"
+				className="bg-(--bg-color) text-(--text-color)"
 			>
 				<ModalHeader
 					close={hideModal}