Rework Alert

vivid-planet · Feb 1, 2024 · 366e701 · 366e701
1 parent 74cd6c6
commit 366e701
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 28 deletions.
diff --git a/packages/admin/admin-theme/src/componentsTheme/MuiAlert.tsx b/packages/admin/admin-theme/src/componentsTheme/MuiAlert.tsx
@@ -4,11 +4,10 @@ import React from "react";
 import { mergeOverrideStyles } from "../utils/mergeOverrideStyles";
 import { GetMuiComponentTheme } from "./getComponentsTheme";
 
-export const getMuiAlert: GetMuiComponentTheme<"MuiAlert"> = (component, { palette }) => ({
+export const getMuiAlert: GetMuiComponentTheme<"MuiAlert"> = (component, { palette, spacing, shadows }) => ({
     ...component,
     defaultProps: {
         variant: "outlined",
-
         iconMapping: {
             info: <Info color="info" />,
             success: <Check color="success" />,
@@ -20,25 +19,26 @@ export const getMuiAlert: GetMuiComponentTheme<"MuiAlert"> = (component, { palet
     styleOverrides: mergeOverrideStyles<"MuiAlert">(component?.styleOverrides, {
         root: {},
         outlined: {
-            borderLeftWidth: 5,
-            backgroundColor: "#fff",
-            borderRadius: 4,
-            color: palette.grey[800],
+            backgroundColor: palette.background.paper,
+            color: palette.grey[900],
+            borderRadius: spacing(1),
+            borderLeftWidth: spacing(1),
+            boxShadow: shadows[2],
         },
         outlinedSuccess: {
-            borderColor: "#14CC33",
+            borderColor: palette.success.main,
         },
         outlinedInfo: {
-            borderColor: "#29B6F6",
+            borderColor: palette.info.main,
         },
         outlinedWarning: {
-            borderColor: "#FFB31A",
+            borderColor: palette.warning.main,
         },
         outlinedError: {
-            borderColor: "#D11700",
+            borderColor: palette.error.main,
         },
         icon: {
-            marginRight: 0,
+            marginRight: spacing(2),
             padding: 0,
         },
     }),

diff --git a/packages/admin/admin-theme/src/componentsTheme/MuiAlertTitle.tsx b/packages/admin/admin-theme/src/componentsTheme/MuiAlertTitle.tsx
@@ -0,0 +1,12 @@
+import { mergeOverrideStyles } from "../utils/mergeOverrideStyles";
+import { GetMuiComponentTheme } from "./getComponentsTheme";
+
+export const getMuiAlertTitle: GetMuiComponentTheme<"MuiAlertTitle"> = (component, { palette, spacing }) => ({
+    ...component,
+    styleOverrides: mergeOverrideStyles<"MuiAlertTitle">(component?.styleOverrides, {
+        root: {
+            marginBottom: spacing(1),
+            fontWeight: 600,
+        },
+    }),
+});
diff --git a/packages/admin/admin-theme/src/componentsTheme/getComponentsTheme.ts b/packages/admin/admin-theme/src/componentsTheme/getComponentsTheme.ts
@@ -7,6 +7,7 @@ import { Spacing } from "@mui/system";
 
 import { getMuiAccordion } from "./MuiAccordion";
 import { getMuiAlert } from "./MuiAlert";
+import { getMuiAlertTitle } from "./MuiAlertTitle";
 import { getMuiAppBar } from "./MuiAppBar";
 import { getMuiAutocomplete } from "./MuiAutocomplete";
 import { getMuiButton } from "./MuiButton";
@@ -63,6 +64,8 @@ export type GetMuiComponentTheme<ClassesName extends keyof ComponentNameToClassK
 export const getComponentsTheme = (components: Components, themeData: ThemeData): ThemeOptions["components"] => ({
     ...components,
     MuiAccordion: getMuiAccordion(components.MuiAccordion, themeData),
+    MuiAlert: getMuiAlert(components.MuiAlert, themeData),
+    MuiAlertTitle: getMuiAlertTitle(components.MuiAlertTitle, themeData),
     MuiAppBar: getMuiAppBar(components.MuiAppBar, themeData),
     MuiAutocomplete: getMuiAutocomplete(components.MuiAutocomplete, themeData),
     MuiButton: getMuiButton(components.MuiButton, themeData),
@@ -78,20 +81,20 @@ export const getComponentsTheme = (components: Components, themeData: ThemeData)
     MuiDialogTitle: getMuiDialogTitle(components.MuiDialogTitle, themeData),
     MuiDrawer: getMuiDrawer(components.MuiDrawer, themeData),
     MuiFormControlLabel: getMuiFormControlLabel(components.MuiFormControlLabel, themeData),
-    MuiFormLabel: getMuiFormLabel(components.MuiFormLabel, themeData),
     MuiFormHelperText: getMuiFormHelperText(components.MuiFormHelperText, themeData),
+    MuiFormLabel: getMuiFormLabel(components.MuiFormLabel, themeData),
     MuiIconButton: getMuiIconButton(components.MuiIconButton, themeData),
+    MuiInput: getMuiInput(components.MuiInput, themeData),
     MuiInputAdornment: getMuiInputAdornment(components.MuiInputAdornment, themeData),
     MuiInputBase: getMuiInputBase(components.MuiInputBase, themeData),
-    MuiInput: getMuiInput(components.MuiInput, themeData),
     MuiLinearProgress: getMuiLinearProgress(components.MuiLinearProgress, themeData),
     MuiLink: getMuiLink(components.MuiLink, themeData),
     MuiListItem: getMuiListItem(components.MuiListItem, themeData),
+    MuiNativeSelect: getMuiNativeSelect(components.MuiNativeSelect, themeData),
     MuiPaper: getMuiPaper(components.MuiPaper, themeData),
     MuiPopover: getMuiPopover(components.MuiPopover, themeData),
     MuiRadio: getMuiRadio(components.MuiRadio, themeData),
     MuiSelect: getMuiSelect(components.MuiSelect, themeData),
-    MuiNativeSelect: getMuiNativeSelect(components.MuiNativeSelect, themeData),
     MuiSvgIcon: getMuiSvgIcon(components.MuiSvgIcon, themeData),
     MuiSwitch: getMuiSwitch(components.MuiSwitch, themeData),
     MuiTab: getMuiTab(components.MuiTab, themeData),
@@ -102,5 +105,4 @@ export const getComponentsTheme = (components: Components, themeData: ThemeData)
     MuiToggleButtonGroup: getMuiToggleButtonGroup(components.MuiToggleButtonGroup, themeData),
     MuiTooltip: getMuiTooltip(components.MuiTooltip, themeData),
     MuiTypography: getMuiTypography(components.MuiTypography, themeData),
-    MuiAlert: getMuiAlert(components.MuiAlert, themeData),
 });
diff --git a/packages/admin/admin/src/alert/Alert.tsx b/packages/admin/admin/src/alert/Alert.tsx
@@ -20,10 +20,6 @@ const styles = (theme: Theme) =>
         root: {
             display: "flex",
             alignItems: "center",
-            backgroundColor: theme.palette.background.paper,
-            borderRadius: 4,
-            boxShadow: theme.shadows[2],
-            position: "relative",
             padding: theme.spacing(2, "12px", 2, 4),
             minHeight: 40, // to ensure consistent height for the content, regardless of the presence of a button or close icon, in order to set the outer padding correctly
         },
@@ -32,21 +28,15 @@ const styles = (theme: Theme) =>
             alignItems: "center",
             flexGrow: 1,
             padding: 0,
-            paddingLeft: theme.spacing(2),
             marginBottom: 0,
         },
-        title: {
-            fontWeight: 600,
-            marginBottom: theme.spacing(1),
-        },
-        text: {
-            flexGrow: 1,
-            marginRight: theme.spacing(4),
-        },
+        title: {},
+        text: {},
         action: {},
         closeIcon: {},
         hasTitle: {
             alignItems: "flex-start",
+            position: "relative",
 
             [`& .${buttonClasses.text}`]: {
                 marginLeft: -15,
@@ -64,6 +54,7 @@ const styles = (theme: Theme) =>
             "& $message": {
                 flexDirection: "column",
                 alignItems: "flex-start",
+                marginRight: theme.spacing(4),
             },
             "&$root": {
                 paddingBottom: "6px",