Modal: Cleanup

victronenergy · Oct 24, 2023 · 3051fba · 3051fba
1 parent b7c30fe
commit 3051fba
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 12 deletions.
diff --git a/src/app/Marine2/components/ui/Modal/Modal.tsx b/src/app/Marine2/components/ui/Modal/Modal.tsx
@@ -1,5 +1,6 @@
-import classnames from "classnames"
+import classNames from "classnames"
 import type { FC, ReactNode } from "react"
+import { ModalVariant } from "@m2Types/generic/modal"
 
 interface Props {
   open?: boolean
@@ -9,13 +10,13 @@ interface Props {
 }
 
 const Frame: FC<Props> = ({ children, open = true, onClose, className }) => {
-  const classes = classnames(
+  const classes = classNames(
     "fixed inset-0 z-10 p-4 md:p-8 text-neutral-600 modal dark:text-white items-center justify-center",
     `${open ? "flex" : "hidden"}` // control visibility via `open` attribute (or render conditionally)
   )
   return (
     <div className={classes} onClick={onClose}>
-      <div className={classnames("absolute", className)} onClick={(e) => e.stopPropagation()}>
+      <div className={classNames("absolute", className)} onClick={(e) => e.stopPropagation()}>
         <div className="overflow-hidden bg-victron-gray-900 dark:bg-victron-darkGray rounded-md shadow-[0_8px_24px_-15px_rgba(0,0,0,0.75)]">
           {children}
         </div>
@@ -24,23 +25,17 @@ const Frame: FC<Props> = ({ children, open = true, onClose, className }) => {
   )
 }
 
-const Head: FC<{ children: ReactNode; className?: string }> = ({ children, className }) => (
-  <div className={classnames("block p-4", className)}>{children}</div>
-)
-
 interface BodyProps {
   children: ReactNode
   className?: string
   variant?: ModalVariant
 }
 
-type ModalVariant = "default" | "popUp"
-
 const Body: FC<BodyProps> = ({ children, className, variant = "default" }) => {
-  const classes = classnames("dark:text-white", {
-    className: className,
+  const classes = classNames("dark:text-white", {
     "px-4 md:px-10 lg:px-16 pt-6 pb-6 md:pb-10": variant === "default",
     "p-4": variant === "popUp",
+    className: className,
   })
   return <div className={classes}>{children}</div>
 }
@@ -49,4 +44,4 @@ const Footer: FC = ({ children }) => (
   <div className="flex justify-between border-t border-victron-darkGray-200 text-base">{children}</div>
 )
 
-export const Modal = { Frame, Head, Body, Footer }
+export const Modal = { Frame, Body, Footer }
diff --git a/src/app/Marine2/types/generic/modal.ts b/src/app/Marine2/types/generic/modal.ts
@@ -0,0 +1 @@
+export type ModalVariant = "default" | "popUp"