moved slider into label to make it clickable, styled slider in dark and light…

moved slider into label to make it clickable, styled slider in dark and light theme, created variables for slider

public/app/core/components/switch.ts

 import coreModule from 'app/core/core_module';
 
 const template = `
-<label for="check-{{ctrl.id}}" class="gf-form-label {{ctrl.labelClass}} pointer" ng-show="ctrl.label">
-  {{ctrl.label}}
-  <info-popover mode="right-normal" ng-if="ctrl.tooltip" position="top center">
-    {{ctrl.tooltip}}
-  </info-popover>
+<label for="check-{{ctrl.id}}" class="gf-form-switch-container pointer">
+  <div class="gf-form-label {{ctrl.labelClass}}" ng-show="ctrl.label">
+    {{ctrl.label}}
+    <info-popover mode="right-normal" ng-if="ctrl.tooltip" position="top center">
+      {{ctrl.tooltip}}
+    </info-popover>
+  </div>
+  <div class="gf-form-switch {{ctrl.switchClass}}" ng-if="ctrl.show">
+    <input id="check-{{ctrl.id}}" type="checkbox" ng-model="ctrl.checked" ng-change="ctrl.internalOnChange()">
+    <span class="gf-form-switch__slider"></span>
+  </div>
 </label>
-<div class="gf-form-switch {{ctrl.switchClass}}" ng-if="ctrl.show">
-  <input id="check-{{ctrl.id}}" type="checkbox" ng-model="ctrl.checked" ng-change="ctrl.internalOnChange()">
-  <span class="gf-form-switch__slider"></span>
-</div>
 `;
 
 export class SwitchCtrl {

public/sass/_variables.dark.scss

@@ -355,3 +355,11 @@ $diff-json-icon: $gray-7;
 
 //Submenu
 $variable-option-bg: $blue-dark;
+
+//Switch Slider
+// -------------------------
+$switch-bg: $black;
+$switch-slider-color: $dark-2;
+$switch-slider-off-bg: $gray-1;
+$switch-slider-on-bg: linear-gradient(90deg, $orange, $red);
+$switch-slider-shadow: 0 0 3px black;

public/sass/_variables.light.scss

@@ -364,3 +364,11 @@ $diff-json-icon: $gray-4;
 
 //Submenu
 $variable-option-bg: $blue-light;
+
+//Switch Slider
+// -------------------------
+$switch-bg: $white;
+$switch-slider-color: $gray-7;
+$switch-slider-off-bg: $gray-5;
+$switch-slider-on-bg: linear-gradient(90deg, $yellow, $red);
+$switch-slider-shadow: 0 0 3px $dark-5;

public/sass/components/_switch.scss

@@ -88,12 +88,16 @@ gf-form-switch[disabled] {
   }
 }
 
+.gf-form-switch-container {
+  display: flex;
+}
+
 .gf-form-switch {
   position: relative;
   display: inline-block;
   width: 60px;
   height: 34px;
-  background: black;
+  background: $switch-bg;
 
   input {
     opacity: 0;
@@ -105,37 +109,36 @@ gf-form-switch[disabled] {
 /* The slider */
 .gf-form-switch__slider {
   position: absolute;
-  cursor: pointer;
   top: 8px;
-  left: 14px;
-  right: 10px;
+  left: 16px;
+  right: 14px;
   bottom: 10px;
-  background: #1d1d1d;
-  transition: 0.4s;
-  border-radius: 34px;
+  background: $switch-slider-off-bg;
+  border-radius: 8px;
+  height: 16px;
 
   &::before {
     position: absolute;
     content: '';
-    height: 16px;
-    width: 16px;
+    height: 12px;
+    width: 12px;
     left: 2px;
-    bottom: 0px;
-    background: #333333;
+    bottom: 2px;
+    background: $switch-slider-color;
     transition: 0.4s;
     border-radius: 50%;
+    box-shadow: $switch-slider-shadow;
   }
 }
 
 input:checked + .gf-form-switch__slider {
-  background: linear-gradient(90deg, $orange, $red);
+  background: $switch-slider-on-bg;
 }
 
 /* input:focus + .gf-form-switch__slider { */
 /*   box-shadow: 0 0 1px #2196f3; */
 /* } */
 
-input:checked + .gf-form-switch__slider:before {
-  transform: translateX(20px);
-  box-shadow: 0 0 5px black;
+input:checked + .gf-form-switch__slider::before {
+  transform: translateX(14px);
 }