Merge branch 'master' of https://github.com/alexfts/hacking-for-humanity

src/components/AlLandfill/AlLandfill.js

@@ -16,7 +16,7 @@ const tutorialSteps = [
   {
     label:
       "By not recycling aluminum, it'll have to be remade from scratch. That means it'll have to be mined again from bauxite ore.",
-    imgPath: '../miningbackground.jpg'
+    imgPath: '../miningbackground.png'
   },
   {
     label:
@@ -25,14 +25,12 @@ const tutorialSteps = [
   },
   {
     label:
-      "There is *no limit* to how many times aluminum can be recycled! That's why recycling aluminum is such a boom for the environment. As a 'sustainable metal', it can be recycled again and again with no loss of material.",
-    imgPath:
-      'https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=400&h=250&q=80'
+      "There is no limit to how many times aluminum can be recycled! That's why recycling aluminum is such a boom for the environment. As a 'sustainable metal', it can be recycled again and again with no loss of material.",
+    imgPath: '../recyclebackground3.jpg'
   },
   {
-    label: 'NeONBRAND Digital Marketing, Las Vegas, United States',
-    imgPath:
-      'https://images.unsplash.com/photo-1518732714860-b62714ce0c59?auto=format&fit=crop&w=400&h=250&q=60'
+    label: "Don't throw out your aluminum cans! Always recycle them.",
+    imgPath: '../compostbackground.PNG'
   }
 ];
 
@@ -83,6 +81,30 @@ class TextMobileStepper extends React.Component {
             </div>
           ))}
         </SwipeableViews>
+
+        {activeStep === 3 ? (
+          <div className={classes.buttonContainer}>
+            <Button
+              className={classes.buttonEnd}
+              component={Link}
+              to="/choose-litter"
+              // variant="contained"
+              color="primary"
+            >
+              Return to Litter
+            </Button>
+            <Button
+              className={classes.buttonEnd}
+              component={Link}
+              to="/choose-method"
+              // variant="contained"
+              color="primary"
+            >
+              Throw it somewhere else
+            </Button>
+          </div>
+        ) : null}
+
         {/* {activeStep != 3 ? ( */}
         <MobileStepper
           variant="progress"
@@ -123,28 +145,6 @@ class TextMobileStepper extends React.Component {
           }
         />
         {/* ) : null} */}
-        {activeStep === 3 ? (
-          <div className={classes.buttonContainer}>
-            <Button
-              className={classes.buttonEnd}
-              component={Link}
-              to="/choose-litter"
-              variant="contained"
-              color="primary"
-            >
-              Back to Litter
-            </Button>
-            <Button
-              className={classes.buttonEnd}
-              component={Link}
-              to="/choose-method"
-              variant="contained"
-              color="primary"
-            >
-              Select another method
-            </Button>
-          </div>
-        ) : null}
       </div>
     );
   }

src/components/AlLandfill/styles.js

@@ -1,3 +1,5 @@
+import { isAbsolute } from 'path';
+
 const styles = theme => ({
   root: {
     display: 'flex',
@@ -17,45 +19,49 @@ const styles = theme => ({
     // paddingLeft: theme.spacing.unit * 4,
     position: 'absolute',
     margin: 'auto',
-    top: '50%',
+    top: '40%',
     left: 0,
     right: 0,
-    width: '80%',
+    width: '70%',
     textAlign: 'center',
     zIndex: 10
   },
   label: {
     color: '#fff',
-    textAlign: 'center'
+    textAlign: 'center',
+    textShadow: '2px 3px 5px #353535'
   },
   img: {
     overflow: 'hidden',
     display: 'block',
     position: 'relative',
-    height: '100%',
+    height: '100vh',
     width: '100%'
   },
 
   mobileStepper: {
-    // background: 'transparent',
-    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    background: 'transparent',
+    textShadow: '2px 3px 5px #353535',
     position: 'absolute',
     bottom: '5%',
     width: '100%'
   },
   stepBtn: {
-    color: '#fff'
+    color: '#fff',
+    textShadow: '1px 1px 2px #353535'
   },
 
   buttonContainer: {
-    bottom: 0,
     display: 'flex',
+    flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',
+    position: 'absolute',
+    bottom: '40%',
     width: '100%'
   },
   buttonEnd: {
-    color: '#fff'
+    margin: '0 10px'
   }
 });
 

src/components/AlRecycling/styles.js

@@ -39,7 +39,7 @@ const styles = theme => ({
     top: '50%',
     left: 0,
     right: 0,
-    width: '80%',
+    width: '70%',
     textAlign: 'center',
     zIndex: 10
   },
@@ -60,14 +60,13 @@ const styles = theme => ({
     backgroundColor: 'rgba(0, 0, 0, 0.3)',
     position: 'absolute',
     bottom: '5%',
-    width: '100%'
+    width: '800%'
   },
   stepBtn: {
     color: '#fff'
   },
 
   buttonContainer: {
-    bottom: 0,
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',

src/components/FunFactsLoader/funfacts.js

@@ -1,30 +1,48 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { Button } from '@material-ui/core';
-import { withStyles } from '@material-ui/core/styles';
-import styles from './styles';
+import React, { useState } from 'react';
+import { withStyles, Grid, Slide, Typography } from '@material-ui/core';
+
 import funFacts from '../../data/funfacts.json';
 import Loader from '../Loader';
-import QuoteIcon from '@material-ui/icons/FormatQuote';
+import styles from './styles';
 
 const FunFacts = ({ location, classes }) => {
   const litter = location.state && location.state.litter;
   const name = location.state && location.state.name;
   const pathname = location.state && location.state.pathname;
   var Random = funFacts.facts[Math.floor(Math.random() * 13)];
+
+  const [litterState] = useState(true);
+
   return (
-    <div className={classes.factContainer}>
-      <h1 className={classes.title}>Fun Fact!</h1>
+    <Grid
+      container
+      direction="column"
+      alignItems="center"
+      justify="space-between"
+      className={classes.container}
+    >
+      <Grid item xs={12} className={classes.item}>
+        <Slide in={litterState} direction="down">
+          <Typography variant="h2" gutterBottom className={classes.header}>
+            Fun Fact
+          </Typography>
+        </Slide>
+
+        <Grid item xs={12} className={classes.item}>
+          <Slide in={litterState} direction="up">
+            <Typography variant="h4" gutterBottom className={classes.fact}>
+              "{Random}"
+            </Typography>
+          </Slide>
+        </Grid>
 
-      <p className={classes.fact}>
-        <QuoteIcon />
-        {Random}
-        <QuoteIcon />
-      </p>
-      {litter && name && pathname && (
-        <Loader pathname={pathname} litter={litter} name={name} />
-      )}
-    </div>
+        <Grid item xs={12} className={classes.item}>
+          {litter && name && pathname && (
+            <Loader pathname={pathname} litter={litter} name={name} />
+          )}
+        </Grid>
+      </Grid>
+    </Grid>
   );
 };
 export default withStyles(styles)(FunFacts);

src/components/FunFactsLoader/styles.js

@@ -1,26 +1,22 @@
 const styles = theme => ({
-root: {
+  container: {
     flexGrow: 1,
+    padding: theme.spacing.unit * 5,
+    height: '100vh'
   },
-title: {
-  textAlign: "center", 
-  color: theme.palette.primary.dark
-},
-factContainer: {
-  height: "100vh",
-  width: "100%",
-  display: "flex",
-  flexDirection: "column",
-  textAlign: "center",
-  justifyContent: "center"
-},
-fact: {
-  width: "50%",
-  margin: "20px auto",
-},
-svg: {
-  fontSize: "20px !important"
-}
-
+  item: {
+    padding: theme.spacing.unit * 3,
+    textAlign: 'center',
+    margin: theme.spacing.unit * 10
+  },
+  header: {
+    weight: 700,
+    color: theme.palette.primary.dark,
+    fontFamily: 'Sofia, cursive'
+  },
+  fact: { maxWidth: 500 },
+  svg: {
+    fontSize: '30px !important'
+  }
 });
-export default styles;
+export default styles;

src/pages/Landfill/styles.js

@@ -8,6 +8,12 @@ const styles = theme => ({
     justifyContent: 'center',
     height: '100%',
     width: '100%'
+  },
+  title: {
+    color: '#fff',
+    position: 'absolute',
+    top: 0,
+    zIndex: 10
   }
 });