UI tweaks (#23346)

* remove redundant per-view toasters in settings

* add variants to standardize dialog footer button layouts

* remove text-md

this class name compiles to nothing in tailwind. we used to add it to prevent iOS from zooming when focusing on an input, but that is now solved via the viewport meta in index.html

* make wizard footers consistent with dialog footers

* consistent destructive button style

remove text-white from individual buttons and add it to the variant

web/src/components/ui/alert-dialog.tsx

@@ -1,6 +1,8 @@
 import * as React from "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 
+import { cva, type VariantProps } from "class-variance-authority";
+
 import { cn } from "@/lib/utils";
 import { buttonVariants } from "@/components/ui/button";
 
@@ -59,15 +61,35 @@ const AlertDialogHeader = ({
 );
 AlertDialogHeader.displayName = "AlertDialogHeader";
 
+const alertDialogFooterVariants = cva(
+  "flex flex-col-reverse gap-2 sm:flex-row",
+  {
+    variants: {
+      variant: {
+        // 1-2 action buttons: full-width stacked on mobile, right-aligned auto on desktop.
+        // [&>button] only targets real button children, so non-button siblings are untouched.
+        actions: "sm:justify-end [&>button]:w-full sm:[&>button]:w-auto",
+        // context content (text/popover) alongside actions: space-between on desktop.
+        // flex-col (not -reverse) keeps the context above the buttons when stacked on mobile.
+        split: "flex-col sm:items-center sm:justify-between",
+        // alignment only; never touches children. Escape hatch for unusual content.
+        plain: "sm:justify-end",
+      },
+    },
+    defaultVariants: {
+      variant: "actions",
+    },
+  },
+);
+
 const AlertDialogFooter = ({
   className,
+  variant,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+}: React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof alertDialogFooterVariants>) => (
   <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className,
-    )}
+    className={cn(alertDialogFooterVariants({ variant }), className)}
     {...props}
   />
 );

web/src/components/ui/button.tsx

@@ -11,8 +11,7 @@ const buttonVariants = cva(
       variant: {
         default: "bg-secondary text-primary hover:bg-secondary/80",
         select: "bg-selected text-selected-foreground hover:bg-opacity-90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90",
         outline:
           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-primary text-primary-foreground hover:bg-primary/90",

web/src/components/ui/dialog.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
 import { X } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { useHistoryBack } from "@/hooks/use-history-back";
@@ -107,15 +108,32 @@ const DialogHeader = ({
 );
 DialogHeader.displayName = "DialogHeader";
 
+const dialogFooterVariants = cva("flex flex-col-reverse gap-2 sm:flex-row", {
+  variants: {
+    variant: {
+      // 1-2 action buttons: full-width stacked on mobile, right-aligned auto on desktop.
+      // [&>button] only targets real button children, so non-button siblings are untouched.
+      actions: "sm:justify-end [&>button]:w-full sm:[&>button]:w-auto",
+      // context content (text/popover) alongside actions: space-between on desktop.
+      // flex-col (not -reverse) keeps the context above the buttons when stacked on mobile.
+      split: "flex-col sm:items-center sm:justify-between",
+      // alignment only; never touches children. Escape hatch for unusual content.
+      plain: "sm:justify-end",
+    },
+  },
+  defaultVariants: {
+    variant: "actions",
+  },
+});
+
 const DialogFooter = ({
   className,
+  variant,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+}: React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof dialogFooterVariants>) => (
   <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className,
-    )}
+    className={cn(dialogFooterVariants({ variant }), className)}
     {...props}
   />
 );