merged eddy's tutorial code

Author: Anthonytorrero

app/src/Dashboard/styles.css

@@ -1,6 +1,7 @@
 /* @import url('https://fonts.googleapis.com/css2?family=Cabin&family=Oswald&display=swap');
 
 
+
 $primary-black: #22292f;
 $secondary-black: #606f7b;
 $teriary-grey: #f0f0f0;
@@ -10,12 +11,10 @@ $button-blue: #24BCFF; */
 
 
 .form , .project{
-  display: flex;
-  flex-direction: column;
-  background-color: white;
-  border: 1px solid  #f0f0f0;
-  box-shadow: 0 0 5px rgba(0,0,0,0.3);
-  margin: 5px;
+  width: 22vw;
+  height: 38vh;
+  background:white;
+  margin: 1% 1%;
   border-radius: 5px;
   color: #606f7b;
   align-items: center;
@@ -33,6 +32,7 @@ $button-blue: #24BCFF; */
 
  .projectContainer{
   display: flex;
+  flex-direction: column-reverse;
   flex-flow: row wrap;
   height: 600px;
   overflow-y: scroll;
@@ -116,4 +116,4 @@ h1 {
   align-items: center;
   justify-content: center;
   width: 100%;
-}  */
+}  */

app/src/tutorial/Canvas.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 //images
 import canvas1 from '../../../resources/canvas_tutorial_images/canvas1.png';
 import drag1 from '../../../resources/canvas_tutorial_images/drag1.png';
+import undoRedo from '../../../resources/canvas_tutorial_images/undoRedo.gif';
 
 const Canvas: React.FC<{
   classes: any;
@@ -29,6 +30,12 @@ const Canvas: React.FC<{
       <p className={classes.text}>Select a <span className={classes.notLink} onClick={() => setPage('Reusable_Components')} >reusable component</span>, click and hold to drag on to a page.<br/>
       Drag the selected item on to the center canvas.</p>
       <hr/>
+      <h1 className={classes.title}>Undo and Redo</h1>
+      <p className={classes.text}> The undo functionality is implemented to revert the user's last action.  Redo will reperform the user's last undid action.
+      </p>
+      <div className={classes.imgWrapper}>
+        <img src={undoRedo}/>
+      </div>
       <h1 className={classes.title}>Keyboard Shortcuts</h1>
         <h2 className={classes.text}>Mac</h2>
           <ul className={classes.text}>