From e9e4f11112ab16f6c5b937090f1c34cd5af5a14e Mon Sep 17 00:00:00 2001
From: JAGFx <contact@jagfx.fr>
Date: Sat, 5 Mar 2022 11:23:58 +0100
Subject: [PATCH] :lipstick: #78 update map skin

Signed-off-by: JAGFx <contact@jagfx.fr>
---
 lib/config/config.json                     |  2 +-
 src/assets/scss/dashboard/shared/_map.scss | 12 ++++++------
 src/components/dashboards/shared/Map.vue   | 14 +++++++-------
 src/utils/_map.js                          |  6 ++----
 4 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/lib/config/config.json b/lib/config/config.json
index 55baeaf4..3ccf365d 100644
--- a/lib/config/config.json
+++ b/lib/config/config.json
@@ -1,6 +1,6 @@
 {
 	"general_refresh_rate" :   100,
-	"general_skin_on_load" :   "Map",
+	"general_skin_on_load" :   "Scania",
 	"general_h-shift-layout" : "h-shifter",
 	"general_skin_locale" :    "en-EN",
 	"general_job_remaining" :  "due_date",
diff --git a/src/assets/scss/dashboard/shared/_map.scss b/src/assets/scss/dashboard/shared/_map.scss
index 973cf559..b4788bf6 100644
--- a/src/assets/scss/dashboard/shared/_map.scss
+++ b/src/assets/scss/dashboard/shared/_map.scss
@@ -62,7 +62,7 @@
 					
 					min-width: auto !important;
 					
-					.round > i { padding-top: .3rem; display: block; }
+					.round > i { display: block; }
 					
 					&.active{
 						background: $cBlack;
@@ -114,7 +114,7 @@
 			justify-content: center;
 			align-items:     flex-end;
 			text-align:      center;
-			height:          2rem;
+			height:          2.2rem;
 			
 			button, .button{
 				background: $cBlackTransparentHigh;
@@ -128,7 +128,7 @@
 				
 				min-width: auto !important;
 				
-				.round > i { padding-top: .3rem; display: block; }
+				.round > i { display: block; }
 				&:last-child { margin-right: 0; }
 				
 				&.active{
@@ -150,7 +150,7 @@
 			height:   auto;
 			width:    auto;
 			z-index:  2;
-			margin-bottom: 2rem;
+			margin-bottom: 2.2rem;
 			
 			#ol-zoom-wrapper {
 				width: 100%;
@@ -174,7 +174,7 @@
 						
 						min-width: auto !important;
 						
-						.round > i { padding-top: .3rem; display: block; }
+						.round > i { display: block; }
 					}
 				}
 			}
@@ -187,7 +187,7 @@
 			left:     0;
 			width:    auto;
 			bottom:   0;
-			margin-bottom: 2rem;
+			margin-bottom: 2.2rem;
 			
 			.button{
 				border-left: 2px solid $cRed;
diff --git a/src/components/dashboards/shared/Map.vue b/src/components/dashboards/shared/Map.vue
index 42535acd..f0fcf380 100644
--- a/src/components/dashboards/shared/Map.vue
+++ b/src/components/dashboards/shared/Map.vue
@@ -42,7 +42,7 @@
           }"
           @click="displayNavigationInfo = !displayNavigationInfo"
         >
-          <div class="round px-2 py-0">
+          <div class="round p-2">
             <i class="icon-route" />
           </div>
         </div>
@@ -54,7 +54,7 @@
             disabled: !telemetry2.truck.cruiseControlIsEnabled
           }"
         >
-          <div class="round px-2 py-0">
+          <div class="round p-2">
             <i class="icon-cruise_control" />
           </div>
           <span v-if="!telemetry2.truck.cruiseControlIsEnabled" class="pl-2">{{
@@ -90,7 +90,7 @@
             orange: telemetry2.symbols.fuelLevelIsLow
           }"
         >
-          <div class="round px-2 py-0">
+          <div class="round p-2">
             <i class="icon-fuel" />
           </div>
           <span class="pr-2">
@@ -104,7 +104,7 @@
           :class="{ disabled: !displayControls, active: displayControls }"
           @click="displayControls = !displayControls"
         >
-          <div class="round px-2 py-0">
+          <div class="round p-2">
             <i class="icon-menu" />
           </div>
         </div>
@@ -136,7 +136,7 @@
         :class="{ disabled: !displayMapInfo, active: displayMapInfo }"
         @click="onClickMapInfo"
       >
-        <div class="round px-2 py-0">
+        <div class="round p-2">
           <i class="fa fa-info" />
         </div>
       </div>
@@ -146,12 +146,12 @@
         :class="{ disabled: !rotateWithPlayer, active: rotateWithPlayer }"
         @click="onClickRotate"
       >
-        <div class="round px-2 py-0">
+        <div class="round p-2">
           <i class="icon-location_arrow" />
         </div>
       </div>
       <div id="center-button" class="button w-100" @click="onClickCenter">
-        <span class="round px-2 py-0">
+        <span class="round p-2">
           <i class="icon-target" />
         </span>
       </div>
diff --git a/src/utils/_map.js b/src/utils/_map.js
index d496bfe2..b8f6a726 100644
--- a/src/utils/_map.js
+++ b/src/utils/_map.js
@@ -148,16 +148,14 @@ const initMap = () => {
   // Creating the map.
   let zoomInWrapper = document.createElement('div');
   zoomInWrapper.classList.add('round');
-  zoomInWrapper.classList.add('px-2');
-  zoomInWrapper.classList.add('py-0');
+  zoomInWrapper.classList.add('p-2');
   let zoomInLabel = document.createElement('i');
   zoomInLabel.classList.add('icon-zoom_in');
   zoomInWrapper.append(zoomInLabel);
 
   let zoomOutWrapper = document.createElement('div');
   zoomOutWrapper.classList.add('round');
-  zoomOutWrapper.classList.add('px-2');
-  zoomOutWrapper.classList.add('py-0');
+  zoomOutWrapper.classList.add('p-2');
   let zoomOutLabel = document.createElement('i');
   zoomOutLabel.classList.add('icon-zoom_out');
   zoomOutWrapper.append(zoomOutLabel);