Polish UI, harden company creation, and add error pages

job-tracker-ui/src/theme.ts

@@ -24,7 +24,7 @@ function buildLightPalette(accentColor: string): PaletteLike {
   const disabledBackground = "#E4E1E6";
 
   return {
-    primary: buildPrimary(accentColor || "#606BDF"),
+    primary: buildPrimary(accentColor || "#15803D"),
     secondary: {
       lighter: "#E0E0FF",
       light: "#C3C4E4",
@@ -47,11 +47,11 @@ function buildLightPalette(accentColor: string): PaletteLike {
       darker: "#4A2800",
     },
     success: {
-      lighter: "#C8FFC0",
-      light: "#B6F2AF",
-      main: "#22892F",
-      dark: "#006E1C",
-      darker: "#00390A",
+      lighter: "#DCFCE7",
+      light: "#BBF7D0",
+      main: "#16A34A",
+      dark: "#15803D",
+      darker: "#14532D",
     },
     info: {
       lighter: "#D4F7FF",
@@ -80,7 +80,7 @@ function buildLightPalette(accentColor: string): PaletteLike {
     divider,
     background: { default: background, paper: background },
     action: {
-      hover: alpha(secondaryMain, 0.05),
+      hover: alpha(accentColor || "#15803D", 0.05),
       disabled: alpha(disabled, 0.6),
       disabledBackground: alpha(disabledBackground, 0.9),
     },
@@ -99,7 +99,7 @@ function buildDarkPalette(accentColor: string): PaletteLike {
   const disabledBackground = alpha("#FFFFFF", 0.08);
 
   return {
-    primary: buildPrimary(accentColor || "#606BDF"),
+    primary: buildPrimary(accentColor || "#15803D"),
     secondary: {
       lighter: alpha(secondaryMain, 0.22),
       light: alpha(secondaryMain, 0.14),
@@ -122,8 +122,8 @@ function buildDarkPalette(accentColor: string): PaletteLike {
       darker: "#FFE1B8",
     },
     success: {
-      lighter: alpha("#22892F", 0.18),
-      light: alpha("#22892F", 0.12),
+      lighter: alpha("#16A34A", 0.18),
+      light: alpha("#16A34A", 0.12),
       main: "#4ADE80",
       dark: "#22C55E",
       darker: "#BBF7D0",
@@ -155,7 +155,7 @@ function buildDarkPalette(accentColor: string): PaletteLike {
     divider,
     background: { default: bg, paper },
     action: {
-      hover: alpha("#FFFFFF", 0.06),
+      hover: alpha(accentColor || "#15803D", 0.16),
       disabled: alpha("#FFFFFF", 0.5),
       disabledBackground,
     },
@@ -189,7 +189,6 @@ function buildTypography() {
     body2: { fontWeight: 400, fontSize: 13, lineHeight: "17px" },
     caption: { fontWeight: 400, fontSize: 12, lineHeight: "16px", letterSpacing: 0 },
     overline: { fontWeight: 600, fontSize: 11, lineHeight: "14px", letterSpacing: "0.08em", textTransform: "uppercase" as const },
-    // Saasable uses caption1; keep as a custom variant for internal usage if needed.
     caption1: { fontWeight: 500, fontSize: 12, lineHeight: "16px", letterSpacing: 0 },
     button: { textTransform: "capitalize" as const },
   };
@@ -277,8 +276,30 @@ export const getTheme = (_mode: "light" | "dark", accentColor: string) => {
           },
         }),
         notchedOutline: ({ theme }: any) => ({ borderColor: theme.vars.palette.divider }),
-        multiline: { padding: 10 },
-        input: { paddingLeft: 0, paddingRight: 0 },
+        multiline: {
+          padding: 10,
+          alignItems: "flex-start",
+        },
+        input: {
+          paddingLeft: 0,
+          paddingRight: 0,
+          paddingTop: 10,
+          paddingBottom: 10,
+        },
+        inputMultiline: {
+          paddingTop: 0,
+          paddingBottom: 0,
+          lineHeight: 1.5,
+        },
+      },
+    },
+    MuiInputBase: {
+      styleOverrides: {
+        inputMultiline: {
+          "&::placeholder": {
+            opacity: 0.72,
+          },
+        },
       },
     },
     MuiListItemButton: {