web client v0.9 (restaurant view)

src/styles/DishList.scss

@@ -32,6 +32,7 @@ h4 {
 
 .carddish-img {
   background-color: $secondary-color;
+  background-size: cover;
   width: 150px;
   height: 150px;
   border-radius: 10px;

src/styles/EditRestaurant.scss

@@ -125,3 +125,62 @@
 .editRestaurant-dish:hover {
   background-color: #3b3b3b;
 }
+
+.editSubscription-tab {
+  padding: 16px;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  width: 100%;
+  overflow: auto;
+}
+
+.subscription-text {
+  display: flex;
+  background-color: #242424;
+  width: 100%;
+  justify-content: space-between;
+  border-radius: 8px;
+  h3 {
+    font-weight: 300;
+    padding-left: 14px;
+  }
+  h5 {
+    color: #c0c0c0;
+    font-weight: 400;
+    padding-right: 14px;
+    font-size: 14px;
+  }
+}
+
+.subscription-cards {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 18px;
+}
+
+.subscription-card {
+  background-color: #242424;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  min-width: 260px;
+  max-width: 300px;
+  border-radius: 8px;
+  h1 {
+    font-weight: 200;
+  }
+  h2 {
+    font-weight: 300;
+    font-size: 1.2rem;
+    color: #c0c0c0;
+  }
+  p {
+    font-weight: 400;
+    font-size: 14px;
+    padding-left: 16px;
+    padding-right: 16px;
+    color: #838383;
+  }
+}

src/styles/Footer.scss

@@ -2,8 +2,7 @@
   position: fixed;
   bottom: 0;
   background-color: $dark-gray;
-
   p {
-    color: white;
+    color: rgb(180, 180, 180);
   }
 }

src/styles/Restaurant.scss

@@ -1,15 +1,19 @@
 .restaurant-container {
-  width: 100vw;
-  height: 100%;
+  min-width: 70%;
+  min-height: 600px;
+  max-height: 80vh;
+  max-width: 80%;
+  background-color: $dark-gray;
+  border-radius: 15px;
   display: flex;
-  justify-content: center;
-  align-items: flex-start;
+  flex-direction: row;
+  overflow: auto;
   h1 {
     font-weight: 100;
     color: $gray;
     background-color: $dark-gray;
     padding: 15px;
-    font-size: 3rem;
+    font-size: 2rem;
     margin-bottom: 16px;
     margin-top: 0;
   }
@@ -22,11 +26,16 @@
   }
 }
 
+.restaurant-left {
+  max-width: 30%;
+  background-color: #1d1d1d;
+  height: 100%;
+}
+
 .restaurant-hero {
   width: 100%;
-  height: 500px;
+  height: 360px;
   border-top-left-radius: 15px;
-  border-top-right-radius: 15px;
   background-size: cover;
 }
 
@@ -44,7 +53,7 @@
 .restaurant-dishes {
   min-width: 60%;
   h3 {
-    font-size: 1.6rem;
+    font-size: 1.2rem;
     font-weight: 400;
   }
 }
@@ -52,21 +61,18 @@
 .restaurant-content {
   padding-top: 10rem;
   padding-bottom: 10rem;
+  width: 100%;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: flex-start;
-  min-width: 70%;
 }
 
 .restaurant-info {
   text-align: center;
-  max-width: 30%;
   background-color: #1d1d1d;
   box-shadow: -2px 10px 20px rgba(0, 0, 0, 0.212);
-  border-radius: 15px;
-
   p {
-    font-size: 1rem;
+    font-size: 0.9rem;
     font-weight: 300;
     margin-top: 8px;
     margin-bottom: 8px;
@@ -83,6 +89,6 @@
 }
 
 .restaurant-span {
-  font-weight: 500;
+  font-weight: 400;
   color: $gray;
 }