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

alexfts · May 5, 2019 · 150e09b · 150e09b
2 parents 71fe88f + c2ad942
commit 150e09b
Show file tree

Hide file tree

Showing 11 changed files with 178 additions and 77 deletions.
diff --git a/public/compostbackground.PNG b/public/compostbackground.PNG
diff --git a/public/miningbackground.png b/public/miningbackground.png
diff --git a/src/components/AlLandfill/AlLandfill.js b/src/components/AlLandfill/AlLandfill.js
@@ -14,18 +14,18 @@ import styles from './styles';
 
 const tutorialSteps = [
   {
-    label: "By not recycling aluminum, it'll have to be remade from scratch.",
-    imgPath:
-      'https://images.unsplash.com/photo-1537944434965-cf4679d1a598?auto=format&fit=crop&w=400&h=250&q=60'
+    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'
   },
   {
     label:
-      'Bauxite ore is mined to create aluminum. The mining causes deforestation, erosion, polluted water sources and a threat to animal life. Recycle your aluminum cans!',
-    imgPath:
-      'https://images.unsplash.com/photo-1538032746644-0212e812a9e7?auto=format&fit=crop&w=400&h=250&q=60'
+      'The mining causes deforestation, erosion, polluted water sources and a threat to animal life.',
+    imgPath: '../deforestationbackground.jpeg'
   },
   {
-    label: 'Bali, Indonesia',
+    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'
   },
@@ -61,9 +61,10 @@ class TextMobileStepper extends React.Component {
     return (
       <div className={classes.root}>
         <Paper square elevation={0} className={classes.header}>
-          <Typography>{tutorialSteps[activeStep].label}</Typography>
+          <Typography className={classes.label} variant="h6">
+            {tutorialSteps[activeStep].label}
+          </Typography>
         </Paper>
-
         <SwipeableViews
           axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
           index={activeStep}
@@ -82,52 +83,64 @@ class TextMobileStepper extends React.Component {
             </div>
           ))}
         </SwipeableViews>
-
-        {activeStep != 3 ? (
-          <MobileStepper
-            variant="progress"
-            color="secondary"
-            steps={maxSteps}
-            position="static"
-            activeStep={activeStep}
-            className={classes.mobileStepper}
-            nextButton={
-              <Button
-                size="small"
-                onClick={this.handleNext}
-                disabled={activeStep === maxSteps - 1}
-              >
-                Next
-                {theme.direction === 'rtl' ? (
-                  <KeyboardArrowLeft />
-                ) : (
-                  <KeyboardArrowRight />
-                )}
-              </Button>
-            }
-            backButton={
-              <Button
-                size="small"
-                onClick={this.handleBack}
-                disabled={activeStep === 0}
-              >
-                {theme.direction === 'rtl' ? (
-                  <KeyboardArrowRight />
-                ) : (
-                  <KeyboardArrowLeft />
-                )}
-                Back
-              </Button>
-            }
-          />
-        ) : null}
-
+        {/* {activeStep != 3 ? ( */}
+        <MobileStepper
+          variant="progress"
+          color="default"
+          steps={maxSteps}
+          position="static"
+          activeStep={activeStep}
+          className={classes.mobileStepper}
+          nextButton={
+            <Button
+              className={classes.stepBtn}
+              size="large"
+              onClick={this.handleNext}
+              disabled={activeStep === maxSteps - 1}
+            >
+              Next
+              {theme.direction === 'rtl' ? (
+                <KeyboardArrowLeft />
+              ) : (
+                <KeyboardArrowRight />
+              )}
+            </Button>
+          }
+          backButton={
+            <Button
+              className={classes.stepBtn}
+              size="large"
+              onClick={this.handleBack}
+              disabled={activeStep === 0}
+            >
+              {theme.direction === 'rtl' ? (
+                <KeyboardArrowRight />
+              ) : (
+                <KeyboardArrowLeft />
+              )}
+              Back
+            </Button>
+          }
+        />
+        {/* ) : null} */}
         {activeStep === 3 ? (
           <div className={classes.buttonContainer}>
-            <Button component={Link} to="/choose-litter">
+            <Button
+              className={classes.buttonEnd}
+              component={Link}
+              to="/choose-litter"
+              variant="contained"
+              color="primary"
+            >
               Back to Litter
             </Button>
-            <Button component={Link} to="/choose-method">
+            <Button
+              className={classes.buttonEnd}
+              component={Link}
+              to="/choose-method"
+              variant="contained"
+              color="primary"
+            >
               Select another method
             </Button>
           </div>

diff --git a/src/components/AlLandfill/styles.js b/src/components/AlLandfill/styles.js
@@ -1,24 +1,61 @@
 const styles = theme => ({
   root: {
-    // maxWidth: 400,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
     flexGrow: 1,
     width: '100%'
   },
   header: {
+    // backgroundColor: theme.palette.background.default,
+    // backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    backgroundColor: 'transparent',
+    color: '#fff',
     display: 'flex',
-    alignItems: 'center',
+    justifyContent: 'center',
     height: 50,
-    paddingLeft: theme.spacing.unit * 4,
-    backgroundColor: theme.palette.background.default
+    // paddingLeft: theme.spacing.unit * 4,
+    position: 'absolute',
+    margin: 'auto',
+    top: '50%',
+    left: 0,
+    right: 0,
+    width: '80%',
+    textAlign: 'center',
+    zIndex: 10
+  },
+  label: {
+    color: '#fff',
+    textAlign: 'center'
   },
   img: {
     overflow: 'hidden',
     display: 'block',
+    position: 'relative',
+    height: '100%',
+    width: '100%'
+  },
+
+  mobileStepper: {
+    // background: 'transparent',
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    position: 'absolute',
+    bottom: '5%',
     width: '100%'
   },
+  stepBtn: {
+    color: '#fff'
+  },
+
   buttonContainer: {
+    bottom: 0,
     display: 'flex',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%'
+  },
+  buttonEnd: {
+    color: '#fff'
   }
 });
 

diff --git a/src/components/AlRecycling/AlRecycling.js b/src/components/AlRecycling/AlRecycling.js
@@ -20,21 +20,23 @@ const tutorialSteps = [
       'https://images.unsplash.com/photo-1537944434965-cf4679d1a598?auto=format&fit=crop&w=400&h=250&q=60'
   },
   {
-    label: 'The aluminum blocks bales are transported to a processing plant where they are shredded into tiny pieces and taken by the conveyor system into a specialized decoater.',
+    label:
+      'The aluminum blocks bales are transported to a processing plant where they are shredded into tiny pieces and taken by the conveyor system into a specialized decoater.',
     imgPath:
       'https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=400&h=250&q=80'
   },
   {
-  label: "After this, they are taken to a holding furnace where they are melted down into ingots, lifted by an overhead careen, and dispatched to the rolling mill. The ingots are then rolled out making thin sheets of aluminum",
+    label:
+      'After this, they are taken to a holding furnace where they are melted down into ingots, lifted by an overhead careen, and dispatched to the rolling mill. The ingots are then rolled out making thin sheets of aluminum',
     imgPath:
       'https://images.unsplash.com/photo-1518732714860-b62714ce0c59?auto=format&fit=crop&w=400&h=250&q=60'
   },
   {
-    label: 'They are then repurposed into new Aluminum products, saving 90-95% of the energy used to make a new one!',
+    label:
+      'They are then repurposed into new Aluminum products, saving 90-95% of the energy used to make a new one!',
     imgPath:
       'https://images.unsplash.com/photo-1518732714860-b62714ce0c59?auto=format&fit=crop&w=400&h=250&q=60'
   }
-
 ];
 
 class TextMobileStepper extends React.Component {
@@ -61,8 +63,10 @@ class TextMobileStepper extends React.Component {
 
     return (
       <div className={classes.root}>
-        <Paper square elevation={0} className={classes.title}>
-          <Typography>{tutorialSteps[activeStep].label}</Typography>
+        <Paper square elevation={0} className={classes.header}>
+          <Typography className={classes.label} variant="h6">
+            {tutorialSteps[activeStep].label}
+          </Typography>
         </Paper>
 
         <SwipeableViews
@@ -93,7 +97,8 @@ class TextMobileStepper extends React.Component {
           className={classes.mobileStepper}
           nextButton={
             <Button
-              size="small"
+              className={classes.stepBtn}
+              size="large"
               onClick={this.handleNext}
               disabled={activeStep === maxSteps - 1}
             >
@@ -107,7 +112,8 @@ class TextMobileStepper extends React.Component {
           }
           backButton={
             <Button
-              size="small"
+              className={classes.stepBtn}
+              size="large"
               onClick={this.handleBack}
               disabled={activeStep === 0}
             >
@@ -123,7 +129,11 @@ class TextMobileStepper extends React.Component {
 
         {activeStep === 3 ? (
           <div className={classes.buttonContainer}>
-            <Button component={Link} to="/choose-litter">
+            <Button
+              component={Link}
+              to="/choose-litter"
+              className={classes.buttonEnd}
+            >
               Back to Litter
             </Button>
           </div>

diff --git a/src/components/AlRecycling/styles.js b/src/components/AlRecycling/styles.js
@@ -11,29 +11,70 @@ const styles = theme => ({
     backgroundColor: theme.palette.background.default
   },
   title: {
-    textAlign: "center", 
+    textAlign: 'center',
     color: theme.palette.primary.dark
   },
   factContainer: {
-    height: "100vh",
-    width: "100%",
-    display: "flex",
-    flexDirection: "column",
-    textAlign: "center",
-    justifyContent: "center"
+    height: '100vh',
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    textAlign: 'center',
+    justifyContent: 'center'
   },
   fact: {
-    width: "50%",
-    margin: "20px auto",
+    width: '50%',
+    margin: '20px auto'
+  },
+
+  header: {
+    backgroundColor: 'transparent',
+    color: '#fff',
+    display: 'flex',
+    justifyContent: 'center',
+    height: 50,
+    // paddingLeft: theme.spacing.unit * 4,
+    position: 'absolute',
+    margin: 'auto',
+    top: '50%',
+    left: 0,
+    right: 0,
+    width: '80%',
+    textAlign: 'center',
+    zIndex: 10
+  },
+  label: {
+    color: '#fff',
+    textAlign: 'center'
   },
   img: {
     overflow: 'hidden',
     display: 'block',
+    position: 'relative',
+    height: '100%',
     width: '100%'
   },
+
+  mobileStepper: {
+    // background: 'transparent',
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    position: 'absolute',
+    bottom: '5%',
+    width: '100%'
+  },
+  stepBtn: {
+    color: '#fff'
+  },
+
   buttonContainer: {
+    bottom: 0,
     display: 'flex',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%'
+  },
+  buttonEnd: {
+    color: '#fff'
   }
 });
 

diff --git a/src/images/malaysia-bauxite-mining-pollution.jpg b/src/images/malaysia-bauxite-mining-pollution.jpg
diff --git a/public/miningbackground.jpg → src/images/miningbackground.jpg b/public/miningbackground.jpg → src/images/miningbackground.jpg
diff --git a/src/images/miningbauxiteore.jpg b/src/images/miningbauxiteore.jpg
diff --git a/src/pages/Compost/styles.js b/src/pages/Compost/styles.js
@@ -16,7 +16,7 @@ const styles = theme => ({
     justifyContent: 'center',
     alignItems: 'center',
     background:
-      'linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),url(https://image.shutterstock.com/image-vector/vector-illustration-landfill-landscape-waste-260nw-1188827215.jpg) no-repeat',
+      'url(../compostbackground.png) no-repeat',
     backgroundSize: 'cover'
   },
   correctFactContainer: {

diff --git a/src/pages/Landfill/Landfill.js b/src/pages/Landfill/Landfill.js
@@ -40,7 +40,7 @@ const Landfill = ({ classes, location }) => {
 
   return (
     <div className={classes.landfill}>
-      Landfill
+      <h2 className={classes.title}>Landfill</h2>
       {name === 'Aluminum' ? <AlLandfill /> : null}
     </div>
   );