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/overlay/dialog/DeleteCameraDialog.tsx

@@ -121,28 +121,22 @@ export default function DeleteCameraDialog({
                 ))}
               </SelectContent>
             </Select>
-            <DialogFooter className="flex gap-3 sm:justify-end">
-              <div className="flex flex-1 flex-col justify-end">
-                <div className="flex flex-row gap-2 pt-5">
-                  <Button
-                    className="flex flex-1"
-                    aria-label={t("button.cancel", { ns: "common" })}
-                    onClick={handleClose}
-                    type="button"
-                  >
-                    {t("button.cancel", { ns: "common" })}
-                  </Button>
-                  <Button
-                    variant="destructive"
-                    aria-label={t("button.delete", { ns: "common" })}
-                    className="flex flex-1 text-white"
-                    onClick={handleDelete}
-                    disabled={!selectedCamera}
-                  >
-                    {t("button.delete", { ns: "common" })}
-                  </Button>
-                </div>
-              </div>
+            <DialogFooter>
+              <Button
+                aria-label={t("button.cancel", { ns: "common" })}
+                onClick={handleClose}
+                type="button"
+              >
+                {t("button.cancel", { ns: "common" })}
+              </Button>
+              <Button
+                variant="destructive"
+                aria-label={t("button.delete", { ns: "common" })}
+                onClick={handleDelete}
+                disabled={!selectedCamera}
+              >
+                {t("button.delete", { ns: "common" })}
+              </Button>
             </DialogFooter>
           </>
         ) : (
@@ -173,39 +167,31 @@ export default function DeleteCameraDialog({
                 {t("cameraManagement.deleteCameraDialog.deleteExports")}
               </Label>
             </div>
-            <DialogFooter className="flex gap-3 sm:justify-end">
-              <div className="flex flex-1 flex-col justify-end">
-                <div className="flex flex-row gap-2 pt-5">
-                  <Button
-                    className="flex flex-1"
-                    aria-label={t("button.back", { ns: "common" })}
-                    onClick={handleBack}
-                    type="button"
-                    disabled={isDeleting}
-                  >
-                    {t("button.back", { ns: "common" })}
-                  </Button>
-                  <Button
-                    variant="destructive"
-                    className="flex flex-1 text-white"
-                    onClick={handleConfirmDelete}
-                    disabled={isDeleting}
-                  >
-                    {isDeleting ? (
-                      <div className="flex flex-row items-center gap-2">
-                        <ActivityIndicator />
-                        <span>
-                          {t(
-                            "cameraManagement.deleteCameraDialog.confirmButton",
-                          )}
-                        </span>
-                      </div>
-                    ) : (
-                      t("cameraManagement.deleteCameraDialog.confirmButton")
-                    )}
-                  </Button>
-                </div>
-              </div>
+            <DialogFooter>
+              <Button
+                aria-label={t("button.back", { ns: "common" })}
+                onClick={handleBack}
+                type="button"
+                disabled={isDeleting}
+              >
+                {t("button.back", { ns: "common" })}
+              </Button>
+              <Button
+                variant="destructive"
+                onClick={handleConfirmDelete}
+                disabled={isDeleting}
+              >
+                {isDeleting ? (
+                  <div className="flex flex-row items-center gap-2">
+                    <ActivityIndicator />
+                    <span>
+                      {t("cameraManagement.deleteCameraDialog.confirmButton")}
+                    </span>
+                  </div>
+                ) : (
+                  t("cameraManagement.deleteCameraDialog.confirmButton")
+                )}
+              </Button>
             </DialogFooter>
           </>
         )}

web/src/components/overlay/dialog/FrigatePlusDialog.tsx

@@ -173,7 +173,7 @@ export function FrigatePlusDialog({
                                 {t("button.yes", { ns: "common" })}
                               </Button>
                               <Button
-                                className="flex-1 text-white"
+                                className="flex-1"
                                 aria-label={t("button.no", { ns: "common" })}
                                 variant="destructive"
                                 onClick={() => {

web/src/components/overlay/dialog/MultiSelectDialog.tsx

@@ -7,9 +7,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { cn } from "@/lib/utils";
 import { useState } from "react";
-import { isMobile } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import FilterSwitch from "@/components/filter/FilterSwitch";
 
@@ -77,7 +75,7 @@ export default function MultiSelectDialog({
             />
           ))}
         </div>
-        <DialogFooter className={cn("pt-4", isMobile && "gap-2")}>
+        <DialogFooter className="pt-4">
           <Button type="button" onClick={() => setOpen(false)}>
             {t("button.cancel")}
           </Button>

web/src/components/overlay/dialog/OptionAndInputDialog.tsx

@@ -144,18 +144,13 @@ export default function OptionAndInputDialog({
               <label className="text-sm font-medium text-secondary-foreground">
                 {nameLabel}
               </label>
-              <Input
-                className="text-md"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-              />
+              <Input value={name} onChange={(e) => setName(e.target.value)} />
             </div>
             <div className="space-y-1">
               <label className="text-sm font-medium text-secondary-foreground">
                 {descriptionLabel}
               </label>
               <Textarea
-                className="text-md"
                 value={descriptionValue}
                 onChange={(e) => setDescriptionValue(e.target.value)}
                 rows={2}
@@ -164,10 +159,9 @@ export default function OptionAndInputDialog({
           </div>
         )}
 
-        <DialogFooter className={cn("pt-2", isMobile && "gap-2")}>
+        <DialogFooter>
           <Button
             type="button"
-            variant="outline"
             disabled={isLoading}
             onClick={() => {
               setOpen(false);

web/src/components/overlay/dialog/SearchFilterDialog.tsx

@@ -349,7 +349,7 @@ function TimeRangeFilterContent({
           </PopoverTrigger>
           <PopoverContent className="flex flex-row items-center justify-center">
             <input
-              className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+              className="mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
               id="startTime"
               type="time"
               value={selectedAfterHour}
@@ -389,7 +389,7 @@ function TimeRangeFilterContent({
           </PopoverTrigger>
           <PopoverContent className="flex flex-col items-center">
             <input
-              className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+              className="mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
               id="startTime"
               type="time"
               value={

web/src/components/overlay/dialog/TextEntryDialog.tsx

@@ -9,8 +9,6 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { cn } from "@/lib/utils";
-import { isMobile } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 
 type TextEntryDialogProps = {
@@ -63,7 +61,7 @@ export default function TextEntryDialog({
           forbiddenPattern={forbiddenPattern}
           forbiddenErrorMessage={forbiddenErrorMessage}
         >
-          <DialogFooter className={cn("pt-4", isMobile && "gap-2")}>
+          <DialogFooter>
             <Button
               type="button"
               disabled={isSaving}