From bb646420a4367174dee20da7a8474d520e897ea1 Mon Sep 17 00:00:00 2001
From: Vladimir Klepov <v.klepov@gmail.com>
Date: Fri, 7 Jun 2024 16:07:33 +0300
Subject: [PATCH] fix modal close

---
 src/app/Analysis/AnalysisPanel.tsx |  2 +-
 src/app/Charts/ChartsPanel.tsx     |  2 +-
 src/app/ui/Modal.module.css        | 29 ++++++++++++++++++-----------
 src/app/ui/Modal.tsx               | 12 ++++++++----
 4 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/app/Analysis/AnalysisPanel.tsx b/src/app/Analysis/AnalysisPanel.tsx
index ee92259..4233195 100644
--- a/src/app/Analysis/AnalysisPanel.tsx
+++ b/src/app/Analysis/AnalysisPanel.tsx
@@ -32,7 +32,7 @@ export function AnalysisPanel(props: AnalysisPanelProps) {
 
   return (
     <Show when={props.visible}>
-      <Modal close={props.onClose}>
+      <Modal close={props.onClose} title="Data Analysis">
         <div class={styles.Form}>
           <Index each={staging().filter((s) => s.mode !== "order")}>
             {(s, i) => (
diff --git a/src/app/Charts/ChartsPanel.tsx b/src/app/Charts/ChartsPanel.tsx
index 2325b39..591bf7b 100644
--- a/src/app/Charts/ChartsPanel.tsx
+++ b/src/app/Charts/ChartsPanel.tsx
@@ -24,7 +24,7 @@ export function ChartsPanel(props: ChartsPanelProps) {
 
   return (
     <Show when={props.visible}>
-      <Modal close={props.onClose} class={styles.ChartsPanel}>
+      <Modal close={props.onClose} class={styles.ChartsPanel} title="Charts">
         <For each={charts()}>
           {(config) => (
             <ChartItem
diff --git a/src/app/ui/Modal.module.css b/src/app/ui/Modal.module.css
index 2807736..d6c5a2c 100644
--- a/src/app/ui/Modal.module.css
+++ b/src/app/ui/Modal.module.css
@@ -7,31 +7,38 @@
   background-color: #f4f4f4;
   box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
   z-index: 2;
+  display: flex;
+  flex-direction: column;
 }
 
-.ModalContent {
+.Modal__header {
+  flex: 0 0;
   padding: 1rem;
-  max-height: 100vh;
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.Modal__content {
+  padding: 0 1rem 1rem;
+  flex-grow: 1;
   overflow-y: scroll;
 }
 
 .Modal__close {
-  position: absolute;
-  top: 0.5rem;
-  left: -2.5rem;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: white;
   transition: opacity 300ms ease;
-  color: white;
+  color: inherit;
   border: none;
   border-radius: 50%;
-  width: 2rem;
-  height: 2rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin: -0.25rem;
   cursor: pointer;
   display: flex;
-  font-size: 1rem;
+  font-size: 0.75rem;
   align-items: center;
   justify-content: center;
-  opacity: 0.6;
 }
 
 .FilterPanel__close:hover {
diff --git a/src/app/ui/Modal.tsx b/src/app/ui/Modal.tsx
index 858b40a..011cdb7 100644
--- a/src/app/ui/Modal.tsx
+++ b/src/app/ui/Modal.tsx
@@ -6,16 +6,20 @@ export function Modal(props: {
   children: JSX.Element;
   close: () => void;
   class?: string;
+  title: string;
 }) {
   let root: HTMLDivElement;
   const close = () => props.close();
 
   return (
     <div ref={root} class={styles.Modal}>
-      <button type="button" onClick={close} class={styles.Modal__close}>
-        <FaSolidXmark />
-      </button>
-      <div class={`${styles.ModalContent} ${props.class || ""}`}>
+      <div class={styles.Modal__header}>
+        <button type="button" onClick={close} class={styles.Modal__close}>
+          <FaSolidXmark />
+        </button>
+        {props.title}
+      </div>
+      <div class={`${styles.Modal__content} ${props.class || ""}`}>
         {props.children}
       </div>
     </div>