fix modal close

thoughtspile · Jun 7, 2024 · bb64642 · bb64642
1 parent 0ab7f12
commit bb64642
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>