crazy

frontend/src/style/RootContainer.scss

@@ -1,10 +1,65 @@
+@import 'camphor.scss';
 @import 'palette.scss';
 @import 'constants.scss';
 
 body {
   margin: 0;
-  font-family: 'Roboto';
+  font-family: 'Camphor' !important;
+  font: 400 13.333px 'Camphor' !important;
   overflow-x: hidden;
   width: 100vw;
-  height: 100vh;
+  background-color: $orange;
+}
+
+.root-container {
+  //box-shadow: 0 30px 40px rgba(0,0,0,.1);
+  padding: 2em;
+  margin-top: 2em;
+  height: 90vh;
+  display: flex;
+  flex-direction: column;
+
+  .header {
+    background-image: url('../../assets/images/Maanteeamet.png');
+    background-size: cover;
+    height: 120px;
+    margin-bottom: 3em;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  img {
+    text-align: center;
+  }
+}
+
+.button-container {
+  margin-top: 1em;
+  text-align: center;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  button {
+    margin: 0.25em;
+    font-family: inherit;
+
+    &.light {
+      background-color: rgba(255, 121, 121, 0.5);
+      border: 1px solid rgba(255, 121, 121, 1.0);
+    }
+  }
+}
+
+.capture-container {
+  canvas {
+    max-width: 100%;
+    width: 100%;
+  }
+
+  & img {
+    max-width: 100%;
+    max-height: auto;
+  }
 }

frontend/src/style/palette.scss

@@ -0,0 +1 @@
+$orange: #fed8b1;

frontend/src/style/spinner.scss

@@ -0,0 +1,46 @@
+.loader,
+.loader:after {
+  border-radius: 50%;
+  width: 10em;
+  height: 10em;
+}
+
+.loader {
+  margin: 60px auto;
+  font-size: 10px;
+  position: relative;
+  text-indent: -9999em;
+  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-left: 1.1em solid #ffffff;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear;
+}
+
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}