refactor: added close button back to dialog

2026-05-19 11:45:17 -04:00 · 2025-03-10 20:53:09 -04:00
parent 33ad9f989c
commit 2cebb8eee2
13 changed files with 36 additions and 13 deletions
--- a/src/components/Dialog/DeviceNameDialog.tsx
+++ b/src/components/Dialog/DeviceNameDialog.tsx
@@ -3,6 +3,7 @@ import { create } from "@bufbuild/protobuf";
 import { Button } from "@components/UI/Button.tsx";
 import {
  Dialog,
+  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
@@ -52,6 +53,7 @@ export const DeviceNameDialog = ({
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
+        <DialogClose />
        <DialogHeader>
          <DialogTitle>Change Device Name</DialogTitle>
          <DialogDescription>
--- a/src/components/Dialog/ImportDialog.tsx
+++ b/src/components/Dialog/ImportDialog.tsx
@@ -3,6 +3,7 @@ import { Button } from "@components/UI/Button.tsx";
 import { Checkbox } from "../UI/Checkbox/index.tsx";
 import {
  Dialog,
+  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
@@ -96,6 +97,7 @@ export const ImportDialog = ({
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
+        <DialogClose />
        <DialogHeader>
          <DialogTitle>Import Channel Set</DialogTitle>
          <DialogDescription>
--- a/src/components/Dialog/LocationResponseDialog.tsx
+++ b/src/components/Dialog/LocationResponseDialog.tsx
@@ -1,6 +1,7 @@
 import { useDevice } from "../../core/stores/deviceStore.ts";
 import {
  Dialog,
+  DialogClose,
  DialogContent,
  DialogDescription,
  DialogHeader,
@@ -31,6 +32,7 @@ export const LocationResponseDialog = ({
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
+        <DialogClose />
        <DialogHeader>
          <DialogTitle>{`Location: ${longName} (${shortName})`}</DialogTitle>
        </DialogHeader>
@@ -41,9 +43,8 @@ export const LocationResponseDialog = ({
                Coordinates:{" "}
                <a
                  className="text-blue-500 dark:text-blue-400"
-                  href={`https://www.openstreetmap.org/?mlat=${
-                    location?.data.latitudeI / 1e7
-                  }&mlon=${location?.data.longitudeI / 1e7}&layers=N`}
+                  href={`https://www.openstreetmap.org/?mlat=${location?.data.latitudeI / 1e7
+                    }&mlon=${location?.data.longitudeI / 1e7}&layers=N`}
                  target="_blank"
                  rel="noreferrer"
                >
--- a/src/components/Dialog/NewDeviceDialog.tsx
+++ b/src/components/Dialog/NewDeviceDialog.tsx
@@ -7,6 +7,7 @@ import { HTTP } from "@components/PageComponents/Connect/HTTP.tsx";
 import { Serial } from "@components/PageComponents/Connect/Serial.tsx";
 import {
  Dialog,
+  DialogClose,
  DialogContent,
  DialogHeader,
  DialogTitle,
@@ -135,6 +136,7 @@ export const NewDeviceDialog = ({
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
+        <DialogClose />
        <DialogHeader>
          <DialogTitle>Connect New Device</DialogTitle>
        </DialogHeader>
--- a/src/components/Dialog/NodeDetailsDialog.tsx
+++ b/src/components/Dialog/NodeDetailsDialog.tsx
@@ -8,6 +8,7 @@ import {
 } from "../UI/Accordion.tsx";
 import {
  Dialog,
+  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
@@ -36,6 +37,7 @@ export const NodeDetailsDialog = ({
    ? (
      <Dialog open={open} onOpenChange={onOpenChange}>
        <DialogContent>
+          <DialogClose />
          <DialogHeader>
            <DialogTitle>
              Node Details for {device.user?.longName ?? "UNKNOWN"} (
@@ -85,11 +87,9 @@ export const NodeDetailsDialog = ({
                          Coordinates:{" "}
                          <a
                            className="text-blue-500 dark:text-blue-400"
-                            href={`https://www.openstreetmap.org/?mlat=${
-                              device.position.latitudeI / 1e7
-                            }&mlon=${
-                              device.position.longitudeI / 1e7
-                            }&layers=N`}
+                            href={`https://www.openstreetmap.org/?mlat=${device.position.latitudeI / 1e7
+                              }&mlon=${device.position.longitudeI / 1e7
+                              }&layers=N`}
                            target="_blank"
                            rel="noreferrer"
                          >
@@ -173,7 +173,7 @@ export const NodeDetailsDialog = ({
                        </AccordionTrigger>
                        <AccordionContent className="overflow-x-scroll">
                          <pre className="text-xs w-full">
-                        {JSON.stringify(device, null, 2)}
+                            {JSON.stringify(device, null, 2)}
                          </pre>
                        </AccordionContent>
                      </AccordionItem>
--- a/src/components/Dialog/NodeOptionsDialog.tsx
+++ b/src/components/Dialog/NodeOptionsDialog.tsx
@@ -3,6 +3,7 @@ import { useAppStore } from "../../core/stores/appStore.ts";
 import { useDevice } from "../../core/stores/deviceStore.ts";
 import {
  Dialog,
+  DialogClose,
  DialogContent,
  DialogHeader,
  DialogTitle,
@@ -72,6 +73,7 @@ export const NodeOptionsDialog = ({
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
+        <DialogClose />
        <DialogHeader>
          <DialogTitle>{`${longName} (${shortName})`}</DialogTitle>
        </DialogHeader>
--- a/src/components/Dialog/PKIBackupDialog.tsx
+++ b/src/components/Dialog/PKIBackupDialog.tsx
@@ -2,6 +2,7 @@ import { useDevice } from "../../core/stores/deviceStore.ts";
 import { Button } from "../UI/Button.tsx";
 import {
  Dialog,
+  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
@@ -102,6 +103,7 @@ export const PkiBackupDialog = ({
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
+        <DialogClose />
        <DialogHeader>
          <DialogTitle>Backup Keys</DialogTitle>
          <DialogDescription>
--- a/src/components/Dialog/PkiRegenerateDialog.tsx
+++ b/src/components/Dialog/PkiRegenerateDialog.tsx
@@ -1,6 +1,7 @@
 import { Button } from "@components/UI/Button.tsx";
 import {
  Dialog,
+  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
@@ -22,6 +23,7 @@ export const PkiRegenerateDialog = ({
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
+        <DialogClose />
        <DialogHeader>
          <DialogTitle>Regenerate Key pair?</DialogTitle>
          <DialogDescription>
--- a/src/components/Dialog/QRDialog.tsx
+++ b/src/components/Dialog/QRDialog.tsx
@@ -2,6 +2,7 @@ import { create, toBinary } from "@bufbuild/protobuf";
 import { Checkbox } from "../UI/Checkbox/index.tsx";
 import {
  Dialog,
+  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
@@ -62,6 +63,7 @@ export const QRDialog = ({
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
+        <DialogClose />
        <DialogHeader>
          <DialogTitle>Generate QR Code</DialogTitle>
          <DialogDescription>
@@ -107,8 +109,8 @@ export const QRDialog = ({
            <button
              type="button"
              className={`border-slate-900 border-t border-l border-b rounded-l h-10 px-7 py-2 text-sm font-medium focus:outline-hidden focus:ring-2 focus:ring-offset-2 ${qrCodeAdd
-                  ? "focus:ring-green-800 bg-green-800 text-white"
-                  : "focus:ring-slate-400 bg-slate-400 hover:bg-green-600"
+                ? "focus:ring-green-800 bg-green-800 text-white"
+                : "focus:ring-slate-400 bg-slate-400 hover:bg-green-600"
                }`}
              onClick={() => setQrCodeAdd(true)}
            >
@@ -117,8 +119,8 @@ export const QRDialog = ({
            <button
              type="button"
              className={`border-slate-900 border-t border-r border-b rounded-r h-10 px-4 py-2 text-sm font-medium focus:outline-hidden focus:ring-2 focus:ring-offset-2 ${!qrCodeAdd
-                  ? "focus:ring-green-800 bg-green-800 text-white"
-                  : "focus:ring-slate-400 bg-slate-400 hover:bg-green-600"
+                ? "focus:ring-green-800 bg-green-800 text-white"
+                : "focus:ring-slate-400 bg-slate-400 hover:bg-green-600"
                }`}
              onClick={() => setQrCodeAdd(false)}
            >
--- a/src/components/Dialog/RebootDialog.tsx
+++ b/src/components/Dialog/RebootDialog.tsx
@@ -1,6 +1,7 @@
 import { Button } from "@components/UI/Button.tsx";
 import {
  Dialog,
+  DialogClose,
  DialogContent,
  DialogDescription,
  DialogHeader,
@@ -27,6 +28,7 @@ export const RebootDialog = ({
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
+        <DialogClose />
        <DialogHeader>
          <DialogTitle>Schedule Reboot</DialogTitle>
          <DialogDescription>
--- a/src/components/Dialog/RemoveNodeDialog.tsx
+++ b/src/components/Dialog/RemoveNodeDialog.tsx
@@ -3,6 +3,7 @@ import { useDevice } from "@core/stores/deviceStore.ts";
 import { Button } from "@components/UI/Button.tsx";
 import {
  Dialog,
+  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
@@ -32,6 +33,7 @@ export const RemoveNodeDialog = ({
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
+        <DialogClose />
        <DialogHeader>
          <DialogTitle>Remove Node?</DialogTitle>
          <DialogDescription>
--- a/src/components/Dialog/ShutdownDialog.tsx
+++ b/src/components/Dialog/ShutdownDialog.tsx
@@ -1,6 +1,7 @@
 import { Button } from "@components/UI/Button.tsx";
 import {
  Dialog,
+  DialogClose,
  DialogContent,
  DialogDescription,
  DialogHeader,
@@ -27,6 +28,7 @@ export const ShutdownDialog = ({
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
+        <DialogClose />
        <DialogHeader>
          <DialogTitle>Schedule Shutdown</DialogTitle>
          <DialogDescription>
--- a/src/components/Dialog/TracerouteResponseDialog.tsx
+++ b/src/components/Dialog/TracerouteResponseDialog.tsx
@@ -1,6 +1,7 @@
 import { useDevice } from "../../core/stores/deviceStore.ts";
 import {
  Dialog,
+  DialogClose,
  DialogContent,
  DialogDescription,
  DialogHeader,
@@ -36,6 +37,7 @@ export const TracerouteResponseDialog = ({
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
+        <DialogClose />
        <DialogHeader>
          <DialogTitle>{`Traceroute: ${longName} (${shortName})`}</DialogTitle>
        </DialogHeader>