Upgrade to latest black dashboard css

Minor tweaks, add google maps
Remove bootstrap from package.json

package.json

@@ -10,7 +10,6 @@
     "dev": "vue-cli-service serve --open"
   },
   "dependencies": {
-    "bootstrap": "^4.0.0",
     "chart.js": "^2.7.2",
     "chartist": "^0.11.0",
     "es6-promise": "^4.2.4",

public/index.html

@@ -10,8 +10,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 
   <!--  Fonts and icons     -->
-  <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet">
   <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
+  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAamVCoyQ4AuvBpxVRMs9P-HFkfPVQj0Kw"></script>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.4.0/css/bootstrap-rtl.css" rel="stylesheet" />
 
 </head>
@@ -21,7 +22,6 @@
 </div>
 <!-- built files will be auto injected -->
 <!--  Google Maps Plugin    -->
-<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyAamVCoyQ4AuvBpxVRMs9P-HFkfPVQj0Kw" type="text/javascript"></script>
 
 </body>
 </html>

src/main.js

@@ -3,7 +3,7 @@ import App from "./App";
 import router from "./router/index";
 
 import BlackDashboard from "./plugins/blackDashboard";
-import i18n from './i18n'
+import i18n from "./i18n"
 Vue.use(BlackDashboard);
 
 /* eslint-disable no-new */

src/pages/Maps.vue

@@ -1,77 +1,211 @@
 <template>
-    <card class="card-map" title="Google Maps">
+    <card type="plain" title="Google Maps">
-      <div class="map">
+      <div id="map" class="map">
-        <div id="map"></div>
       </div>
     </card>
 </template>
 <script>
 export default {
   mounted() {
-    var myLatlng = new window.google.maps.LatLng(40.748817, -73.985428);
+    let myLatlng = new window.google.maps.LatLng(40.748817, -73.985428);
-    var mapOptions = {
+    let mapOptions = {
       zoom: 13,
       center: myLatlng,
       scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
-      styles: [
+      styles: [{
-        {
+        "elementType": "geometry",
-          featureType: "water",
+        "stylers": [{
-          stylers: [{ saturation: 43 }, { lightness: -11 }, { hue: "#0088ff" }]
+          "color": "#1d2c4d"
+        }]
       },
         {
-          featureType: "road",
+          "elementType": "labels.text.fill",
-          elementType: "geometry.fill",
+          "stylers": [{
-          stylers: [{ hue: "#ff0000" }, { saturation: -100 }, { lightness: 99 }]
+            "color": "#8ec3b9"
+          }]
         },
         {
-          featureType: "road",
+          "elementType": "labels.text.stroke",
-          elementType: "geometry.stroke",
+          "stylers": [{
-          stylers: [{ color: "#808080" }, { lightness: 54 }]
+            "color": "#1a3646"
+          }]
         },
         {
-          featureType: "landscape.man_made",
+          "featureType": "administrative.country",
-          elementType: "geometry.fill",
+          "elementType": "geometry.stroke",
-          stylers: [{ color: "#ece2d9" }]
+          "stylers": [{
+            "color": "#4b6878"
+          }]
         },
         {
-          featureType: "poi.park",
+          "featureType": "administrative.land_parcel",
-          elementType: "geometry.fill",
+          "elementType": "labels.text.fill",
-          stylers: [{ color: "#ccdca1" }]
+          "stylers": [{
+            "color": "#64779e"
+          }]
         },
         {
-          featureType: "road",
+          "featureType": "administrative.province",
-          elementType: "labels.text.fill",
+          "elementType": "geometry.stroke",
-          stylers: [{ color: "#767676" }]
+          "stylers": [{
+            "color": "#4b6878"
+          }]
         },
         {
-          featureType: "road",
+          "featureType": "landscape.man_made",
-          elementType: "labels.text.stroke",
+          "elementType": "geometry.stroke",
-          stylers: [{ color: "#ffffff" }]
+          "stylers": [{
+            "color": "#334e87"
+          }]
         },
-        { featureType: "poi", stylers: [{ visibility: "off" }] },
         {
-          featureType: "landscape.natural",
+          "featureType": "landscape.natural",
-          elementType: "geometry.fill",
+          "elementType": "geometry",
-          stylers: [{ visibility: "on" }, { color: "#b8cb93" }]
+          "stylers": [{
+            "color": "#023e58"
+          }]
         },
-        { featureType: "poi.park", stylers: [{ visibility: "on" }] },
         {
-          featureType: "poi.sports_complex",
+          "featureType": "poi",
-          stylers: [{ visibility: "on" }]
+          "elementType": "geometry",
+          "stylers": [{
+            "color": "#283d6a"
+          }]
         },
-        { featureType: "poi.medical", stylers: [{ visibility: "on" }] },
         {
-          featureType: "poi.business",
+          "featureType": "poi",
-          stylers: [{ visibility: "simplified" }]
+          "elementType": "labels.text.fill",
+          "stylers": [{
+            "color": "#6f9ba5"
+          }]
+        },
+        {
+          "featureType": "poi",
+          "elementType": "labels.text.stroke",
+          "stylers": [{
+            "color": "#1d2c4d"
+          }]
+        },
+        {
+          "featureType": "poi.park",
+          "elementType": "geometry.fill",
+          "stylers": [{
+            "color": "#023e58"
+          }]
+        },
+        {
+          "featureType": "poi.park",
+          "elementType": "labels.text.fill",
+          "stylers": [{
+            "color": "#3C7680"
+          }]
+        },
+        {
+          "featureType": "road",
+          "elementType": "geometry",
+          "stylers": [{
+            "color": "#304a7d"
+          }]
+        },
+        {
+          "featureType": "road",
+          "elementType": "labels.text.fill",
+          "stylers": [{
+            "color": "#98a5be"
+          }]
+        },
+        {
+          "featureType": "road",
+          "elementType": "labels.text.stroke",
+          "stylers": [{
+            "color": "#1d2c4d"
+          }]
+        },
+        {
+          "featureType": "road.highway",
+          "elementType": "geometry",
+          "stylers": [{
+            "color": "#2c6675"
+          }]
+        },
+        {
+          "featureType": "road.highway",
+          "elementType": "geometry.fill",
+          "stylers": [{
+            "color": "#9d2a80"
+          }]
+        },
+        {
+          "featureType": "road.highway",
+          "elementType": "geometry.stroke",
+          "stylers": [{
+            "color": "#9d2a80"
+          }]
+        },
+        {
+          "featureType": "road.highway",
+          "elementType": "labels.text.fill",
+          "stylers": [{
+            "color": "#b0d5ce"
+          }]
+        },
+        {
+          "featureType": "road.highway",
+          "elementType": "labels.text.stroke",
+          "stylers": [{
+            "color": "#023e58"
+          }]
+        },
+        {
+          "featureType": "transit",
+          "elementType": "labels.text.fill",
+          "stylers": [{
+            "color": "#98a5be"
+          }]
+        },
+        {
+          "featureType": "transit",
+          "elementType": "labels.text.stroke",
+          "stylers": [{
+            "color": "#1d2c4d"
+          }]
+        },
+        {
+          "featureType": "transit.line",
+          "elementType": "geometry.fill",
+          "stylers": [{
+            "color": "#283d6a"
+          }]
+        },
+        {
+          "featureType": "transit.station",
+          "elementType": "geometry",
+          "stylers": [{
+            "color": "#3a4762"
+          }]
+        },
+        {
+          "featureType": "water",
+          "elementType": "geometry",
+          "stylers": [{
+            "color": "#0e1626"
+          }]
+        },
+        {
+          "featureType": "water",
+          "elementType": "labels.text.fill",
+          "stylers": [{
+            "color": "#4e6d70"
+          }]
         }
       ]
     };
-    var map = new window.google.maps.Map(
+    let map = new window.google.maps.Map(
       document.getElementById("map"),
       mapOptions
     );
 
-    var marker = new window.google.maps.Marker({
+    let marker = new window.google.maps.Marker({
       position: myLatlng,
       title: "Hello World!"
     });