solve css styling rewriting mui defaults

Co-authored-by: Philip Hua <[email protected]>
    Co-authored-by: Miles Wright <[email protected]>
    Co-authored-by: William Rittwage  <[email protected]>
Co-authored-by: Daniel Reilley <[email protected]>

Author: pmhua

app/src/components/bottom/BottomTabs.tsx

@@ -117,7 +117,7 @@ const useStyles = makeStyles(theme => ({
 
   },
   rootLight: isThemeLight => ({
-    backgroundColor: isThemeLight ? '#003366': 'rgb(33,34,45)'
+    backgroundColor: isThemeLight ? 'blue': 'red'
   }),
   bottomHeader: {
     flex: 1,

app/src/components/right/StatePropsPanel.tsx

@@ -5,6 +5,9 @@ import {
   makeStyles,
   styled,
   Theme,
+  createTheme,
+  ThemeProvider,
+  withStyles
 } from "@material-ui/core/styles";
 import Button from "@material-ui/core/Button";
 import {
@@ -24,6 +27,7 @@ import {
 import StateContext from "../../context/context";
 import TableStateProps from "./TableStateProps";
 
+
 const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
   const classes = useStyles();
   const [state] = useContext(StateContext);
@@ -126,14 +130,16 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
             variant="outlined"
             value={inputKey}
             onChange={(e) => setInputKey(e.target.value)}
-          />
+            className={isThemeLight ? classes.rootLight : classes.rootDark} 
+            />
           <TextField
             id="textfield-value"
+            className={isThemeLight ? classes.rootLight : classes.rootDark} 
             label="value:"
             variant="outlined"
             value={inputValue}
             onChange={(e) => setInputValue(e.target.value)}
-          />
+            />
           <FormControl required className={classes.formControl}>
             <InputLabel id="select-required-label">Type</InputLabel>
             <Select
@@ -188,7 +194,7 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
 };
 
 const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+  ({
     inputField: {
       marginTop: "10px",
       borderRadius: "5px",
@@ -294,6 +300,22 @@ const useStyles = makeStyles((theme: Theme) =>
     selectEmpty: {
       marginTop: theme.spacing(2),
     },
+    color: {
+      color: '#fff',
+    },
+    rootLight: {
+      '& .MuiFormLabel-root': {
+        color: 'rgba(0,0,0,0.54)'
+      }
+    },
+    rootDark: {
+      '& .MuiFormLabel-root': {
+        color: '#fff'
+      },
+      '& .MuiOutlinedInput-notchedOutline': {
+        borderColor: '#fff'
+      }
+    }
   })
 );
 
@@ -308,4 +330,5 @@ const MyButton = styled(Button)({
   padding: "0 30px",
 });
 
+
 export default StatePropsPanel;