replace native confirm dialog with modals in settings

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

@@ -3,18 +3,36 @@ import { LucideProps } from "lucide-react";
 import { cn } from "@/lib/cn";
 
 // SquareIcon is the rounded-square icon tile used by dialog-style surfaces
-// (ConfirmDialog, etc.). Renders a bordered dark tile with the provided
-// lucide icon centered inside.
+// (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";
+
+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",
+};
+
 type SquareIconProps = {
     icon: ComponentType<LucideProps>;
     iconSize?: number;
+    tone?: SquareIconTone;
     className?: string;
 };
 
-export const SquareIcon = ({ icon: Icon, iconSize = 20, className }: SquareIconProps) => (
+export const SquareIcon = ({
+    icon: Icon,
+    iconSize = 20,
+    tone = "default",
+    className,
+}: SquareIconProps) => (
     <div
         className={cn(
-            "h-11 w-11 rounded-lg flex items-center justify-center bg-nb-gray-920 border border-nb-gray-900 text-white",
+            "h-11 w-11 rounded-lg flex items-center justify-center border",
+            toneClass[tone],
             className,
         )}
     >

client/ui/frontend/src/components/buttons/Button.tsx

@@ -93,7 +93,7 @@ const buttonVariants = cva(
             },
             size: {
                 xs: "text-xs py-2.5 px-3.5",
-                xs2: "text-[0.78rem] py-2 px-4",
+                xs2: "text-[0.78rem] py-[1.1rem] px-5 leading-[0]",
                 sm: "text-sm py-[9px] px-4",
                 md: "py-[9px] px-4",
                 lg: "text-lg py-[9px] px-4",

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

@@ -0,0 +1,110 @@
+import { ReactNode, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import * as Dialog from "@/components/dialog/Dialog";
+import { Button } from "@/components/buttons/Button";
+import { DialogHeading } from "@/components/dialog/DialogHeading";
+import { DialogDescription } from "@/components/dialog/DialogDescription";
+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.
+//
+// Most call sites should not render this directly: use the imperative
+// `useConfirm()` from DialogContext (`await confirm({...})`), which mounts a
+// single instance at the provider level. Render ConfirmModal yourself only
+// when you need bespoke control over its open/busy lifecycle.
+type ConfirmModalProps = {
+    open: boolean;
+    title: ReactNode;
+    description: ReactNode;
+    /** Confirm button label. */
+    confirmLabel: string;
+    /** Cancel button label; defaults to the shared "Cancel" string. */
+    cancelLabel?: string;
+    /** Use the destructive (red) confirm button variant. */
+    danger?: boolean;
+    /** Disable the buttons (and ignore dismiss) while an action runs. */
+    busy?: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+};
+
+export const ConfirmModal = ({
+    open,
+    title,
+    description,
+    confirmLabel,
+    cancelLabel,
+    danger = false,
+    busy = false,
+    onConfirm,
+    onCancel,
+}: ConfirmModalProps) => {
+    const { t } = useTranslation();
+
+    // Retain the last shown content so it stays rendered through Radix's
+    // close animation instead of blanking out the instant the caller clears
+    // its state on close.
+    type Snapshot = Pick<ConfirmModalProps, "title" | "description" | "confirmLabel" | "danger"> & {
+        cancelLabel: string;
+    };
+    const [snapshot, setSnapshot] = useState<Snapshot | null>(null);
+    const resolvedCancel = cancelLabel ?? t("common.cancel");
+    useEffect(() => {
+        if (open) {
+            setSnapshot({ title, description, confirmLabel, cancelLabel: resolvedCancel, danger });
+        }
+    }, [open, title, description, confirmLabel, resolvedCancel, danger]);
+
+    const view = open
+        ? { title, description, confirmLabel, cancelLabel: resolvedCancel, danger }
+        : snapshot;
+
+    return (
+        <Dialog.Root
+            open={open}
+            onOpenChange={(next) => {
+                if (!next && !busy) onCancel();
+            }}
+        >
+            <Dialog.Content
+                maxWidthClass="max-w-sm"
+                showClose={false}
+                className="py-5"
+                onOpenAutoFocus={(e) => e.preventDefault()}
+            >
+                {view && (
+                    <div className="flex flex-col gap-5 px-5">
+                        <div className="flex flex-col gap-1 pl-1">
+                            <DialogHeading align={"left"}>{view.title}</DialogHeading>
+                            <DialogDescription align={"left"} className={"whitespace-pre-line"}>
+                                {view.description}
+                            </DialogDescription>
+                        </div>
+
+                        <DialogActions className={"flex-row justify-end gap-2.5"}>
+                            <Button
+                                variant={"secondary"}
+                                size={"xs2"}
+                                disabled={busy}
+                                onClick={onCancel}
+                            >
+                                {view.cancelLabel}
+                            </Button>
+                            <Button
+                                autoFocus
+                                variant={view.danger ? "danger" : "primary"}
+                                size={"xs2"}
+                                disabled={busy}
+                                onClick={onConfirm}
+                            >
+                                {view.confirmLabel}
+                            </Button>
+                        </DialogActions>
+                    </div>
+                )}
+            </Dialog.Content>
+        </Dialog.Root>
+    );
+};

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

@@ -15,7 +15,7 @@ const Overlay = forwardRef<
             ref={ref}
             className={cn(
                 "fixed inset-0 z-50 grid items-center justify-items-center overflow-y-auto px-10 py-16",
-                "bg-black/40 backdrop-blur-sm",
+                "bg-black/60",
                 "data-[state=open]:animate-in data-[state=closed]:animate-out",
                 "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
                 "duration-150 ease-out",