diff --git a/src/test/TestM3.jsx b/src/test/TestM3.jsx
index fe97cad..c94ab37 100644
--- a/src/test/TestM3.jsx
+++ b/src/test/TestM3.jsx
@@ -1,5 +1,6 @@
import * as React from 'react';
import {
+ Alert,
Box,
Card, CardContent, FormControl, InputLabel, ListItemButton, MenuItem,
Paper, Select,
@@ -304,6 +305,18 @@ export default function TestM3() {
+
+ Alerts:
+ Success
+ Info
+ Warning
+ Error
+
{
const {colorScheme, mode, setMode } = useColorScheme();
@@ -16,6 +18,7 @@ export const ModeSwitcher = () => {
setMode('dark');
}
}}
+ startIcon={darkMode ? : }
>
{darkMode ? 'light' : 'dark'}
diff --git a/src/theme/css/dark.css b/src/theme/css/dark.css
index 36880ae..51d2c5e 100644
--- a/src/theme/css/dark.css
+++ b/src/theme/css/dark.css
@@ -52,6 +52,10 @@
--md-extended-color-notifications-on-color: rgb(86 29 33);
--md-extended-color-notifications-color-container: rgb(115 51 54);
--md-extended-color-notifications-on-color-container: rgb(255 218 218);
+ --md-extended-color-info-color: rgb(157 203 251);
+ --md-extended-color-info-on-color: rgb(0 51 85);
+ --md-extended-color-info-color-container: rgb(18 74 115);
+ --md-extended-color-info-on-color-container: rgb(207 229 255);
--md-extended-color-success-color: rgb(161 211 154);
--md-extended-color-success-on-color: rgb(10 57 15);
--md-extended-color-success-color-container: rgb(36 80 36);
diff --git a/src/theme/css/light.css b/src/theme/css/light.css
index fb57cdf..d706766 100644
--- a/src/theme/css/light.css
+++ b/src/theme/css/light.css
@@ -52,6 +52,10 @@
--md-extended-color-notifications-on-color: rgb(255 255 255);
--md-extended-color-notifications-color-container: rgb(255 218 218);
--md-extended-color-notifications-on-color-container: rgb(59 8 14);
+ --md-extended-color-info-color: rgb(49 98 141);
+ --md-extended-color-info-on-color: rgb(255 255 255);
+ --md-extended-color-info-color-container: rgb(207 229 255);
+ --md-extended-color-info-on-color-container: rgb(0 29 52);
--md-extended-color-success-color: rgb(59 105 57);
--md-extended-color-success-on-color: rgb(255 255 255);
--md-extended-color-success-color-container: rgb(188 240 180);
diff --git a/src/theme/ge-theme.js b/src/theme/ge-theme.js
index 3a57191..e0b8d62 100644
--- a/src/theme/ge-theme.js
+++ b/src/theme/ge-theme.js
@@ -82,6 +82,31 @@ geTheme = extendTheme( {components: {
}
}
},
+ MuiAlert: {
+ styleOverrides: {
+ root: {
+ borderRadius: 12,
+ width: "fit-content",
+ margin: geTheme.spacing(1),
+ },
+ standardSuccess: {
+ backgroundColor: geTheme.vars.sys.color.successContainer,
+ color: geTheme.vars.sys.color.onSuccessContainer
+ },
+ standardInfo: {
+ backgroundColor: geTheme.vars.sys.color.infoContainer,
+ color: geTheme.vars.sys.color.onInfoContainer
+ },
+ standardWarning: {
+ backgroundColor: geTheme.vars.sys.color.warningContainer,
+ color: geTheme.vars.sys.color.onWarningContainer
+ },
+ standardError: {
+ backgroundColor: geTheme.vars.sys.color.errorContainer,
+ color: geTheme.vars.sys.color.onErrorContainer
+ }
+ }
+ },
MuiCard: {
styleOverrides: {
root: {
diff --git a/src/theme/mui-theme-adapter.js b/src/theme/mui-theme-adapter.js
index c69780c..39f3e2c 100644
--- a/src/theme/mui-theme-adapter.js
+++ b/src/theme/mui-theme-adapter.js
@@ -45,6 +45,12 @@ const createColorScheme = (mode) => ({
container: cssVar('--md-extended-color-success-color-container', mode),
onContainer: cssVar('--md-extended-color-success-on-color-container', mode),
},
+ info:{
+ main: cssVar('--md-extended-color-info-color', mode),
+ contrastText: cssVar('--md-extended-color-info-on-color', mode),
+ container: cssVar('--md-extended-color-info-color-container', mode),
+ onContainer: cssVar('--md-extended-color-info-on-color-container', mode),
+ },
warning: {
main: cssVar('--md-extended-color-warning-color', mode),
contrastText: cssVar('--md-extended-color-warning-on-color', mode),
@@ -123,10 +129,10 @@ const theme = (mode) => ({
onWarning: cssVar("--md-extended-color-warning-color", mode),
warningContainer: cssVar("--md-extended-color-warning-color-container", mode),
onWarningContainer: cssVar("--md-extended-color-warning-on-color-container", mode),
- info: cssVar("--md-extended-color-notifications-color", mode),
- onInfo: cssVar("--md-extended-color-notifications-on-color", mode),
- infoContainer: cssVar("--md-extended-color-notifications-color-container", mode),
- onInfoContainer: cssVar("--md-extended-color-notifications-on-color-container", mode),
+ info: cssVar("--md-extended-color-info-color", mode),
+ onInfo: cssVar("--md-extended-color-info-on-color", mode),
+ infoContainer: cssVar("--md-extended-color-info-color-container", mode),
+ onInfoContainer: cssVar("--md-extended-color-info-on-color-container", mode),
success: cssVar("--md-extended-color-success-color", mode),
onSuccess: cssVar("--md-extended-color-success-on-color", mode),
successContainer: cssVar("--md-extended-color-success-color-container", mode),