Petits ajustements thème GE

republique-et-canton-de-geneve · Oct 3, 2024 · ae00780 · ae00780
1 parent 56b3b38
commit ae00780
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 4 deletions.
diff --git 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() {
                     </List>
                 </Paper>
             </Grid>
+            <Grid
+                size={{
+                    xs: 4,
+                    sm: 4,
+                    md: 6
+                }}>
+                    <Typography>Alerts:</Typography>
+                    <Alert severity="success">Success</Alert>
+                    <Alert severity="info">Info</Alert>
+                    <Alert severity="warning">Warning</Alert>
+                    <Alert severity="error">Error</Alert>
+            </Grid>
             <Grid
                 size={{
                     xs: 4,

diff --git a/src/theme/ModeSwitcher.jsx b/src/theme/ModeSwitcher.jsx
@@ -1,5 +1,7 @@
 import * as React from "react";
 import {Button, useColorScheme} from "@mui/material-next";
+import LightModeIcon from '@mui/icons-material/LightMode';
+import DarkModeIcon from '@mui/icons-material/DarkMode';
 
 export const ModeSwitcher = () => {
     const {colorScheme, mode, setMode } = useColorScheme();
@@ -16,6 +18,7 @@ export const ModeSwitcher = () => {
                     setMode('dark');
                 }
             }}
+            startIcon={darkMode ? <LightModeIcon/> : <DarkModeIcon/>}
         >
             {darkMode ? 'light' : 'dark'}
         </Button>

diff --git 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
@@ -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
@@ -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
@@ -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),