fixed visual bugs where text is white while in light mode

Author: calvincao

app/src/components/form/Selector.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import FormControl from '@material-ui/core/FormControl';
 import Select from '@material-ui/core/Select';
 import MenuItem from '@material-ui/core/MenuItem';
+import { SelectLight, SelectDark } from '../../public/styles/theme';
 
 const FormSelector = (props): JSX.Element => {
   const items = [];
@@ -13,13 +14,13 @@ const FormSelector = (props): JSX.Element => {
   })
   return (
     <div className={props.classes.configRow}>
-        
       <div className={props.isThemeLight ? `${props.classes.configType} ${props.classes.lightThemeFontColor}` : `${props.classes.configType} ${props.classes.darkThemeFontColor}`}>
         <h3>{props.title}</h3>
       </div>
       <div className={props.classes.configValue}>
         <FormControl variant="filled" className={props.classes.formControl}>
           <Select
+            style={props.isThemeLight ? { border: '1px solid #0099e6' } : null }
             value={props.selectValue}
             name={props.name}
             onChange={props.handleChange}

app/src/components/right/ComponentPanelItem.tsx

@@ -52,9 +52,12 @@ const ComponentPanelItem: React.FC<{
         display: 'grid',
         color: isThemeLight ? 'black' : 'white',
         backgroundColor: 'transparent',
-        border: root
-          ? '2px dotted #186BB4'
-          : '2px solid #186BB4',
+        // border: root
+        //   ? '2px dotted #186BB4'
+        //   : '2px solid #186BB4',
+        border: isThemeLight
+          ? '2px solid black'
+          : '2px solid white',
         borderRadius: '4px',
         borderColor: '#000000',
         margin: '5px 0px'

app/src/components/right/StatePropsPanel.tsx

@@ -139,29 +139,32 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
               className={isThemeLight ? `${classes.selectEmpty} ${classes.rootUnderlineLight} ${classes.inputTextLight}` : `${classes.selectEmpty} ${classes.rootUnderlineDark} ${classes.inputTextDark}`}
               value={inputType}
               onChange={(event, index) => setInputType(index.props.value)}
+              style={ isThemeLight
+                ? {backgroundColor: '#eef0f1', color: '#000', border: '1px solid black', height: '28px', width: '200px'}
+                : {backgroundColor: 'gray', color: '#fff', border: '1px solid white', height: '28px', width: '200px'}}
             >
-              <MenuItem value="">
+              <MenuItem value="" style={{ color: 'black' }}>
                 <em>Types</em>
               </MenuItem>
-              <MenuItem id="type-selector" value={"string"}>
+              <MenuItem id="type-selector" value={"string"} style={{ color: 'black' }}>
                 String
               </MenuItem>
-              <MenuItem id="type-selector" value={"number"}>
+              <MenuItem id="type-selector" value={"number"} style={{ color: 'black' }}>
                 Number
               </MenuItem>
-              <MenuItem id="type-selector" value={"boolean"}>
+              <MenuItem id="type-selector" value={"boolean"} style={{ color: 'black' }}>
                 Boolean
               </MenuItem>
-              <MenuItem id="type-selector" value={"array"}>
+              <MenuItem id="type-selector" value={"array"} style={{ color: 'black' }}>
                 Array
               </MenuItem>
-              <MenuItem id="type-selector" value={"object"}>
+              <MenuItem id="type-selector" value={"object"} style={{ color: 'black' }}>
                 Object
               </MenuItem>
-              <MenuItem id="type-selector" value={"undefined"}>
+              <MenuItem id="type-selector" value={"undefined"} style={{ color: 'black' }}>
                 Undefined
               </MenuItem>
-              <MenuItem id="type-selector" value={"any"}>
+              <MenuItem id="type-selector" value={"any"} style={{ color: 'black' }}>
                 Any
               </MenuItem>
             </Select>

app/src/public/styles/theme.ts

@@ -60,4 +60,3 @@ export const SigninLight = createTheme({
     },
   },
 });
-