Merge branch 'dev' into victor/sidebar

Author: martins5225

app/src/components/ContextAPIManager/ContextManager.tsx

@@ -15,8 +15,8 @@ import { RootState } from '../../redux/store';
 
 const useStyles = makeStyles({
   contextContainer: {
-    backgroundColor: 'white',
-    height: 'fit-content'
+    backgroundColor: '#191919',
+    height: 'fit-content',
   }
 });
 
@@ -33,7 +33,7 @@ const ContextManager = (props): JSX.Element => {
   };
 
   const background_Color = isDarkMode ? '#21262b' : 'white'
-  const color = isDarkMode ? 'white' : 'black'
+  const color = isDarkMode ? 'white' : 'white'
 
   return (
     <React.Fragment>

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

@@ -122,7 +122,7 @@ const CreateContainer = () => {
         <Divider orientation="vertical" variant="middle" flexItem />
         <Grid item>
           <Typography
-            style={{ color: 'black' }}
+            style={{ color: 'white' }}
             variant="h6"
             gutterBottom={true}
           >

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

@@ -30,7 +30,7 @@ const AddContextForm = ({
     isDarkMode: store.darkMode.isDarkMode,
     state: store.appState
   }));
-  const color = isDarkMode ? 'white' : 'black';
+  const color = isDarkMode ? 'black' : 'white';
 
   //handler for submitting new context for creation
   const handleSubmit = () => {
@@ -113,6 +113,7 @@ const AddContextForm = ({
         </Snackbar>
         <Button
           variant="contained"
+          color="primary"
           onClick={handleSubmit}
           disabled={btnDisabled}
         >
@@ -140,7 +141,7 @@ const AddContextForm = ({
           </Select>
         </FormControl>
         <Button
-          color="error"
+          color="primary"
           variant="contained"
           onClick={handleDeleteContextClick}
         >

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

@@ -19,7 +19,7 @@ const AddDataForm = ({ handleClickInputData, currentContext }) => {
     }
     handleClickInputData(currentContext, dataContext);
   };
-  const color = isDarkMode ? 'white' : 'black';
+  const color = isDarkMode ? 'black' : 'white';
 
   const handleChange = (e) => {
     setDataContext((prevDataContext) => {

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

@@ -510,15 +510,15 @@ const useStyles = makeStyles((theme: Theme) => ({
     textAlign: 'center',
     margin: '-20px 0px 5px 150px',
     borderStyle: 'none',
-    transition: '0.3s'
+    transition: '0.3s',
     // borderRadius: "25px",
   },
   rootToggle: {
     color: '#696969',
     fontSize: '0.85rem'
   },
   lightThemeFontColor: {
-    color: '#155084'
+    color: 'white'
   },
   darkThemeFontColor: {
     color: '#fff'
@@ -575,7 +575,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   inputTextLight: {
     '& .MuiInputBase-input': {
-      color: 'rgba(0,0,0,0.54)'
+      color: 'white'
     }
   }
 }));

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

@@ -119,12 +119,12 @@ const TableParentProps = props => {
 
 const useStyles = makeStyles({
   themeLight: {
-    color: 'rgba(0,0,0,0.54)',
+    color: 'white',
     '& button:hover':{
       backgroundColor: 'LightGray'
     },
     '& button':{
-      color: 'black'
+      color: 'white'
     },
     '& .MuiTablePagination-root': {
       color: 'rbga(0,0,0,0.54)'

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

@@ -111,12 +111,12 @@ const TablePassedInProps = props => {
 // colors of state mgmt modal
 const useStyles = makeStyles({
   themeLight: {
-    color: 'rgba(0,0,0,0.54)',
+    color: 'white',
     '& button:hover':{
       backgroundColor: 'LightGray'
     },
     '& button':{
-      color: 'black'
+      color: 'white'
     },
     '& .MuiTablePagination-root': {
       color: 'rbga(0,0,0,0.54)'

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

@@ -116,12 +116,12 @@ const TableStateProps = props => {
 
 const useStyles = makeStyles({
   themeLight: {
-    color: 'rgba(0,0,0,0.54)',
+    color: 'white',
     '& button:hover':{
       backgroundColor: 'LightGray'
     },
     '& button':{
-      color: 'black'
+      color: 'white'
     }
   },
   themeDark: {

app/src/components/StateManagement/StateManagement.tsx

@@ -36,7 +36,7 @@ const StateManager = (props): JSX.Element => {
   // add hook here to access which component has been clicked
   // then this will re-render the dataTable
 
-  const background_Color = isDarkMode ? '#21262b' : 'white';
+  const background_Color = isDarkMode ? '#21262b' : '#191919';
   const color = isDarkMode ? 'white' : 'black';
 
   return (
@@ -52,9 +52,9 @@ const StateManager = (props): JSX.Element => {
                 <Tab
                   label="Create/Edit"
                   value="1"
-                  style={{ color: '#003366' }}
+                  style={{ color: 'white' }}
                 />
-                <Tab label="Display" value="2" style={{ color: '#003366' }} />
+                <Tab label="Display" value="2" style={{ color: 'white' }} />
               </TabList>
             </Box>
             <TabPanel value="1">

app/src/components/bottom/BottomTabs.tsx

@@ -49,7 +49,7 @@ const BottomTabs = (props): JSX.Element => {
   return (
     <div
       className={`${classes.root} ${classes.rootLight}`}
-      style={{ backgroundColor: '#003366' }}
+      style={{ backgroundColor: '#191919' }}
     >
       <Box
         display="flex"

app/src/components/bottom/CodePreview.tsx

@@ -87,6 +87,7 @@ const CodePreview: React.FC<{
     <div
       ref={wrapper}
       style={{
+        top: '1vw',
         height: '100%',
         maxWidth: '100%',
         justifyContent: 'center'

app/src/components/left/HTMLPanel.tsx

@@ -2,6 +2,7 @@ import { Button, InputLabel } from '@mui/material';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
+import { BorderColor } from '@mui/icons-material';
 import { RootState } from '../../redux/store';
 import TextField from '@mui/material/TextField';
 import { addElement } from '../../redux/reducers/slice/appStateSlice';
@@ -332,13 +333,13 @@ const useStyles = makeStyles({
     fontFamily: 'Roboto, Raleway, sans-serif',
     fontSize: '85%',
     textAlign: 'center',
-    borderStyle: 'none',
     transition: '0.3s',
     borderRadius: '4px',
-    alignSelf: 'center'
+    alignSelf: 'center',
+    border: '1px solid #186BB4'
   },
   lightThemeFontColor: {
-    color: '#C6C6C6',
+    color: '#155084',
     '& .MuiInputBase-root': {
       color: 'rgba (0, 0, 0, 0.54)'
     }

app/src/components/main/Canvas.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDrop, DropTargetMonitor } from 'react-dnd';
 import { ItemTypes } from '../../constants/ItemTypes';
 import { Component, DragItem } from '../../interfaces/Interfaces';
@@ -9,7 +9,8 @@ import { useDispatch, useSelector } from 'react-redux';
 import {
   changeFocus,
   addChild,
-  snapShotAction
+  snapShotAction,
+  toggleCodePreview
 } from '../../redux/reducers/slice/appStateSlice';
 import { RootState } from '../../redux/store';
 
@@ -18,7 +19,7 @@ function Canvas(props): JSX.Element {
     (store: RootState) => ({
       state: store.appState,
       contextParam: store.contextSlice,
-      isDarkMode: store.darkMode.isDarkMode
+      isDarkMode: store.darkMode.isDarkMode, 
     })
   );
   const dispatch = useDispatch();
@@ -126,7 +127,7 @@ function Canvas(props): JSX.Element {
   const defaultCanvasStyle = {
     width: '100%',
     minHeight: '100%',
-    backgroundColor: isOver ? '#FAFED1' : '#FBFBFB',
+    backgroundColor: isOver ? '#191919' : '#191919',
     border: '1px solid #FBFBF2',
     borderStyle: isOver ? 'dotted' : 'solid',
     aspectRatio: 'auto 774 / 1200',
@@ -150,15 +151,15 @@ function Canvas(props): JSX.Element {
     currentComponent.style
   );
   return (
-    <div
-      className={'componentContainer'}
-      ref={drop}
-      data-testid="drop"
-      style={!isDarkMode ? canvasStyle : darkCombinedCanvasStyle}
-      onClick={onClickHandler}
-    >
-      {renderChildren(currentComponent.children)}
-    </div>
+      <div
+        className={'componentContainer'}
+        ref={drop} 
+        data-testid="drop"
+        style={!isDarkMode ? canvasStyle : darkCombinedCanvasStyle}
+        onClick={onClickHandler}
+      >
+        {renderChildren(currentComponent.children)}
+      </div>
   );
 }
 

app/src/components/main/CanvasContainer.tsx

@@ -1,19 +1,55 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Canvas from './Canvas';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '../../redux/store';
+import CodePreview from '../bottom/CodePreview';
+import { toggleCodePreview } from '../../redux/reducers/slice/appStateSlice';
+import { Button } from '@mui/material';
 
 // The CanvasContainer sets the boundaries on the width/height of the canvas
 function CanvasContainer(props): JSX.Element {
+  const [theme, setTheme] = useState('solarized_light'); // theme for ACE editor, taken from BottomTabs
+  const { state } = useSelector(
+    (store: RootState) => ({
+      state: store.appState,
+    })
+  );
+  const dispatch = useDispatch();
+
+  // onClickCodePreview swaps the rendered component from the canvas to the code preview editor
+  const onClickCodePreview = () => {
+    dispatch(toggleCodePreview());
+    console.log(state.codePreview);
+  }
+
   const canvasContainerStyle = {
     width: '100%',
     backgroundColor: 'lightgrey',
     border: '2px Solid grey',
     overflow: 'auto',
   };
 
+  const codePreviewStyle = {
+    position: 'absolute',
+    width: 'max-content',
+    height: 'max-content',
+    bottom: '100px', 
+    right: '51vw', 
+    textAlign: 'center',
+    color: '#ffffff', 
+    backgroundColor: '#151515'
+  } as const;
+
   return (
     <div style={canvasContainerStyle}>
-      
-      <Canvas isThemeLight={props.isThemeLight}/>
+      {state.codePreview && <CodePreview theme={theme} setTheme={setTheme}/>}
+      {!state.codePreview && <Canvas isThemeLight={props.isThemeLight}/>}
+      <Button
+        style={codePreviewStyle}
+        onClick={onClickCodePreview}
+      >
+        Code Preview
+      </Button>
     </div>
   );
 }

app/src/components/main/DirectChildHTML.tsx

@@ -52,8 +52,8 @@ function DirectChildHTML({ childId, name, type, typeId, style }: ChildElement) {
   const interactiveStyle = {
     border:
       state.canvasFocus.childId === childId
-        ? '3px solid #186BB4'
-        : '1px solid grey'
+        ? '4px solid #186BB4'
+        : '2px solid #4d8cc4'
   };
 
   const combinedStyle = combineStyles(
@@ -71,7 +71,7 @@ function DirectChildHTML({ childId, name, type, typeId, style }: ChildElement) {
       id={`canv${childId}`}
     >
       <span>
-        <strong style={{ color:'black'}}>
+        <strong style={{ color:'white'}}>
           {HTMLType.placeHolderShort}
         </strong>
         <DeleteButton

app/src/components/main/DirectChildHTMLNestable.tsx

@@ -137,8 +137,8 @@ function DirectChildHTMLNestable({
   };
 
   // interactive style to change color when nested element is hovered over
-  if (isOver) defaultNestableStyle['yellow'];
-  defaultNestableStyle['backgroundColor'] = isOver ? 'yellow' : defaultNestableStyle['backgroundColor'];
+  if (isOver) defaultNestableStyle['rgba(24, 107, 180, 0.2)'];
+  defaultNestableStyle['backgroundColor'] = isOver ? 'rgba(24, 107, 180, 0.2)' : defaultNestableStyle['backgroundColor'];
 
   const combinedStyle = combineStyles(
     combineStyles(combineStyles(defaultNestableStyle, HTMLType.style), style),
@@ -171,7 +171,7 @@ function DirectChildHTMLNestable({
       id={`canv${childId}`}
     >
       <span>
-        <strong style={{ color: 'black' }}>{HTMLType.placeHolderShort}
+        <strong style={{ color: 'white' }}>{HTMLType.placeHolderShort}
         </strong>
         <strong style={{ color: "#0099E6" }}>{attributes && attributes.compLink ? ` ${attributes.compLink}` : ''}
         </strong>

app/src/components/right/ComponentPanel.tsx

@@ -303,7 +303,7 @@ const useStyles = makeStyles({
     fontSize: '0.85rem'
   },
   lightThemeFontColor: {
-    color: '#C6C6C6',
+    color: 'white',
     '& .MuiInputBase-root': {
       color: 'rgba (0, 0, 0, 0.54)'
     }