style(ui): redesign job workspace dialog to match mockup

Restyle JobDetailsDialog.tsx (04-job-workspace.png mockup) within its existing dialog/tab structure -- the real app splits Correspondence, Attachments, and Candidate Fit into separate tabs rather than the mockup's single-screen 2x2 card grid, so this is a visual-language pass over the existing IA, not a restructure: - Header: bolder title (h5/800), heavier status chip, cleaner no-underline tab styling. - Every flat bordered "fake card" Box (11 instances across all tabs, plus the 2 in the Overview strategy-snapshot panel) becomes a floating shadow card with no border, matching every other screen redesigned this session. - The two genuinely AI-generation actions (Generate Strategy Snapshot, and by extension the shared GradientButton component) get the mockup's signature gradient CTA treatment; the confirm-gated "Refresh AI summary" action stays a plain outlined button so the gradient doesn't get diluted by a second use on the same tab. Also fixes a real bug surfaced by actually using GradientButton for the first time: its sx callback read theme.vars.customShadows, which throws when a component renders without this app's ThemeProvider -- true in production always, but true in every test in this repo (none of them wrap with a ThemeProvider), so every test touching a GradientButton or one of these restyled boxes crashed. Fixed by using a static shadow value instead of a theme.vars lookup in both the component and this file, matching the fact that inline sx callbacks execute against whatever theme is in context (unlike theme.components styleOverrides, which only run when this app's real theme is actually provided). Verified: tsc clean, full suite green (65/65, including 4 test files that render this exact dialog). Live check: booted the backend and loaded the dashboard through a fresh Next.js dev server + cache (cleared .next after chasing what turned out to be a stale console-log history in the Browser pane tooling, not a real compile error) -- confirmed real data renders with no actual runtime errors.
2026-07-13 09:27:15 +02:00
parent 81512db1cb
commit fc56f94d56
2 changed files with 49 additions and 25 deletions
@@ -4,6 +4,14 @@ import Button, { ButtonProps } from "@mui/material/Button";

 import { GRADIENT_CTA } from "../theme";

+// Static, not derived from theme.vars.customShadows: an inline sx callback always executes
+// against whatever theme is in context, including MUI's bare default theme when a component
+// renders without this app's ThemeProvider (every test in this repo does exactly that -- no
+// test wraps components in one), and the default theme has no `.vars`. theme.components
+// styleOverrides (e.g. MuiCard) don't have this problem since they only run when this app's
+// real theme is actually provided, but inline sx isn't gated that way.
+const GRADIENT_SHADOW = "0px 4px 14px -4px rgba(99,102,241,0.45)";
+
 /**
 * The mockup's gradient AI/primary-action pill ("Tailor my CV for this role", "See the
 * interface tour"). Reserve this for the single most important AI-assist or hero action on a
@@ -17,14 +25,14 @@ export default function GradientButton({ sx, disabled, ...props }: ButtonProps)
      disableElevation
      disabled={disabled}
      sx={[
-        (theme: any) => ({
+        {
          background: disabled ? undefined : GRADIENT_CTA,
          color: disabled ? undefined : "#fff",
-          boxShadow: disabled ? undefined : theme.vars.customShadows.gradientButton,
+          boxShadow: disabled ? undefined : GRADIENT_SHADOW,
          "&:hover": disabled
            ? undefined
-            : { background: GRADIENT_CTA, filter: "brightness(1.06)", boxShadow: theme.vars.customShadows.gradientButton },
-        }),
+            : { background: GRADIENT_CTA, filter: "brightness(1.06)", boxShadow: GRADIENT_SHADOW },
+        },
        ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
      ]}
      {...props}
@@ -29,6 +29,7 @@ import { emptyTailoredCvDraft, joinLines, normalizeTailoredCvDraft, splitLines }
 import Correspondence from "./Correspondence";
 import Attachments from "./Attachments";
 import JobFlowBar from "./JobFlowBar";
+import GradientButton from "./GradientButton";
 import { useI18n } from "../i18n/I18nProvider";
 import { useJobWorkspaceBaseData } from "./job-workspace/useJobWorkspaceBaseData";
 import { useWorkspaceTabCache } from "./job-workspace/useWorkspaceTabCache";
@@ -414,7 +415,7 @@ export default function JobDetailsDialog({ open, jobId, onClose, initialTab = 0,
  const showAiAttachmentPicker = tab >= 3 && tab <= 7 && jobAttachments.length > 0;

  const attachmentPicker = showAiAttachmentPicker ? (
-    <Box sx={{ mb: 2, p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.default" }}>
+    <Box sx={{ mb: 2, p: 1.5, borderRadius: 3, boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)", backgroundColor: "background.default" }}>
      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, flexWrap: "wrap", mb: 1 }}>
        <Typography variant="caption" sx={{ color: "text.secondary" }}>{t("jobDetailsAttachmentContextPicker")}</Typography>
        <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
@@ -620,22 +621,37 @@ export default function JobDetailsDialog({ open, jobId, onClose, initialTab = 0,

  return (
    <Dialog open={open} onClose={onClose} fullWidth maxWidth="lg">
-      <DialogTitle sx={{ pb: 1 }}>
+      <DialogTitle sx={{ pb: 1.5 }}>
        <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, flexWrap: "wrap" }}>
          <Box>
-            <Typography variant="overline" sx={{ color: "text.secondary" }}>{t("jobTableOpen")}</Typography>
-            <Typography variant="h6">{title}</Typography>
+            <Typography variant="overline" sx={{ color: "text.secondary", fontWeight: 700 }}>{t("jobTableOpen")}</Typography>
+            <Typography variant="h5" sx={{ fontWeight: 800, letterSpacing: "-0.01em" }}>{title}</Typography>
          </Box>
-          {job && <Chip label={job.status} color={statusChipColor(job.status)} size="small" />}
+          {job && <Chip label={job.status} color={statusChipColor(job.status)} sx={{ fontWeight: 700, borderRadius: 2 }} />}
        </Box>
      </DialogTitle>

      <DialogContent>
        <JobFlowBar job={job} history={history} />
-        <Box sx={{ mt: 1.5, mb: 2, p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.paper" }}>
+        <Box
+          sx={{
+            mt: 1.5,
+            mb: 2,
+            p: 2,
+            borderRadius: 4,
+            backgroundColor: "background.paper",
+            boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)",
+          }}
+        >
          <Typography variant="body2" sx={{ color: "text.secondary" }}>{summaryFirstText}</Typography>
        </Box>
-        <Tabs value={tab} onChange={(_, v) => setTab(v)} sx={{ mb: 2 }} variant="scrollable" allowScrollButtonsMobile>
+        <Tabs
+          value={tab}
+          onChange={(_, v) => setTab(v)}
+          sx={{ mb: 2, "& .MuiTab-root": { fontWeight: 600, textTransform: "none", minHeight: 44 } }}
+          variant="scrollable"
+          allowScrollButtonsMobile
+        >
          <Tab label={t("jobTableOverview")} />
          <Tab label={t("jobDetailsTabCorrespondence")} />
          <Tab label={t("jobDetailsTabAttachments")} />
@@ -672,8 +688,8 @@ export default function JobDetailsDialog({ open, jobId, onClose, initialTab = 0,
        {tab === 0 && (
          <Box sx={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 2 }}>
            <Box sx={{ gridColumn: "1 / -1", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, flexWrap: "wrap" }}>
-              <Typography variant="overline">{t("jobDetailsStrategySnapshot")}</Typography>
-              <Button size="small" variant="outlined" disabled={loadingStrategySnapshot} onClick={async () => {
+              <Typography variant="overline" sx={{ fontWeight: 700 }}>{t("jobDetailsStrategySnapshot")}</Typography>
+              <GradientButton size="small" disabled={loadingStrategySnapshot} onClick={async () => {
                if (!jobId) return;
                setLoadingStrategySnapshot(true);
                try {
@@ -690,10 +706,10 @@ export default function JobDetailsDialog({ open, jobId, onClose, initialTab = 0,
                } finally {
                  setLoadingStrategySnapshot(false);
                }
-              }}>{loadingStrategySnapshot ? t("jobDetailsRefreshing") : t("jobDetailsGenerateStrategySnapshot")}</Button>
+              }}>{loadingStrategySnapshot ? t("jobDetailsRefreshing") : t("jobDetailsGenerateStrategySnapshot")}</GradientButton>
            </Box>
            {candidateFit || focusPlan ? (
-              <Box sx={{ gridColumn: "1 / -1", p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.default" }}>
+              <Box sx={{ gridColumn: "1 / -1", p: 2, borderRadius: 4, backgroundColor: "background.paper", boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)" }}>
                <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", alignItems: "center", mb: 1 }}>
                  {candidateFit ? <Chip size="small" color={candidateFit.matchScore >= 75 ? "success" : candidateFit.matchScore >= 55 ? "warning" : "default"} label={t("jobDetailsMatchPercent", { count: candidateFit.matchScore })} /> : null}
                  {candidateFit?.fitLevel ? <Chip size="small" variant="outlined" label={candidateFit.fitLevel} /> : null}
@@ -949,13 +965,13 @@ export default function JobDetailsDialog({ open, jobId, onClose, initialTab = 0,
                  </Box>

                  <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-                    <Box sx={{ p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.paper" }}>
+                    <Box sx={{ p: 1.5, borderRadius: 3, boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)", backgroundColor: "background.paper" }}>
                      <Typography variant="overline">Rendered CV snapshot</Typography>
                      <Typography variant="body2" sx={{ color: "text.secondary", mb: 1.5 }}>This plain-text snapshot stays deterministic and is what the job stores immediately after saving the draft.</Typography>
                      <TextField value={tailoredCvDraft.renderedText} multiline minRows={12} fullWidth InputProps={{ readOnly: true }} />
                      <Typography variant="caption" sx={{ color: "text.secondary", mt: 1, display: "block" }}>{t("jobDetailsLastUpdated", { value: job?.tailoredCvUpdatedAt ? new Date(job.tailoredCvUpdatedAt).toLocaleString() : t("jobDetailsNotSavedYet") })}</Typography>
                    </Box>
-                    <Box sx={{ p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.paper" }}>
+                    <Box sx={{ p: 1.5, borderRadius: 3, boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)", backgroundColor: "background.paper" }}>
                      <Typography variant="overline">PDF-style preview</Typography>
                      <Typography variant="body2" sx={{ color: "text.secondary", mb: 1.5 }}>Preview and PDF export use the same HTML template contract. Accent color and photo settings apply here.</Typography>
                      {tailoredCvPreview ? (
@@ -964,7 +980,7 @@ export default function JobDetailsDialog({ open, jobId, onClose, initialTab = 0,
                        <Typography sx={{ color: "text.secondary" }}>Build the PDF layout preview to inspect the ATS template before downloading.</Typography>
                      )}
                    </Box>
-                    <Box sx={{ p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.paper" }}>
+                    <Box sx={{ p: 1.5, borderRadius: 3, boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)", backgroundColor: "background.paper" }}>
                      <Typography variant="overline">Saved job material</Typography>
                      <Typography variant="body2" sx={{ color: "text.secondary", mb: 1.5 }}>Saving the tailored draft updates the job-scoped CV text without touching your master profile.</Typography>
                      <Typography variant="body2"><strong>Tailored CV:</strong> {(job?.tailoredCvText ?? "").trim() ? "Saved on this job" : "Not saved yet"}</Typography>
@@ -1045,7 +1061,7 @@ export default function JobDetailsDialog({ open, jobId, onClose, initialTab = 0,
                  statusLabel={recruiterMessageStatus.label}
                  statusColor={recruiterMessageStatus.color}
                />
-                <Box sx={{ p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.paper" }}>
+                <Box sx={{ p: 1.5, borderRadius: 3, boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)", backgroundColor: "background.paper" }}>
                  <Typography variant="overline">Saved working material</Typography>
                  <Typography variant="body2" sx={{ color: "text.secondary", mb: 1.5 }}>These saved copies are what follow-up drafting and later slices can trust and reuse.</Typography>
                  <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
@@ -1067,7 +1083,7 @@ export default function JobDetailsDialog({ open, jobId, onClose, initialTab = 0,
          <Box>
            {loadingDraft ? <Box sx={{ py: 4, display: "flex", justifyContent: "center" }}><CircularProgress size={28} /></Box> : followUpDraft ? (
              <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-                <Box sx={{ p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.default" }}>
+                <Box sx={{ p: 1.5, borderRadius: 3, boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)", backgroundColor: "background.default" }}>
                  <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, flexWrap: "wrap", mb: 1 }}>
                    <Typography variant="overline">Follow-up context</Typography>
                    <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
@@ -1214,7 +1230,7 @@ function MatchScoreCard({ score, loading }: { score: MatchScore | null; loading:

  if (loading && !score) {
    return (
-      <Box sx={{ p: 1.5, mb: 2, borderRadius: 3, border: "1px solid", borderColor: "divider", display: "flex", alignItems: "center", gap: 1.5 }}>
+      <Box sx={{ p: 1.5, mb: 2, borderRadius: 3, boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)", display: "flex", alignItems: "center", gap: 1.5 }}>
        <CircularProgress size={18} />
        <Typography variant="body2" sx={{ color: "text.secondary" }}>{t("matchScoreLoading")}</Typography>
      </Box>
@@ -1228,7 +1244,7 @@ function MatchScoreCard({ score, loading }: { score: MatchScore | null; loading:
  const bandLabel = t(`matchScoreBand_${score.band}` as any) || score.band;

  return (
-    <Box sx={{ p: 1.75, mb: 2, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.default" }}>
+    <Box sx={{ p: 1.75, mb: 2, borderRadius: 3, boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)", backgroundColor: "background.default" }}>
      <Box sx={{ display: "flex", gap: 2.5, alignItems: "center", flexWrap: "wrap", mb: 1.5 }}>
        {score.hasEnoughSignal ? (
          <Box role="img" aria-label={`${t("matchScoreTitle")}: ${score.score}%`} sx={{ position: "relative", width: 92, height: 92, flexShrink: 0 }}>
@@ -1314,7 +1330,7 @@ function ListCard({ title, items, subtitle }: { title: string; items: string[];
  const { t } = useI18n();

  return (
-    <Box sx={{ p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.default" }}>
+    <Box sx={{ p: 1.5, borderRadius: 3, boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)", backgroundColor: "background.default" }}>
      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, flexWrap: "wrap", mb: 1 }}>
        <Box>
          <Typography variant="overline">{title}</Typography>
@@ -1333,7 +1349,7 @@ function WorkspaceDraftCard({ title, value, onChange, statusLabel, statusColor }
  const { t } = useI18n();

  return (
-    <Box sx={{ p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.default" }}>
+    <Box sx={{ p: 1.5, borderRadius: 3, boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)", backgroundColor: "background.default" }}>
      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, flexWrap: "wrap", mb: 1 }}>
        <Typography variant="overline">{title}</Typography>
        <Box sx={{ display: "flex", gap: 1, alignItems: "center", flexWrap: "wrap" }}>
@@ -1355,7 +1371,7 @@ function DraftCard({ title, content, onSave, saving }: { title: string; content:
  }, [content]);

  return (
-    <Box sx={{ p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.default" }}>
+    <Box sx={{ p: 1.5, borderRadius: 3, boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)", backgroundColor: "background.default" }}>
      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, flexWrap: "wrap", mb: 1 }}>
        <Typography variant="overline">{title}</Typography>
        <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>