add custom error dialog

client/ui/frontend/src/components/SquareIcon.tsx

@@ -4,35 +4,35 @@ import { cn } from "@/lib/cn";
 
 // SquareIcon is the rounded-square icon tile used by dialog-style surfaces
 // (ConfirmDialog, etc.). Renders a bordered tile with the provided lucide
-// icon centered inside. The `tone` selects the semantic colour scheme —
-// `default` keeps the neutral dark tile; info/warning/danger tint the tile,
-// border and icon to match the action's severity.
-export type SquareIconTone = "default" | "info" | "warning" | "danger";
+// icon centered inside. The `variant` selects the semantic colour scheme — all
+// variants keep the neutral dark tile + border; only the icon colour changes
+// to match the action's severity.
+export type SquareIconVariant = "default" | "info" | "warning" | "danger";
 
-const toneClass: Record<SquareIconTone, string> = {
-    default: "bg-nb-gray-920 border-nb-gray-900 text-white",
-    info: "bg-sky-950 border-sky-500 text-sky-100",
-    warning: "bg-netbird-950 border-netbird text-netbird",
-    danger: "bg-red-950 border-red-500 text-red-500",
+const variantClass: Record<SquareIconVariant, string> = {
+    default: "text-white",
+    info: "text-sky-400",
+    warning: "text-netbird",
+    danger: "text-red-500",
 };
 
 type SquareIconProps = {
     icon: ComponentType<LucideProps>;
     iconSize?: number;
-    tone?: SquareIconTone;
+    variant?: SquareIconVariant;
     className?: string;
 };
 
 export const SquareIcon = ({
     icon: Icon,
     iconSize = 20,
-    tone = "default",
+    variant = "default",
     className,
 }: SquareIconProps) => (
     <div
         className={cn(
-            "h-11 w-11 rounded-lg flex items-center justify-center border",
-            toneClass[tone],
+            "h-11 w-11 rounded-lg flex items-center justify-center border bg-nb-gray-920 border-nb-gray-900",
+            variantClass[variant],
             className,
         )}
     >

client/ui/frontend/src/components/dialog/ConfirmModal.tsx

@@ -8,7 +8,7 @@ import { DialogActions } from "@/components/dialog/DialogActions";
 
 // ConfirmModal is the shared in-app confirmation modal — a left-aligned
 // title + (optionally multi-line) description with Cancel / confirm buttons
-// in the footer. It's the in-window counterpart to the native warningDialog.
+// in the footer. It's the in-window counterpart to a native confirm dialog.
 //
 // Most call sites should not render this directly: use the imperative
 // `useConfirm()` from DialogContext (`await confirm({...})`), which mounts a