From ccafae1b3838d7a6a49d083c7b8bb8c6b8d47089 Mon Sep 17 00:00:00 2001 From: guillaume-mathe Date: Tue, 13 Jun 2023 10:46:32 +0200 Subject: [PATCH] =?UTF-8?q?Ajout=20du=20th=C3=A8me=20ge.ch?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 1 - src/ScreenResolutionProvider.js | 21 ++++++++ src/ge-theme.js | 90 +++++++++++++++++++++++++++++++++ src/index.js | 36 +++++++------ 4 files changed, 128 insertions(+), 20 deletions(-) create mode 100644 src/ScreenResolutionProvider.js create mode 100644 src/ge-theme.js diff --git a/src/App.jsx b/src/App.jsx index 0408c12..a4fd97a 100644 --- a/src/App.jsx +++ b/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"; diff --git a/src/ScreenResolutionProvider.js b/src/ScreenResolutionProvider.js new file mode 100644 index 0000000..5f85881 --- /dev/null +++ b/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 ( + + {props.children} + + ); +} \ No newline at end of file diff --git a/src/ge-theme.js b/src/ge-theme.js new file mode 100644 index 0000000..f8c8f79 --- /dev/null +++ b/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 + ); +} diff --git a/src/index.js b/src/index.js index be6fee6..6c1c45c 100644 --- a/src/index.js +++ b/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( <> - - - - - + + + + + + + + + ); \ No newline at end of file