feat(project): update home, add link

trompamusic · Jan 17, 2020 · 67ce2cb · 67ce2cb
1 parent 11554c0
commit 67ce2cb
Show file tree

Hide file tree

Showing 10 changed files with 69 additions and 49 deletions.
diff --git a/src/components/ActiveTask/__snapshots__/ActiveTask.test.jsx.snap b/src/components/ActiveTask/__snapshots__/ActiveTask.test.jsx.snap
@@ -7,11 +7,15 @@ exports[`<ActiveTask /> renders and matches snapshot 1`] = `
   <div
     class="MuiToolbar-root MuiToolbar-dense makeStyles-toolbarTop-2 MuiToolbar-gutters"
   >
-    <img
-      alt="logo"
-      class="makeStyles-logo-3"
-      src="logo.png"
-    />
+    <a
+      href="/"
+    >
+      <img
+        alt="logo"
+        class="makeStyles-logo-3"
+        src="logo.png"
+      />
+    </a>
     <a
       aria-disabled="false"
       class="MuiButtonBase-root MuiButton-root MuiButton-text"

diff --git a/src/components/AppbarTop/AppbarTop.jsx b/src/components/AppbarTop/AppbarTop.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { makeStyles } from '@material-ui/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
+import { Link } from 'react-router-dom';
 import * as PropTypes from 'prop-types';
 import images from '../../theme/images';
 import styles from './AppbarTop.styles';
@@ -14,7 +15,9 @@ export default function AppbarTop ({ children, position }) {
   return (
     <AppBar position={position}>
       <Toolbar classes={{ dense: classes.toolbarTop }} variant="dense">
-        <img className={classes.logo} src={images.logo} alt="logo" />
+        <Link to={"/"}>
+          <img className={classes.logo} src={images.logo} alt="logo" />
+        </Link>
         {children}
       </Toolbar>
     </AppBar>

diff --git a/src/components/AppbarTop/__snapshots__/AppbarTop.test.jsx.snap b/src/components/AppbarTop/__snapshots__/AppbarTop.test.jsx.snap
@@ -7,11 +7,15 @@ exports[`<AppbarTop /> renders and matches snapshot 1`] = `
   <div
     class="MuiToolbar-root MuiToolbar-dense makeStyles-toolbarTop-1 MuiToolbar-gutters"
   >
-    <img
-      alt="logo"
-      class="makeStyles-logo-2"
-      src="logo.png"
-    />
+    <a
+      href="/"
+    >
+      <img
+        alt="logo"
+        class="makeStyles-logo-2"
+        src="logo.png"
+      />
+    </a>
   </div>
 </header>
 `;
diff --git a/src/components/Campaign/Campaign.styles.js b/src/components/Campaign/Campaign.styles.js
@@ -29,7 +29,7 @@ export default ({ shape, palette, breakpoints }) => createStyles({
     },
   },
   actions: {
-    '& button': {
+    '& a, button': {
       marginRight: 16,
     },
     marginBottom: 16,

diff --git a/src/components/Campaign/__snapshots__/Campaign.test.jsx.snap b/src/components/Campaign/__snapshots__/Campaign.test.jsx.snap
@@ -7,11 +7,15 @@ exports[`<Campaign /> renders and matches snapshot 1`] = `
   <div
     class="MuiToolbar-root MuiToolbar-dense makeStyles-toolbarTop-10 MuiToolbar-gutters"
   >
-    <img
-      alt="logo"
-      class="makeStyles-logo-11"
-      src="logo.png"
-    />
+    <a
+      href="/"
+    >
+      <img
+        alt="logo"
+        class="makeStyles-logo-11"
+        src="logo.png"
+      />
+    </a>
   </div>
 </header>
 `;
diff --git a/src/containers/Campaign/__snapshots__/Campaign.test.jsx.snap b/src/containers/Campaign/__snapshots__/Campaign.test.jsx.snap
@@ -7,11 +7,15 @@ exports[`<Campaign /> renders and matches snapshot 1`] = `
   <div
     class="MuiToolbar-root MuiToolbar-dense makeStyles-toolbarTop-10 MuiToolbar-gutters"
   >
-    <img
-      alt="logo"
-      class="makeStyles-logo-11"
-      src="logo.png"
-    />
+    <a
+      href="/"
+    >
+      <img
+        alt="logo"
+        class="makeStyles-logo-11"
+        src="logo.png"
+      />
+    </a>
   </div>
 </header>
 `;
diff --git a/src/containers/Task/__snapshots__/Task.test.jsx.snap b/src/containers/Task/__snapshots__/Task.test.jsx.snap
@@ -8,11 +8,15 @@ exports[`<Task /> matches snapshot 1`] = `
     <div
       class="MuiToolbar-root MuiToolbar-dense makeStyles-toolbarTop-2 MuiToolbar-gutters"
     >
-      <img
-        alt="logo"
-        class="makeStyles-logo-3"
-        src="logo.png"
-      />
+      <a
+        href="/"
+      >
+        <img
+          alt="logo"
+          class="makeStyles-logo-3"
+          src="logo.png"
+        />
+      </a>
       <a
         aria-disabled="false"
         class="MuiButtonBase-root MuiButton-root MuiButton-text"

diff --git a/src/i18n/locales/en/home.json b/src/i18n/locales/en/home.json
@@ -1,4 +1,5 @@
 {
   "title": "$t(common:website_name)",
-  "welcome_message": "Welcome to Trompa's campaign manager!"
+  "welcome_message": "Welcome to Trompa's campaign manager!",
+  "go_to_demo_campaign": "Go to demo campaign"
 }
diff --git a/src/screens/Home/Home.jsx b/src/screens/Home/Home.jsx
@@ -1,9 +1,12 @@
 import React, { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { Helmet } from 'react-helmet';
-import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 import { makeStyles } from '@material-ui/styles';
+import MusicProcessIcon from '../../components/Icons/MusicProcessIcon';
+import AppbarTop from '../../components/AppbarTop/AppbarTop';
 import * as startupActions from '../../redux/Startup/Startup.actions';
 import styles from './Home.styles';
 
@@ -21,15 +24,14 @@ export default function Home() {
   return (
     <div>
       <Helmet>
-        <title>{t('home:title')}</title>
-        <meta name="description" content={t('home:welcome_message')} />
+        <title>{t('title')}</title>
+        <meta name="description" content={t('welcome_message')} />
       </Helmet>
-      <div className={classes.hero}>
-        <div>
-          <Typography variant="h4" color="inherit">
-            {t('home:welcome_message')}
-          </Typography>
-        </div>
+      <AppbarTop />
+      <div className={classes.container}>
+        <Button component={Link} to="campaign/e63fc3c5-f84e-4a64-9d5b-98a49dd4680c" startIcon={<MusicProcessIcon />} variant="contained" color="primary">
+          {t('go_to_demo_campaign')}
+        </Button>
       </div>
     </div>
   );

diff --git a/src/screens/Home/Home.styles.js b/src/screens/Home/Home.styles.js
@@ -1,16 +1,10 @@
 import { createStyles } from '@material-ui/styles';
 
-export default ({ palette, spacing }) => createStyles({
-  logo: {
-    marginBottom: spacing(4),
-  },
-  hero: {
-    display        : 'flex',
-    alignItems     : 'center',
-    justifyContent : 'center',
-    flexDirection  : 'column',
-    height         : '50vh',
-    backgroundColor: palette.primary.main,
-    color          : palette.primary.contrastText,
+export default () => createStyles({
+  container: {
+    display       : 'flex',
+    alignItems    : 'center',
+    justifyContent: 'center',
+    height        : '50vh',
   },
 });