fix: toggleButtonRestyling (#645)

* fix: defenseAISettingsMockAlignment

* fix: toggleButtonRestyling

Co-authored-by: Patricio Albizu <[email protected]>

Author: palbizu

projects/components/src/toggle-switch/toggle-switch.component.scss

@@ -3,8 +3,14 @@
 
 :host {
   ::ng-deep {
+    .mat-slide-toggle {
+      height: 20px;
+      line-height: 20px;
+    }
+
     .mat-checked {
       .mat-slide-toggle-thumb-container {
+        transform: translate3d(7px, 0, 0) !important;
         margin-left: 1px;
       }
 
@@ -19,14 +25,27 @@
 
     .mat-slide-toggle-thumb-container {
       margin-left: -1px;
+      width: 12px;
+      height: 12px;
+
+      .mat-slide-toggle-ripple {
+        top: calc(50% - 7px);
+        left: calc(50% - 7px);
+        height: 20px;
+        width: 20px;
+      }
     }
 
     .mat-slide-toggle-thumb {
       background-color: $gray-2;
+      height: 12px;
+      width: 12px;
     }
 
     .mat-slide-toggle-bar {
       background-color: $gray-5;
+      width: 18px;
+      height: 6px;
     }
   }
 }