Migrate MatRadio

apps/client/src/app/components/toggle/toggle.component.html

@@ -6,6 +6,7 @@
   <mat-radio-button
     *ngFor="let option of options"
     [disabled]="isLoading"
+    [ngClass]="{ 'cursor-pointer': !isLoading }"
     [value]="option.value"
     >{{ option.label }}</mat-radio-button
   >

apps/client/src/app/components/toggle/toggle.component.scss

@@ -1,26 +1,24 @@
 :host {
   display: block;
 
-  .mat-radio-button {
+  .mat-mdc-radio-button {
     border-radius: 1rem;
     margin: 0 0.25rem;
     padding: 0.15rem 0.75rem;
 
-    &.mat-radio-checked {
+    &.mat-mdc-radio-checked {
       background-color: rgba(var(--dark-dividers));
     }
 
     ::ng-deep {
-      .mat-radio-container {
+      .mdc-radio {
         display: none;
       }
 
-      .mat-radio-label {
-        margin-bottom: 0;
-      }
-
-      .mat-radio-label-content {
+      label {
         color: rgba(var(--dark-primary-text), 1);
+        cursor: inherit;
+        margin: 0;
         padding: 0;
       }
     }
@@ -28,14 +26,14 @@
 }
 
 :host-context(.is-dark-theme) {
-  .mat-radio-button {
-    &.mat-radio-checked {
+  .mat-mdc-radio-button {
+    &.mat-mdc-radio-checked {
       background-color: rgba(var(--light-dividers));
       border: 1px solid rgba(var(--light-disabled-text));
     }
 
     ::ng-deep {
-      .mat-radio-label-content {
+      label {
         color: rgba(var(--light-primary-text), 1);
       }
     }

apps/client/src/app/components/toggle/toggle.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
+import { MatRadioModule } from '@angular/material/radio';
 
 import { ToggleComponent } from './toggle.component';