Edit description on Timer page, add 'Lean More'

3 files changed, 16 insertions, 5 deletions

diff --git a/src/components/ContentSection/ContentSection.js b/src/components/ContentSection/ContentSection.js
index fc431f3..918c400 100644
--- a/src/components/ContentSection/ContentSection.js
+++ b/src/components/ContentSection/ContentSection.js
@@ -17,7 +17,7 @@ const useStyles = makeStyles(theme => ({
     },
     '& .MuiButton-root': {
       color: theme.palette.background.paper,
-      margin: theme.spacing(2, 2, 2, 0),
+      margin: theme.spacing(1, 2, 2, 0),
       fontWeight: 'bold',
     },
   },
diff --git a/src/index.js b/src/index.js
index 48d7eb8..0c3d415 100644
--- a/src/index.js
+++ b/src/index.js
@@ -24,6 +24,7 @@ const App = () => {
           <Timer
             recentSolutions={recentSolutions}
             setRecentSolutions={setRecentSolutions}
+            setPage={setPage}
           />
         );
 
diff --git a/src/pages/Timer/Timer.js b/src/pages/Timer/Timer.js
index 4b5925f..66e1b8f 100644
--- a/src/pages/Timer/Timer.js
+++ b/src/pages/Timer/Timer.js
@@ -8,7 +8,7 @@ import TimerButton from "./TimerButton/TimerButton";
 import SmartList from "../../components/SmartList/SmartList";
 import SolutionCard from "../../components/SolutionCard/SolutionCard";
 
-import { Typography, makeStyles } from "@material-ui/core";
+import { Typography, Button, makeStyles } from "@material-ui/core";
 
 
 const useStyles = makeStyles(theme => ({
@@ -20,7 +20,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const Timer = ({ recentSolutions, setRecentSolutions }) => {
+const Timer = ({ recentSolutions, setRecentSolutions, setPage }) => {
   const classes = useStyles();
 
   const user = {
@@ -35,6 +35,10 @@ const Timer = ({ recentSolutions, setRecentSolutions }) => {
     });
   };
 
+  const handleLearnMore = () => {
+    setPage('contribute');
+  };
+
   const removeSolution = (id) => {
     setRecentSolutions(recentSolutions.filter((solution => solution.id !== id)));
   };
@@ -54,8 +58,14 @@ const Timer = ({ recentSolutions, setRecentSolutions }) => {
         <div className={classes.primary}>
           <ContentSection sectionName="Welcome to ChronoCube!">
             <Typography>
-              Here is some text about how cool this application is, why you should use it
-              and how to make it better!
+              <p>
+                ChronoCube is a professional speedcubing timer.
+                Share your results publicly - let everyone see your progress and
+                achievements!
+                Every speedcuber will benefit
+                from using it - both amateur and professional!
+              </p>
+              <Button variant="contained" color="secondary" onClick={handleLearnMore}> Learn more </Button>
             </Typography>
           </ContentSection>
           <TimerButton registerResult={registerResult} />