Merge branch 'dev' into liveCodeRender

front end changes from dark mode

:wq

Author: kchender

app/src/components/login/SignIn.tsx

@@ -67,7 +67,7 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
   const [invalidPass, setInvalidPass] = useState(false);
 
   useEffect(() => {
-    const githubCookie = setInterval(() => {
+    const githubCookie = setTimeout(() => {
       window.api?.setCookie();
       window.api?.getCookie(cookie => {
         // if a cookie exists, set localstorage item with cookie data, clear interval, go back to '/' route to load app

app/src/components/main/Canvas.tsx

@@ -8,7 +8,7 @@ import renderChildren from '../../helperFunctions/renderChildren';
 // Caret start
 import Arrow from './Arrow';
 
-function Canvas() {
+function Canvas(props): JSX.Element {
   const [state, dispatch] = useContext(StateContext);
   // Caret start
   Arrow.deleteLines();
@@ -72,12 +72,23 @@ function Canvas() {
     border: '1px solid #FBFBF2',
     borderStyle: isOver ? 'dotted' : 'solid',
   };
+
+  const darkCanvasStyle = {
+    width: '100%',
+    minHeight: '100%',
+    backgroundColor: isOver ? '#4d4d4d' : '#21262c',
+    border: '1px solid #FBFBF2',
+    borderStyle: isOver ? 'dotted' : 'solid',
+  };
   // Combine the default styles of the canvas with the custom styles set by the user for that component
   // The render children function renders all direct children of a given component
   // Direct children are draggable/clickable
+  
+  // const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
   const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
+  const darkCombinedCanvasStyle = combineStyles(darkCanvasStyle, currentComponent.style);
   return (
-    <div ref={drop} style={canvasStyle} onClick={onClickHandler}>
+    <div ref={drop} style={props.isThemeLight ? canvasStyle : darkCombinedCanvasStyle} onClick={onClickHandler}>
        {renderChildren(currentComponent.children)}
     </div>
   );

app/src/components/main/CanvasContainer.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Canvas from './Canvas';
 
 // The CanvasContainer sets the boundaries on the width/height of the canvas
-function CanvasContainer() {
+function CanvasContainer(props): JSX.Element {
   const canvasContainerStyle = {
     width: '100%',
     backgroundColor: 'lightgrey',
@@ -12,7 +12,7 @@ function CanvasContainer() {
   return (
     <div style={canvasContainerStyle}>
 
-      <Canvas />
+      <Canvas isThemeLight={props.isThemeLight}/>
     </div>
   );
 }

app/src/components/main/DirectChildHTML.tsx

@@ -10,6 +10,8 @@ import { combineStyles } from '../../helperFunctions/combineStyles';
 import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
 import Annotation from './Annotation'
 
+import { styleContext } from '../../containers/AppContainer';
+
 function DirectChildHTML({
   childId,
   name,
@@ -19,6 +21,7 @@ function DirectChildHTML({
   annotations,
 }: ChildElement) {
   const [state, dispatch] = useContext(StateContext);
+  const { isThemeLight } = useContext(styleContext);
 
   // find the HTML element corresponding with this instance of an HTML element
   // find the current component to render on the canvas
@@ -59,15 +62,17 @@ function DirectChildHTML({
         : '1px solid grey'
   };
 
+
   const combinedStyle = combineStyles(
     combineStyles(combineStyles(globalDefaultStyle, HTMLType.style), style),
     interactiveStyle
   );
 
   return (
     <div onClick={onClickHandler} style={combinedStyle} ref={drag} id={`canv${childId}`}>
-      <strong>{HTMLType.placeHolderShort}</strong>      
-      {`  (${childId})`}
+      <strong style={ {color: isThemeLight ? 'black' : 'white'} }>{HTMLType.placeHolderShort}</strong>      
+      {/* {`  (${childId})`} */}
+      <span style={ {color: isThemeLight ? 'black' : 'white'} }>{`  ( ${childId} )`}</span>
       <Annotation
         id={childId}
         name={name}

app/src/components/main/DirectChildHTMLNestable.tsx

@@ -12,6 +12,8 @@ import componentNest from '../../helperFunctions/componentNestValidation'
 import AddRoute from './AddRoute';
 import AddLink from './AddLink';
 
+import { styleContext } from '../../containers/AppContainer';
+
 function DirectChildHTMLNestable({
   childId,
   type,
@@ -23,6 +25,7 @@ function DirectChildHTMLNestable({
   attributes
 }: ChildElement) {
   const [state, dispatch] = useContext(StateContext);
+  const { isThemeLight } = useContext(styleContext);
   const ref = useRef(null);
 
   // takes a snapshot of state to be used in UNDO and REDO cases.  snapShotFunc is also invoked in Canvas.tsx
@@ -145,8 +148,9 @@ function DirectChildHTMLNestable({
 
   return (
     <div onClick={onClickHandler} style={combinedStyle} ref={ref} id={`canv${childId}`}>
-      <strong>{HTMLType.placeHolderShort}</strong>
-      {`  ( ${childId} )`}
+      <strong style={ {color: isThemeLight ? 'black' : 'white'} }>{HTMLType.placeHolderShort}</strong>
+      {/* {`  ( ${childId} )`} */}
+      <span style={ {color: isThemeLight ? 'black' : 'white'} }>{`  ( ${childId} )`}</span>
       <strong style={{ color: "#0099E6" }}>{attributes && attributes.compLink ? ` ${attributes.compLink}` : ''}</strong>
       {routeButton}
       <Annotation

app/src/containers/AppContainer.tsx

@@ -7,7 +7,8 @@ import RightContainer from './CustomizationPanel';
 import { theme1, theme2 } from '../public/styles/theme';
 export const styleContext = createContext({
   style: null,
-  setStyle: null
+  setStyle: null,
+  isThemeLight: null
 });
 // setting light and dark themes (navbar and background); linked to theme.ts
 const lightTheme = theme1;
@@ -20,7 +21,7 @@ const AppContainer = () => {
   return (
     // Mui theme provider provides themed styling to all MUI components in app
     <MuiThemeProvider theme={isThemeLight ? lightTheme : darkTheme}>
-      <styleContext.Provider value={{ style, setStyle }}>
+      <styleContext.Provider value={{ style, setStyle, isThemeLight }}>
       <div>
         <NavBar setTheme={setTheme} isThemeLight={isThemeLight}/>
       </div>

app/src/containers/MainContainer.tsx

@@ -9,7 +9,7 @@ const MainContainer = (props): JSX.Element => {
   return (
     <div className="main-container" style={style} >
       <div className="main">
-        <CanvasContainer />
+        <CanvasContainer isThemeLight={props.isThemeLight}/>
         <DemoRender />
       </div>
       <BottomPanel isThemeLight={props.isThemeLight}/>

app/src/context/HTMLTypes.tsx

@@ -224,7 +224,7 @@ const HTMLTypes: HTMLType[] = [
     tag: 'Link',
     name: 'LinkHref',
     style: {},
-    placeHolderShort: 'LinkHref',
+    placeHolderShort: 'Link',
     placeHolderLong: '',
     icon: ListIcon,
     framework: 'nextjs',

server/controllers/userController.js

@@ -30,6 +30,7 @@ userController.createUser = (req, res, next) => {
   let email, username, password;
   // use this condition for Oauth login
   if (res.locals.signUpType === 'oauth') {
+    console.log('line 33 of create user')
     email = res.locals.githubEmail;
     username = email;
     password = randomPassword();