Improve QR dialog

src/components/Dialog/QRDialog.tsx

@@ -1,5 +1,5 @@
 import type React from "react";
-import { useEffect, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 
 import { fromByteArray } from "base64-js";
 import { QRCode } from "react-qrcode-logo";
@@ -8,6 +8,7 @@ import { Dialog } from "@headlessui/react";
 import { ClipboardIcon } from "@heroicons/react/24/outline";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 
+import { Card } from "../Card.js";
 import { Checkbox } from "../form/Checkbox.js";
 import { Input } from "../form/Input.js";
 
@@ -50,60 +51,65 @@ export const QRDialog = ({
     <Dialog open={isOpen} onClose={close}>
       <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
       <div className="fixed inset-0 flex items-center justify-center p-4">
-        <Dialog.Panel className="mx-auto max-w-sm rounded bg-white p-3">
-          <Dialog.Title>Generate QR Code</Dialog.Title>
-
-          <Dialog.Description>
-            This will permanently deactivate your account
-          </Dialog.Description>
-          <div className="flex">
-            <div className="flex flex-col">
-              <span className="text-lg font-medium">Channels to include</span>
-              <span className="text-sm text-slate-600">
-                The current LoRa configuration will also be shared.
+        <Dialog.Panel as={Fragment}>
+          <Card className="max-w-md flex-col">
+            <div className="flex h-8 bg-slate-100">
+              <span className="m-auto text-lg font-medium">
+                Generate QR Code
               </span>
-              {channels.map((channel) => (
-                <Checkbox
-                  key={channel.index}
-                  disabled={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]);
-                    }
-                  }}
-                />
-              ))}
             </div>
-            <div className="m-2 flex flex-grow flex-col">
-              <div className="m-auto flex">
-                <QRCode value={QRCodeURL} size={250} qrStyle="dots" />
+            <div className="flex gap-2 p-2">
+              <div className="flex flex-col">
+                <span className="text-lg font-medium">Channels to include</span>
+                <span className="text-sm text-slate-600">
+                  The current LoRa configuration will also be shared.
+                </span>
+                {channels.map((channel) => (
+                  <Checkbox
+                    key={channel.index}
+                    disabled={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,
+                        ]);
+                      }
+                    }}
+                  />
+                ))}
               </div>
-              <div className="flex gap-2">
-                <Input
-                  label="Sharable URL"
-                  value={QRCodeURL}
-                  action={{
-                    icon: <ClipboardIcon className="h-4" />,
-                    action: () => {
-                      console.log("");
-                    },
-                  }}
-                />
+              <div className="flex flex-grow flex-col">
+                <div className="m-auto flex">
+                  <QRCode value={QRCodeURL} size={200} qrStyle="dots" />
+                </div>
+                <div className="flex gap-2">
+                  <Input
+                    label="Sharable URL"
+                    value={QRCodeURL}
+                    action={{
+                      icon: <ClipboardIcon className="h-4" />,
+                      action: () => {
+                        console.log("");
+                      },
+                    }}
+                  />
+                </div>
               </div>
             </div>
-          </div>
+          </Card>
         </Dialog.Panel>
       </div>
     </Dialog>