style: polish confirmation and prompt dialog experience

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>

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>