Add template Step component with configurable background image and content

frontend/src/assets/styles/header.scss

@@ -1,5 +1,8 @@
 .top-header {
-    padding-bottom: 3.2vw;
+    padding-left: 3vw;
+    padding-right: 3vw;
+    padding-top: 1.8vw;
+    padding-bottom: 1.8vw;
 }
 
 .header-logo {

frontend/src/assets/styles/main.scss

@@ -1,13 +1,10 @@
 @import "./theme.scss";
 @import "./header.scss";
 
-// Core styles here...
-.App {
+// Global styles here...
+html, body, #root, .App {
+    height: 100%;
     font-family: $primary-font;
     color: $text-color-primary;
     background-color: $background-color-primary;
-    padding-top: 3.2vw;
-    padding-left: 3vw;
-    padding-right: 3vw;
-    padding-bottom: 3.2vw;
 }

frontend/src/components/Step.js

@@ -0,0 +1,35 @@
+import SampleBackground from '../assets/img/sample-bg.jpg';
+
+export default function Step(props) {
+    const overlayStyle = {
+        backgroundColor: "#3b3b3b74",
+        paddingRight: '3vw',
+        paddingLeft: '3vw'
+    };
+
+    const StepBackgroundImage = props.backgroundImage || SampleBackground
+    const stepStyle = {
+        backgroundImage: `url(${StepBackgroundImage})`
+    };
+
+    return (
+        <div style={stepStyle}>
+            <div className='step-container mt-4 py-4' style={overlayStyle}>
+                {props.contentComponent ? (
+                    <div>
+                        {props.contentComponent}
+                    </div>
+                ) : (
+                    <div className='d-flex justify-content-between'>
+                        <div>
+                            {props.informationComponent}
+                        </div>
+                        <div>
+                            {props.selectionComponent}
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

frontend/src/components/Stepper.js

@@ -37,7 +37,7 @@ export default function StepperWizard(props) {
 
   return (
     <Box sx={{ width: '100%' }}>
-      <Stepper activeStep={activeStep}>
+      <Stepper activeStep={activeStep} sx={{ paddingRight: '3vw', paddingLeft: '3vw' }}>
         {steps.map((step, index) => {
           return (
             <Step key={step.label}>
@@ -49,7 +49,7 @@ export default function StepperWizard(props) {
       {activeStep === steps.length ? (
         <React.Fragment>
           <ResultsStep {...props} />
-          <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
+          <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, pb: 2, paddingRight: '3vw', paddingLeft: '3vw' }}>
             <Box sx={{ flex: '1 1 auto' }} />
             <Button onClick={handleReset}>Reset</Button>
           </Box>
@@ -57,7 +57,7 @@ export default function StepperWizard(props) {
       ) : (
         <React.Fragment>
           <CurrentStep {...props} />
-          <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
+          <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, pb: 2, paddingRight: '3vw', paddingLeft: '3vw' }}>
             <Button
               color="inherit"
               disabled={activeStep === 0}

frontend/src/components/steps/Location.js

@@ -1,13 +1,15 @@
-import React from 'react'
-import { Container } from 'reactstrap';
+import Step from '../Step';
 
+export default function LocationStep() {
+    const locationInfoPanel = (
+        <h1>Location Information</h1>
+    )
 
-export default class Step1 extends React.Component {
-    render() {
-        return (
-            <div className="pt-4">
-                <p>Please choose your location...</p>
-            </div>
-        )
-    }
+    const locationSelectionPanel = (
+        <h1>Location Selection</h1>
+    )
+
+    return (
+        <Step informationComponent={locationInfoPanel} selectionComponent={locationSelectionPanel} />
+    )
 }

frontend/src/components/steps/Results.js

@@ -1,18 +1,20 @@
-import React from 'react'
-import { Container, ListGroup, ListGroupItem } from 'reactstrap';
+// import React from 'react'
+import Step from '../Step';
+import { ListGroup, ListGroupItem } from 'reactstrap';
 
+export default function Results(props) {
+    const stepContent = (
+        <div>
+        <h5 className="pt-4">Plant List</h5>
+        <ListGroup>
+            {props.plants.map(function (plant, i) {
+                return <ListGroupItem key={i} >{plant.name}</ListGroupItem>;
+            })}
+        </ListGroup>
+        </div>
+    )
 
-export default class Step3 extends React.Component {
-    render() {
-        return (
-            <Container className="p-2">
-                <h5 className="pt-4">Plant List</h5>
-                <ListGroup>
-                    {this.props.plants.map(function (plant, i) {
-                        return <ListGroupItem key={i} >{plant.name}</ListGroupItem>;
-                    })}
-                </ListGroup>
-            </Container>
-        )
-    }
+    return (
+        <Step contentComponent={stepContent} />
+    )
 }

frontend/src/components/steps/Soil.js

@@ -1,13 +1,15 @@
-import React from 'react'
-import { Container } from 'reactstrap';
+import Step from '../Step';
 
+export default function SoilVariantStep() {
+    const soilVarientInfoPanel = (
+        <h1>Soil Information</h1>
+    )
 
-export default class Step2 extends React.Component {
-    render() {
-        return (
-            <Container className="pt-4">
-                <p >Sample step</p>
-            </Container>
-        )
-    }
+    const soilVarientSelectionPanel = (
+        <h1>Soil Selection</h1>
+    )
+
+    return (
+        <Step informationComponent={soilVarientInfoPanel} selectionComponent={soilVarientSelectionPanel} />
+    )
 }