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/settings/CloneCameraDialog.tsx

@@ -977,7 +977,7 @@ export default function CloneCameraDialog({
               )}
             </div>
 
-            <DialogFooter className="flex flex-col items-stretch gap-3 sm:flex-row sm:items-center sm:justify-between sm:space-x-0">
+            <DialogFooter variant="split">
               <div className="flex flex-col gap-1 text-sm text-muted-foreground">
                 {changeCount > 0 && (
                   <>
@@ -1005,7 +1005,7 @@ export default function CloneCameraDialog({
                   </>
                 )}
               </div>
-              <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row">
+              <div className="flex w-full flex-col-reverse gap-2 sm:w-auto sm:flex-row">
                 <Button
                   type="button"
                   disabled={isSubmitting}

web/src/components/settings/MotionMaskEditPane.tsx

@@ -22,7 +22,6 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import { flattenPoints, interpolatePoints } from "@/utils/canvasUtil";
 import axios from "axios";
 import { toast } from "sonner";
-import { Toaster } from "../ui/sonner";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { Link } from "react-router-dom";
 import { LuExternalLink } from "react-icons/lu";
@@ -327,7 +326,6 @@ export default function MotionMaskEditPane({
 
   return (
     <>
-      <Toaster position="top-center" closeButton={true} />
       <Heading as="h3" className="my-2">
         {polygon.name.length
           ? t("masksAndZones.motionMasks.edit")

web/src/components/settings/ObjectMaskEditPane.tsx

@@ -31,7 +31,6 @@ import { FaCheckCircle } from "react-icons/fa";
 import { flattenPoints, interpolatePoints } from "@/utils/canvasUtil";
 import axios from "axios";
 import { toast } from "sonner";
-import { Toaster } from "../ui/sonner";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { useTranslation } from "react-i18next";
 import { getTranslatedLabel } from "@/utils/i18n";
@@ -335,7 +334,6 @@ export default function ObjectMaskEditPane({
 
   return (
     <>
-      <Toaster position="top-center" closeButton={true} />
       <Heading as="h3" className="my-2">
         {polygon.name.length
           ? t("masksAndZones.objectMasks.edit")

web/src/components/settings/PolygonItem.tsx

@@ -24,12 +24,12 @@ import { toRGBColorString } from "@/utils/canvasUtil";
 import { Polygon, PolygonType } from "@/types/canvas";
 import { useCallback, useMemo, useState } from "react";
 import axios from "axios";
-import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { reviewQueries } from "@/utils/zoneEdutUtil";
 import IconWrapper from "../ui/icon-wrapper";
+import { buttonVariants } from "@/components/ui/button";
 import { Trans, useTranslation } from "react-i18next";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { cn } from "@/lib/utils";
@@ -368,8 +368,6 @@ export default function PolygonItem({
 
   return (
     <>
-      <Toaster position="top-center" closeButton={true} />
-
       <div
         key={index}
         className="transition-background relative my-1.5 flex flex-row items-center justify-between rounded-lg p-1 duration-100"
@@ -511,7 +509,7 @@ export default function PolygonItem({
                 {t("button.cancel", { ns: "common" })}
               </AlertDialogCancel>
               <AlertDialogAction
-                className="bg-destructive text-white hover:bg-destructive/90"
+                className={cn(buttonVariants({ variant: "destructive" }))}
                 onClick={handleDelete}
               >
                 {polygon.polygonSource === "override"

web/src/components/settings/SearchSettings.tsx

@@ -59,9 +59,7 @@ export default function ExploreSettings({
     <div className={cn(className, "my-3 space-y-5 py-3 md:mt-0 md:py-0")}>
       <div className="space-y-4">
         <div className="space-y-0.5">
-          <div className="text-md">
-            {t("explore.settings.defaultView.title")}
-          </div>
+          <div>{t("explore.settings.defaultView.title")}</div>
           <div className="space-y-1 text-xs text-muted-foreground">
             {t("explore.settings.defaultView.desc")}
           </div>
@@ -97,9 +95,7 @@ export default function ExploreSettings({
           <DropdownMenuSeparator />
           <div className="flex w-full flex-col space-y-4">
             <div className="space-y-0.5">
-              <div className="text-md">
-                {t("explore.settings.gridColumns.title")}
-              </div>
+              <div>{t("explore.settings.gridColumns.title")}</div>
               <div className="space-y-1 text-xs text-muted-foreground">
                 {t("explore.settings.gridColumns.desc")}
               </div>
@@ -162,9 +158,7 @@ export function SearchTypeContent({
       <div className="overflow-x-hidden">
         <DropdownMenuSeparator className="mb-3" />
         <div className="space-y-0.5">
-          <div className="text-md">
-            {t("explore.settings.searchSource.label")}
-          </div>
+          <div>{t("explore.settings.searchSource.label")}</div>
           <div className="space-y-1 text-xs text-muted-foreground">
             {t("explore.settings.searchSource.desc")}
           </div>

web/src/components/settings/ZoneEditPane.tsx

@@ -24,7 +24,6 @@ import { Label } from "../ui/label";
 import PolygonEditControls from "./PolygonEditControls";
 import { FaCheckCircle } from "react-icons/fa";
 import axios from "axios";
-import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
 import { flattenPoints, interpolatePoints } from "@/utils/canvasUtil";
 import ActivityIndicator from "../indicators/activity-indicator";
@@ -628,7 +627,6 @@ export default function ZoneEditPane({
 
   return (
     <>
-      <Toaster position="top-center" closeButton={true} />
       <Heading as="h3" className="my-2">
         {polygon.name.length
           ? t("masksAndZones.zones.edit")
@@ -709,7 +707,7 @@ export default function ZoneEditPane({
                 <FormLabel>{t("masksAndZones.zones.inertia.title")}</FormLabel>
                 <FormControl>
                   <Input
-                    className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                    className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                     placeholder="3"
                     {...field}
                   />
@@ -734,7 +732,7 @@ export default function ZoneEditPane({
                 </FormLabel>
                 <FormControl>
                   <Input
-                    className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                    className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                     placeholder="0"
                     {...field}
                   />
@@ -864,7 +862,7 @@ export default function ZoneEditPane({
                       </FormLabel>
                       <FormControl>
                         <Input
-                          className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                          className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                           {...field}
                           onFocus={() => setActiveLine(1)}
                           onBlur={() => setActiveLine(undefined)}
@@ -891,7 +889,7 @@ export default function ZoneEditPane({
                       </FormLabel>
                       <FormControl>
                         <Input
-                          className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                          className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                           {...field}
                           onFocus={() => setActiveLine(2)}
                           onBlur={() => setActiveLine(undefined)}
@@ -918,7 +916,7 @@ export default function ZoneEditPane({
                       </FormLabel>
                       <FormControl>
                         <Input
-                          className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                          className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                           {...field}
                           onFocus={() => setActiveLine(3)}
                           onBlur={() => setActiveLine(undefined)}
@@ -945,7 +943,7 @@ export default function ZoneEditPane({
                       </FormLabel>
                       <FormControl>
                         <Input
-                          className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                          className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                           {...field}
                           onFocus={() => setActiveLine(4)}
                           onBlur={() => setActiveLine(undefined)}
@@ -972,7 +970,7 @@ export default function ZoneEditPane({
                       </FormLabel>
                       <FormControl>
                         <Input
-                          className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                          className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                           {...field}
                         />
                       </FormControl>

web/src/components/settings/wizard/Step1NameCamera.tsx

@@ -171,7 +171,7 @@ export default function Step1NameCamera({
                 </FormLabel>
                 <FormControl>
                   <Input
-                    className="text-md h-8"
+                    className="h-8"
                     placeholder={t("cameraWizard.step1.cameraNamePlaceholder")}
                     {...field}
                   />
@@ -192,7 +192,7 @@ export default function Step1NameCamera({
                   </FormLabel>
                   <FormControl>
                     <Input
-                      className="text-md h-8"
+                      className="h-8"
                       placeholder="192.168.1.100"
                       {...field}
                     />
@@ -212,7 +212,7 @@ export default function Step1NameCamera({
                   </FormLabel>
                   <FormControl>
                     <Input
-                      className="text-md h-8"
+                      className="h-8"
                       placeholder={t("cameraWizard.step1.usernamePlaceholder")}
                       {...field}
                     />
@@ -233,7 +233,7 @@ export default function Step1NameCamera({
                   <FormControl>
                     <div className="relative">
                       <Input
-                        className="text-md h-8 pr-10"
+                        className="h-8 pr-10"
                         type={showPassword ? "text" : "password"}
                         placeholder={t(
                           "cameraWizard.step1.passwordPlaceholder",
@@ -316,7 +316,7 @@ export default function Step1NameCamera({
                   </FormLabel>
                   <FormControl>
                     <Input
-                      className="text-md h-8"
+                      className="h-8"
                       type="text"
                       {...field}
                       placeholder="80"
@@ -440,7 +440,7 @@ export default function Step1NameCamera({
                       </FormLabel>
                       <FormControl>
                         <Input
-                          className="text-md h-8"
+                          className="h-8"
                           placeholder="rtsp://username:password@host:port/path"
                           {...field}
                         />
@@ -455,7 +455,7 @@ export default function Step1NameCamera({
         </form>
       </Form>
 
-      <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+      <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
         <Button type="button" onClick={onCancel} className="sm:flex-1">
           {t("button.cancel", { ns: "common" })}
         </Button>

web/src/components/settings/wizard/Step2ProbeOrSnapshot.tsx

@@ -626,7 +626,7 @@ function ProbeFooterButtons({
           <ActivityIndicator className="size-4" />
           {t("cameraWizard.step2.probing")}
         </div>
-        <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+        <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
           <Button type="button" onClick={onBack} disabled className="sm:flex-1">
             {t("button.back", { ns: "common" })}
           </Button>
@@ -649,7 +649,7 @@ function ProbeFooterButtons({
     return (
       <div className="space-y-4">
         <div className="text-sm text-destructive">{probeError}</div>
-        <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+        <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
           <Button type="button" onClick={onBack} className="sm:flex-1">
             {t("button.back", { ns: "common" })}
           </Button>
@@ -670,7 +670,7 @@ function ProbeFooterButtons({
   // If manual mode, show Continue when test succeeded, otherwise show Test (calls onManualTest)
   if (mode === "manual") {
     return (
-      <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+      <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
         <Button type="button" onClick={onBack} className="sm:flex-1">
           {t("button.back", { ns: "common" })}
         </Button>
@@ -707,7 +707,7 @@ function ProbeFooterButtons({
 
   // Default probe footer
   return (
-    <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+    <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
       <Button type="button" onClick={onBack} className="sm:flex-1">
         {t("button.back", { ns: "common" })}
       </Button>

web/src/components/settings/wizard/Step3StreamConfig.tsx

@@ -731,7 +731,7 @@ export default function Step3StreamConfig({
         </div>
       )}
 
-      <div className="flex flex-col gap-3 pt-6 sm:flex-row sm:justify-end sm:gap-4">
+      <div className="flex flex-col-reverse gap-2 pt-6 sm:flex-row sm:justify-end">
         {onBack && (
           <Button type="button" onClick={onBack} className="sm:flex-1">
             {t("button.back", { ns: "common" })}

web/src/components/settings/wizard/Step4Validation.tsx

@@ -490,7 +490,7 @@ export default function Step4Validation({
         </div>
       </div>
 
-      <div className="flex flex-col gap-3 pt-6 sm:flex-row sm:justify-end sm:gap-4">
+      <div className="flex flex-col-reverse gap-2 pt-6 sm:flex-row sm:justify-end">
         {onBack && (
           <Button type="button" onClick={onBack} className="sm:flex-1">
             {t("button.back", { ns: "common" })}