diff --git a/apps/client/src/app/components/toggle/toggle.component.html b/apps/client/src/app/components/toggle/toggle.component.html index 7d621e7f8..582aa433e 100644 --- a/apps/client/src/app/components/toggle/toggle.component.html +++ b/apps/client/src/app/components/toggle/toggle.component.html @@ -6,6 +6,7 @@ {{ option.label }} diff --git a/apps/client/src/app/components/toggle/toggle.component.scss b/apps/client/src/app/components/toggle/toggle.component.scss index ecf6b2e80..84ca3fd37 100644 --- a/apps/client/src/app/components/toggle/toggle.component.scss +++ b/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); } } diff --git a/apps/client/src/app/components/toggle/toggle.module.ts b/apps/client/src/app/components/toggle/toggle.module.ts index 5ac6b241b..d27ff4a16 100644 --- a/apps/client/src/app/components/toggle/toggle.module.ts +++ b/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';