pulled changes from dev branch

Author: kchender

README.md

@@ -35,7 +35,7 @@ How to use
 - **Create Instances on the Canvas**: Each component has its own canvas. Add an element to a component by dragging it onto the canvas. Div components are arbitrarily nestable and useful for complex layouts. Next.js and Gatsby.js projects have Link components to enable client-side navigation to other routes.
 - **Component Tree**: Click on the Component Tree tab next to the Code Preview tab to view the component tree hierarchy.
 - **Update Styling**: Select an element on the canvas to update its basic style attributes on the right panel. As you create new instances and add styling, watch as your code dynamically generates in the code preview in the bottom panel.
-- **Using State in Elements**: As of 10.0.0, you can now select an HTML element on the canvas and then navigate to the customization panel to click a button to pass a variable from state into your element's text or link field.
+- **Using State in Elements**: As of 11.0.0, you can now select an HTML element on the canvas and then navigate to the customization panel to click a button to pass a variable from state into your element's text or link field.
 - **User Preference Features**: With the click of a button, toggle between light mode and dark mode, depending on your preference.
 - **Export project**: Click the “Export Project’ button to export the project’s application files into a TypeScript file. The exported project is fully functional with Webpack, Express server, routing, etc., and will match what is mocked on the canvas.
 - **Export project with Tests**: Click the "includes tests" checkbox while exporting to include pre-configured Webpack, Jest, and Typescript files along with tests for your project.
@@ -147,12 +147,12 @@ How to use
 
 [Julie Wu](https://www.linkedin.com/in/jwuarchitect/) [@yutingwu4](https://github.com/yutingwu4)
 
+[Katrina Henderson](https://www.linkedin.com/in/katrinahenderson/) [@kchender](https://github.com/kchender)
+
 [Kevin Park](https://www.linkedin.com/in/xkevinpark/) [@xkevinpark](https://github.com/xkevinpark)
 
 [Khuong Nguyen](https://www.linkedin.com/in/khuong-nguyen/) [@khuongdn16](https://github.com/khuongdn16)
 
-[Katrina Henderson](https://www.linkedin.com/in/katrinahenderson/) [@kchender](https://github.com/kchender)
-
 [Linh Tran](https://www.linkedin.com/in/linhtran51/) [@Linhatran](https://github.com/Linhatran)
 
 [Luke Madden](https://www.linkedin.com/in/lukemadden/) [@lukemadden](https://github.com/lukemadden)

app/src/components/bottom/BottomTabs.tsx

@@ -43,7 +43,7 @@ const BottomTabs = (props): JSX.Element => {
   Arrow.renderArrow(state.canvasFocus.childId);
 
   return (
-    <div className={`${classes.root} ${classes.rootLight}`} style={style}>
+    <div className={`${classes.root} ${classes.rootLight}`} style={{ backgroundColor : '#003366' }}>
       <Box display="flex" justifyContent="space-between" alignItems="center" paddingBottom="10px" paddingRight="10px">
         <Tabs
           value={tab}

app/src/components/login/SignIn.tsx

@@ -295,12 +295,12 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
           </Button>
           <Grid container>
             <Grid item xs>
-              <RouteLink to={`/signup`} className="nav_link">
+              <RouteLink style={{color: props.darkMode ? '#aaaaaa' : 'black'}} to={`/signup`} className="nav_link">
                 Forgot password?
               </RouteLink>
             </Grid>
             <Grid item>
-              <RouteLink to={`/signup`} className="nav_link">
+              <RouteLink style={{color: props.darkMode ? '#aaaaaa' : 'black'}} to={`/signup`} className="nav_link">
                 Don't have an account? Sign Up
               </RouteLink>
             </Grid>

app/src/components/login/SignUp.tsx

@@ -312,7 +312,7 @@ const SignUp: React.FC<LoginInt & RouteComponentProps> = props => {
             </Button>
             <Grid container justify="flex-end">
               <Grid item>
-                <RouteLink to={`/login`} className="nav_link">
+                <RouteLink style={{color: props.darkMode ? '#aaaaaa' : 'black'}} to={`/login`} className="nav_link">
                   Already have an account? Sign In
                 </RouteLink>
               </Grid>

app/src/components/main/AddLink.tsx

@@ -37,6 +37,7 @@ function AddLink({ id, onClickHandler }) {
   }
 
   const pagesItems = state.components.filter(comp => state.rootComponents.includes(comp.id));
+<<<<<<< HEAD
   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 (
@@ -57,11 +58,26 @@ function AddLink({ id, onClickHandler }) {
             // }}
             label='Pages'
             labelId='page-select-label'
+=======
+  const dropDown = pagesItems.map(comp => <MenuItem style={{ color: 'black' }} 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'
+>>>>>>> 6d3fbd545288416cd1e582d188963853b7c08f07
             variant="outlined"
             onMouseDown={onClickHandler}
             onChange={handlePageSelect}
             id="page-select"
+<<<<<<< HEAD
             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'}}
+=======
+            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'}}
+>>>>>>> 6d3fbd545288416cd1e582d188963853b7c08f07
             >
             {dropDown}
           </Select>

app/src/components/main/DemoRender.tsx

@@ -53,6 +53,7 @@ const DemoRender = (): JSX.Element => {
   const componentBuilder = (array: object, key: number = 0) => {
     const componentsToRender = [];
     for (const element of array) {
+      
       if (element.name !== 'separator') {
         const elementType = element.name;
         const childId = element.childId;
@@ -67,11 +68,15 @@ const DemoRender = (): JSX.Element => {
         if (elementType === 'input') componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
         else if (elementType === 'img') componentsToRender.push(<Box component={elementType} src={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
         else if (elementType === 'Image') componentsToRender.push(<Box component='img' src={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
-        else if (elementType === 'a') componentsToRender.push(<Box component={elementType} href='javascript:void(0)' className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}</Box>);
+        else if (elementType === 'a' || elementType === 'Link') componentsToRender.push(
+          activeLink ?
+          <Box component='a' href='javascript:void(0)' className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}</Box>
+          :<Box component='a' className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}</Box>
+        );
         else if (elementType === 'Switch') componentsToRender.push(<Switch>{renderedChildren}</Switch>);
         else if (elementType === 'Route') componentsToRender.push(<Route exact path={activeLink}>{renderedChildren}</Route>);
-        else if (elementType === 'Link') componentsToRender.push(<Box component='a' href='javascript:void(0)' className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}</Box>)/*componentsToRender.push(<Link to={activeLink}>{innerText}</Link>);*/
-        else componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}{renderedChildren}</Box>);
+        else componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}{renderedChildren}</Box>
+        );
         key += 1;
       }
     }

app/src/containers/CustomizationPanel.tsx

@@ -24,6 +24,7 @@ import ProjectManager from '../components/right/ProjectManager';
 import StateContext from '../context/context';
 import FormSelector from '../components/form/Selector';
 import UseStateModal from '../components/bottom/UseStateModal';
+import { OutgoingMessage } from 'http';
 // Previously named rightContainer, Renamed to Customizationpanel this now hangs on BottomTabs
 // need to pass in props to use the useHistory feature of react router
 const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
@@ -47,9 +48,21 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
   const [useContextObj, setUseContextObj] = useState({});
   const [stateUsedObj, setStateUsedObj] = useState({});
 
+  //Miko -- save properties of nested div
+  function deepIterate(arr) {
+    const output = [];
+    for(let i = 0; i < arr.length; i++) {
+      if(arr[i].typeId === 1000) continue;
+      output.push(arr[i]);
+      if(arr[i].children.length) {
+        output.push(...deepIterate(arr[i].children));
+      }
+    }
+    return output;
+  }
+
   const resetFields = () => {
-    const currComponent = state.components.find(element => element.id === state.canvasFocus.componentId);
-    const childrenArray = currComponent.children;
+    const childrenArray = deepIterate(configTarget.children);
     for (const element of childrenArray) {
       if (configTarget.child && element.childId === configTarget.child.id) {
         const attributes = element.attributes;

app/src/helperFunctions/generateCode.ts

@@ -286,13 +286,13 @@ const generateUnformattedCode = (
     ${`  const [value, setValue] = useState("");${writeStateProps(currComponent.useStateCodes)}`}
     ${!importReactRouter
         ? `  return (
-          <div className="${currComponent.name}" ${formatStyles(currComponent)}>
+          <div className="${currComponent.name}" ${formatStyles(currComponent.style)}>
           \t${writeNestedElements(enrichedChildren)}
           </div>
       );`
         : `  return (
           <Router>
-            <div className="${currComponent.name}" ${formatStyles(currComponent)}>
+            <div className="${currComponent.name}" ${formatStyles(currComponent.style)}>
             \t${writeNestedElements(enrichedChildren)}
             </div>
           </Router>

app/src/public/styles/theme.ts

@@ -5,10 +5,10 @@ export const theme1 = createTheme({
   palette: {
     type: 'dark',
     primary: {
-      main: '#3f51b5',
+      main: '#003366', // navy blue
     },
     secondary: {
-      main: '#17a2b8',
+      main: '#0099e6', // light blue
     },
     background: {
       paper: '#ffffff',
@@ -20,10 +20,10 @@ export const theme2 = createTheme({
   palette: {
     type: 'light',
     primary: {
-      main: '#3f51b5',
+      main: '#003366',
     },
     secondary: {
-      main: '#17a2b8',
+      main: '#0099e6',
     },
     background: {
       paper: '#ffffff',