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 ? (