next dropdown pages working and updating

Author: MikoGome

app/src/components/main/AddLink.tsx

@@ -23,10 +23,11 @@ function AddLink({ id }: AddRoutes) {
   }
 
   const handlePageSelect = event => {
-    const selectedPageName = event.target.value;
-    state.components[0].children.forEach(element => {
+    const currComponent = state.components.find(element => element.id === state.canvasFocus.componentId);
+    currComponent.children.forEach(element => {
       if(element.childId === id) {
         element.attributes.compLink = event.target.value;
+        dispatch({type: 'UPDATE ATTRIBUTES', payload: element})
       }
     });
     // selectedPageName.compLink = event.target.value;
@@ -36,13 +37,13 @@ function AddLink({ id }: AddRoutes) {
   let pagesItems = state.components.filter(comp => state.rootComponents.includes(comp.id));
   let dropDown = pagesItems.map(comp => <MenuItem value={comp.name}>{comp.name}</MenuItem>);
   return (
-    <div style={{ padding: '1px', float: 'right' }}>
+    <div style={{paddingBottom: '1px', float: 'right' }}>
       <FormControl size='small'>
         <InputLabel style={ { color: isThemeLight? '#000' : '#fff'} }>Pages</InputLabel>
         <Select variant="outlined"
           onChange={handlePageSelect}
           id="page-select"
-          style={ isThemeLight? {backgroundColor: '#eef0f1', color: '#000', border: '1px solid black'} : {backgroundColor: 'gray', color: '#fff', border: '1px solid white'}}
+          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'}}
         >
           {dropDown}
         </Select>

app/src/components/right/StatePropsPanel.tsx

@@ -321,15 +321,15 @@ const useStyles = makeStyles((theme: Theme) =>
       borderBottom: '1px solid white'
     },
     rootUnderlineDark: {
-      '& .MuiSelect-icon': {
+      '& .-icon': {
         color: '#fff',
       },
       '&::before': {
         borderBottom: '1px solid #fff'
       }
     },
     rootUnderlineLight: {
-      '& .MuiSelect-icon': {
+      '& .-icon': {
         color: 'rgba(0,0,0,0.54)',
       },
       '&::before': {

app/src/containers/CustomizationPanel.tsx

@@ -711,7 +711,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
 const useStyles = makeStyles({
   select: {
     fontSize: '1em',
-    '> .MuiSelect-icon': {
+    '> .-icon': {
       color: '#155084'
     }
   },

app/src/helperFunctions/generateCode.ts

@@ -83,7 +83,7 @@ const generateUnformattedCode = (
         ) {
           child.children = getEnrichedChildren(child);
         }
-        console.log('referencedHTML', referencedHTML.tag);
+
         // when we see a Switch or LinkTo, import React Router
         if (referencedHTML.tag === 'Switch' || (referencedHTML.tag === 'Link' && projectType === 'Classic React'))
           importReactRouter = true;
@@ -93,7 +93,6 @@ const generateUnformattedCode = (
           images = true;
         return child;
       } else if (child.type === 'Route Link') {
-        console.log('hit');
         links = true;
         child.name = components.find(
           (comp: Component) => comp.id === child.typeId