style(ui): float dialogs/menus/popovers, round chips and tooltips globally
CI and Deploy / test (push) Successful in 2m14s
CI and Deploy / deploy (push) Successful in 37s

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.
This commit is contained in:
cesnimda
2026-07-13 14:28:22 +02:00
parent 5219237613
commit 24c7d68490
2 changed files with 51 additions and 1 deletions
+50
View File
@@ -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) => ({
+1 -1
View File
@@ -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