Merge pull request #16 from oslabs-beta/xiao-LillianUpdating

Merged Lillian/stillUpdating branch changes

Author: yijunliu90

app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx

@@ -4,14 +4,14 @@ import {
   styled,
   Theme
 } from "@material-ui/core/styles";
-import Button from "@material-ui/core/Button";
 import {
   FormControl,
   FormHelperText,
   MenuItem,
   InputLabel,
   Select,
-  TextField
+  TextField,
+  Button
 } from "@material-ui/core";
 import StateContext from "../../../../context/context";
 import TableStateProps from "./TableStateProps";
@@ -239,13 +239,15 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
             </FormHelperText>
           </FormControl>
           <br />
-          <MyButton
-          type="submit"
-          onClick={submitNewState}
-          className={isThemeLight ? `${classes.addComponentButton} ${classes.lightThemeFontColor}` : `${classes.addComponentButton} ${classes.darkThemeFontColor}`}
+          <Button
+            variant='contained'
+            color='primary'
+            type="submit"
+            onClick={submitNewState}
+            className={isThemeLight ? `${classes.addComponentButton} ${classes.lightThemeFontColor}` : `${classes.addComponentButton} ${classes.darkThemeFontColor}`}
           >
             Save
-          </MyButton>
+          </Button>
           <br />
 
         </FormControl>
@@ -370,7 +372,7 @@ const useStyles = makeStyles((theme: Theme) =>
       margin: "-20px 0px 5px 150px",
       borderStyle: "none",
       transition: "0.3s",
-      borderRadius: "25px",
+      // borderRadius: "25px",
     },
     rootToggle: {
       color: "#696969",
@@ -439,14 +441,15 @@ const useStyles = makeStyles((theme: Theme) =>
     }
   })
 );
-const MyButton = styled(Button)({
-  background: "#0099E6",
-  border: 0,
-  borderRadius: 3,
-  boxShadow: "0 0px 0px 2px #1a1a1a",
-  color: "white",
-  height: 24,
-  width: 40,
-  padding: "0 30px",
-});
+// change to Button to keep styling consistent
+// const MyButton = styled(Button)({
+  // background: "#0099E6",
+  // border: 0,
+  // borderRadius: 3,
+  // boxShadow: "0 0px 0px 2px #1a1a1a",
+  // color: "white",
+  // height: 24,
+  // width: 40,
+  // padding: "0 30px",
+// });
 export default StatePropsPanel;

app/src/components/bottom/CodePreview.tsx

@@ -38,7 +38,6 @@ const CodePreview: React.FC<{
 
   const [state] = useContext(StateContext);
   const [, setDivHeight] = useState(0);
-  const components = state.components;
   let currentComponent = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
   );
@@ -59,7 +58,7 @@ const CodePreview: React.FC<{
       type: 'CODE_PREVIEW_INPUT',
       payload: currentComponent.code
     });
-  }, [currentComponent, components]); // Lillian added another dependency here to utilize useEffect
+  }, [currentComponent, state.components]);
 
   /**
    * Handler thats listens to changes in code editor

app/src/components/left/HTMLPanel.tsx

@@ -5,8 +5,9 @@ import { makeStyles, styled } from '@material-ui/core/styles';
 import {
   Button,
   InputLabel,
-  TextField,
+  // TextField,
 } from "@material-ui/core";
+import TextField from '@mui/material/TextField';
 
 /*
 DESCRIPTION: This is the bottom half of the left panel, starting from the 'HTML
@@ -163,8 +164,9 @@ const HTMLPanel = (props): JSX.Element => {
               Tag:
             </InputLabel>
               <TextField
-                color={'primary'}
-                variant={'outlined'}
+                // label='Tag'
+                color='primary'
+                variant='outlined'
                 type="text"
                 name="Tag"
                 value={tag}
@@ -189,8 +191,9 @@ const HTMLPanel = (props): JSX.Element => {
               Element Name:
             </InputLabel>
             <TextField
-              color={'primary'}
-              variant={'outlined'}
+              // label='Element Name'
+              color='primary'
+              variant='outlined'
               type="text"
               name="Tag Name"
               value={name}
@@ -204,19 +207,20 @@ const HTMLPanel = (props): JSX.Element => {
                 }
               }}
             />
-            
-
             {(!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}`}>
                               <em>{errorMsg}</em>
                             </span>}           
-            <AddElementButton
+            <br></br>
+            <Button
               className={isThemeLight ? `${classes.addElementButton} ${classes.lightThemeFontColor}` : `${classes.addElementButton} ${classes.darkThemeFontColor}`}
               id="submitButton"
               type="submit"
+              color='primary'
+              variant='contained'
               value="Add Element"
             >Add Element
-            </AddElementButton>
+            </Button>
           </form>
         </div>
       </div>
@@ -267,13 +271,14 @@ const useStyles = makeStyles({
   addElementButton: {
     backgroundColor: 'transparent',
     height: '40px',
-    width: '105px',
+    width: '200px',
     fontFamily: 'Roboto, Raleway, sans-serif',
     fontSize: '85%',
     textAlign: 'center',
     borderStyle: 'none',
     transition: '0.3s',
     borderRadius: '4px',
+    alignSelf: 'center'
   },
   lightThemeFontColor: {
     color: '#155084',
@@ -288,10 +293,11 @@ const useStyles = makeStyles({
     }
   },
   errorMessage: {
+    display: 'flex',
+    alignSelf: 'center',
     fontSize:"11px", 
     marginTop: "10px",
     width: "150px",
-    marginLeft: "-15px"
   },
   errorMessageLight: {
     color: '#6B6B6B'
@@ -301,16 +307,17 @@ const useStyles = makeStyles({
   }
 });
 
-const AddElementButton = styled(Button)({
-  background: "#0099E6",
-  border: 0,
-  borderRadius: 3,
-  boxShadow: "0 0px 0px 2px #1a1a1a",
-  color: "white",
-  height: 24,
-  width: 160,
-  padding: "0px 30px",
-  alignSelf: 'center',
-});
+// changed to Button component to keep styling consistent
+// const AddElementButton = styled(Button)({
+//   background: "#0099E6",
+//   border: 0,
+//   borderRadius: 3,
+//   boxShadow: "0 0px 0px 2px #1a1a1a",
+//   color: "white",
+//   height: 24,
+//   width: 160,
+//   padding: "0px 30px",
+//   alignSelf: 'center',
+// });
 
 export default HTMLPanel;

app/src/components/main/Canvas.tsx

@@ -146,6 +146,7 @@ function Canvas(props): JSX.Element {
               childId: null
             }
           });
+          // comment out below, not sure what the previous team want to do for this
         // } else {
         //   alert('something is wrong');
           // able to duplicate a component in dev only does not work for prod
@@ -199,9 +200,6 @@ function Canvas(props): JSX.Element {
   // const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
   const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
   const darkCombinedCanvasStyle = combineStyles(darkCanvasStyle, currentComponent.style);
-  // console.log('CURRENTCOMPONENT.CHILDREN : ', currentComponent.children)
-  // console.log('STATE: ', state.components);
-  // console.log('CURRENTCOMPONENT : ', currentComponent);
   return (
     <div className={'componentContainer'} ref={drop} style={props.isThemeLight ? canvasStyle : darkCombinedCanvasStyle} onClick={onClickHandler}>
        {renderChildren(currentComponent.children)}

app/src/components/main/DirectChildComponent.tsx

@@ -18,7 +18,6 @@ function DirectChildComponent({
 
   // find the top-level component corresponding to this instance of the component
   // find the current component to render on the canvas
-
   const referencedComponent: Component = state.components.find(
     (elem: Component) => elem.id === typeId
   );
@@ -64,11 +63,17 @@ function DirectChildComponent({
   );
   // Renders name and not children of subcomponents to clean up Canvas view when dragging components
   // into the main canvas.  To render html elements on canvas, import and invoke renderChildren
+  return  (
+    <div
+      onClick={onClickHandler}
+      style={combinedStyle}
+      ref={drag}
+    >
+        <span>
+          <strong>{name}</strong>
+          <DeleteButton id={childId} name={name} />  
+        </span>
 
-  return (
-    <div onClick={onClickHandler} style={combinedStyle} ref={drag}>
-      <strong>{name}</strong>
-      <DeleteButton id={childId} name={name} />
     </div>
   );
 }

app/src/components/main/DirectChildHTMLNestable.tsx

@@ -175,8 +175,10 @@ function DirectChildHTMLNestable({
       id={`canv${childId}`}
     >
       <span>
-        <strong style={ {color: isThemeLight ? 'black' : 'white'} }>{HTMLType.placeHolderShort}</strong>
-        <strong style={{ color: "#0099E6" }}>{attributes && attributes.compLink ? ` ${attributes.compLink}` : ''}</strong>
+        <strong style={ {color: isThemeLight ? 'black' : 'white'} }>{HTMLType.placeHolderShort}
+        </strong>
+        <strong style={{ color: "#0099E6" }}>{attributes && attributes.compLink ? ` ${attributes.compLink}` : ''}
+        </strong>
         {routeButton}
         <DeleteButton id={childId} name={name} />
       </span>

app/src/components/right/ComponentPanel.tsx

@@ -8,8 +8,9 @@ import {
   Checkbox,
   FormControlLabel,
   InputLabel,
-  TextField,
+  // TextField,
 } from "@material-ui/core";
+import TextField from '@mui/material/TextField';
 
 // The component panel section of the left panel displays all components and has the ability to add new components
 const ComponentPanel = ({isThemeLight}): JSX.Element => {
@@ -153,14 +154,15 @@ const ComponentPanel = ({isThemeLight}): JSX.Element => {
             New Component
           </h4>
           {/* input for new component */}
-          <div style={{display: 'flex', justifyContent:'space-evenly', marginTop: '20px', alignItems:'baseline'}}>
+          <div style={{display: 'flex', justifyContent:'center', marginTop: '20px', marginBottom: '20px',  alignItems:'baseline'}}>
             <div style={{alignSelf:'center'}}>
               <InputLabel className={isThemeLight ? `${classes.inputLabel} ${classes.lightThemeFontColor}` : `${classes.inputLabel} ${classes.darkThemeFontColor}`}>
                 Name:
               </InputLabel>
                 <div className={classes.inputWrapper}>
                     <TextField
-                    color={'primary'}
+                    // label='New Component Name'
+                    color='primary'
                     variant="outlined"
                     className={isThemeLight ? `${classes.inputField} ${classes.lightThemeFontColor}` : `${classes.inputField} ${classes.darkThemeFontColor}`}
                     // inputprops and helpertext must be lowercase
@@ -199,15 +201,17 @@ const ComponentPanel = ({isThemeLight}): JSX.Element => {
               />
             </div>
           </div>
-          <div>
+          <div style={{display: 'flex', justifyContent: 'center'}}>
             <br/>
-            <CreateButton
+            <Button
               className={isThemeLight ? `${classes.addComponentButton} ${classes.lightThemeFontColor}` : `${classes.addComponentButton} ${classes.darkThemeFontColor}`}
+              color='primary'
+              variant='contained'
               id="addComponentButton"
               onClick={handleNameSubmit}
             >
               Create
-            </CreateButton>
+            </Button>
           </div>
       </div>
     </div>
@@ -276,7 +280,6 @@ const useStyles = makeStyles({
     fontFamily: 'Roboto, Raleway, sans-serif',
     fontSize: '90%',
     textAlign: 'center',
-    margin: '-20px 0px 5px 150px',
     borderStyle: 'none',
     transition: '0.3s',
     borderRadius: '25px',
@@ -298,16 +301,16 @@ const useStyles = makeStyles({
     }
   }
 });
-
-const CreateButton = styled(Button)({
-  background: "#0099E6",
-  border: 0,
-  borderRadius: 3,
-  boxShadow: "0 0px 0px 2px #1a1a1a",
-  color: "white",
-  height: 24,
-  width: 60,
-  padding: "0 30px",
-});
+// change to Button to make styling consistent
+// const CreateButton = styled(Button)({
+//   background: "#0099E6",
+//   border: 0,
+//   borderRadius: 3,
+//   boxShadow: "0 0px 0px 2px #1a1a1a",
+//   color: "white",
+//   height: 24,
+//   width: 60,
+//   padding: "0 30px",
+// });
 
 export default ComponentPanel;

app/src/components/right/ContextMenu.tsx

@@ -1,4 +1,4 @@
-/* imput component
+/* input component
 input component
 button component
 */