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,13 +51,14 @@ 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.Panel as={Fragment}>
-          <Dialog.Title>Generate QR Code</Dialog.Title>
+          <Card className="max-w-md flex-col">
-
+            <div className="flex h-8 bg-slate-100">
-          <Dialog.Description>
+              <span className="m-auto text-lg font-medium">
-            This will permanently deactivate your account
+                Generate QR Code
-          </Dialog.Description>
+              </span>
-          <div className="flex">
+            </div>
+            <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">
@@ -80,15 +82,18 @@ export const QRDialog = ({
                           selectedChannels.filter((c) => c !== channel.index)
                         );
                       } else {
-                      setSelectedChannels([...selectedChannels, channel.index]);
+                        setSelectedChannels([
+                          ...selectedChannels,
+                          channel.index,
+                        ]);
                       }
                     }}
                   />
                 ))}
               </div>
-            <div className="m-2 flex flex-grow flex-col">
+              <div className="flex flex-grow flex-col">
                 <div className="m-auto flex">
-                <QRCode value={QRCodeURL} size={250} qrStyle="dots" />
+                  <QRCode value={QRCodeURL} size={200} qrStyle="dots" />
                 </div>
                 <div className="flex gap-2">
                   <Input
@@ -104,6 +109,7 @@ export const QRDialog = ({
                 </div>
               </div>
             </div>
+          </Card>
         </Dialog.Panel>
       </div>
     </Dialog>