mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-10-23 10:13:13 +02:00
80 lines
1.6 KiB
TypeScript
80 lines
1.6 KiB
TypeScript
/**
|
|
* Wrapper around material-ui's TextField component that styles it with
|
|
* Bitburner's UI theme
|
|
*/
|
|
|
|
import React from "react";
|
|
import { makeStyles, TextField, TextFieldProps } from "@material-ui/core";
|
|
|
|
const backgroundColorStyles = {
|
|
backgroundColor: "rgba(57, 54, 54, 0.9)",
|
|
"&:hover": {
|
|
backgroundColor: "rgba(70, 70, 70, 0.9)",
|
|
},
|
|
};
|
|
|
|
const formControlStyles = {
|
|
border: "1px solid #e2e2e1",
|
|
overflow: "hidden",
|
|
borderRadius: 4,
|
|
color: "white",
|
|
...backgroundColorStyles,
|
|
};
|
|
|
|
const useStyles = makeStyles({
|
|
root: {
|
|
...formControlStyles,
|
|
},
|
|
});
|
|
|
|
const useInputStyles = makeStyles({
|
|
root: {
|
|
...backgroundColorStyles,
|
|
color: "white",
|
|
},
|
|
focused: {
|
|
backgroundColor: "rgba(70, 70, 70, 0.9)",
|
|
},
|
|
disabled: {
|
|
color: "white",
|
|
},
|
|
});
|
|
|
|
const useLabelStyles = makeStyles({
|
|
root: {
|
|
color: "white",
|
|
},
|
|
focused: {
|
|
color: "white !important", // Need important to override styles from FormLabel
|
|
},
|
|
disabled: {
|
|
color: "white !important", // Need important to override styles from FormLabel
|
|
},
|
|
});
|
|
|
|
export const MuiTextField: React.FC<TextFieldProps> = (props: TextFieldProps) => {
|
|
return (
|
|
<TextField
|
|
{...props}
|
|
classes={{
|
|
...useStyles(),
|
|
...props.classes,
|
|
}}
|
|
InputProps={{
|
|
classes: {
|
|
...useInputStyles(),
|
|
...props.InputProps?.classes,
|
|
},
|
|
...props.InputProps,
|
|
}}
|
|
InputLabelProps={{
|
|
classes: {
|
|
...useLabelStyles(),
|
|
...props.InputLabelProps?.classes,
|
|
},
|
|
...props.InputLabelProps,
|
|
}}
|
|
/>
|
|
);
|
|
};
|