addressed Elizas and Cyrus' pr review

Author: BrianYan7

app/src/Dashboard/styles.css

@@ -30,7 +30,7 @@
   flex-direction: column-reverse;
   flex-flow: row wrap;
   flex-grow: 1;
-  overflow-y: scroll; */
+  overflow-y: scroll; 
 }
 
 .projectInfo {

app/src/components/left/Sidebar.tsx

@@ -23,6 +23,10 @@ const Sidebar: React.FC<SidebarProps> = ({
     oldValue = newValue;
   };
 
+  //the following allows users to click on the left panel to expand and collapse.
+  // We decided to freeze so we've commented this and line 41 out
+
+  
   // const handleTabClick = (event: React.MouseEvent, oldValue: number) => {
   //   if (activeTab === oldValue) {
   //     setActiveTab(null);

app/src/components/main/CanvasContainer.tsx

@@ -26,20 +26,14 @@ function CanvasContainer(props: CanvasContainerProps): JSX.Element {
 
   const canvasContainerStyle: React.CSSProperties = {
     width: '100%',
-    minHeight: '100%',
+    height: '100%',
     backgroundColor: 'rgba(25, 25, 25)',
     border: '2px solid grey',
     borderBottom: 'none',
     overflow: 'auto'
   };
 
   const codePreviewStyle: React.CSSProperties = {
-    // position: 'relative',
-    // width: '100px',
-    // height: '35px',
-    // bottom: '150px',
-    // right: '45vw',
-    // padding: '5px',
     textAlign: 'center',
     color: '#ffffff',
     backgroundColor: '#151515',
@@ -50,11 +44,6 @@ function CanvasContainer(props: CanvasContainerProps): JSX.Element {
   } as const;
 
   const backToTop: React.CSSProperties = {
-    // position: 'relative',
-    // width: '100px',
-    // height: '35px',
-    // bottom: '100px',
-    // right: '45vw',
     textAlign: 'center',
     color: '#ffffff',
     backgroundColor: '#151515',
@@ -153,10 +142,7 @@ function CanvasContainer(props: CanvasContainerProps): JSX.Element {
           containerRef={containerRef}
         />
       ) : (
-        <Canvas
-          zoom={zoom}
-          ref={containerRef} /*isThemeLight={props.isThemeLight} */
-        />
+        <Canvas zoom={zoom} ref={containerRef} />
       )}
     </div>
   );

app/src/components/main/DemoRender.tsx

@@ -1,4 +1,10 @@
-import { Link, Route, BrowserRouter as Router, Switch, useHistory } from 'react-router-dom';
+import {
+  Link,
+  Route,
+  BrowserRouter as Router,
+  Switch,
+  useHistory
+} from 'react-router-dom';
 import React, { useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -24,8 +30,7 @@ const DemoRender = (): JSX.Element => {
     width: '100%',
     backgroundColor: '#FBFBFB',
     borderBottom: 'none',
-     overflow: 'auto',
- 
+    overflow: 'auto'
   };
 
   const html = `
@@ -101,7 +106,7 @@ const DemoRender = (): JSX.Element => {
         const elementType = element.name;
         const childId = element.childId;
         const elementStyle = element.style;
-        const innerText = element.attributes.compText; 
+        const innerText = element.attributes.compText;
         const classRender = element.attributes.cssClasses;
         const activeLink = element.attributes.compLink;
         let renderedChildren;
@@ -209,11 +214,10 @@ const DemoRender = (): JSX.Element => {
   //adds the code into the iframe
   useEffect(() => {
     //load the current state code when the iframe is loaded and when code changes
-    iframe.current.addEventListener('load', ()=>{
+    iframe.current.addEventListener('load', () => {
       iframe.current.contentWindow.postMessage(code, '*');
-    })
+    });
     iframe.current.contentWindow.postMessage(code, '*');
-
   }, [code]);
 
   return (
@@ -225,7 +229,7 @@ const DemoRender = (): JSX.Element => {
           srcDoc={html}
           width="100%"
           height="100%"
-          style = {{zIndex: -30}}
+          style={{ zIndex: -30 }}
         />
       </div>
     </>