-
Notifications
You must be signed in to change notification settings - Fork 440
/
StyleHandler.tsx
95 lines (84 loc) · 2.87 KB
/
StyleHandler.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
// This file is part of MinIO Operator
// Copyright (c) 2021 MinIO, Inc.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { Fragment } from "react";
import {
StyledEngineProvider,
Theme,
ThemeProvider,
} from "@mui/material/styles";
import withStyles from "@mui/styles/withStyles";
import theme from "./theme/main";
import "react-virtualized/styles.css";
import "react-grid-layout/css/styles.css";
import "react-resizable/css/styles.css";
import { generateOverrideTheme } from "./utils/stylesUtils";
import "./index.css";
import { useSelector } from "react-redux";
import { AppState } from "./store";
import { GlobalStyles, ThemeHandler } from "mds";
declare module "@mui/styles/defaultTheme" {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface DefaultTheme extends Theme {}
}
interface IStyleHandler {
children: React.ReactNode;
}
const StyleHandler = ({ children }: IStyleHandler) => {
const colorVariants = useSelector(
(state: AppState) => state.system.overrideStyles,
);
let thm = theme;
let globalBody: any = {};
let rowColor: any = { color: "#393939" };
let detailsListPanel: any = { backgroundColor: "#fff" };
if (colorVariants) {
thm = generateOverrideTheme(colorVariants);
globalBody = { backgroundColor: colorVariants.backgroundColor };
rowColor = { color: colorVariants.fontColor };
detailsListPanel = {
backgroundColor: colorVariants.backgroundColor,
color: colorVariants.fontColor,
};
}
// Kept for Compatibility purposes. Once mds migration is complete then this will be removed
const GlobalCss = withStyles({
// @global is handled by jss-plugin-global.
"@global": {
body: {
...globalBody,
},
".rowLine": {
...rowColor,
},
".detailsListPanel": {
...detailsListPanel,
},
},
})(() => null);
// ThemeHandler is needed for MDS components theming. Eventually we will remove Theme Provider & use only mds themes.
return (
<Fragment>
<GlobalStyles />
<GlobalCss />
<StyledEngineProvider injectFirst>
<ThemeProvider theme={thm}>
<ThemeHandler>{children}</ThemeHandler>
</ThemeProvider>
</StyledEngineProvider>
</Fragment>
);
};
export default StyleHandler;