From 24c7d684909c2e3f1fa688b35c379d706d6a1048 Mon Sep 17 00:00:00 2001
From: cesnimda <connor.babbington@cesnimda.co.uk>
Date: Mon, 13 Jul 2026 14:28:22 +0200
Subject: [PATCH] style(ui): float dialogs/menus/popovers, round chips and
 tooltips globally

Every Dialog/Menu/Popover in the app renders its content via MuiPaper,
which is deliberately kept flat (1px border, no shadow -- Paper is
used too broadly, e.g. as a plain content divider, to safely restyle
globally). That meant every modal (confirm/prompt, AddJobModal,
EditJobDialog, JobDetailsDialog) and every dropdown/Select menu in the
app was still rendering flat-bordered despite every other screen this
session moving to the floating-shadow mockup look.

Added targeted MuiDialog/MuiPopover/MuiMenu paper overrides -- these
win on specificity over MuiPaper's own defaults without touching
MuiPaper itself, so every dialog and dropdown in the app picks up the
rounded floating-shadow treatment from this one change instead of
patching each dialog file individually. Also added MuiChip (full pill
radius, matching every status/skill pill in the mockups) and
MuiTooltip (matching corner radius) overrides, and gave the toast
Snackbar/Alert a consistent radius + weight.
---
 job-tracker-ui/src/theme.ts  | 50 ++++++++++++++++++++++++++++++++++++
 job-tracker-ui/src/toast.tsx |  2 +-
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/job-tracker-ui/src/theme.ts b/job-tracker-ui/src/theme.ts
index 7707c62..e8d143f 100644
--- a/job-tracker-ui/src/theme.ts
+++ b/job-tracker-ui/src/theme.ts
@@ -278,6 +278,39 @@ export const getTheme = (_mode: "light" | "dark") => {
         }),
       },
     },
+    // Every Dialog/Modal renders its content via MuiPaper, which is deliberately flat
+    // (border, no shadow -- see MuiPaper above, kept minimal since it's used too broadly
+    // to safely restyle globally). A dialog is inherently a floating overlay though, so it
+    // should never be flat -- this override wins on specificity without touching MuiPaper's
+    // own defaults, giving every modal in the app (confirm/prompt, AddJobModal,
+    // EditJobDialog, JobDetailsDialog, etc.) the same rounded floating-shadow treatment in
+    // one place instead of patching each dialog's own sx individually.
+    MuiDialog: {
+      styleOverrides: {
+        paper: ({ theme }: any) => ({
+          border: "none",
+          borderRadius: 20,
+          boxShadow: theme.vars.customShadows.tooltip,
+        }),
+      },
+    },
+    MuiPopover: {
+      styleOverrides: {
+        paper: ({ theme }: any) => ({
+          border: "none",
+          boxShadow: theme.vars.customShadows.tooltip,
+        }),
+      },
+    },
+    MuiMenu: {
+      styleOverrides: {
+        paper: ({ theme }: any) => ({
+          border: "none",
+          borderRadius: 12,
+          boxShadow: theme.vars.customShadows.tooltip,
+        }),
+      },
+    },
     MuiButton: {
       defaultProps: { disableFocusRipple: true },
       styleOverrides: {
@@ -348,6 +381,23 @@ export const getTheme = (_mode: "light" | "dark") => {
         },
       },
     },
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          borderRadius: 8,
+          fontWeight: 600,
+          fontSize: 12,
+        },
+      },
+    },
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          borderRadius: 999,
+          fontWeight: 600,
+        },
+      },
+    },
     MuiListItemButton: {
       styleOverrides: {
         root: ({ theme }: any) => ({
diff --git a/job-tracker-ui/src/toast.tsx b/job-tracker-ui/src/toast.tsx
index 1d1b055..77ff89b 100644
--- a/job-tracker-ui/src/toast.tsx
+++ b/job-tracker-ui/src/toast.tsx
@@ -53,7 +53,7 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
           onClose={() => setT((p) => ({ ...p, open: false }))}
           severity={t.severity}
           variant="filled"
-          sx={{ maxWidth: 420 }}
+          sx={{ maxWidth: 420, borderRadius: 3, fontWeight: 600 }}
           action={
             t.actionLabel && t.onAction ? (
               <Button