From fe01807614a75f9b92150d4acb42e62182ba6d39 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 29 May 2026 16:10:49 -0500
Subject: [PATCH] consistent destructive button style

remove text-white from individual buttons and add it to the variant
---
 .../classification/wizard/Step3ChooseExamples.tsx          | 4 ++--
 web/src/components/config-form/sections/BaseSection.tsx    | 4 ++--
 web/src/components/overlay/detail/SearchDetailDialog.tsx   | 2 +-
 web/src/components/overlay/dialog/FrigatePlusDialog.tsx    | 2 +-
 web/src/components/settings/PolygonItem.tsx                | 3 ++-
 web/src/components/ui/button.tsx                           | 3 +--
 web/src/pages/Exports.tsx                                  | 2 --
 web/src/pages/FaceLibrary.tsx                              | 1 -
 web/src/pages/Replay.tsx                                   | 7 ++-----
 web/src/views/classification/ModelTrainingView.tsx         | 1 -
 web/src/views/motion-search/MotionSearchView.tsx           | 1 -
 web/src/views/settings/CameraManagementView.tsx            | 2 +-
 web/src/views/settings/Go2RtcStreamsSettingsView.tsx       | 5 +----
 web/src/views/settings/ProfilesView.tsx                    | 4 ++--
 web/src/views/settings/RegionGridSettingsView.tsx          | 7 ++-----
 15 files changed, 17 insertions(+), 31 deletions(-)

diff --git a/web/src/components/classification/wizard/Step3ChooseExamples.tsx b/web/src/components/classification/wizard/Step3ChooseExamples.tsx
index d2861affca..75f4d263f0 100644
--- a/web/src/components/classification/wizard/Step3ChooseExamples.tsx
+++ b/web/src/components/classification/wizard/Step3ChooseExamples.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { useTranslation } from "react-i18next";
 import { useState, useEffect, useCallback, useMemo } from "react";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
@@ -540,7 +540,7 @@ export default function Step3ChooseExamples({
             </AlertDialogCancel>
             <AlertDialogAction
               onClick={doRefresh}
-              className="bg-destructive text-white hover:bg-destructive/90"
+              className={cn(buttonVariants({ variant: "destructive" }))}
             >
               {t("button.continue", { ns: "common" })}
             </AlertDialogAction>
diff --git a/web/src/components/config-form/sections/BaseSection.tsx b/web/src/components/config-form/sections/BaseSection.tsx
index b3261a5cc4..685b06ebe3 100644
--- a/web/src/components/config-form/sections/BaseSection.tsx
+++ b/web/src/components/config-form/sections/BaseSection.tsx
@@ -32,7 +32,7 @@ import { ProfileOverridesBadge } from "./ProfileOverridesBadge";
 import { useSectionSchema } from "@/hooks/use-config-schema";
 import type { FrigateConfig } from "@/types/frigateConfig";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { LuChevronDown, LuChevronRight } from "react-icons/lu";
 import Heading from "@/components/ui/heading";
 import get from "lodash/get";
@@ -1236,7 +1236,7 @@ export function ConfigSection({
               {t("button.cancel", { ns: "common" })}
             </AlertDialogCancel>
             <AlertDialogAction
-              className="bg-destructive text-white hover:bg-destructive/90"
+              className={cn(buttonVariants({ variant: "destructive" }))}
               onClick={() => {
                 onDeleteProfileSection?.();
                 setIsDeleteProfileDialogOpen(false);
diff --git a/web/src/components/overlay/detail/SearchDetailDialog.tsx b/web/src/components/overlay/detail/SearchDetailDialog.tsx
index 0747e6d08e..518b7e69e6 100644
--- a/web/src/components/overlay/detail/SearchDetailDialog.tsx
+++ b/web/src/components/overlay/detail/SearchDetailDialog.tsx
@@ -1569,7 +1569,7 @@ function ObjectDetailsTab({
                       {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={() => {
diff --git a/web/src/components/overlay/dialog/FrigatePlusDialog.tsx b/web/src/components/overlay/dialog/FrigatePlusDialog.tsx
index 33ae58f88a..d1737df8fa 100644
--- a/web/src/components/overlay/dialog/FrigatePlusDialog.tsx
+++ b/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={() => {
diff --git a/web/src/components/settings/PolygonItem.tsx b/web/src/components/settings/PolygonItem.tsx
index 803cd49fd2..ffd85eaec6 100644
--- a/web/src/components/settings/PolygonItem.tsx
+++ b/web/src/components/settings/PolygonItem.tsx
@@ -29,6 +29,7 @@ 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";
@@ -508,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"
diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
index 685ab92a25..55c5405922 100644
--- a/web/src/components/ui/button.tsx
+++ b/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",
diff --git a/web/src/pages/Exports.tsx b/web/src/pages/Exports.tsx
index 22cfb7ae5e..dc77a302b8 100644
--- a/web/src/pages/Exports.tsx
+++ b/web/src/pages/Exports.tsx
@@ -608,7 +608,6 @@ function Exports() {
               {t("button.cancel", { ns: "common" })}
             </AlertDialogCancel>
             <Button
-              className="text-white"
               aria-label="Delete Export"
               variant="destructive"
               onClick={() => onHandleDelete()}
@@ -658,7 +657,6 @@ function Exports() {
               {t("button.cancel", { ns: "common" })}
             </AlertDialogCancel>
             <Button
-              className="text-white"
               variant="destructive"
               onClick={() => void handleDeleteCase()}
             >
diff --git a/web/src/pages/FaceLibrary.tsx b/web/src/pages/FaceLibrary.tsx
index a57196327a..f84af78046 100644
--- a/web/src/pages/FaceLibrary.tsx
+++ b/web/src/pages/FaceLibrary.tsx
@@ -567,7 +567,6 @@ function LibrarySelector({
             </Button>
             <Button
               variant="destructive"
-              className="text-white"
               onClick={() => {
                 if (confirmDelete) {
                   handleDeleteFace(confirmDelete);
diff --git a/web/src/pages/Replay.tsx b/web/src/pages/Replay.tsx
index 549d0b46ef..9de8bb51c7 100644
--- a/web/src/pages/Replay.tsx
+++ b/web/src/pages/Replay.tsx
@@ -332,7 +332,7 @@ export default function Replay() {
               <Button
                 variant="destructive"
                 size="sm"
-                className="flex items-center gap-2 text-white"
+                className="flex items-center gap-2"
                 disabled={isStopping}
               >
                 {isStopping && <ActivityIndicator className="size-4" />}
@@ -355,10 +355,7 @@ export default function Replay() {
                 </AlertDialogCancel>
                 <AlertDialogAction
                   onClick={handleStop}
-                  className={cn(
-                    buttonVariants({ variant: "destructive" }),
-                    "text-white",
-                  )}
+                  className={cn(buttonVariants({ variant: "destructive" }))}
                 >
                   {t("page.confirmStop.confirm")}
                 </AlertDialogAction>
diff --git a/web/src/views/classification/ModelTrainingView.tsx b/web/src/views/classification/ModelTrainingView.tsx
index dd4f3c9c00..cb3ad0b608 100644
--- a/web/src/views/classification/ModelTrainingView.tsx
+++ b/web/src/views/classification/ModelTrainingView.tsx
@@ -668,7 +668,6 @@ function LibrarySelector({
                 </Button>
                 <Button
                   variant="destructive"
-                  className="text-white"
                   onClick={() => {
                     if (confirmDelete) {
                       handleDeleteCategory(confirmDelete);
diff --git a/web/src/views/motion-search/MotionSearchView.tsx b/web/src/views/motion-search/MotionSearchView.tsx
index 8a5ce680d7..f3a6592e2f 100644
--- a/web/src/views/motion-search/MotionSearchView.tsx
+++ b/web/src/views/motion-search/MotionSearchView.tsx
@@ -1052,7 +1052,6 @@ export default function MotionSearchView({
               </div>
               <Button
                 variant="destructive"
-                className="text-white"
                 size="sm"
                 onClick={() => {
                   void cancelMotionSearchJob(jobId, jobCamera);
diff --git a/web/src/views/settings/CameraManagementView.tsx b/web/src/views/settings/CameraManagementView.tsx
index a48383f12c..db8d5fc3b8 100644
--- a/web/src/views/settings/CameraManagementView.tsx
+++ b/web/src/views/settings/CameraManagementView.tsx
@@ -250,7 +250,7 @@ export default function CameraManagementView({
                 <Button
                   variant="destructive"
                   onClick={() => setShowDeleteDialog(true)}
-                  className="mb-2 flex max-w-48 items-center gap-2 text-white"
+                  className="mb-2 flex max-w-48 items-center gap-2"
                 >
                   <LuTrash2 className="h-4 w-4" />
                   {t("cameraManagement.deleteCamera")}
diff --git a/web/src/views/settings/Go2RtcStreamsSettingsView.tsx b/web/src/views/settings/Go2RtcStreamsSettingsView.tsx
index 34bdeb1546..f1bf2b360e 100644
--- a/web/src/views/settings/Go2RtcStreamsSettingsView.tsx
+++ b/web/src/views/settings/Go2RtcStreamsSettingsView.tsx
@@ -446,10 +446,7 @@ export default function Go2RtcStreamsSettingsView({
               {t("button.cancel", { ns: "common" })}
             </AlertDialogCancel>
             <AlertDialogAction
-              className={cn(
-                buttonVariants({ variant: "destructive" }),
-                "text-white",
-              )}
+              className={cn(buttonVariants({ variant: "destructive" }))}
               onClick={() => deleteDialog && deleteStream(deleteDialog)}
             >
               {t("go2rtcStreams.deleteStream")}
diff --git a/web/src/views/settings/ProfilesView.tsx b/web/src/views/settings/ProfilesView.tsx
index 4c97b1bb07..9e9bf459fa 100644
--- a/web/src/views/settings/ProfilesView.tsx
+++ b/web/src/views/settings/ProfilesView.tsx
@@ -24,7 +24,7 @@ import { resolveCameraName } from "@/hooks/use-camera-friendly-name";
 import { useDocDomain } from "@/hooks/use-doc-domain";
 import { cn } from "@/lib/utils";
 import Heading from "@/components/ui/heading";
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
 import NameAndIdFields from "@/components/input/NameAndIdFields";
@@ -708,7 +708,7 @@ export default function ProfilesView({
               {t("button.cancel", { ns: "common" })}
             </AlertDialogCancel>
             <AlertDialogAction
-              className="bg-destructive text-white hover:bg-destructive/90"
+              className={cn(buttonVariants({ variant: "destructive" }))}
               onClick={(e) => {
                 e.preventDefault();
                 handleDeleteProfile();
diff --git a/web/src/views/settings/RegionGridSettingsView.tsx b/web/src/views/settings/RegionGridSettingsView.tsx
index a7ecd5c4d9..32c8524e60 100644
--- a/web/src/views/settings/RegionGridSettingsView.tsx
+++ b/web/src/views/settings/RegionGridSettingsView.tsx
@@ -83,7 +83,7 @@ export default function RegionGridSettingsView({
               onClick={() => setIsConfirmOpen(true)}
               disabled={isClearing}
               variant="destructive"
-              className="flex flex-1 text-white md:max-w-sm"
+              className="flex flex-1 md:max-w-sm"
             >
               {t("maintenance.regionGrid.clear")}
             </Button>
@@ -106,10 +106,7 @@ export default function RegionGridSettingsView({
               {t("button.cancel", { ns: "common" })}
             </AlertDialogCancel>
             <AlertDialogAction
-              className={cn(
-                buttonVariants({ variant: "destructive" }),
-                "text-white",
-              )}
+              className={cn(buttonVariants({ variant: "destructive" }))}
               onClick={handleClear}
             >
               {t("maintenance.regionGrid.clear")}