move theme to its own file
Change-Id: Iec6faf83199eeaaf70d2d7ac510825cd18949e4c
diff --git a/client/src/App.js b/client/src/App.js
index 573c190..7496453 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -3,7 +3,7 @@
Author: Larbi Gharib <larbi.gharib@savoirfairelinux.com>
License: AGPL-3
*/
-import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { ThemeProvider } from '@mui/material/styles';
import React, { useState, useEffect } from 'react'
import { Route, Routes, Navigate } from 'react-router-dom'
import authManager from './AuthManager'
@@ -18,192 +18,7 @@
import NotFoundPage from "./pages/404.jsx"
import JamiAccountDialog from './pages/jamiAccountCreation.jsx'
import WelcomeAnimation from './components/welcome'
-
-const theme = createTheme({
-
- typography: {
- fontFamily: "Ubuntu",
- h1: {
- fontWeight: 400,
- fontSize: "26px",
- lineHeight: "36px",
- },
- h2: {
- fontWeight: 400,
- fontSize: "22px",
- lineHeight: "30px",
- },
- h3: {
- fontWeight: 400,
- fontSize: "18px",
- lineHeight: "26px",
- },
- h4: {
- fontWeight: 500,
- fontSize: "15px",
- lineHeight: "22px",
- },
- h5: {
- fontWeight: 500,
- fontSize: "13px",
- lineHeight: "19px",
- },
- body1: {
- fontWeight: 400,
- fontSize: "15px",
- lineHeight: "22px"
- },
- body2: {
- fontWeight: 400,
- fontSize: "13px",
- lineHeight: "19px",
- },
- caption: {
- fontWeight: 400,
- fontSize: "12px",
- lineHeight: "16px",
- },
- },
- components: {
- MuiButton: {
- styleOverrides: {
- root: {
- height: "46px",
- fontWeight: 700,
- fontSize: "15px",
- lineHeight: "17px",
- textTransform: "none",
- },
- sizeSmall: {
- height: "36px",
- },
- contained: {
- background: "#005699",
- "&:hover": {
- background: "#0071C9",
- },
- },
- outlined: {
- background: "#FFF",
- borderColor: "#0056995C",
- color: "#005699",
- "&:hover": {
- background: "#0056991A",
- borderColor: "#005699",
- },
- },
- text: {
- background: "#fff",
- color: "#005699",
- "&:hover": {
- background: "#0056991A",
- },
- },
- },
- },
- MuiSwitch: {
- defaultProps: {
- disableRipple: true,
- },
- styleOverrides: {
- root: {
- width: "60px",
- height: "30px",
- padding: 0,
- },
- switchBase: {
- padding: 0,
- "&.Mui-checked": {
- transform: `translateX(30px)`,
- },
- },
- thumb: {
- width: "28px",
- height: "28px",
- border: "1px solid #005699",
- ".Mui-checked.Mui-checked &": {
- width: "30px",
- height: "30px",
- border: "none",
- }
- },
- track: {
- backgroundColor: "#0056991A",
- borderRadius: "30px",
- opacity: 1,
- ".Mui-checked.Mui-checked + &": {
- backgroundColor: "#0056991A",
- opacity: 1,
- }
- },
- colorPrimary: {
- color: "#fff",
- "&.Mui-checked": {
- color: "#005699",
- },
- },
- },
- },
- MuiCssBaseline: {
- styleOverrides: `
- @font-face {
- font-family: "Ubuntu";
- src: url("./fonts/Ubuntu-Th.ttf");
- font-weight: 100;
- font-style: normal;
- }
- @font-face {
- font-family: "Ubuntu";
- src: url("./fonts/Ubuntu-L.ttf");
- font-weight: 300;
- font-style: normal;
- }
- @font-face {
- font-family: "Ubuntu";
- src: url("./fonts/Ubuntu-LI.ttf");
- font-weight: 300;
- font-style: italic;
- }
- @font-face {
- font-family: "Ubuntu";
- src: url("./fonts/Ubuntu-R.ttf");
- font-weight: 400;
- font-style: normal;
- }
- @font-face {
- font-family: "Ubuntu";
- src: url("./fonts/Ubuntu-RI.ttf");
- font-weight: 400;
- font-style: italic;
- }
- @font-face {
- font-family: "Ubuntu";
- src: url("./fonts/Ubuntu-M.ttf");
- font-weight: 500;
- font-style: normal;
- }
- @font-face {
- font-family: "Ubuntu";
- src: url("./fonts/Ubuntu-MI.ttf");
- font-weight: 500;
- font-style: italic;
- }
- @font-face {
- font-family: "Ubuntu";
- src: url("./fonts/Ubuntu-B.ttf");
- font-weight: 700;
- font-style: normal;
- }
- @font-face {
- font-family: "Ubuntu";
- src: url("./fonts/Ubuntu-BI.ttf");
- font-weight: 700;
- font-style: italic;
- }
- `,
- },
- },
-});
+import defaultTheme from './themes/default'
const Home = (props) => {
console.log(`home ${props}`)
@@ -236,7 +51,7 @@
</Routes>
}
- return <ThemeProvider theme={theme}>
+ return <ThemeProvider theme={defaultTheme}>
<Routes>
<Route path="/account">
<Route index element={<AccountSelection />} />
diff --git a/client/src/themes/default.js b/client/src/themes/default.js
new file mode 100644
index 0000000..11c3193
--- /dev/null
+++ b/client/src/themes/default.js
@@ -0,0 +1,189 @@
+import { createTheme } from "@mui/material";
+
+export default createTheme({
+ typography: {
+ fontFamily: "Ubuntu",
+ h1: {
+ fontWeight: 400,
+ fontSize: "26px",
+ lineHeight: "36px",
+ },
+ h2: {
+ fontWeight: 400,
+ fontSize: "22px",
+ lineHeight: "30px",
+ },
+ h3: {
+ fontWeight: 400,
+ fontSize: "18px",
+ lineHeight: "26px",
+ },
+ h4: {
+ fontWeight: 500,
+ fontSize: "15px",
+ lineHeight: "22px",
+ },
+ h5: {
+ fontWeight: 500,
+ fontSize: "13px",
+ lineHeight: "19px",
+ },
+ body1: {
+ fontWeight: 400,
+ fontSize: "15px",
+ lineHeight: "22px"
+ },
+ body2: {
+ fontWeight: 400,
+ fontSize: "13px",
+ lineHeight: "19px",
+ },
+ caption: {
+ fontWeight: 400,
+ fontSize: "12px",
+ lineHeight: "16px",
+ },
+ },
+ components: {
+ MuiButton: {
+ styleOverrides: {
+ root: {
+ height: "46px",
+ fontWeight: 700,
+ fontSize: "15px",
+ lineHeight: "17px",
+ textTransform: "none",
+ },
+ sizeSmall: {
+ height: "36px",
+ },
+ contained: {
+ background: "#005699",
+ "&:hover": {
+ background: "#0071C9",
+ },
+ },
+ outlined: {
+ background: "#FFF",
+ borderColor: "#0056995C",
+ color: "#005699",
+ "&:hover": {
+ background: "#0056991A",
+ borderColor: "#005699",
+ },
+ },
+ text: {
+ background: "#fff",
+ color: "#005699",
+ "&:hover": {
+ background: "#0056991A",
+ },
+ },
+ },
+ },
+ MuiTextField: {
+
+ },
+ MuiSwitch: {
+ defaultProps: {
+ disableRipple: true,
+ },
+ styleOverrides: {
+ root: {
+ width: "60px",
+ height: "30px",
+ padding: 0,
+ },
+ switchBase: {
+ padding: 0,
+ "&.Mui-checked": {
+ transform: `translateX(30px)`,
+ },
+ },
+ thumb: {
+ width: "28px",
+ height: "28px",
+ border: "1px solid #005699",
+ ".Mui-checked.Mui-checked &": {
+ width: "30px",
+ height: "30px",
+ border: "none",
+ }
+ },
+ track: {
+ backgroundColor: "#0056991A",
+ borderRadius: "30px",
+ opacity: 1,
+ ".Mui-checked.Mui-checked + &": {
+ backgroundColor: "#0056991A",
+ opacity: 1,
+ }
+ },
+ colorPrimary: {
+ color: "#fff",
+ "&.Mui-checked": {
+ color: "#005699",
+ },
+ },
+ },
+ },
+ MuiCssBaseline: {
+ styleOverrides: `
+ @font-face {
+ font-family: "Ubuntu";
+ src: url("./fonts/Ubuntu-Th.ttf");
+ font-weight: 100;
+ font-style: normal;
+ }
+ @font-face {
+ font-family: "Ubuntu";
+ src: url("./fonts/Ubuntu-L.ttf");
+ font-weight: 300;
+ font-style: normal;
+ }
+ @font-face {
+ font-family: "Ubuntu";
+ src: url("./fonts/Ubuntu-LI.ttf");
+ font-weight: 300;
+ font-style: italic;
+ }
+ @font-face {
+ font-family: "Ubuntu";
+ src: url("./fonts/Ubuntu-R.ttf");
+ font-weight: 400;
+ font-style: normal;
+ }
+ @font-face {
+ font-family: "Ubuntu";
+ src: url("./fonts/Ubuntu-RI.ttf");
+ font-weight: 400;
+ font-style: italic;
+ }
+ @font-face {
+ font-family: "Ubuntu";
+ src: url("./fonts/Ubuntu-M.ttf");
+ font-weight: 500;
+ font-style: normal;
+ }
+ @font-face {
+ font-family: "Ubuntu";
+ src: url("./fonts/Ubuntu-MI.ttf");
+ font-weight: 500;
+ font-style: italic;
+ }
+ @font-face {
+ font-family: "Ubuntu";
+ src: url("./fonts/Ubuntu-B.ttf");
+ font-weight: 700;
+ font-style: normal;
+ }
+ @font-face {
+ font-family: "Ubuntu";
+ src: url("./fonts/Ubuntu-BI.ttf");
+ font-weight: 700;
+ font-style: italic;
+ }
+ `,
+ },
+ },
+});