fixed some visual bugs

Author: calvincao

app/src/components/form/Selector.tsx

@@ -8,7 +8,7 @@ const FormSelector = (props): JSX.Element => {
   const items = [];
   let key = 1;
   props.items.forEach(el => {
-    items.push(<MenuItem value={el.value} key={`menu${key}`}>{el.text}</MenuItem>);
+    items.push(<MenuItem style={{ color: 'black' }} value={el.value} key={`menu${key}`}>{el.text}</MenuItem>);
     key++
   })
   return (

app/src/components/left/HTMLPanel.tsx

@@ -172,6 +172,11 @@ const HTMLPanel = (props): JSX.Element => {
                 onChange={handleTagChange}
                 className={isThemeLight ? `${classes.input} ${classes.lightThemeFontColor}` : `${classes.input} ${classes.darkThemeFontColor}`}
                 style={{ margin: '10px' }}
+                InputProps={{
+                  style: {
+                    color: isThemeLight ? 'black' : 'white'
+                  }
+                }}
               />
 
               {(!tag.charAt(0).match(/[A-Za-z]/) || !alphanumeric(tag) || tag.trim() === '' || checkNameDupe(tag))
@@ -192,8 +197,14 @@ const HTMLPanel = (props): JSX.Element => {
               onChange={handleNameChange}
               autoComplete="off"
               className={isThemeLight ? `${classes.input} ${classes.lightThemeFontColor}` : `${classes.input} ${classes.darkThemeFontColor}`}
-              style={{ margin: '10px' }}
+              style={{}}
+              InputProps={{
+                style: {
+                  color: isThemeLight ? 'black' : 'white'
+                }
+              }}
             />
+            
 
             {(!name.charAt(0).match(/[A-Za-z]/) || !alphanumeric(name) || name.trim() === '' || name.length > 10 || checkNameDupe(name))
               && <span className={isThemeLight ? `${classes.errorMessage} ${classes.errorMessageLight}` : `${classes.errorMessage} ${classes.errorMessageDark}`}>
@@ -244,8 +255,8 @@ const useStyles = makeStyles({
     textOverflow: 'ellipsis',
     backgroundColor: 'rgba(255,255,255,0.15)',
     margin: '0px 0px 0px 0px',
-    width: '160px',
-    height: '30px',
+    // width: '200px',
+    // height: '75px',
     alignSelf: 'center',
     border: '2px solid grey'
   },

app/src/components/right/ComponentPanel.tsx

@@ -152,6 +152,12 @@ const ComponentPanel = ({isThemeLight}): JSX.Element => {
                     // Updated
                     helperText={errorStatus ? errorMsg : ''}
                     onChange={handleNameInput}
+                    style={{}}
+                    InputProps={{
+                      style: {
+                        color: isThemeLight ? 'black' : 'white'
+                      }
+                    }}
               />
               </div>
             </div>
@@ -198,8 +204,8 @@ const useStyles = makeStyles({
     textOverflow: 'ellipsis',
     backgroundColor: 'rgba(255,255,255,0.15)',
     margin: '0px 0px 0px 10px',
-    width: '140px',
-    height: '30px',
+    // width: '140px',
+    // height: '30px',
     borderColor: 'grey',
     border: '2px solid grey'
   },

app/src/public/styles/style.css

@@ -161,7 +161,7 @@ LEFT COLUMN
 }
 .customForm input {
   align-self: center;
-  margin: 10px 0px;
+  margin: 0px 0px;
 }
 
 #newElement {