From 2d4e9ddedd075b8160b603b815511d76cd347879 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9o=20Banno-Cloutier?=
<leo.banno-cloutier@savoirfairelinux.com>
Date: Mon, 12 Jun 2023 16:05:36 -0400
Subject: [PATCH] jams-react-client: update theme color
Gitlab: https://git.jami.net/savoirfairelinux/jami-client-qt/-/issues/1097#note_42630
Change-Id: I0de5e9428cd4236d34fc491563c8f3a2d506f87c
---
.../assets/css/material-dashboard.css | 2 +-
.../assets/jss/material-dashboard-react.js | 2 +-
.../components/cardStyle.js | 1 -
.../components/sidebarStyle.js | 2 +-
jams-react-client/src/index.js | 113 +++++++++++++-----
5 files changed, 89 insertions(+), 31 deletions(-)
diff --git a/jams-react-client/documentation/assets/css/material-dashboard.css b/jams-react-client/documentation/assets/css/material-dashboard.css
index 380e1b5f..1e305499 100644
--- a/jams-react-client/documentation/assets/css/material-dashboard.css
+++ b/jams-react-client/documentation/assets/css/material-dashboard.css
@@ -5520,7 +5520,7 @@ footer .btn {
}
.card [data-background-color="blue"] {
- background: linear-gradient(60deg, #26c6da, #00acc1);
+ background: #005699;
box-shadow: 0 12px 20px -10px rgba(0, 188, 212, 0.28),
0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(0, 188, 212, 0.2);
}
diff --git a/jams-react-client/src/assets/jss/material-dashboard-react.js b/jams-react-client/src/assets/jss/material-dashboard-react.js
index 4b55358e..e4262636 100644
--- a/jams-react-client/src/assets/jss/material-dashboard-react.js
+++ b/jams-react-client/src/assets/jss/material-dashboard-react.js
@@ -74,7 +74,7 @@ const primaryColor = ["#ffffff", "#ab47bc", "#8e24aa", "#af2cc5"];
const warningColor = ["#ff9800", "#ffa726", "#fb8c00", "#ffa21a"];
const dangerColor = ["#f44336", "#ef5350", "#e53935", "#f55a4e"];
const successColor = ["#4caf50", "#66bb6a", "#43a047", "#5cb860"];
-const infoColor = ["#00acc1", "#26c6da", "#00acc1", "#00d3ee"];
+const infoColor = ["#005699", "#005699", "#005699", "#00d3ee"];
const roseColor = ["#e91e63", "#ec407a", "#d81b60", "#eb3573"];
const grayColor = [
"#999",
diff --git a/jams-react-client/src/assets/jss/material-dashboard-react/components/cardStyle.js b/jams-react-client/src/assets/jss/material-dashboard-react/components/cardStyle.js
index aa90d468..83314782 100644
--- a/jams-react-client/src/assets/jss/material-dashboard-react/components/cardStyle.js
+++ b/jams-react-client/src/assets/jss/material-dashboard-react/components/cardStyle.js
@@ -3,7 +3,6 @@ import {
whiteColor,
hexToRgb,
} from "assets/jss/material-dashboard-react.js";
-import { grayColor } from "assets/jss/material-dashboard-react";
const cardStyle = {
card: {
diff --git a/jams-react-client/src/assets/jss/material-dashboard-react/components/sidebarStyle.js b/jams-react-client/src/assets/jss/material-dashboard-react/components/sidebarStyle.js
index 227b7cfe..eb2a6ca5 100644
--- a/jams-react-client/src/assets/jss/material-dashboard-react/components/sidebarStyle.js
+++ b/jams-react-client/src/assets/jss/material-dashboard-react/components/sidebarStyle.js
@@ -22,7 +22,7 @@ const sidebarStyle = (theme) => ({
top: "0",
bottom: "0",
left: "0",
- zIndex: "1",
+ zIndex: 10,
...boxShadow,
width: drawerWidth,
[theme.breakpoints.up("md")]: {
diff --git a/jams-react-client/src/index.js b/jams-react-client/src/index.js
index 8f9b8c4d..9c43a7cd 100644
--- a/jams-react-client/src/index.js
+++ b/jams-react-client/src/index.js
@@ -15,7 +15,7 @@
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
-import React, { Suspense } from "react";
+import React, { StrictMode, Suspense } from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { Router, Route, Switch, Redirect } from "react-router-dom";
@@ -23,6 +23,8 @@ import { ProtectedRoute } from "protected.route";
import { ConfiguredRoute } from "configured.route";
import auth from "./auth";
+import { ThemeProvider, createTheme } from "@material-ui/core";
+
// core components
import UsersRoute from "routes/UsersRoute.js";
import UserRoute from "routes/UserRoute.js";
@@ -40,31 +42,88 @@ import "assets/css/material-dashboard-react.css?v=1.9.0";
import "./i18n";
const hist = createBrowserHistory();
-auth.checkServerInstalled(() => {
- auth.checkAdminAccountStatus(() => {
- auth.checkLastKnownStep(() => {
- ReactDOM.render(
- <Suspense fallback={<div>Loading...</div>}>
- <Router history={hist}>
- <Switch>
- <ConfiguredRoute path="/signin" component={SignIn} />
- <ProtectedRoute path="/users" component={UsersRoute} />
- <ProtectedRoute path="/user/:username" component={UserRoute} />
- <ProtectedRoute path="/createuser" component={CreateUserRoute} />
- <ProtectedRoute path="/groups" component={GroupsRoute} />
- <ProtectedRoute path="/group/:groupid" component={GroupRoute} />
- <ProtectedRoute path="/blueprints" component={BlueprintsRoute} />
- <ProtectedRoute
- path="/blueprint/:blueprintname"
- component={BlueprintRoute}
- />
- <ProtectedRoute path="/settings" component={SettingsRoute} />
- <Redirect from="/" to="/signin" />
- </Switch>
- </Router>
- </Suspense>,
- document.getElementById("root")
- );
+
+const theme = createTheme({
+ palette: {
+ primary: {
+ main: "#005699",
+ },
+ secondary: {
+ main: "#ffffff",
+ },
+ },
+});
+
+if (process.env.NODE_ENV === "development") {
+ auth.checkLastKnownStep(() => {
+ ReactDOM.render(
+ <StrictMode>
+ <ThemeProvider theme={theme}>
+ <Suspense fallback={<div>Loading...</div>}>
+ <Router history={hist}>
+ <Switch>
+ <ConfiguredRoute path="/signin" component={SignIn} />
+ <Route path="/users" component={UsersRoute} />
+ <Route path="/user/:username" component={UserRoute} />
+ <Route path="/createuser" component={CreateUserRoute} />
+ <Route path="/groups" component={GroupsRoute} />
+ <Route path="/group/:groupid" component={GroupRoute} />
+ <Route path="/blueprints" component={BlueprintsRoute} />
+ <Route
+ path="/blueprint/:blueprintname"
+ component={BlueprintRoute}
+ />
+ <Route path="/settings" component={SettingsRoute} />
+ <Redirect from="/" to="/signin" />
+ </Switch>
+ </Router>
+ </Suspense>
+ </ThemeProvider>
+ </StrictMode>,
+ document.getElementById("root")
+ );
+ });
+} else {
+ auth.checkServerInstalled(() => {
+ auth.checkAdminAccountStatus(() => {
+ auth.checkLastKnownStep(() => {
+ ReactDOM.render(
+ <ThemeProvider theme={theme}>
+ <Suspense fallback={<div>Loading...</div>}>
+ <Router history={hist}>
+ <Switch>
+ <ConfiguredRoute path="/signin" component={SignIn} />
+ <ProtectedRoute path="/users" component={UsersRoute} />
+ <ProtectedRoute
+ path="/user/:username"
+ component={UserRoute}
+ />
+ <ProtectedRoute
+ path="/createuser"
+ component={CreateUserRoute}
+ />
+ <ProtectedRoute path="/groups" component={GroupsRoute} />
+ <ProtectedRoute
+ path="/group/:groupid"
+ component={GroupRoute}
+ />
+ <ProtectedRoute
+ path="/blueprints"
+ component={BlueprintsRoute}
+ />
+ <ProtectedRoute
+ path="/blueprint/:blueprintname"
+ component={BlueprintRoute}
+ />
+ <ProtectedRoute path="/settings" component={SettingsRoute} />
+ <Redirect from="/" to="/signin" />
+ </Switch>
+ </Router>
+ </Suspense>
+ </ThemeProvider>,
+ document.getElementById("root")
+ );
+ });
});
});
-});
+}
--
GitLab