[US TRTL-635] Update slide toggle design

ui/ui-frontend-common/src/app/modules/components/slide-toggle/slide-toggle.component.html

@@ -11,7 +11,7 @@
       (click)="toggle()"
       (blur)="onTouched()"
     >
-    <div class="slide-toggle-inner">
+    <div class="slide-toggle-inner d-flex">
       <div class="slide-toggle-label"></div>
       <div class="slide-toggle-thumb"></div>
       <div class="slide-toggle-label"></div>

ui/ui-frontend-common/src/app/modules/components/slide-toggle/slide-toggle.component.scss

@@ -27,52 +27,88 @@ label {
     background-color: var(--vitamui-grey);
     transition: background-color 100ms ease-in-out, box-shadow 200ms ease-out;
 
+
+    // ON ENABLED
     &.slide-toggle-on:not(.slide-toggle-disabled) {
         background-color: var(--vitamui-secondary);
-    }
 
-    &.slide-toggle-off:not(.slide-toggle-disabled) {
-        background-color: var(--vitamui-grey-800);
+        .slide-toggle-thumb {
+            background-color: var(--vitamui-primary);
+        }
+
+        &:hover {
+            .slide-toggle-thumb {
+                background-color: var(--vitamui-primary-700);
+            }
+        }
     }
 
-    .slide-toggle-inner {
-        display: flex;
+    // OFF ENABLED
+    &.slide-toggle-off:not(.slide-toggle-disabled) {
+        background-color: $red;
 
-        .slide-toggle-label {
-            width: 14px;
-            line-height: 22px;
-            transition: margin-left 100ms ease-in-out;
+        .slide-toggle-thumb {
+            background-color: $red;
+        }
 
-            &:first-child {
-                padding-left: 0px;
+        &:hover {
+            .slide-toggle-thumb {
+                background-color: $red;
             }
+        }
+    }
 
-            &:last-child {
-                padding-right: 0px;
-            }
+    // ON DISABLED
+    &.slide-toggle-on.slide-toggle-disabled {
+        background-color: var(--vitamui-grey-300);
+
+        .slide-toggle-thumb {
+            cursor: not-allowed;
+            background-color: var(--vitamui-grey);
         }
+    }
+
+    // OFF DISABLED
+    &.slide-toggle-off.slide-toggle-disabled {
+        background-color: var(--vitamui-grey);
 
         .slide-toggle-thumb {
-            width: 24px;
-            height: 24px;
-            border-radius: 12px;
-            background-color: var(--vitamui-primary);
-            border: 2px solid white;
-            box-shadow: 0px 2px 4px rgba(46, 53, 69, 0.15);
-            cursor: grab;
+            cursor: not-allowed;
+            background-color: var(--vitamui-grey-700);
         }
     }
 
-    &:not(.slide-toggle-on) {
+    .slide-toggle-label {
+        width: 14px;
+        line-height: 22px;
+        transition: margin-left 100ms ease-in-out;
+
+        &:first-child {
+            padding-left: 0px;
+        }
 
+        &:last-child {
+            padding-right: 0px;
+        }
+    }
+
+    .slide-toggle-thumb {
+        width: 24px;
+        height: 24px;
+        border-radius: 12px;
+        border: 2px solid white;
+        box-shadow: 0px 2px 4px rgba(46, 53, 69, 0.15);
+        cursor: pointer;
+    }
+
+    &:not(.slide-toggle-on) {
         .slide-toggle-label:first-child {
             margin-left: -16px;
         }
-
     }
 
     &.slide-toggle-disabled {
-        cursor: no-drop;
+        cursor: not-allowed;
         background-color: var(--vitamui-grey);
     }
-}
+}
\ No newline at end of file

ui/ui-frontend/projects/starter-kit/src/app/components/inputs/inputs.component.html

@@ -147,8 +147,8 @@
     <div class="row m-0">
         <div class="col-12 mt-4">
             <vitamui-common-slide-toggle class="mr-3">Slide Toggle</vitamui-common-slide-toggle>
-            <vitamui-common-slide-toggle class="mr-3" [checked]="true" [disabled]="true">Slide Toggle disabled</vitamui-common-slide-toggle>
-            <vitamui-common-slide-toggle class="mr-3" [checked]="false" [disabled]="true">Slide Toggle disabled</vitamui-common-slide-toggle>
+            <vitamui-common-slide-toggle class="mr-3" [checked]="true" [disabled]="true">Slide Toggle On disabled</vitamui-common-slide-toggle>
+            <vitamui-common-slide-toggle class="mr-3" [checked]="false" [disabled]="true">Slide Toggle Off disabled</vitamui-common-slide-toggle>
         </div>
        
     </div>