gorkem-bwl
fef3f2c294
Dialog component:
- Title bar gets a subtle background tint + bottom border. Title is
variant=h2 weight=600. Description tucks under the title with
variant=body1 secondary color (replaces MUI's DialogContentText).
- Action bar gets a matching subtle tint + top border. Cancel is now
outlined (was contained-error, which made every modal's Cancel button
look destructive). Confirm keeps its color (primary by default,
caller can pass error for destructive flows).
- Content area sits between with its own breathing room baked in, so
callers no longer need mt={theme.spacing(...)} workarounds.
- The cancelColor prop is removed; sites that genuinely need a
destructive Cancel can use confirmColor='error' on the Confirm button
instead.
NoticeBanner design-element:
- Extracted from the inline alert pattern in PageSpeedKeyPriorityFallback
into a reusable component with severity=info|warning|error.
- Refactored PageSpeedKeyPriorityFallback to use it.
DialogResolution.tsx: drop the now-removed cancelColor prop and the
mt-Box wrapper that's no longer needed (Dialog provides the spacing).
66 lines
1.5 KiB
TypeScript
66 lines
1.5 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import { Dialog, TextField } from "@/Components/inputs";
|
|
import { usePut } from "@/Hooks/UseApi";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
interface DialogResolutionProps {
|
|
open: boolean;
|
|
incidentId: string | null;
|
|
onClose: () => void;
|
|
onResolved?: () => void;
|
|
}
|
|
|
|
export const DialogResolution = ({
|
|
open,
|
|
incidentId,
|
|
onClose,
|
|
onResolved,
|
|
}: DialogResolutionProps) => {
|
|
const { t } = useTranslation();
|
|
const [comment, setComment] = useState("");
|
|
const { put: resolveIncident, loading: isResolving } = usePut();
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
setComment("");
|
|
}
|
|
}, [open]);
|
|
|
|
const handleCancel = () => {
|
|
onClose();
|
|
};
|
|
|
|
const handleConfirm = async () => {
|
|
if (!incidentId) return;
|
|
const body = comment.trim() ? { comment: comment.trim() } : {};
|
|
const result = await resolveIncident(`/incidents/${incidentId}/resolve`, body);
|
|
if (result) {
|
|
onClose();
|
|
onResolved?.();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog
|
|
open={open}
|
|
title={t("pages.incidents.dialog.resolveIncident.title")}
|
|
onCancel={handleCancel}
|
|
onConfirm={handleConfirm}
|
|
confirmColor="error"
|
|
loading={isResolving}
|
|
maxWidth="sm"
|
|
fullWidth
|
|
>
|
|
<TextField
|
|
fieldLabel={t("pages.incidents.dialog.resolveIncident.option.comment.label")}
|
|
placeholder={t(
|
|
"pages.incidents.dialog.resolveIncident.option.comment.placeholder"
|
|
)}
|
|
value={comment}
|
|
onChange={(e) => setComment(e.target.value)}
|
|
fullWidth
|
|
/>
|
|
</Dialog>
|
|
);
|
|
};
|