diff --git a/frontend/src/assets/styles/header.scss b/frontend/src/assets/styles/header.scss
index 552f0cf..5464761 100644
--- a/frontend/src/assets/styles/header.scss
+++ b/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 {
diff --git a/frontend/src/assets/styles/main.scss b/frontend/src/assets/styles/main.scss
index 1297dca..bec6429 100644
--- a/frontend/src/assets/styles/main.scss
+++ b/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;
}
diff --git a/frontend/src/components/Step.js b/frontend/src/components/Step.js
new file mode 100644
index 0000000..64fbd85
--- /dev/null
+++ b/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 (
+
+
+ {props.contentComponent ? (
+
+ {props.contentComponent}
+
+ ) : (
+
+
+ {props.informationComponent}
+
+
+ {props.selectionComponent}
+
+
+ )}
+
+
+ );
+}
diff --git a/frontend/src/components/Stepper.js b/frontend/src/components/Stepper.js
index 8b76980..f31de05 100644
--- a/frontend/src/components/Stepper.js
+++ b/frontend/src/components/Stepper.js
@@ -37,7 +37,7 @@ export default function StepperWizard(props) {
return (
-
+
{steps.map((step, index) => {
return (
@@ -49,7 +49,7 @@ export default function StepperWizard(props) {
{activeStep === steps.length ? (
-
+
@@ -57,7 +57,7 @@ export default function StepperWizard(props) {
) : (
-
+