MUI Dialog mobile styling adaptions (#3144)

Co-authored-by: Ricky James Smith <[email protected]> Co-authored-by: Johannes Obermair <[email protected]>
vivid-planet · Jan 20, 2025 · 47be4eb · 47be4eb
1 parent 4b008b9
commit 47be4eb
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 7 deletions.
diff --git a/.changeset/eighty-zebras-rescue.md b/.changeset/eighty-zebras-rescue.md
@@ -0,0 +1,5 @@
+---
+"@comet/admin-theme": patch
+---
+
+Adapt styling of `DialogActions`, `DialogContent`, and `DialogTitle` to match the Comet DXP design
diff --git a/packages/admin/admin-theme/src/componentsTheme/MuiDialogActions.ts b/packages/admin/admin-theme/src/componentsTheme/MuiDialogActions.ts
@@ -1,14 +1,18 @@
 import { mergeOverrideStyles } from "../utils/mergeOverrideStyles";
 import { GetMuiComponentTheme } from "./getComponentsTheme";
 
-export const getMuiDialogActions: GetMuiComponentTheme<"MuiDialogActions"> = (component, { palette }) => ({
+export const getMuiDialogActions: GetMuiComponentTheme<"MuiDialogActions"> = (component, { palette, breakpoints, spacing }) => ({
     ...component,
     styleOverrides: mergeOverrideStyles<"MuiDialogActions">(component?.styleOverrides, {
         root: {
             borderTop: `1px solid ${palette.grey[100]}`,
-            padding: 20,
+            padding: spacing(2),
             justifyContent: "space-between",
 
+            [breakpoints.up("sm")]: {
+                padding: spacing(4),
+            },
+
             "&>:first-of-type:last-child": {
                 marginLeft: "auto",
             },

diff --git a/packages/admin/admin-theme/src/componentsTheme/MuiDialogContent.ts b/packages/admin/admin-theme/src/componentsTheme/MuiDialogContent.ts
@@ -3,15 +3,23 @@ import { dialogTitleClasses } from "@mui/material";
 import { mergeOverrideStyles } from "../utils/mergeOverrideStyles";
 import { GetMuiComponentTheme } from "./getComponentsTheme";
 
-export const getMuiDialogContent: GetMuiComponentTheme<"MuiDialogContent"> = (component, { palette }) => ({
+export const getMuiDialogContent: GetMuiComponentTheme<"MuiDialogContent"> = (component, { palette, breakpoints, spacing }) => ({
     ...component,
     styleOverrides: mergeOverrideStyles<"MuiDialogContent">(component?.styleOverrides, {
         root: {
             backgroundColor: palette.grey[50],
-            padding: 40,
+            padding: spacing(2),
 
             [`.${dialogTitleClasses.root} + &`]: {
-                paddingTop: 40,
+                paddingTop: spacing(2),
+            },
+
+            [breakpoints.up("sm")]: {
+                padding: spacing(8),
+
+                [`.${dialogTitleClasses.root} + &`]: {
+                    paddingTop: spacing(8),
+                },
             },
         },
     }),

diff --git a/packages/admin/admin-theme/src/componentsTheme/MuiDialogTitle.ts b/packages/admin/admin-theme/src/componentsTheme/MuiDialogTitle.ts
@@ -1,7 +1,7 @@
 import { mergeOverrideStyles } from "../utils/mergeOverrideStyles";
 import { GetMuiComponentTheme } from "./getComponentsTheme";
 
-export const getMuiDialogTitle: GetMuiComponentTheme<"MuiDialogTitle"> = (component, { palette, typography }) => ({
+export const getMuiDialogTitle: GetMuiComponentTheme<"MuiDialogTitle"> = (component, { palette, typography, breakpoints, spacing }) => ({
     ...component,
     defaultProps: {
         variant: "subtitle1",
@@ -10,7 +10,14 @@ export const getMuiDialogTitle: GetMuiComponentTheme<"MuiDialogTitle"> = (compon
         root: {
             backgroundColor: palette.grey["A200"],
             color: "#ffffff",
-            padding: 20,
+            padding: spacing(2),
+            fontSize: "14px",
+
+            [breakpoints.up("sm")]: {
+                minWidth: 0,
+                fontSize: "16px",
+                padding: spacing(4),
+            },
         },
     }),
 });