Change checkboxes to slide toggles on user settings page (#2497)

* Change checkboxes to slide toggles on user settings page

* Update changelog

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Changed the checkboxes to slide toggles in the user settings of the user account page
 - Extended the `copy-assets` `Nx` target to copy the locales to the server’s assets
 - Upgraded `@simplewebauthn/browser` and `@simplewebauthn/server` from version `5.2.1` to `8.3`
 

apps/client/src/app/components/user-account-settings/user-account-settings.component.ts

@@ -5,7 +5,7 @@ import {
   OnDestroy,
   OnInit
 } from '@angular/core';
-import { MatCheckboxChange } from '@angular/material/checkbox';
+import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import {
   STAY_SIGNED_IN,
@@ -117,7 +117,7 @@ export class UserAccountSettingsComponent implements OnDestroy, OnInit {
       });
   }
 
-  public onExperimentalFeaturesChange(aEvent: MatCheckboxChange) {
+  public onExperimentalFeaturesChange(aEvent: MatSlideToggleChange) {
     this.dataService
       .putUserSetting({ isExperimentalFeatures: aEvent.checked })
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -155,7 +155,7 @@ export class UserAccountSettingsComponent implements OnDestroy, OnInit {
       });
   }
 
-  public onRestrictedViewChange(aEvent: MatCheckboxChange) {
+  public onRestrictedViewChange(aEvent: MatSlideToggleChange) {
     this.dataService
       .putUserSetting({ isRestrictedView: aEvent.checked })
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -173,7 +173,7 @@ export class UserAccountSettingsComponent implements OnDestroy, OnInit {
       });
   }
 
-  public onSignInWithFingerprintChange(aEvent: MatCheckboxChange) {
+  public onSignInWithFingerprintChange(aEvent: MatSlideToggleChange) {
     if (aEvent.checked) {
       this.registerDevice();
     } else {
@@ -189,7 +189,7 @@ export class UserAccountSettingsComponent implements OnDestroy, OnInit {
     }
   }
 
-  public onViewModeChange(aEvent: MatCheckboxChange) {
+  public onViewModeChange(aEvent: MatSlideToggleChange) {
     this.dataService
       .putUserSetting({ viewMode: aEvent.checked === true ? 'ZEN' : 'DEFAULT' })
       .pipe(takeUntil(this.unsubscribeSubject))

apps/client/src/app/components/user-account-settings/user-account-settings.html

@@ -11,12 +11,13 @@
           </div>
         </div>
         <div class="pl-1 w-50">
-          <mat-checkbox
+          <mat-slide-toggle
             color="primary"
+            hideIcon="true"
             [checked]="user.settings.isRestrictedView"
             [disabled]="!hasPermissionToUpdateUserSettings"
             (change)="onRestrictedViewChange($event)"
-          ></mat-checkbox>
+          ></mat-slide-toggle>
         </div>
       </div>
       <div class="d-flex mt-4 py-1">
@@ -139,12 +140,13 @@
           </div>
         </div>
         <div class="pl-1 w-50">
-          <mat-checkbox
+          <mat-slide-toggle
             color="primary"
+            hideIcon="true"
             [checked]="user.settings.viewMode === 'ZEN'"
             [disabled]="!hasPermissionToUpdateViewMode"
             (change)="onViewModeChange($event)"
-          ></mat-checkbox>
+          ></mat-slide-toggle>
         </div>
       </div>
       <div class="align-items-center d-flex mt-4 py-1">
@@ -153,12 +155,13 @@
           <div class="hint-text text-muted" i18n>Sign in with fingerprint</div>
         </div>
         <div class="pl-1 w-50">
-          <mat-checkbox
+          <mat-slide-toggle
             color="primary"
+            hideIcon="true"
             [checked]="isWebAuthnEnabled === true"
             [disabled]="!hasPermissionToUpdateUserSettings"
             (change)="onSignInWithFingerprintChange($event)"
-          ></mat-checkbox>
+          ></mat-slide-toggle>
         </div>
       </div>
       <div
@@ -172,12 +175,13 @@
           </div>
         </div>
         <div class="pl-1 w-50">
-          <mat-checkbox
+          <mat-slide-toggle
             color="primary"
+            hideIcon="true"
             [checked]="user.settings.isExperimentalFeatures"
             [disabled]="!hasPermissionToUpdateUserSettings"
             (change)="onExperimentalFeaturesChange($event)"
-          ></mat-checkbox>
+          ></mat-slide-toggle>
         </div>
       </div>
       <div class="align-items-center d-flex mt-4 py-1">

apps/client/src/app/components/user-account-settings/user-account-settings.module.ts

@@ -3,9 +3,9 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
-import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { RouterModule } from '@angular/router';
 import { GfValueModule } from '@ghostfolio/ui/value';
 
@@ -20,9 +20,9 @@ import { UserAccountSettingsComponent } from './user-account-settings.component'
     GfValueModule,
     MatButtonModule,
     MatCardModule,
-    MatCheckboxModule,
     MatFormFieldModule,
     MatSelectModule,
+    MatSlideToggleModule,
     ReactiveFormsModule,
     RouterModule
   ]

apps/client/src/styles.scss

@@ -462,6 +462,15 @@ ngx-skeleton-loader {
   }
 }
 
+/**
+ * Fix for https://github.com/angular/components/issues/26818
+ */
+.mat-mdc-slide-toggle {
+  .mdc-switch__track {
+    background-color: rgba(var(--palette-primary-500), 1);
+  }
+}
+
 .mat-stepper-vertical,
 .mat-stepper-horizontal {
   background: transparent !important;