Ajout du thème ge.ch

src/App.jsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {BrowserRouter, Route, Routes} from "react-router-dom";
-import './ge-theme.scss';
 import Header from "./header/Header";
 import Test from "./test/Test";
 import Home from "./home/Home";

src/ScreenResolutionProvider.js

@@ -0,0 +1,21 @@
+import React, { createContext } from "react";
+import {useMediaQuery} from "@mui/material";
+
+export const ScreenResolutionContext = createContext({});
+
+export const ScreenResolutionProvider = props => {
+
+    const isMobile = useMediaQuery('(max-width:768px)',{noSsr: true});
+    const isNotMobile = useMediaQuery('(min-width:769px)',{noSsr: true});
+    const isTablet = useMediaQuery('(min-width:769px) and (max-width:1024px)',{noSsr: true});
+    const isDesktop = useMediaQuery('(min-width:1025px)',{noSsr: true});
+    const isDesktopSmall = useMediaQuery('(min-width:1025px) and (max-width:1440px)',{noSsr: true});
+    const isDesktopMedium = useMediaQuery('(min-width:1441px) and (max-width:1920px)',{noSsr: true});
+    const isDesktopLarge = useMediaQuery('(min-width:1921px)',{noSsr: true});
+
+    return (
+        <ScreenResolutionContext.Provider value={{isMobile,isTablet,isDesktopSmall,isDesktopMedium,isDesktopLarge,isNotMobile,isDesktop}}>
+            {props.children}
+        </ScreenResolutionContext.Provider>
+    );
+}

src/ge-theme.js

@@ -0,0 +1,90 @@
+import {createTheme} from "@mui/material";
+import './ge-theme.scss';
+import {frFR as coreFrFR} from "@mui/material/locale";
+import { frFR as dataGridFrFR } from '@mui/x-data-grid';
+import { frFR as pickersfrFR } from '@mui/x-date-pickers';
+
+function cssVar (name) {
+    return getComputedStyle(document.documentElement).getPropertyValue(name);
+}
+
+export default function geTheme() {
+    return createTheme({
+            palette: {
+                common: { black: cssVar("--base-noir"), white: cssVar("--base-blanc") },
+                primary: { light: cssVar("--enu-primary-light"), main: cssVar("--enu-primary-main"), dark: cssVar("--enu-primary-dark"), contrastText: cssVar("--enu-textcontrast-main") },
+                secondary: { "light": cssVar("--enu-secondary-light"), "main": cssVar("--enu-secondary"), "dark": cssVar("--enu-secondary-dark"), "contrastText": cssVar("--enu-primary-main") },
+                tertiary: { "light": cssVar("--enu-tertiary-light"), "main": cssVar("--enu-tertiary"), "dark": cssVar("--enu-tertiary-dark"), "contrastText": cssVar("--enu-textcontrast-main") },
+                error: { "light": cssVar("--enu-important-light"), "main": cssVar("--enu-important-main"), "dark": cssVar("--enu-important-dark"), "contrastText": cssVar("--enu-textcontrast-main") },
+                text: { "light": cssVar("--enu-text-light"), "main": cssVar("--enu-text-main"), "dark": cssVar("--enu-text-dark"), "contrastText": cssVar("--enu-text-main")},
+                textsecondary: { "light": cssVar("--enu-textsecondary-light"), "main": cssVar("--enu-textsecondary-main"), "dark": cssVar("--enu-textsecondary-dark"), "contrastText": cssVar("--enu-textsecondary-main")},
+                info: { "light": cssVar("--enu-info-light"), "main": cssVar("--enu-info-main"), "dark": cssVar("--enu-info-dark"), "contrastText": cssVar("--enu-text-main")},
+                grey: { "light": "#c7ff9c", "main": "#f2ad8f", "dark": "#b39dfa", "contrastText": "#ffea00" }
+            },
+            spacing: 10,
+            breakpoints: {
+                values: {
+                    xs: 0,
+                    sm: 768,
+                    md: 1024,
+                    lg: 1440,
+                    xl: 1920
+                },
+            },
+            components: {
+                MuiTableCell: {
+                    styleOverrides: {
+                        head: {
+                            color: "var(--enu-textcontrast-main)",
+                            backgroundColor: "var(--enu-primary-light)"
+                        }
+                    }
+                },
+                MuiMenu: {
+                    styleOverrides: {
+                        list: {
+                            backgroundColor: "var(--enu-primary-main)",
+                            color: "white"
+                        }
+                    }
+                },
+                MuiButton: {
+                    styleOverrides: {
+                        root: {
+                            outline: "none",
+                            borderRadius: 0,
+                            "&:focus": {
+                                outline: "none"
+                            }
+                        }
+                    }
+                },
+                MuiPagination: {
+                    styleOverrides: {
+                        root: {
+                            margin: "20px auto 0",
+                            width: "max-content"
+                        }
+                    }
+                },
+                MuiPaginationItem: {
+                    styleOverrides: {
+                        root: {
+                            outline: "none"
+                        },
+                        rounded: {
+                            outline: "none",
+                            borderRadius: 0,
+                            "&:focus": {
+                                outline: "none"
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        dataGridFrFR, // x-data-grid translations
+        pickersfrFR, // x-date-pickers translations
+        coreFrFR // core translations
+    );
+}

src/index.js

@@ -1,35 +1,33 @@
-import {createRoot} from "react-dom/client";
-import {App} from "./App";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
 import CssBaseline from '@mui/material/CssBaseline';
 import * as React from "react";
 import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
 import '@fontsource/roboto/700.css';
-import {createTheme, ThemeProvider} from '@mui/material/styles';
-import { LocalizationProvider, frFR as pickersfrFR } from '@mui/x-date-pickers';
+import { ScreenResolutionProvider } from "./ScreenResolutionProvider";
+import { StyledEngineProvider } from "@mui/material";
+import { ThemeProvider } from '@mui/material/styles';
+import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
-import { frFR as dataGridFrFR } from '@mui/x-data-grid';
-import { frFR as coreFrFR } from '@mui/material/locale';
+import geTheme from "./ge-theme";
+import frCH from "date-fns/locale/fr-CH";
 
 const container = document.getElementById("app");
 const root = createRoot(container);
-const theme = createTheme(
-    {palette: {
-            primary: {main: '#1976d2'}},
-    },
-    dataGridFrFR, // x-data-grid translations
-    pickersfrFR, // x-date-pickers translations
-    coreFrFR // core translations
-);
 
 root.render(
     <>
         <CssBaseline/>
-        <LocalizationProvider dateAdapter={AdapterDateFns}>
-            <ThemeProvider theme={theme}>
-                <App/>
-            </ThemeProvider>
-        </LocalizationProvider>
+        <StyledEngineProvider injectFirst>
+            <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={frCH}>
+                <ScreenResolutionProvider>
+                    <ThemeProvider theme={geTheme()}>
+                        <App/>
+                    </ThemeProvider>
+                </ScreenResolutionProvider>
+            </LocalizationProvider>
+        </StyledEngineProvider>
     </>
 );