From e25b46d51c66f79a98cc8723fac3c15b8cd4760e Mon Sep 17 00:00:00 2001
From: cesnimda <connor.babbington@cesnimda.co.uk>
Date: Sun, 22 Mar 2026 14:22:13 +0100
Subject: [PATCH] style: polish confirmation and prompt dialog experience

---
 job-tracker-ui/src/confirm.tsx | 5 ++++-
 job-tracker-ui/src/prompt.tsx  | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/job-tracker-ui/src/confirm.tsx b/job-tracker-ui/src/confirm.tsx
index 6d50f1a..28476ff 100644
--- a/job-tracker-ui/src/confirm.tsx
+++ b/job-tracker-ui/src/confirm.tsx
@@ -1,5 +1,5 @@
 import React, { createContext, useCallback, useContext, useMemo, useState } from "react";
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@mui/material";
+import { Alert, Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@mui/material";
 
 type ConfirmOptions = {
   title?: string;
@@ -59,6 +59,9 @@ export function ConfirmProvider({ children }: { children: React.ReactNode }) {
       <Dialog open={state.open} onClose={() => closeWith(false)} fullWidth maxWidth="xs">
         <DialogTitle>{state.title}</DialogTitle>
         <DialogContent>
+          <Alert severity={state.destructive ? "warning" : "info"} variant="outlined" sx={{ mb: 2 }}>
+            {state.destructive ? "This action may be hard to undo." : "Please confirm this action."}
+          </Alert>
           <Typography sx={{ color: "text.secondary" }}>{state.message}</Typography>
         </DialogContent>
         <DialogActions>
diff --git a/job-tracker-ui/src/prompt.tsx b/job-tracker-ui/src/prompt.tsx
index c13683a..183119d 100644
--- a/job-tracker-ui/src/prompt.tsx
+++ b/job-tracker-ui/src/prompt.tsx
@@ -62,7 +62,7 @@ export function PromptProvider({ children }: { children: React.ReactNode }) {
         <DialogTitle>{state.title}</DialogTitle>
         <DialogContent>
           <Typography sx={{ color: "text.secondary", mb: 1.5 }}>{state.message}</Typography>
-          <TextField autoFocus fullWidth value={value} onChange={(e) => setValue(e.target.value)} />
+          <TextField autoFocus fullWidth value={value} onChange={(e) => setValue(e.target.value)} inputProps={{ maxLength: 180 }} helperText={`${value.length}/180`} />
         </DialogContent>
         <DialogActions>
           <Button onClick={() => closeWith(null)}>{state.cancelLabel}</Button>