Overhaul (#83)

* WIP Layout Refactor

* New Connection Dialog

* WIP form overhaul

* Fix remaining config pages

src/components/Dialog/QRDialog.tsx

@@ -1,23 +1,29 @@
 import { useEffect, useState } from "react";
 import { fromByteArray } from "base64-js";
-import { toast } from "react-hot-toast";
 import { QRCode } from "react-qrcode-logo";
 import { Checkbox } from "@components/form/Checkbox.js";
 import { Input } from "@components/form/Input.js";
-import { Dialog } from "@components/generic/Dialog.js";
-import { ClipboardIcon } from "@heroicons/react/24/outline";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@components/UI/Dialog.js";
+import { ClipboardIcon } from "lucide-react";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export interface QRDialogProps {
-  isOpen: boolean;
-  close: () => void;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
   loraConfig?: Protobuf.Config_LoRaConfig;
   channels: Protobuf.Channel[];
 }
 
 export const QRDialog = ({
-  isOpen,
-  close,
+  open,
+  onOpenChange,
   loraConfig,
   channels
 }: QRDialogProps): JSX.Element => {
@@ -44,58 +50,57 @@ export const QRDialog = ({
   }, [channels, selectedChannels, loraConfig]);
 
   return (
-    <Dialog
-      title={"Generate QR Code"}
-      description={"The current LoRa configuration will also be shared."}
-      isOpen={isOpen}
-      close={close}
-    >
-      <div className="flex gap-3 px-4 py-5 sm:p-6">
-        <div className="flex w-40 flex-col gap-1">
-          {channels.map((channel) => (
-            <Checkbox
-              key={channel.index}
-              disabled={
-                channel.index === 0 ||
-                channel.role === Protobuf.Channel_Role.DISABLED
-              }
-              label={
-                channel.settings?.name.length
-                  ? channel.settings.name
-                  : channel.role === Protobuf.Channel_Role.PRIMARY
-                  ? "Primary"
-                  : `Channel: ${channel.index}`
-              }
-              checked={selectedChannels.includes(channel.index)}
-              onChange={() => {
-                if (selectedChannels.includes(channel.index)) {
-                  setSelectedChannels(
-                    selectedChannels.filter((c) => c !== channel.index)
-                  );
-                } else {
-                  setSelectedChannels([...selectedChannels, channel.index]);
-                }
-              }}
-            />
-          ))}
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Generate QR Code</DialogTitle>
+          <DialogDescription>
+            The current LoRa configuration will also be shared.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="flex gap-3 px-4 py-5 sm:p-6">
+            <div className="flex w-40 flex-col gap-1">
+              {channels.map((channel) => (
+                <Checkbox
+                  key={channel.index}
+                  label={
+                    channel.settings?.name.length
+                      ? channel.settings.name
+                      : channel.role === Protobuf.Channel_Role.PRIMARY
+                      ? "Primary"
+                      : `Channel: ${channel.index}`
+                  }
+                  checked={selectedChannels.includes(channel.index)}
+                  onChange={() => {
+                    if (selectedChannels.includes(channel.index)) {
+                      setSelectedChannels(
+                        selectedChannels.filter((c) => c !== channel.index)
+                      );
+                    } else {
+                      setSelectedChannels([...selectedChannels, channel.index]);
+                    }
+                  }}
+                />
+              ))}
+            </div>
+            <QRCode value={QRCodeURL} size={200} qrStyle="dots" />
+          </div>
         </div>
-        <QRCode value={QRCodeURL} size={200} qrStyle="dots" />
-      </div>
-
-      <div className="sm:px-6">
-        <Input
-          label="Sharable URL"
-          value={QRCodeURL}
-          disabled
-          action={{
-            icon: <ClipboardIcon className="h-4" />,
-            action() {
-              void navigator.clipboard.writeText(QRCodeURL);
-              toast.success("Copied URL to Clipboard");
-            }
-          }}
-        />
-      </div>
+        <DialogFooter>
+          <Input
+            label="Sharable URL"
+            value={QRCodeURL}
+            disabled
+            action={{
+              icon: <ClipboardIcon size={16} />,
+              action() {
+                void navigator.clipboard.writeText(QRCodeURL);
+              }
+            }}
+          />
+        </DialogFooter>
+      </DialogContent>
     </Dialog>
   );
 };