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 = {

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;
 

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) {