All test, unit, integration and E2E working

Author: pippo-sci

package-lock.json

@@ -1,18 +1,12 @@
-.root{
+.App {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #ffffff;
-
-}
-.App {
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
 }
-

src/App.module.less

@@ -4,11 +4,16 @@
   */
   display: inline-block;
   justify-content: space-around;
-  width: 30%;
   padding: 20px;
 }
 
 .buttonBox {
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.btnBoxVFG {
   padding: 20px;
   display: flex;
   justify-content: space-around;
@@ -18,20 +23,24 @@
   /* 
 background: #fff;
 */
+  position: relative;
   display: flex;
+  flex-direction: column;
+  align-content: space-around;
   justify-content: space-around;
-}
 
+}
 .container {
 	width: 100%;
-	height: 100%,;
+	height: calc(100% - 65px);
 	background-color: #FFFFFF;
+  overflow: auto;
 }
 
 .header {
 	width: 100%;
 	height: 50px;
-	background-color: "#20477A";
+	background-color: #20477A;
 }
 
 .subtitle {
@@ -48,14 +57,12 @@ background: #fff;
 
 .text {
     text-align: left;
-    margin-top: 2%;
-    margin-left: 25%;
-    margin-right: 25%;
+    margin: 10px 25%;
 }
 
 .wrapper {
   position: relative;
-
+  margin-left: 10%;
 }
 .loading {
   position: absolute;
@@ -69,4 +76,16 @@ background: #fff;
   right: 0;
   bottom: 0;
   z-index: 999;
+}
+.dropzoneAreaBox {
+  width: 320px;
+  height: 200px;
+  background-color: red;
+}
+.fileTitle {
+  font-size: 22px;
+}
+.fileDesc {
+  font-size: 20px;
+  line-height: 30px;
 }

src/Styles/index.module.less

@@ -39,7 +39,7 @@ const nav = {
     problem: '/problem',
     vfg: '/vfg',
     manual: 'https://planimation.github.io/documentation/ ',
-    demo: '/demo',
+    demo: 'https://www.youtube.com/watch?v=Cj2rWdt1YQU',
     home: '/'
 };
 
@@ -51,8 +51,11 @@ function NavigationBar() {
     const handleClick = (url) => {
         setUrl(url);
         if(url==='manual'){
-          window.location.href(nav[url])
-        }else{
+          // window.location.href(nav[url])
+        }else if(url==='demo'){
+          // window.location.href(nav[url])
+        }
+        else{
           history.push(nav[url]);
 
         }
@@ -75,7 +78,7 @@ function NavigationBar() {
           <a href={'https://planimation.github.io/documentation/'} target='_blank' rel="noreferrer" className={classes.alink}>User Manual</a>
         </Link>
         <Link variant="button" color="inherit" onClick={()=>handleClick('demo')} className={classes.link}>
-          Demo
+        <a href={'https://www.youtube.com/watch?v=Cj2rWdt1YQU'} target='_blank' rel="noreferrer" className={classes.alink}>Demo</a>
         </Link>
       </nav>
       <Button color="inherit" variant="outlined"onClick={()=>handleClick('home')}  className={classes.link} >

src/components/navigationBar/navigationBar.js

@@ -93,7 +93,7 @@ const tiers = [
   {
     title: 'VFG',
     pageNo: 2,
-    description: ['Build visualisation from \nVFG'],
+    description: ['Build visualisation from VFG'],
     buttonText: 'Sign up for free',
     buttonVariant: 'outlined',
   },
@@ -150,7 +150,7 @@ export default function Home() {
         window.open('https://planimation.github.io/documentation/')
         break;
       case 4:
-        history.push('/demo');
+        window.open('https://www.youtube.com/watch?v=Cj2rWdt1YQU')
         break;
       default: return;
     }
@@ -199,7 +199,7 @@ export default function Home() {
                   </div> */}
                   <ul className={classes.itemTitle}>
                     {tier.description.map((line) => (
-                      <Typography component="li" variant="subtitle1" align="center" key={line}>
+                      <Typography variant="subtitle1" align="center" key={line}>
                         {line}
                       </Typography>
                     ))}

src/pages/HomePage/home.js

@@ -5,24 +5,24 @@ if(content) {
     contentObject = JSON.parse(content);
 }
 
-function getAllStages() {
+export function getAllStages() {
     const visualStages = contentObject.visualStages || [];
     const stages = visualStages.map(stage => {
         return stage.visualSprites;
     })
     return stages;
 }
 
-function getSteps() {
+export function getSteps() {
     return contentObject.visualStages ? contentObject.visualStages.map((s =>s.stageName)) : [];
 }
 
-function getStepInfo() {
+export function getStepInfo() {
     return contentObject.visualStages ? contentObject.visualStages.map((s =>s.stageInfo)) : [];
 }
 
 
-function getSubGoal() {
+export function getSubGoal() {
     if( !contentObject.subgoalMap) {
         return {};
     }
@@ -46,7 +46,7 @@ function getSubGoal() {
     return map;
 }
 
-function getStepSubgoalMap() {
+export function getStepSubgoalMap() {
     if( !contentObject.subgoalMap) {
         return {};
     }