felixfoertsch/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2026-04-26 11:10:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

mui5

Browse Source
This commit is contained in:
Olivier Gagnon
2021-09-16 19:23:03 -04:00
parent a21c0f4a0b
commit 407ed70ae3
54 changed files with 1984 additions and 1022 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ui/React/Theme.tsx
+124 -81
View File
@@ -1,5 +1,10 @@
import React from "react";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import { createTheme, ThemeProvider, Theme, StyledEngineProvider, adaptV4Theme } from "@mui/material/styles";
declare module "@mui/styles/defaultTheme" {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface DefaultTheme extends Theme {}
}
export const colors = {
primarylight: "#0f0",
@@ -27,7 +32,7 @@ export const colors = {
int: "#6495ed",
};
export const theme = createMuiTheme({
export const theme = createTheme({
palette: {
primary: {
light: colors.primarylight,
@@ -54,138 +59,174 @@ export const theme = createMuiTheme({
textTransform: "none",
},
},
overrides: {
components: {
MuiInputBase: {
root: {
backgroundColor: colors.well,
},
input: {
color: colors.primary,
"&::placeholder": {
userSelect: "none",
color: colors.primarydark,
styleOverrides: {
root: {
backgroundColor: colors.well,
},
input: {
color: colors.primary,
"&::placeholder": {
userSelect: "none",
color: colors.primarydark,
},
},
},
},
MuiInput: {
root: {
backgroundColor: colors.well,
borderBottomColor: "#fff",
},
underline: {
"&:hover": {
borderBottomColor: colors.primarydark,
styleOverrides: {
root: {
backgroundColor: colors.well,
borderBottomColor: "#fff",
},
"&:before": {
borderBottomColor: colors.primary,
},
"&:after": {
borderBottomColor: colors.primarylight,
underline: {
"&:hover": {
borderBottomColor: colors.primarydark,
},
"&:before": {
borderBottomColor: colors.primary,
},
"&:after": {
borderBottomColor: colors.primarylight,
},
},
},
},
MuiInputLabel: {
root: {
color: colors.primarydark, // why is this switched?
userSelect: "none",
"&:before": {
color: colors.primarylight,
styleOverrides: {
root: {
color: colors.primarydark, // why is this switched?
userSelect: "none",
"&:before": {
color: colors.primarylight,
},
},
},
},
MuiButton: {
root: {
backgroundColor: "#333",
border: "1px solid " + colors.well,
color: colors.primary,
margin: "5px",
padding: "3px 5px",
"&:hover": {
backgroundColor: colors.black,
},
styleOverrides: {
root: {
backgroundColor: "#333",
border: "1px solid " + colors.well,
color: colors.primary,
margin: "5px",
padding: "3px 5px",
"&:hover": {
backgroundColor: colors.black,
},
borderRadius: 0,
borderRadius: 0,
},
},
},
MuiSelect: {
icon: {
color: colors.primary,
styleOverrides: {
icon: {
color: colors.primary,
},
},
},
MuiMenu: {
list: {
backgroundColor: colors.well,
styleOverrides: {
list: {
backgroundColor: colors.well,
},
},
},
MuiMenuItem: {
root: {
color: colors.primary,
styleOverrides: {
root: {
color: colors.primary,
},
},
},
MuiAccordionSummary: {
root: {
backgroundColor: "#111",
styleOverrides: {
root: {
backgroundColor: "#111",
},
},
},
MuiAccordionDetails: {
root: {
backgroundColor: colors.black,
styleOverrides: {
root: {
backgroundColor: colors.black,
},
},
},
MuiIconButton: {
root: {
color: colors.primary,
styleOverrides: {
root: {
color: colors.primary,
},
},
},
MuiTooltip: {
tooltip: {
fontSize: "1em",
color: colors.primary,
backgroundColor: colors.well,
borderRadius: 0,
border: "2px solid white",
styleOverrides: {
tooltip: {
fontSize: "1em",
color: colors.primary,
backgroundColor: colors.well,
borderRadius: 0,
border: "2px solid white",
},
},
},
MuiSvgIcon: {
root: {
color: colors.primary,
styleOverrides: {
root: {
color: colors.primary,
},
},
},
MuiDrawer: {
paper: {
"&::-webkit-scrollbar": {
// webkit
display: "none",
styleOverrides: {
paper: {
"&::-webkit-scrollbar": {
// webkit
display: "none",
},
scrollbarWidth: "none", // firefox
backgroundColor: colors.black,
},
paperAnchorDockedLeft: {
borderRight: "1px solid " + colors.welllight,
},
scrollbarWidth: "none", // firefox
backgroundColor: colors.black,
},
paperAnchorDockedLeft: {
borderRight: "1px solid " + colors.welllight,
},
},
MuiDivider: {
root: {
backgroundColor: colors.welllight,
styleOverrides: {
root: {
backgroundColor: colors.welllight,
},
},
},
MuiFormControlLabel: {
root: {
color: colors.primary,
styleOverrides: {
root: {
color: colors.primary,
},
},
},
MuiSwitch: {
switchBase: {
color: colors.primarydark,
},
track: {
backgroundColor: colors.welllight,
styleOverrides: {
switchBase: {
color: colors.primarydark,
},
track: {
backgroundColor: colors.welllight,
},
},
},
MuiPaper: {
root: {
backgroundColor: colors.black,
border: "1px solid " + colors.welllight,
styleOverrides: {
root: {
backgroundColor: colors.black,
border: "1px solid " + colors.welllight,
},
},
},
},
@@ -195,6 +236,8 @@ interface IProps {
children: JSX.Element[] | JSX.Element;
}
export const Theme = ({ children }: IProps): React.ReactElement => (
<ThemeProvider theme={theme}>{children}</ThemeProvider>
export const TTheme = ({ children }: IProps): React.ReactElement => (
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>{children}</ThemeProvider>
</StyledEngineProvider>
);