smoothed out the quadrant selected colors

src/app/booking-details/booking-details.page.html

@@ -42,7 +42,7 @@
                         {{ getFirstChar(stands.stand) }}
                     </label>
                     <p>
-                        {{ stands.seats.length }} seats remaining, starts from <strong> &#8377; {{ stands.seats[0].price }} </strong>
+                        {{ stands.seats.length }} seats remaining, <br> starts from <strong> &#8377; {{ stands.seats[0].price }} </strong>
                     </p>
                 </li>
             </ul>

src/app/booking-details/booking-details.page.scss

@@ -58,7 +58,7 @@ ion-content {
         span {
             font-weight: 400;
             color: $blue-grey;
-            font-size: 10px;
+            font-size: 12px;
         }
     }
 
@@ -99,12 +99,12 @@ ion-content {
     .quadrants {
         position: absolute;
         z-index: 2;
-        left: 0;
-        top: 0;
+        left: 5%;
+        top: 5%;
         display: flex;
         justify-content: center;
-        width: 100%;
-        height: 100%;
+        width: 90%;
+        height: 90%;
         padding: 0;
         margin: 0;
         list-style: none;
@@ -118,7 +118,7 @@ ion-content {
         li {
             width: 50%;
             height: 50%;
-            background-color: rgba($dark-blue, 0.2);
+            background-color: rgba(#ffff, 0.2);
             display: flex;
             justify-content: center;
             color: white;
@@ -154,7 +154,8 @@ ion-content {
             }
 
             &.active {
-                background-color: rgba($dark-blue, 0.9);
+                background-color: rgba(#ffff, 0.8);
+                color: $dark-blue;
             }
         }
     }
@@ -273,7 +274,7 @@ ion-content {
     position: relative;
     background-color: white;
     z-index: 1;
-    padding: 5px 5% 10px 5%;
+    padding: 5px 0% 10px 0%;
     border-top-left-radius: 7px;
     border-top-right-radius: 7px;
     overflow: hidden;
@@ -288,14 +289,15 @@ ion-content {
     }
 
     header {
-        padding: 10px 0;
-        border-bottom: 1px solid $blue-grey;
+        padding: 10px;
+        border-bottom: 1px solid lighten($blue-grey, 25%);
+        margin: 0 10px;
     }
 }
 
 .stand-list {
     list-style: none;
-    padding: 0;
+    padding: 0 5%;
     margin: 10px 0px 0px 0px;
 
     li {
@@ -318,7 +320,7 @@ ion-content {
         letter-spacing: 1px;
         background-color: $sea-blue;
         font-size: 0.8rem;
-        margin-right: 10px;
+        margin-right: 20px;
     }
 
     p {