UI Mechanics / New Look (orange - gray)

src/App.scss

@@ -6,8 +6,12 @@
 @import "./styles/Pictograms.scss";
 @import "./styles/Restaurant.scss";
 @import "./styles/DishList.scss";
+@import "./styles/Dialogs.scss";
 
 .App {
+  background-image: url("./public/bg_tile.jpg");
+  background-size: contain;
+  background-repeat: round;
   padding: 0;
   margin: 0;
   height: 100%;
@@ -16,6 +20,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
+  overflow: auto;
 }
 
 .logo {
@@ -30,14 +35,17 @@
 
 p {
   font-size: 14px;
-  font-weight: 300;
+  font-weight: 400;
 }
 
 .darkParagraph {
-  color: $darker-color;
+  color: $accents-color;
 }
 
 .main-container {
+  scroll-margin-top: 5rem;
+  scroll-margin-bottom: 5rem;
+  width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -45,3 +53,12 @@ p {
   align-items: center;
   flex-grow: 20;
 }
+
+.vertical-divider {
+  background-color: $bg-color;
+  width: 1px;
+  height: 70%;
+  margin-left: 10px;
+  margin-top: auto;
+  margin-bottom: auto;
+}