style: revert toggle bar styling

Author: jfmcquade

src/app/shared/components/template/components/toggle-bar/toggle-bar.html

@@ -11,7 +11,8 @@
       class="toggle_wrapper"
       [class.show-tick-cross]="params.showTickAndCross"
     >
-      <ion-toggle mode="md" [checked]="_row.value" (click)="handleClick($event)"> </ion-toggle>
+      <ion-toggle mode="md" [checked]="_row.value" (click)="handleClick($event)" legacy="true">
+      </ion-toggle>
     </div>
 
     <!-- "icon" variant, replaces ion-toggle with alternating pair of icons -->

src/app/shared/components/template/components/toggle-bar/toggle-bar.scss

@@ -8,9 +8,9 @@ ion-toggle {
 }
 
 ion-toggle {
-  --background: #b4b7b7;
+  --track-background: #b4b7b7;
   --handle-spacing: 2px;
-  --background-checked: var(--ion-color-primary, "darkblue");
+  --track-background-checked: var(--ion-color-primary, "darkblue");
   --handle-background: var(--ion-item-background, #fefefe);
   --handle-background-checked: #fff;
   --padding-inline: $togglePadding;