consistent destructive button style

remove text-white from individual buttons and add it to the variant
This commit is contained in:
Josh Hawkins 2026-05-29 16:10:49 -05:00
parent 998cf0f2be
commit fe01807614
15 changed files with 17 additions and 31 deletions

View File

@ -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>

View File

@ -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);

View File

@ -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={() => {

View File

@ -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={() => {

View File

@ -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"

View File

@ -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",

View File

@ -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()}
>

View File

@ -567,7 +567,6 @@ function LibrarySelector({
</Button>
<Button
variant="destructive"
className="text-white"
onClick={() => {
if (confirmDelete) {
handleDeleteFace(confirmDelete);

View File

@ -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>

View File

@ -668,7 +668,6 @@ function LibrarySelector({
</Button>
<Button
variant="destructive"
className="text-white"
onClick={() => {
if (confirmDelete) {
handleDeleteCategory(confirmDelete);

View File

@ -1052,7 +1052,6 @@ export default function MotionSearchView({
</div>
<Button
variant="destructive"
className="text-white"
size="sm"
onClick={() => {
void cancelMotionSearchJob(jobId, jobCamera);

View File

@ -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")}

View File

@ -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")}

View File

@ -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();

View File

@ -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")}