feat: makes some design improvement

zubhub_frontend/zubhub/src/components/previewActivity/PreviewActivity.jsx

@@ -213,7 +213,13 @@ function PreviewActivity({ onClose, ...props }) {
       </div>
     );
   } else {
-    return <ErrorPage error={t('projectDetails.errors.unexpected')} />;
+    return <ErrorPage
+      error={t('projectDetails.errors.unexpected')}
+      imgSrc={NoProjects}
+      routeTitle='Create Project'
+      routeLink='/create-project'
+      errorTitle='No projects found'
+    />;
   }
 }
 

zubhub_frontend/zubhub/src/views/error/ErrorPage.jsx

@@ -4,8 +4,9 @@ import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import { Box, Typography, Container } from '@material-ui/core';
 
-import disconnected from '../../assets/images/disconnected-chains.svg';
 import styles from '../../assets/js/styles/views/error/errorPageStyles';
+import CustomButton from '../../components/button/Button';
+import { Link } from 'react-router-dom';
 
 const useStyles = makeStyles(styles);
 
@@ -21,21 +22,35 @@ function ErrorPage(props) {
   return (
     <Box className={classes.root} style={propStyle ? propStyle : null}>
       <Container className={classes.mainContainerStyle}>
-        <img className={classes.disconnectedStyle} src={disconnected} alt={props.error} />
+        <img className={classes.disconnectedStyle} src={props.imgSrc} alt={props.error} />
         <Box className={classes.errorBoxStyle}>
-          <Typography variant="h1">Oops!!</Typography>
-          <Typography style={{ marginBottom: 50 }} variant="h5">
+          <Typography variant="h3">{props.errorTitle}</Typography>
+          <Typography variant="h5">
             {props.error}
           </Typography>
           {props.children}
         </Box>
+        <Link to={props.routeLink}>
+          <CustomButton
+            variant="outlined"
+            size="large"
+            secondaryButtonStyle
+            customButtonStyle
+          >
+            {props.routeTitle}
+          </CustomButton>
+        </Link>
       </Container>
     </Box>
   );
 }
 
 ErrorPage.propTypes = {
+  routeLink: PropTypes.string.isRequired,
+  routeTitle: PropTypes.string.isRequired,
+  errorTitle: PropTypes.string,
   error: PropTypes.string.isRequired,
+  imgSrc: PropTypes.string,
 };
 
 export default ErrorPage;

zubhub_frontend/zubhub/src/views/projects/Projects.jsx

@@ -171,7 +171,7 @@ function Projects(props) {
                     lg={4}
                     item
                     align="center"
-                    // className={classes.projectGridStyle}
+                  // className={classes.projectGridStyle}
                   >
                     <Project
                       project={project}
@@ -273,7 +273,13 @@ function Projects(props) {
       </>
     );
   } else {
-    return <ErrorPage error={t('projects.errors.unexpected')} />;
+    return <ErrorPage
+      error={t('projects.errors.unexpected')}
+      imgSrc={NoProjects}
+      routeTitle='Create Project'
+      routeLink='/create-project'
+      errorTitle='No projects yet'
+    />
   }
 }
 

zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx

@@ -36,6 +36,7 @@ import LoadingPage from '../loading/LoadingPage';
 import Project from '../../components/project/Project';
 import styles from '../../assets/js/styles/views/search_results/searchResultsStyles';
 import commonStyles from '../../assets/js/styles';
+import NoProjects from '../../assets/images/no-projects.svg'
 
 const useStyles = makeStyles(styles);
 const useCommonStyles = makeStyles(commonStyles);
@@ -257,6 +258,10 @@ function SearchResults(props) {
         ) : (
           <ErrorPage
             error={t('searchResults.errors.noResult')}
+            imgSrc={NoProjects}
+            routeTitle='Create Project'
+            routeLink='/create-project'
+            errorTitle='No projects found'
           />
         )}
       </Box>