Dialog replacement

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
+    <Dialog isOpen={isOpen} close={close} title="Help">
-      isShown={isOpen}
+      <TabbedContent
-      onCloseComplete={close}
+        tabs={tabs}
-      title="Meshtastic Web Help"
+        actions={[() => <IconButton icon={CrossIcon} onClick={close} />]}
-      hasFooter={true}
+      />
-    >
-      <TabbedContent direction="vertical" tabs={tabs} />
     </Dialog>
   );
 };

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
+    <Dialog isOpen={isOpen} close={close} width={majorScale(120)}>
-      isShown={isOpen}
-      title="Peers"
-      onCloseComplete={close}
-      hasFooter={false}
-      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>
   );
 };

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
+    // <Dialog
-      isShown={isOpen}
+    //   isShown={isOpen}
-      title="Generate QR Code"
+    //
-      onCloseComplete={close}
+    //   onCloseComplete={close}
-      hasFooter={false}
+    //   hasFooter={false}
-    >
+    // >
+    <Dialog isOpen={isOpen} close={close} title="Generate QR Code" background>
       <Pane display="flex">
         <FormField
           width="12rem"

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"

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>
+  );
+};

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