From cacda7aa8ba59fd2f2a9fd6f025857adaf212aa5 Mon Sep 17 00:00:00 2001
From: Sacha Weatherstone <sachaw100@hotmail.com>
Date: Sat, 27 Aug 2022 23:05:56 +1000
Subject: [PATCH] Dialog replacement

---
 src/components/Dialog/HelpDialog.tsx   | 15 +++---
 src/components/Dialog/PeersDialog.tsx  | 27 ++---------
 src/components/Dialog/QRDialog.tsx     | 16 ++++---
 src/components/Dialog/RegionDialog.tsx |  5 +-
 src/components/Dialog/index.tsx        | 63 ++++++++++++++++++++++++++
 src/components/layout/AppLayout.tsx    |  2 +-
 6 files changed, 86 insertions(+), 42 deletions(-)
 create mode 100644 src/components/Dialog/index.tsx

diff --git a/src/components/Dialog/HelpDialog.tsx b/src/components/Dialog/HelpDialog.tsx
index 87cb2dff..a7aa3808 100644
--- a/src/components/Dialog/HelpDialog.tsx
+++ b/src/components/Dialog/HelpDialog.tsx
@@ -1,8 +1,9 @@
 import type React from "react";
 
-import { CogIcon, Dialog, Text } from "evergreen-ui";
+import { CogIcon, CrossIcon, IconButton, Text } from "evergreen-ui";
 
 import { TabbedContent, TabType } from "../layout/page/TabbedContent.js";
+import { Dialog } from "./index.js";
 
 export interface HelpDialogProps {
   isOpen: boolean;
@@ -32,13 +33,11 @@ export const HelpDialog = ({ isOpen, close }: HelpDialogProps): JSX.Element => {
   ];
 
   return (
-    <Dialog
-      isShown={isOpen}
-      onCloseComplete={close}
-      title="Meshtastic Web Help"
-      hasFooter={true}
-    >
-      <TabbedContent direction="vertical" tabs={tabs} />
+    <Dialog isOpen={isOpen} close={close} title="Help">
+      <TabbedContent
+        tabs={tabs}
+        actions={[() => <IconButton icon={CrossIcon} onClick={close} />]}
+      />
     </Dialog>
   );
 };
diff --git a/src/components/Dialog/PeersDialog.tsx b/src/components/Dialog/PeersDialog.tsx
index a4b9cfc1..e54e201c 100644
--- a/src/components/Dialog/PeersDialog.tsx
+++ b/src/components/Dialog/PeersDialog.tsx
@@ -1,7 +1,6 @@
 import type React from "react";
 
 import {
-  Dialog,
   HelperManagementIcon,
   IconButton,
   majorScale,
@@ -16,6 +15,8 @@ import { useDevice } from "@core/providers/useDevice.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 
+import { Dialog } from "./index.js";
+
 export interface PeersDialogProps {
   isOpen: boolean;
   close: () => void;
@@ -29,13 +30,7 @@ export const PeersDialog = ({
     useDevice();
 
   return (
-    <Dialog
-      isShown={isOpen}
-      title="Peers"
-      onCloseComplete={close}
-      hasFooter={false}
-      width={majorScale(120)}
-    >
+    <Dialog isOpen={isOpen} close={close} width={majorScale(120)}>
       <Table>
         <Table.Head>
           <Table.HeaderCell flexBasis={48} flexShrink={0} flexGrow={0} />
@@ -126,22 +121,6 @@ export const PeersDialog = ({
             ))}
         </Table.Body>
       </Table>
-      {/* <Pane
-                key={node.data.num}
-                display="flex"
-                borderRadius={majorScale(1)}
-                elevation={1}
-                gap={majorScale(1)}
-                padding={majorScale(1)}
-              >
-                
-                <Heading>{node.data.user?.longName}</Heading>
-                {node.metrics.airUtilTx}
-                {node.metrics.}
-                {node.metrics.channelUtilization}
-                {node.metrics.}
-                {node.data.}
-              </Pane> */}
     </Dialog>
   );
 };
diff --git a/src/components/Dialog/QRDialog.tsx b/src/components/Dialog/QRDialog.tsx
index 0c11b5b3..ff724985 100644
--- a/src/components/Dialog/QRDialog.tsx
+++ b/src/components/Dialog/QRDialog.tsx
@@ -5,7 +5,6 @@ import { fromByteArray } from "base64-js";
 import {
   Checkbox,
   ClipboardIcon,
-  Dialog,
   FormField,
   IconButton,
   majorScale,
@@ -17,6 +16,8 @@ import { QRCode } from "react-qrcode-logo";
 
 import { Protobuf } from "@meshtastic/meshtasticjs";
 
+import { Dialog } from "./index.js";
+
 export interface QRDialogProps {
   isOpen: boolean;
   close: () => void;
@@ -53,12 +54,13 @@ export const QRDialog = ({
   }, [channels, selectedChannels, loraConfig]);
 
   return (
-    <Dialog
-      isShown={isOpen}
-      title="Generate QR Code"
-      onCloseComplete={close}
-      hasFooter={false}
-    >
+    // <Dialog
+    //   isShown={isOpen}
+    //
+    //   onCloseComplete={close}
+    //   hasFooter={false}
+    // >
+    <Dialog isOpen={isOpen} close={close} title="Generate QR Code" background>
       <Pane display="flex">
         <FormField
           width="12rem"
diff --git a/src/components/Dialog/RegionDialog.tsx b/src/components/Dialog/RegionDialog.tsx
index 250e4375..e5b6ddb0 100644
--- a/src/components/Dialog/RegionDialog.tsx
+++ b/src/components/Dialog/RegionDialog.tsx
@@ -1,7 +1,7 @@
 import type React from "react";
 import { useEffect, useState } from "react";
 
-import { Dialog, SelectField } from "evergreen-ui";
+import { SelectField } from "evergreen-ui";
 import { useForm } from "react-hook-form";
 
 import { LoRaValidation } from "@app/validation/config/lora.js";
@@ -11,6 +11,7 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 
 import { Form } from "../form/Form.js";
+import { Dialog } from "./index.js";
 
 export interface RegionDialogProps {
   isOpen: boolean;
@@ -51,7 +52,7 @@ export const RegionDialog = ({ isOpen }: RegionDialogProps): JSX.Element => {
   });
 
   return (
-    <Dialog isShown={isOpen} title="Generate QR Code" hasFooter={false}>
+    <Dialog isOpen={isOpen} close={close} title="Set Device Region" background>
       <Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
         <SelectField
           label="Region"
diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
new file mode 100644
index 00000000..696e94c8
--- /dev/null
+++ b/src/components/Dialog/index.tsx
@@ -0,0 +1,63 @@
+import type React from "react";
+
+import {
+  CrossIcon,
+  Heading,
+  IconButton,
+  majorScale,
+  Overlay,
+  Pane,
+} from "evergreen-ui";
+
+export interface DialogProps {
+  isOpen: boolean;
+  close: () => void;
+  title?: string;
+  background?: boolean;
+  width?: number;
+  children: React.ReactNode;
+}
+
+export const Dialog = ({
+  isOpen,
+  close,
+  title,
+  background,
+  width,
+  children,
+}: DialogProps): JSX.Element => {
+  return (
+    <Overlay
+      isShown={isOpen}
+      onExit={close}
+      containerProps={{
+        display: "flex",
+      }}
+    >
+      <Pane
+        role="dialog"
+        width={width ?? majorScale(80)}
+        margin="auto"
+        display="flex"
+        flexDirection="column"
+        zIndex={1}
+        borderRadius={majorScale(1)}
+        padding={majorScale(3)}
+        background={background ? "white" : undefined}
+      >
+        {background && (
+          <Pane
+            display="flex"
+            justifyContent="space-between"
+            marginBottom={majorScale(2)}
+          >
+            <Heading size={600}>{title}</Heading>
+            <IconButton icon={CrossIcon} onClick={close} />
+          </Pane>
+        )}
+
+        {children}
+      </Pane>
+    </Overlay>
+  );
+};
diff --git a/src/components/layout/AppLayout.tsx b/src/components/layout/AppLayout.tsx
index b5eac1ae..ca93b9ff 100644
--- a/src/components/layout/AppLayout.tsx
+++ b/src/components/layout/AppLayout.tsx
@@ -31,7 +31,7 @@ export const AppLayout = ({ children }: AppLayoutProps): JSX.Element => {
       minHeight="100vh"
     >
       <Header />
-      <Pane display="flex" flex={1} height="100%" width="100%">
+      <Pane display="flex" height="100%" width="100%">
         {devices.length ? (
           devices.map((device) => (
             <Pane