Merge pull request #25 from visual-heuristics/feat_uiImprove

modify url and links; background color fixed

Author: invincibleyolk

src/App.js

@@ -23,19 +23,21 @@ const theme = createTheme({
 
 function App() {
   return (
+    <div className={styles.root}>
     <div className={styles.App}>
       <ThemeProvider theme={theme}>
       <NavigationBar />
       <Switch>
         <Route path="/" component={HomePage} exact />
-        <Route path="/page1" component={PageOne} />
-        <Route path="/page2" component={PageTwo} />
+        <Route path="/problem" component={PageOne} />
+        <Route path="/vfg" component={PageTwo} />
         <Route path="/page3" component={PageThree} />
-        <Route path="/page4" component={PageFour} />
+        <Route path="/demo" component={PageFour} />
       </Switch>
       </ThemeProvider>
       {/* <div>this is app</div> */}
     </div>
+    </div>
   );
 }
 

src/App.module.less

@@ -1,8 +1,18 @@
+.root{
+  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/components/navigationBar/navigationBar.js

@@ -28,14 +28,18 @@ const useStyles = makeStyles((theme) => ({
     link: {
       margin: theme.spacing(1, 1.5),
       cursor: 'pointer'
+    },
+    alink: {
+      color: '#ffffff',
+      textDecoration: 'none'
     }
   }));
 
 const nav = {
-    problem: '/page1',
-    vfg: '/page2',
-    manual: '/page3',
-    demo: '/page4',
+    problem: '/problem',
+    vfg: '/vfg',
+    manual: 'https://planimation.github.io/documentation/ ',
+    demo: '/demo',
     home: '/'
 };
 
@@ -46,7 +50,12 @@ function NavigationBar() {
 
     const handleClick = (url) => {
         setUrl(url);
-        history.push(nav[url]);
+        if(url==='manual'){
+          window.location.href(nav[url])
+        }else{
+          history.push(nav[url]);
+
+        }
     }
 
     return(
@@ -62,8 +71,8 @@ function NavigationBar() {
         <Link variant="button" color="inherit" onClick={()=>handleClick('vfg')} className={classes.link}>
           VFG
         </Link>
-        <Link variant="button" color="inherit" onClick={()=>handleClick('manual')} className={classes.link}>
-          User Manual
+        <Link variant="button" color="inherit" className={classes.link}>
+          <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

src/pages/HomePage/home.js

@@ -139,7 +139,23 @@ export default function Home() {
 
   const handleOnClick = (num) => {
     setNum( num + 1 );
-    history.push('/page'+num);
+    switch(num){
+      case 1:
+        history.push('/problem');
+        break;
+      case 2:
+        history.push('/vfg');
+        break;
+      case 3:
+        window.open('https://planimation.github.io/documentation/')
+        break;
+      case 4:
+        history.push('/demo');
+        break;
+      default: return;
+    }
+
+    
   }
 
   return (

src/pages/PageOne/index.js

@@ -49,7 +49,7 @@ class PageOne extends React.Component {
 
     handleStore = (content)=> {
         localStorage.setItem('fileContent', content);
-        window.location.href = '/page4';
+        window.location.href = '/demo';
     }
 
     handleNewURL = (urlString) => {

src/pages/PageTwo/index.js

@@ -172,7 +172,7 @@ class PageTwo extends React.Component {
                 <Button variant="contained" color="default" onClick={this.handleOnClick} text-align="left">Cancel</Button>
                 <Button  variant="contained" color="primary"  startIcon={<CloudUploadIcon />} onClick={()=>{
                     // eslint-disable-next-line no-restricted-globals
-                    location.href = '/page4';
+                    location.href = '/demo';
                 }} text-align="right">Continue</Button>
                 </div>
                 </Container>