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.
This commit is contained in:
@@ -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) => ({
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user