diff --git a/react/Alert/Readme.md b/react/Alert/Readme.md
index 9dcf642f53..6058f238c2 100644
--- a/react/Alert/Readme.md
+++ b/react/Alert/Readme.md
@@ -17,6 +17,7 @@ const initialVariants = [{
square: false,
actionOne: false,
actionTwo: false,
+ filled: false,
close: false
}]
@@ -26,6 +27,7 @@ const initialVariants = [{
{variant => (
: undefined}
@@ -81,7 +83,7 @@ const makeButtonColor = color => ['primary', 'secondary'].includes(color) ? unde
)}
onClose={variant.close ? () => {} : undefined}
>
- {variant.title && {color.toUpperCase()}}
+ {variant.title && {color}}
This is a {color} alert
@@ -97,11 +99,16 @@ const makeButtonColor = color => ['primary', 'secondary'].includes(color) ? unde
severity={color}
block={variant.block}
action={variant.close ? undefined : (
-
+
)}
onClose={variant.close ? () => {} : undefined}
>
- {variant.title && {color.toUpperCase()}}
+ {variant.title && {color}}
This is a {color} alert
@@ -121,7 +128,7 @@ const makeButtonColor = color => ['primary', 'secondary'].includes(color) ? unde
)}
onClose={variant.close ? () => {} : undefined}
>
- {variant.title && {color.toUpperCase()}}
+ {variant.title && {color}}
This is a {color} alert
diff --git a/react/Alert/index.jsx b/react/Alert/index.jsx
index 49aff47bec..c13d087158 100644
--- a/react/Alert/index.jsx
+++ b/react/Alert/index.jsx
@@ -57,6 +57,7 @@ const Alert = forwardRef(
},
ref
) => {
+ // as primary and secondary doesn't exist on Mui Alert, we force success severity for those
const madeSeverity = ['primary', 'secondary'].includes(severity)
? 'success'
: severity
@@ -70,7 +71,7 @@ const Alert = forwardRef(
style={{ backgroundColor: color, borderRadius: square && 0 }}
className={cx(
className,
- `cozyAlert-${severity}-${variant}`,
+ `cozyStyles-${severity}-${variant}`,
{ block },
{ action: Boolean(action) }
)}
diff --git a/react/MuiCozyTheme/helpers.js b/react/MuiCozyTheme/helpers.js
index f52e4f822b..e23cae2807 100644
--- a/react/MuiCozyTheme/helpers.js
+++ b/react/MuiCozyTheme/helpers.js
@@ -1,18 +1,19 @@
-import { alpha, lighten, darken } from '../styles'
-
-export const makeAlertColor = (theme, color) => {
- const themeColorByColor = {
- primary: theme.palette[color].main,
- secondary: theme.palette.text.primary
- }
+import { alpha } from '../styles'
+export const makeAlertColor = (theme, severity) => {
// same approach as Mui, see https://github.com/mui/material-ui/blob/v4.x/packages/material-ui-lab/src/Alert/Alert.js#L28
return {
'&-standard': {
- color: darken(themeColorByColor[color], 0.6),
- backgroundColor: lighten(themeColorByColor[color], 0.9),
+ color: theme.palette.text.primary,
+ backgroundColor: alpha(
+ theme.palette[severity].main,
+ theme.palette.background.contrastOpacity
+ ),
'& $icon': {
- color: themeColorByColor[color]
+ color:
+ severity === 'secondary'
+ ? theme.palette.text.primary
+ : theme.palette[severity].main
},
'& $action': {
'& button[title="Close"]': {
@@ -21,45 +22,22 @@ export const makeAlertColor = (theme, color) => {
}
},
'&-outlined': {
- color: darken(themeColorByColor[color], 0.6),
- border: `1px solid ${themeColorByColor[color]}`,
+ color: theme.palette.text.primary,
+ border: `1px solid ${theme.palette[severity].main}`,
'& $icon': {
- color: themeColorByColor[color]
+ color:
+ severity === 'secondary'
+ ? theme.palette.text.primary
+ : theme.palette[severity].main
}
},
'&-filled': {
- backgroundColor:
- color === 'secondary'
- ? theme.palette.grey[600]
- : themeColorByColor[color]
- }
- }
-}
-
-export const makeAlertInvertedColor = (theme, color) => {
- return {
- '&-standard': {
- color: theme.palette.primary.main,
- backgroundColor: theme.palette.background.default,
- '& $icon': {
- color: theme.palette[color].main
- }
- },
- '&-outlined': {
- color: theme.palette.primary.main,
- border: `1px solid ${theme.palette.primary.main}`,
- '& $icon': {
- color: theme.palette[color].main
- }
- },
- '&-filled': {
- color: theme.palette[color].contrastText,
- backgroundColor:
- color === 'secondary'
- ? theme.palette.grey[200]
- : theme.palette[color].main,
- '& $icon': {
- color: theme.palette[color].contrastText
+ color: theme.palette[severity].contrastText,
+ backgroundColor: theme.palette[severity].main,
+ '& $action': {
+ '& button[title="Close"]': {
+ color: theme.palette[severity].contrastText
+ }
}
}
}
diff --git a/react/MuiCozyTheme/makeInvertedOverrides.js b/react/MuiCozyTheme/makeInvertedOverrides.js
index 62b8f56e7b..cd27c2a79b 100644
--- a/react/MuiCozyTheme/makeInvertedOverrides.js
+++ b/react/MuiCozyTheme/makeInvertedOverrides.js
@@ -1,6 +1,5 @@
import merge from 'lodash/merge'
-import { makeAlertInvertedColor } from './helpers'
import { makeOverrides } from './makeOverrides'
export const makeInvertedOverrides = invertedTheme => {
@@ -28,18 +27,6 @@ export const makeInvertedOverrides = invertedTheme => {
backgroundColor: 'rgba(255,255,255,0.2)'
}
},
- MuiAlert: {
- root: {
- '&.cozyAlert': {
- '&-primary': makeAlertInvertedColor(invertedTheme, 'primary'),
- '&-secondary': makeAlertInvertedColor(invertedTheme, 'secondary'),
- '&-success': makeAlertInvertedColor(invertedTheme, 'success'),
- '&-error': makeAlertInvertedColor(invertedTheme, 'error'),
- '&-warning': makeAlertInvertedColor(invertedTheme, 'warning'),
- '&-info': makeAlertInvertedColor(invertedTheme, 'info')
- }
- }
- },
MuiSnackbarContent: {
root: {
backgroundColor: invertedTheme.palette.grey[200]
diff --git a/react/MuiCozyTheme/makeOverrides.js b/react/MuiCozyTheme/makeOverrides.js
index 1571f35979..9944ee19fa 100644
--- a/react/MuiCozyTheme/makeOverrides.js
+++ b/react/MuiCozyTheme/makeOverrides.js
@@ -760,9 +760,13 @@ export const makeOverrides = theme => ({
MuiAlert: {
root: {
padding: '8px 16px',
- '&.cozyAlert': {
+ '&.cozyStyles': {
'&-primary': makeAlertColor(theme, 'primary'),
- '&-secondary': makeAlertColor(theme, 'secondary')
+ '&-secondary': makeAlertColor(theme, 'secondary'),
+ '&-success': makeAlertColor(theme, 'success'),
+ '&-error': makeAlertColor(theme, 'error'),
+ '&-warning': makeAlertColor(theme, 'warning'),
+ '&-info': makeAlertColor(theme, 'info')
},
'& $icon': {
paddingTop: '9px'