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: {
|
MuiButton: {
|
||||||
defaultProps: { disableFocusRipple: true },
|
defaultProps: { disableFocusRipple: true },
|
||||||
styleOverrides: {
|
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: {
|
MuiListItemButton: {
|
||||||
styleOverrides: {
|
styleOverrides: {
|
||||||
root: ({ theme }: any) => ({
|
root: ({ theme }: any) => ({
|
||||||
|
|||||||
@@ -53,7 +53,7 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
|
|||||||
onClose={() => setT((p) => ({ ...p, open: false }))}
|
onClose={() => setT((p) => ({ ...p, open: false }))}
|
||||||
severity={t.severity}
|
severity={t.severity}
|
||||||
variant="filled"
|
variant="filled"
|
||||||
sx={{ maxWidth: 420 }}
|
sx={{ maxWidth: 420, borderRadius: 3, fontWeight: 600 }}
|
||||||
action={
|
action={
|
||||||
t.actionLabel && t.onAction ? (
|
t.actionLabel && t.onAction ? (
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
Reference in New Issue
Block a user