Merge pull request #21 from oslabs-beta/katrina1

adjusted drop-box UI

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/main/AddLink.tsx

@@ -5,8 +5,9 @@ import FormControl from '@material-ui/core/FormControl';
 import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
 import { InputLabel } from '@material-ui/core';
-
+import { TextField } from '@material-ui/core';
 import { styleContext } from '../../containers/AppContainer';
+import { makeStyles } from '@mui/material/styles'
 
 function AddLink({ id, onClickHandler }) {
   const { isThemeLight } = useContext(styleContext);
@@ -37,15 +38,16 @@ function AddLink({ id, onClickHandler }) {
   }
 
   const pagesItems = state.components.filter(comp => state.rootComponents.includes(comp.id));
-  const dropDown = pagesItems.map(comp => <MenuItem style={{ color: 'black' }} value={comp.name}>{comp.name}</MenuItem>);
+  const dropDown = [<MenuItem style={{ color: isThemeLight? '#000' : '#fff'}} disabled hidden selected>Pages</MenuItem>].concat(pagesItems.map(comp => <MenuItem style={{ color: isThemeLight? '#000' : '#fff'}} value={comp.name}>{comp.name}</MenuItem>));
+
 
   return (
-    <div style={{padding: '1px', float: 'right', display: 'flex', border: '2px solid red', alignSelf: 'center'}}>
-      <FormControl size='medium' style={{display: 'flex'}}>
-          {/* <InputLabel style={ { color: isThemeLight? '#fff' : '#000'} }>Pages</InputLabel> */}
-          <Select label='pages'
-            variant="outlined"
-            onMouseDown={onClickHandler}
+    <div style={{float: 'right'}}>
+      <FormControl variant='outlined' focused='true' style={ {width: '100%'} }>
+      <InputLabel id='page-select-label' style={ {color: isThemeLight? '#000' : '#fff'} }>Pages</InputLabel>
+          <Select 
+            label='Pages'
+            // onMouseDown={onClickHandler}
             onChange={handlePageSelect}
             id="page-select"
             style={ isThemeLight

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({
     },
   },
 });
-