Add provided step background images

frontend/src/assets/styles/step.scss

@@ -1,6 +1,7 @@
 .step-container {
     flex-grow: 1;
     overflow: auto;
+    background-size: cover;
 }
 
 .step-overlay {

frontend/src/components/Stepper.js

@@ -9,7 +9,7 @@ import LocationStep from './steps/location/LocationStep'
 import SoilStep from './steps/soilvariant/SoilStep'
 import HabitatStep from './steps/habitat/HabitatStep';
 import ZoneStep from './steps/zone/ZoneStep';
-import SummaryStep from './steps/summary/ZoneStep';
+import SummaryStep from './steps/summary/SummaryStep';
 import ResultsStep from './steps/results/ResultsStep'
 
 const steps = [

frontend/src/components/steps/Step.js

@@ -1,23 +1,24 @@
+import { useEffect, useState } from 'react';
 import { Row, Col } from 'reactstrap'
-import SampleBackground from '../../assets/img/sample-bg.jpg';
+import SampleBackground from '../../assets/img/stepBackgrounds/step1.jpg';
 
 export default function Step(props) {
-    const StepBackgroundImage = props.backgroundImage || SampleBackground
-    const stepBackground = {
-        backgroundImage: `url(${StepBackgroundImage})`
-    };
+
+    const [stepBackgroundImage, setStepBackground] = useState(SampleBackground)
+
+    useEffect(() => setStepBackground(props.backgroundImage || SampleBackground), [props.backgroundImage])
 
     return (
-        <div className='step-container' style={stepBackground}>
+        <div className='step-container' style={{backgroundImage: `url(${stepBackgroundImage})`}}>
             <div className='step-overlay'>
                 {props.contentComponent ? (
                     props.contentComponent
                 ) : (
                     <Row style={{height: '100%'}}>
-                        <Col lg={{ size: "3", offset: 1 }} md="5" sm="12" style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
+                        <Col lg={{ size: "4" }} md="5" sm="12" style={{display: 'flex', alignItems: 'center', justifyContent: 'center', paddingRight: '50px', paddingLeft: '50px'}}>
                             {props.informationComponent}
                         </Col>
-                        <Col lg={{ size: "7", offset: 1}} md="7" sm="12" style={{display: 'flex', alignItems: 'center'}}>
+                        <Col lg={{ size: "8" }} md="7" sm="12" style={{display: 'flex', alignItems: 'center'}}>
                             {props.selectionComponent}
                         </Col>
                     </Row>

frontend/src/components/steps/habitat/HabitatStep.js

@@ -2,6 +2,7 @@ import Step from '../Step';
 import HabitatSelector from './HabitatSelector' 
 import StepInformation from '../StepInformation';
 import staticText from '../../../assets/data/staticText.json'
+import habitatBackgroundImage from '../../../assets/img/stepBackgrounds/step3.jpg';
 
 export default function HabitatStep(props) {
     const habitatInfoPanel = (
@@ -16,6 +17,6 @@ export default function HabitatStep(props) {
     )
 
     return (
-        <Step informationComponent={habitatInfoPanel} selectionComponent={habitatSelectionPanel} />
+        <Step informationComponent={habitatInfoPanel} selectionComponent={habitatSelectionPanel} backgroundImage={habitatBackgroundImage} />
     )
 }

frontend/src/components/steps/location/LocationStep.js

@@ -2,6 +2,7 @@ import Step from '../Step';
 import LocationSelectorMap from './Map'
 import StepInformation from '../StepInformation';
 import staticText from '../../../assets/data/staticText.json'
+import locationBackgroundImage from '../../../assets/img/stepBackgrounds/step1.jpg';
 
 export default function LocationStep(props) {
 
@@ -17,6 +18,6 @@ export default function LocationStep(props) {
     )
 
     return (
-        <Step informationComponent={locationInfoPanel} selectionComponent={locationSelectionPanel} />
+        <Step informationComponent={locationInfoPanel} selectionComponent={locationSelectionPanel} backgroundImage={locationBackgroundImage} />
     )
 }

frontend/src/components/steps/results/ResultsStep.js

@@ -6,6 +6,7 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import PlantRepository from '../../../repository/PlantRepository'
 import { Typography, Box } from '@mui/material';
+import resultsBackgroundImage from '../../../assets/img/stepBackgrounds/step6.jpg';
 
 
 export default function ResultsStep(props) {
@@ -63,7 +64,7 @@ export default function ResultsStep(props) {
     }
 
     const stepContent = (
-        <div className="pt-4">
+        <div className="py-4">
             <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }} className="pb-4">
                 <Typography variant='h5'>Plant List Results</Typography>
                 <Stack spacing={2} direction="row" justifyContent="end">
@@ -76,6 +77,6 @@ export default function ResultsStep(props) {
     )
 
     return (
-        <Step contentComponent={stepContent} />
+        <Step contentComponent={stepContent} backgroundImage={resultsBackgroundImage} />
     )
 }

frontend/src/components/steps/soilvariant/SoilStep.js

@@ -2,6 +2,7 @@ import Step from '../Step';
 import SoilSelector from './SoilSelector';
 import StepInformation from '../StepInformation';
 import staticText from '../../../assets/data/staticText.json'
+import soilBackgroundImage from '../../../assets/img/stepBackgrounds/step2.jpg';
 
 export default function SoilVariantStep(props) {
     const SOIL_DESCRIPTION = (<p>
@@ -24,6 +25,6 @@ export default function SoilVariantStep(props) {
     )
 
     return (
-        <Step informationComponent={soilVarientInfoPanel} selectionComponent={soilVarientSelectionPanel} />
+        <Step informationComponent={soilVarientInfoPanel} selectionComponent={soilVarientSelectionPanel} backgroundImage={soilBackgroundImage} />
     )
 }

frontend/src/components/steps/summary/SummaryStep.js

@@ -2,6 +2,7 @@ import Step from '../Step';
 import SummaryContent from './SummaryContent' 
 import StepInformation from '../StepInformation';
 import staticText from '../../../assets/data/staticText.json'
+import summaryBackgroundImage from '../../../assets/img/stepBackgrounds/step5.jpg';
 
 export default function SummaryStep(props) {
     const summaryInfoPanel = (
@@ -16,6 +17,6 @@ export default function SummaryStep(props) {
     )
 
     return (
-        <Step informationComponent={summaryInfoPanel} selectionComponent={summaryContent} />
+        <Step informationComponent={summaryInfoPanel} selectionComponent={summaryContent} backgroundImage={summaryBackgroundImage} />
     )
 }

frontend/src/components/steps/zone/ZoneStep.js

@@ -2,6 +2,7 @@ import Step from '../Step';
 import ZoneSelector from './ZoneSelector' 
 import StepInformation from '../StepInformation';
 import staticText from '../../../assets/data/staticText.json'
+import zoneBackgroundImage from '../../../assets/img/stepBackgrounds/step4.jpg';
 
 export default function ZoneStep(props) {
     const zoneInfoPanel = (
@@ -16,6 +17,6 @@ export default function ZoneStep(props) {
     )
 
     return (
-        <Step informationComponent={zoneInfoPanel} selectionComponent={zoneSelectionPanel} />
+        <Step informationComponent={zoneInfoPanel} selectionComponent={zoneSelectionPanel} backgroundImage={zoneBackgroundImage} />
     )
 }