deletes some console.logs and fixes the manage seperators issue

Author: GarrettHutson

app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx

@@ -4,7 +4,6 @@ import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
 import { Typography } from '@mui/material';
-import StateContext from '../../../../context/context';
 import { useSelector } from 'react-redux';
 
 const filter = createFilterOptions();
@@ -76,7 +75,7 @@ const AddContextForm = ({
     return option.name;
   };
 
-  const renderOption = (props, option) => <li {...props}>{option.name}</li>;
+  const renderOption = (props, option) => <li style={{color:'black'}} {...props}>{option.name}</li>;
 
   return (
     <Fragment>
@@ -95,10 +94,10 @@ const AddContextForm = ({
           options={allContext || []}
           getOptionLabel={getOptionLabel}
           renderOption={renderOption}
-          sx={{ width: 425 }}
+          sx={{ width: 425,  border:'1px solid black' }}
           freeSolo
           renderInput={params => (
-            <TextField {...params} label="Create/Select Context" />
+            <TextField {...params} label="Create/Select Context"  />
           )}
         />
         <Button

app/src/components/bottom/CreationPanel.tsx

@@ -7,7 +7,6 @@ import { useSelector } from 'react-redux';
 // This allows users to create all aspects of this application in one place.
 const CreationPanel = (props): JSX.Element => {
   const style = useSelector((store) => store.styleSlice);
-  console.log('style from creation',style)
   return (
     <div className="creation-panel" style={style.style}>
       <ComponentPanel isThemeLight={props.isThemeLight}/>

app/src/components/main/Canvas.tsx

@@ -49,7 +49,6 @@ function Canvas(props): JSX.Element {
       // takes a snapshot of state to be used in UNDO and REDO cases
       snapShotFunc();
       // returns false for direct drop target
-      console.log('diddrop', didDrop)
       if (didDrop) {
         return;
       }
@@ -131,6 +130,7 @@ function Canvas(props): JSX.Element {
 
   const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
   const darkCombinedCanvasStyle = combineStyles(darkCanvasStyle, currentComponent.style);
+  console.log('canvas comp', currentComponent)
   return (
     <div className={'componentContainer'} ref={drop} style={!isDarkMode ? canvasStyle : darkCombinedCanvasStyle} onClick={onClickHandler}>
        {renderChildren(currentComponent.children)}

app/src/components/main/DemoRender.tsx

@@ -57,7 +57,6 @@ const DemoRender = (): JSX.Element => {
   //Switch between components when clicking on a link in the live render
   window.onmessage = (event) => {
     if (event.data === undefined) return;
-    console.log('event data demo render',event.data)
     const component: string = event.data.data?.split('/').at(-1);
     const componentId =
       component &&

app/src/components/right/ComponentPanel.tsx

@@ -145,7 +145,6 @@ const ComponentPanel = ({ isThemeLight }): JSX.Element => {
       document.removeEventListener('keydown', keyBindCreateComponent)
     }
   }, []);
-  console.log(isThemeLight)
   return (
     <div className={`${classes.panelWrapper}`}>
       {/* Add a new component*/}

app/src/containers/AppContainer.tsx

@@ -37,7 +37,6 @@ style: store.styleSlice,
   // const initialStyle = useContext(styleContext);
   // const [style, setStyle] = useState(initialStyle);
   const [isThemeLight, setTheme] = useState(!isDarkMode);
-  console.log('isthemlight in app con',isThemeLight)
   const dispatch = useDispatch();
 
 

app/src/containers/CustomizationPanel.tsx

@@ -489,7 +489,6 @@ dispatch(updateUseContext({ useContextObj: useContextObj, contextParam: contextP
             : '';
   }, []);
 
-  console.log('isthemelight in custimization', isThemeLight)
 
   useEffect(() => {
     document.addEventListener('keydown', keyBindedFunc);

app/src/helperFunctions/generateCode.ts

@@ -568,8 +568,8 @@ const formatCode = (code: string) => {
       jsxBracketSameLine: true,
       parser: 'babel'
     });
-  } else if (process.env.NODE_ENV === 'production') {
-    return window.api.formatCode(code);
+  // } else if (process.env.NODE_ENV === 'production') {
+    // return window.api.formatCode(code);
   } else {
     return code;
   }

app/src/helperFunctions/manageSeparators.ts

@@ -1,14 +1,14 @@
 import { ChildElement } from '../interfaces/Interfaces';
 
-const separator = {
-  id: 11,
-  tag: 'div',
-  name: 'Div',
-  style: {},
-  placeHolderShort: 'div',
+const separator =  {
+  id: 1000,
+  tag: 'separator',
+  name: 'separator',
+  style: { border: 'none' },
+  placeHolderShort: '',
   placeHolderLong: '',
-  // icon: HeaderIcon,
-  framework: 'reactClassic',
+  icon: '',
+  framework: '',
   nestable: true
 }
 const manageSeparators = {};