Superminaren
/
kvm
mirror of https://github.com/jetkvm/kvm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: update ConfirmDialog component styles and icons

This commit is contained in:
Adam Shiervani 2025-10-14 15:50:34 +02:00
parent 9b46209f1b
commit 710f082b15
1 changed files with 18 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
ui/src/components/ConfirmDialog.tsx
View File

@ -1,10 +1,10 @@
import { CheckCircleIcon } from "@heroicons/react/24/outline";
import { CloseButton } from "@headlessui/react"; import { CloseButton } from "@headlessui/react";
import { LuInfo, LuOctagonAlert, LuTriangleAlert } from "react-icons/lu"; import { LuCircleAlert, LuInfo, LuTriangleAlert } from "react-icons/lu";
import { Button } from "@/components/Button"; import { Button } from "@/components/Button";
import Modal from "@/components/Modal"; import Modal from "@/components/Modal";
import { cx } from "@/cva.config"; import { cx } from "@/cva.config";
type Variant = "danger" | "success" | "warning" | "info"; type Variant = "danger" | "success" | "warning" | "info";
interface ConfirmDialogProps { interface ConfirmDialogProps {
@ -21,27 +21,23 @@ interface ConfirmDialogProps {
const variantConfig = { const variantConfig = {
danger: { danger: {
icon: LuOctagonAlert, icon: LuCircleAlert,
iconClass: "text-red-600", iconClass: "text-red-600 dark:text-red-400",
iconBgClass: "bg-red-100 border border-red-500/90",
buttonTheme: "danger", buttonTheme: "danger",
}, },
success: { success: {
icon: CheckCircleIcon, icon: LuCircleAlert,
iconClass: "text-green-600", iconClass: "text-emerald-600 dark:text-emerald-400",
iconBgClass: "bg-green-100 border border-green-500/90",
buttonTheme: "primary", buttonTheme: "primary",
}, },
warning: { warning: {
icon: LuTriangleAlert, icon: LuTriangleAlert,
iconClass: "text-yellow-600", iconClass: "text-amber-600 dark:text-amber-400",
iconBgClass: "bg-yellow-100 border border-yellow-500/90",
buttonTheme: "primary", buttonTheme: "primary",
}, },
info: { info: {
icon: LuInfo, icon: LuInfo,
iconClass: "text-blue-600", iconClass: "text-slate-700 dark:text-slate-300",
iconBgClass: "bg-blue-100 border border-blue-500/90",
buttonTheme: "primary", buttonTheme: "primary",
}, },
} as Record< } as Record<
@ -49,7 +45,6 @@ const variantConfig = {
{ {
icon: React.ElementType; icon: React.ElementType;
iconClass: string; iconClass: string;
iconBgClass: string;
buttonTheme: "danger" | "primary" | "blank" | "light" | "lightDanger"; buttonTheme: "danger" | "primary" | "blank" | "light" | "lightDanger";
} }
>; >;
@ -65,7 +60,7 @@ export function ConfirmDialog({
onConfirm, onConfirm,
isConfirming = false, isConfirming = false,
}: ConfirmDialogProps) { }: ConfirmDialogProps) {
const { icon: Icon, iconClass, iconBgClass, buttonTheme } = variantConfig[variant]; const { icon: Icon, iconClass, buttonTheme } = variantConfig[variant];
const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => { const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
if (e.key === "Escape") { if (e.key === "Escape") {
@ -77,29 +72,22 @@ export function ConfirmDialog({
return ( return (
<div onKeyDown={handleKeyDown}> <div onKeyDown={handleKeyDown}>
<Modal open={open} onClose={onClose}> <Modal open={open} onClose={onClose}>
<div className="mx-auto max-w-xl px-4 transition-all duration-300 ease-in-out"> <div className="mx-auto max-w-md px-4 transition-all duration-300 ease-in-out">
<div className="pointer-events-auto relative w-full overflow-hidden rounded-lg bg-white p-6 text-left align-middle shadow-xl transition-all dark:bg-slate-800"> <div className="pointer-events-auto relative w-full overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm transition-all dark:border-slate-800 dark:bg-slate-900">
<div className="space-y-4"> <div className="p-6">
<div className="sm:flex sm:items-start"> <div className="flex items-start gap-3.5">
<div <Icon aria-hidden="true" className={cx("size-[18px] shrink-0 mt-[2px]", iconClass)} />
className={cx( <div className="flex-1 min-w-0 space-y-2">
"mx-auto flex size-12 shrink-0 items-center justify-center rounded-full sm:mx-0 sm:size-10", <h2 className="font-semibold text-slate-950 dark:text-white">
iconBgClass,
)}
>
<Icon aria-hidden="true" className={cx("size-6", iconClass)} />
</div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h2 className="text-lg leading-tight font-bold text-black dark:text-white">
{title} {title}
</h2> </h2>
<div className="mt-2 text-sm leading-snug text-slate-600 dark:text-slate-400"> <div className="text-sm text-slate-700 dark:text-slate-300">
{description} {description}
</div> </div>
</div> </div>
</div> </div>
<div className="flex justify-end gap-x-2" autoFocus> <div className="mt-6 flex justify-end gap-2">
{cancelText && ( {cancelText && (
<CloseButton as={Button} size="SM" theme="blank" text={cancelText} /> <CloseButton as={Button} size="SM" theme="blank" text={cancelText} />
)} )}