From e5e2c65709b8ee07758a4105cd8888d264829fd3 Mon Sep 17 00:00:00 2001
From: cesnimda <connor.babbington@cesnimda.co.uk>
Date: Sun, 5 Jul 2026 11:13:22 +0200
Subject: [PATCH] feat(ui): adopt JobTrack mockup design tokens (indigo brand,
 light dashboard)

First UI slice toward the product mockups. Shifts the shared MUI theme to match
the mockup identity without restructuring components:
- Default accent -> indigo #6366f1 (drives primary buttons, active nav, and the
  Applied/Interview status colours). Users with a custom accent keep theirs.
- Light app background -> #F4F6FB with white paper, giving the layered dashboard
  look (cards/inputs sit above a soft grey canvas).
- Global corner radius 8 -> 10 to match the mockups' rounder cards.
- Accent picker: offer indigo/cyan/violet presets first (kept #15803d).

Behaviour-only theme change. Frontend suite: 38/39 pass; the 1 failure
(end-to-end-trust-loop tailored-CV) is pre-existing on this branch (verified by
running it on the clean tree) and unrelated.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 job-tracker-ui/src/components/SettingsView.tsx |  2 +-
 job-tracker-ui/src/theme.ts                    | 14 ++++++++------
 job-tracker-ui/src/themePrefs.ts               |  2 +-
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/job-tracker-ui/src/components/SettingsView.tsx b/job-tracker-ui/src/components/SettingsView.tsx
index 30ee4d9..f5bde8d 100644
--- a/job-tracker-ui/src/components/SettingsView.tsx
+++ b/job-tracker-ui/src/components/SettingsView.tsx
@@ -45,7 +45,7 @@ function TabPanel({ value, index, children }: { value: number; index: number; ch
   return <Box sx={{ mt: 2 }}>{children}</Box>;
 }
 
-const ACCENTS = ["#15803d", "#16a34a", "#22c55e", "#0f766e", "#2563eb", "#65a30d", "#8b5cf6", "#f97316"];
+const ACCENTS = ["#6366f1", "#22d3ee", "#2563eb", "#8b5cf6", "#15803d", "#16a34a", "#0f766e", "#f97316"];
 const NOTIFICATION_PREFS_KEY = "settings.notificationPrefs";
 
 type NotificationPrefs = {
diff --git a/job-tracker-ui/src/theme.ts b/job-tracker-ui/src/theme.ts
index d3a85a5..39de651 100644
--- a/job-tracker-ui/src/theme.ts
+++ b/job-tracker-ui/src/theme.ts
@@ -24,7 +24,7 @@ function buildLightPalette(accentColor: string): PaletteLike {
   const disabledBackground = "#E4E1E6";
 
   return {
-    primary: buildPrimary(accentColor || "#15803D"),
+    primary: buildPrimary(accentColor || "#6366F1"),
     secondary: {
       lighter: "#E0E0FF",
       light: "#C3C4E4",
@@ -78,9 +78,11 @@ function buildLightPalette(accentColor: string): PaletteLike {
       disabled,
     },
     divider,
-    background: { default: background, paper: background },
+    // Soft grey app background with white paper gives the layered dashboard look
+    // from the product mockups; cards/inputs (paper) sit above it.
+    background: { default: "#F4F6FB", paper: background },
     action: {
-      hover: alpha(accentColor || "#15803D", 0.05),
+      hover: alpha(accentColor || "#6366F1", 0.05),
       disabled: alpha(disabled, 0.6),
       disabledBackground: alpha(disabledBackground, 0.9),
     },
@@ -99,7 +101,7 @@ function buildDarkPalette(accentColor: string): PaletteLike {
   const disabledBackground = alpha("#FFFFFF", 0.08);
 
   return {
-    primary: buildPrimary(accentColor || "#15803D"),
+    primary: buildPrimary(accentColor || "#6366F1"),
     secondary: {
       lighter: alpha(secondaryMain, 0.22),
       light: alpha(secondaryMain, 0.14),
@@ -155,7 +157,7 @@ function buildDarkPalette(accentColor: string): PaletteLike {
     divider,
     background: { default: bg, paper },
     action: {
-      hover: alpha(accentColor || "#15803D", 0.16),
+      hover: alpha(accentColor || "#6366F1", 0.16),
       disabled: alpha("#FFFFFF", 0.5),
       disabledBackground,
     },
@@ -216,7 +218,7 @@ export const getTheme = (_mode: "light" | "dark", accentColor: string) => {
       light: { palette: lightPalette, customShadows: buildCustomShadows(lightPalette) },
       dark: { palette: darkPalette, customShadows: buildCustomShadows(darkPalette) },
     },
-    shape: { borderRadius: 8 },
+    shape: { borderRadius: 10 },
     typography: buildTypography() as any,
   } as any) as any;
 
diff --git a/job-tracker-ui/src/themePrefs.ts b/job-tracker-ui/src/themePrefs.ts
index f694ce4..45bc434 100644
--- a/job-tracker-ui/src/themePrefs.ts
+++ b/job-tracker-ui/src/themePrefs.ts
@@ -23,7 +23,7 @@ export function setThemeModePref(v: ThemeModePref) {
 export function getAccentColor(): string {
   const raw = window.localStorage.getItem(k("accentColor"));
   if (raw && /^#[0-9a-fA-F]{6}$/.test(raw)) return raw;
-  return "#15803d";
+  return "#6366f1";
 }
 
 export function setAccentColor(v: string) {