feat(App): fix bugs

Author: shoudaos

src/pages/Maps/Maps.vue

@@ -2,7 +2,7 @@
   <div>
     <b-breadcrumb>
       <b-breadcrumb-item>YOU ARE HERE</b-breadcrumb-item>
-      <b-breadcrumb-item active>Maps</b-breadcrumb-item>
+      <b-breadcrumb-item active>Google Maps</b-breadcrumb-item>
     </b-breadcrumb>
     <h1 class="page-title">
       Google <span class="fw-semi-bold">Maps</span>
@@ -17,6 +17,7 @@
                   :center="{lat: -37.813179, lng: 144.950259}"
                   :zoom="12"
                   style="width: 100%; height: 60vh"
+                  :options="options"
           >
             <GmapMarker
                     :position="{lat: -37.813179, lng: 144.950259}"
@@ -33,6 +34,21 @@
 
   export default {
     name: 'Maps',
+    data() {
+      return {
+        options: {},
+      }
+    },
+    created() {
+      this.$gmapApiPromiseLazy().then(() => {
+        this.options = {
+          mapTypeControl: true,
+          mapTypeControlOptions: {
+            style: google.maps.MapTypeControlStyle.DEFAULT
+          }
+        }
+      })
+    },
     components: { Widget }
   };
 </script>

src/pages/Notifications/Notifications.scss

@@ -3,21 +3,21 @@
 .location-selector {
   width: 100%;
   height: 220px;
-  border: 1px dashed #bbb;
-  background-color: $white;
+  border: 1px dashed $location-selector-border;
+  background-color: $location-selector-bg;
   position: relative;
 }
 
 .location-selector .bit {
   @include transition(background-color 0.15s ease-in-out);
 
-  background-color: $gray-400;
+  background-color: $location-selector-bit-bg;
   cursor: pointer;
   position: absolute;
 }
 
 .location-selector .bit:hover {
-  background-color: $gray-600;
+  background-color: darken($location-selector-bit-bg, 20%);
 }
 
 .location-selector .bit.top,

src/pages/Tables/Tables.vue

@@ -50,10 +50,10 @@
                       </small>
                     </p>
                   </td>
-                  <td class="text-semi-muted">
+                  <td class="text-muted">
                     {{parseDate(row.date)}}
                   </td>
-                  <td class="text-semi-muted">
+                  <td class="text-muted">
                     {{row.size}}
                   </td>
                   <td class="width-150">
@@ -173,28 +173,28 @@
                  <td>Mark</td>
                  <td>Otto</td>
                  <td><a href="#">ottoto@example.com</a></td>
-                 <td><b-badge variant="gray" class="text-gray" pill>Pending</b-badge></td>
+                 <td><b-badge variant="gray" pill>Pending</b-badge></td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td><a href="#">fat.thor@example.com</a></td>
-                 <td><b-badge variant="gray" class="text-gray-light" pill>Unconfirmed</b-badge></td>
+                 <td><b-badge variant="gray" pill>Unconfirmed</b-badge></td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Larry</td>
                  <td>the Bird</td>
                  <td><a href="#">larry@example.com</a></td>
-                 <td><b-badge variant="gray" class="text-gray" pill>New</b-badge></td>
+                 <td><b-badge variant="primary" pill>New</b-badge></td>
                </tr>
                <tr>
                  <td>4</td>
                  <td>Peter</td>
                  <td>Horadnia</td>
                  <td><a href="#">peter@example.com</a></td>
-                 <td><b-badge variant="gray" class="text-gray-light" pill>Active</b-badge></td>
+                 <td><b-badge variant="success" pill>Active</b-badge></td>
                </tr>
              </tbody>
            </table>
@@ -322,7 +322,7 @@
             Just wrap the table with simple css class <code>.widget-table-overflow</code> inside
             of widget
           </p>
-          <div class="widget-bottom-overflow">
+          <div class="widget-table-overflow">
             <table class="table table-striped table-lg mt-lg mb-0">
               <thead>
                 <tr>