finish mdc migration

frontend/src/app/app.module.ts

@@ -2,33 +2,33 @@ import { BrowserModule } from '@angular/platform-browser';
 import { LOCALE_ID, NgModule } from '@angular/core';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';
 import {
-  MatLegacySnackBarModule as MatSnackBarModule,
-  MAT_LEGACY_SNACK_BAR_DEFAULT_OPTIONS as MAT_SNACK_BAR_DEFAULT_OPTIONS,
-} from '@angular/material/legacy-snack-bar';
+  MatSnackBarModule,
+  MAT_SNACK_BAR_DEFAULT_OPTIONS,
+} from '@angular/material/snack-bar';
 import { MatRippleModule } from '@angular/material/core';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatTableModule } from '@angular/material/table';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
+import { MatSelectModule } from '@angular/material/select';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatExpansionModule } from '@angular/material/expansion';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatListModule } from '@angular/material/list';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatDividerModule } from '@angular/material/divider';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { FormsModule } from '@angular/forms';
 import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 import { TimeagoModule } from 'ngx-timeago';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { WebAudioModule } from '@ng-web-apis/audio';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { SoundboardButtonComponent } from './soundboard/soundboard-button/soundboard-button.component';

frontend/src/app/error-box/error-box.component.html

@@ -1,6 +1,6 @@
 <ng-container *ngIf="errors$ | async as errors">
   <div class="wrapper" *ngIf="errors.length > 0" @enterLeave>
-    <mat-card class="mat-elevation-z12">
+    <mat-card appearance="outlined" class="mat-elevation-z12">
       <mat-card-header>
         <mat-icon mat-card-avatar>error</mat-icon>
         <mat-card-title>Error</mat-card-title>

frontend/src/app/error-box/error-box.component.scss

@@ -12,7 +12,7 @@
   padding: 16px;
 }
 
-mat-icon.mat-card-avatar {
+mat-icon.mat-mdc-card-avatar {
   width: 40px;
   height: 40px;
   font-size: 40px;

frontend/src/app/header/header.component.scss

@@ -16,7 +16,7 @@
   flex: 1;
 }
 
-a.mat-button {
+a.mat-mdc-button {
   &.active,
   &:hover {
     background-color: rgba(0, 0, 0, 0.07);
@@ -30,7 +30,7 @@ a.mat-button {
   padding: 0;
   overflow-y: auto;
 
-  .mat-button {
+  .mat-mdc-button {
     flex: 1;
     min-width: 150px;
   }

frontend/src/app/keybind-generator/keybind-generator.component.scss

@@ -74,7 +74,7 @@ mat-select {
 }
 
 .mat-column-actions {
-  flex: 0 0 60px;
+  flex: 0 0 auto;
 }
 
 .cdk-drag-preview {

frontend/src/app/keybind-generator/keybind-generator.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { pull } from 'lodash-es';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { combineLatest, EMPTY, Subject } from 'rxjs';

frontend/src/app/keybind-generator/searchable-sound-select/searchable-sound-select.component.scss

@@ -1,12 +1,3 @@
-::ng-deep ngx-mat-select-search input {
+:host ::ng-deep ngx-mat-select-search input {
   color: white !important;
 }
-
-mat-select-trigger {
-  display: flex;
-  align-items: center;
-
-  mat-icon {
-    margin-right: 16px;
-  }
-}

frontend/src/app/login/login.component.html

@@ -1,25 +1,27 @@
 <div class="filler"></div>
-<mat-card class="mat-elevation-z8">
+<mat-card>
   <div class="login-title mat-h2">📢 Soundboard Login</div>
   <div class="login-content">
     <p>You need to login to use the soundboard.</p>
     <a class="login-button" mat-raised-button href="/api/auth/login">
-      Login with
-      <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 272.1">
-        <style>
-          .st0 {
-            fill: #ffffff;
-          }
-        </style>
-        <path
-          class="st0"
-          d="M142.8 120.1c-5.7 0-10.2 4.9-10.2 11s4.6 11 10.2 11c5.7 0 10.2-4.9 10.2-11s-4.6-11-10.2-11zM106.3 120.1c-5.7 0-10.2 4.9-10.2 11s4.6 11 10.2 11c5.7 0 10.2-4.9 10.2-11 .1-6.1-4.5-11-10.2-11z"
-        />
-        <path
-          class="st0"
-          d="M191.4 36.9h-134c-11.3 0-20.5 9.2-20.5 20.5v134c0 11.3 9.2 20.5 20.5 20.5h113.4l-5.3-18.3 12.8 11.8 12.1 11.1 21.6 18.7V57.4c-.1-11.3-9.3-20.5-20.6-20.5zm-38.6 129.5s-3.6-4.3-6.6-8c13.1-3.7 18.1-11.8 18.1-11.8-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.4-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.6-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.2-1.8-1-2.8-1.7-2.8-1.7s4.8 7.9 17.5 11.7c-3 3.8-6.7 8.2-6.7 8.2-22.1-.7-30.5-15.1-30.5-15.1 0-31.9 14.4-57.8 14.4-57.8 14.4-10.7 28-10.4 28-10.4l1 1.2c-18 5.1-26.2 13-26.2 13s2.2-1.2 5.9-2.8c10.7-4.7 19.2-5.9 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.5 0 0-7.9-7.5-24.9-12.6l1.4-1.6s13.7-.3 28 10.4c0 0 14.4 25.9 14.4 57.8 0-.1-8.4 14.3-30.5 15zM303.8 79.7h-33.2V117l22.1 19.9v-36.2h11.8c7.5 0 11.2 3.6 11.2 9.4v27.7c0 5.8-3.5 9.7-11.2 9.7h-34v21.1h33.2c17.8.1 34.5-8.8 34.5-29.2v-29.8c.1-20.8-16.6-29.9-34.4-29.9zm174 59.7v-30.6c0-11 19.8-13.5 25.8-2.5l18.3-7.4c-7.2-15.8-20.3-20.4-31.2-20.4-17.8 0-35.4 10.3-35.4 30.3v30.6c0 20.2 17.6 30.3 35 30.3 11.2 0 24.6-5.5 32-19.9l-19.6-9c-4.8 12.3-24.9 9.3-24.9-1.4zM417.3 113c-6.9-1.5-11.5-4-11.8-8.3.4-10.3 16.3-10.7 25.6-.8l14.7-11.3c-9.2-11.2-19.6-14.2-30.3-14.2-16.3 0-32.1 9.2-32.1 26.6 0 16.9 13 26 27.3 28.2 7.3 1 15.4 3.9 15.2 8.9-.6 9.5-20.2 9-29.1-1.8l-14.2 13.3c8.3 10.7 19.6 16.1 30.2 16.1 16.3 0 34.4-9.4 35.1-26.6 1-21.7-14.8-27.2-30.6-30.1zm-67 55.5h22.4V79.7h-22.4v88.8zM728 79.7h-33.2V117l22.1 19.9v-36.2h11.8c7.5 0 11.2 3.6 11.2 9.4v27.7c0 5.8-3.5 9.7-11.2 9.7h-34v21.1H728c17.8.1 34.5-8.8 34.5-29.2v-29.8c0-20.8-16.7-29.9-34.5-29.9zm-162.9-1.2c-18.4 0-36.7 10-36.7 30.5v30.3c0 20.3 18.4 30.5 36.9 30.5 18.4 0 36.7-10.2 36.7-30.5V109c0-20.4-18.5-30.5-36.9-30.5zm14.4 60.8c0 6.4-7.2 9.7-14.3 9.7-7.2 0-14.4-3.1-14.4-9.7V109c0-6.5 7-10 14-10 7.3 0 14.7 3.1 14.7 10v30.3zM682.4 109c-.5-20.8-14.7-29.2-33-29.2h-35.5v88.8h22.7v-28.2h4l20.6 28.2h28L665 138.1c10.7-3.4 17.4-12.7 17.4-29.1zm-32.6 12h-13.2v-20.3h13.2c14.1 0 14.1 20.3 0 20.3z"
-        />
-      </svg>
+      <div class="button-content">
+        Login with
+        <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 272.1">
+          <style>
+            .st0 {
+              fill: #ffffff;
+            }
+          </style>
+          <path
+            class="st0"
+            d="M142.8 120.1c-5.7 0-10.2 4.9-10.2 11s4.6 11 10.2 11c5.7 0 10.2-4.9 10.2-11s-4.6-11-10.2-11zM106.3 120.1c-5.7 0-10.2 4.9-10.2 11s4.6 11 10.2 11c5.7 0 10.2-4.9 10.2-11 .1-6.1-4.5-11-10.2-11z"
+          />
+          <path
+            class="st0"
+            d="M191.4 36.9h-134c-11.3 0-20.5 9.2-20.5 20.5v134c0 11.3 9.2 20.5 20.5 20.5h113.4l-5.3-18.3 12.8 11.8 12.1 11.1 21.6 18.7V57.4c-.1-11.3-9.3-20.5-20.6-20.5zm-38.6 129.5s-3.6-4.3-6.6-8c13.1-3.7 18.1-11.8 18.1-11.8-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.4-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.6-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.2-1.8-1-2.8-1.7-2.8-1.7s4.8 7.9 17.5 11.7c-3 3.8-6.7 8.2-6.7 8.2-22.1-.7-30.5-15.1-30.5-15.1 0-31.9 14.4-57.8 14.4-57.8 14.4-10.7 28-10.4 28-10.4l1 1.2c-18 5.1-26.2 13-26.2 13s2.2-1.2 5.9-2.8c10.7-4.7 19.2-5.9 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.5 0 0-7.9-7.5-24.9-12.6l1.4-1.6s13.7-.3 28 10.4c0 0 14.4 25.9 14.4 57.8 0-.1-8.4 14.3-30.5 15zM303.8 79.7h-33.2V117l22.1 19.9v-36.2h11.8c7.5 0 11.2 3.6 11.2 9.4v27.7c0 5.8-3.5 9.7-11.2 9.7h-34v21.1h33.2c17.8.1 34.5-8.8 34.5-29.2v-29.8c.1-20.8-16.6-29.9-34.4-29.9zm174 59.7v-30.6c0-11 19.8-13.5 25.8-2.5l18.3-7.4c-7.2-15.8-20.3-20.4-31.2-20.4-17.8 0-35.4 10.3-35.4 30.3v30.6c0 20.2 17.6 30.3 35 30.3 11.2 0 24.6-5.5 32-19.9l-19.6-9c-4.8 12.3-24.9 9.3-24.9-1.4zM417.3 113c-6.9-1.5-11.5-4-11.8-8.3.4-10.3 16.3-10.7 25.6-.8l14.7-11.3c-9.2-11.2-19.6-14.2-30.3-14.2-16.3 0-32.1 9.2-32.1 26.6 0 16.9 13 26 27.3 28.2 7.3 1 15.4 3.9 15.2 8.9-.6 9.5-20.2 9-29.1-1.8l-14.2 13.3c8.3 10.7 19.6 16.1 30.2 16.1 16.3 0 34.4-9.4 35.1-26.6 1-21.7-14.8-27.2-30.6-30.1zm-67 55.5h22.4V79.7h-22.4v88.8zM728 79.7h-33.2V117l22.1 19.9v-36.2h11.8c7.5 0 11.2 3.6 11.2 9.4v27.7c0 5.8-3.5 9.7-11.2 9.7h-34v21.1H728c17.8.1 34.5-8.8 34.5-29.2v-29.8c0-20.8-16.7-29.9-34.5-29.9zm-162.9-1.2c-18.4 0-36.7 10-36.7 30.5v30.3c0 20.3 18.4 30.5 36.9 30.5 18.4 0 36.7-10.2 36.7-30.5V109c0-20.4-18.5-30.5-36.9-30.5zm14.4 60.8c0 6.4-7.2 9.7-14.3 9.7-7.2 0-14.4-3.1-14.4-9.7V109c0-6.5 7-10 14-10 7.3 0 14.7 3.1 14.7 10v30.3zM682.4 109c-.5-20.8-14.7-29.2-33-29.2h-35.5v88.8h22.7v-28.2h4l20.6 28.2h28L665 138.1c10.7-3.4 17.4-12.7 17.4-29.1zm-32.6 12h-13.2v-20.3h13.2c14.1 0 14.1 20.3 0 20.3z"
+          />
+        </svg>
+      </div>
     </a>
   </div>
 </mat-card>

frontend/src/app/login/login.component.scss

@@ -14,7 +14,6 @@
 mat-card {
   min-width: 300px;
   padding: 0;
-  border-radius: 5px;
   overflow: hidden; // force rounded corners onto children
 }
 
@@ -35,6 +34,12 @@ mat-card {
   width: 100%;
   margin-bottom: 10px;
 
+  .button-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
   svg {
     height: 2em;
   }

frontend/src/app/recorder/recorder.component.html

@@ -4,7 +4,7 @@
   <ng-container *ngIf="data.user && data.recordings; else loading">
     <mat-toolbar>
       <div class="toolbar-content">
-        <mat-form-field appearance="outline">
+        <mat-form-field subscriptSizing="dynamic">
           <mat-label>Discord Server</mat-label>
           <mat-select [ngModel]="settings.guildId$ | async" (ngModelChange)="settings.guildId$.next($event)">
             <mat-option *ngFor="let guild of data.user.guilds" [value]="guild.id">{{ guild.name || guild.id }}</mat-option>

frontend/src/app/recorder/recorder.component.scss

@@ -80,7 +80,7 @@ main {
   }
 }
 
-::ng-deep {
+:host ::ng-deep {
   mat-expansion-panel {
     mat-expansion-panel-header > .mat-content {
       justify-content: space-between;

frontend/src/app/recorder/recorder.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { clamp } from 'lodash-es';
 import { WebAudioBufferSource, WebAudioContext, WebAudioGain } from '@ng-web-apis/audio';
 import { BehaviorSubject, combineLatest, EMPTY, Subject } from 'rxjs';

frontend/src/app/settings/guild-settings/can-deactivate-guild-settings.guard.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 import { combineLatest, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';

frontend/src/app/settings/guild-settings/guild-settings.component.html

@@ -15,7 +15,7 @@ <h2 class="section-title"><mat-icon>admin_panel_settings</mat-icon>&nbsp;<span>U
           view and play sounds as well as create, view and delete recordings on your server.</p
         >
         <div class="setting-input-wrapper">
-          <mat-form-field appearance="outline">
+          <mat-form-field>
             <mat-label>User role</mat-label>
             <mat-select [ngModel]="data.guildSettings.userRoleId" (ngModelChange)="setUserRoleId($event, data.guild.id)">
               <mat-option [value]="null">-- Disable users --</mat-option>
@@ -31,7 +31,7 @@ <h2 class="section-title"><mat-icon>admin_panel_settings</mat-icon>&nbsp;<span>M
           buttons and sounds within your server.</p
         >
         <div class="setting-input-wrapper">
-          <mat-form-field appearance="outline">
+          <mat-form-field>
             <mat-label>Moderator role</mat-label>
             <mat-select [ngModel]="data.guildSettings.moderatorRoleId" (ngModelChange)="setModeratorRoleId($event, data.guild.id)">
               <mat-option [value]="null">-- Disable moderators --</mat-option>
@@ -46,7 +46,7 @@ <h2 class="section-title"><mat-icon>admin_panel_settings</mat-icon>&nbsp;<span>M
           boosted can be defined below. Those settings can also be overriden manually for each sound.</p
         >
         <div class="setting-input-wrapper">
-          <mat-form-field appearance="outline">
+          <mat-form-field>
             <mat-label>Target mean volume</mat-label>
             <input
               matInput
@@ -64,7 +64,7 @@ <h2 class="section-title"><mat-icon>admin_panel_settings</mat-icon>&nbsp;<span>M
           <ng-container *ngTemplateOutlet="savingIndicator; context: { $implicit: meanVolumeIsSaving$ | async }"></ng-container>
         </div>
         <div class="setting-input-wrapper">
-          <mat-form-field appearance="outline">
+          <mat-form-field>
             <mat-label>Target max volume</mat-label>
             <input
               matInput

frontend/src/app/settings/guild-settings/guild-settings.component.ts

@@ -1,6 +1,6 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, ViewChild } from '@angular/core';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute } from '@angular/router';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import { finalize, map, shareReplay, takeUntil } from 'rxjs/operators';

frontend/src/app/settings/random-infixes/random-infixes.component.html

@@ -1,13 +1,13 @@
-<mat-card class="mat-elevation-z4">
+<mat-card appearance="outlined" class="mat-elevation-z4">
   <ng-container *ngFor="let randomInfix of infixes; let i = index">
     <mat-divider [inset]="true" *ngIf="i > 0"></mat-divider>
     <div class="infix-list-item">
-      <mat-form-field appearance="outline">
+      <mat-form-field subscriptSizing="dynamic">
         <mat-label>Display Name</mat-label>
         <input matInput [(ngModel)]="randomInfix.displayName" (ngModelChange)="hasChanges.emit(true)" maxlength="32" required />
         <mat-error *ngIf="randomInfix.displayName.length === 0">Empty name is not allowed</mat-error>
       </mat-form-field>
-      <mat-form-field appearance="outline">
+      <mat-form-field subscriptSizing="dynamic">
         <mat-label>Search Term</mat-label>
         <input matInput [(ngModel)]="randomInfix.infix" (ngModelChange)="hasChanges.emit(true)" maxlength="32" required />
         <mat-error *ngIf="randomInfix.infix.length === 0">Empty infix is not allowed</mat-error>

frontend/src/app/settings/random-infixes/random-infixes.component.scss

@@ -14,7 +14,3 @@ mat-card {
     margin-right: 0.4em;
   }
 }
-
-::ng-deep .infix-list-item .mat-form-field-appearance-outline .mat-form-field-wrapper {
-  padding-bottom: 0;
-}

frontend/src/app/settings/settings.component.html

@@ -11,19 +11,18 @@
     >
       <mat-nav-list class="sidenav-list">
         <mat-list-item routerLink="/settings/user" routerLinkActive="active-nav-link" *ngIf="user$ | async as user">
-          <img mat-list-icon [src]="user.avatarUrl" />
-          <div mat-line>User settings</div>
+          <img matListItemIcon [src]="user.avatarUrl" />
+          <div>User settings</div>
         </mat-list-item>
 
         <ng-container *ngFor="let guild of guilds$ | async">
           <mat-list-item [routerLink]="'/settings/guilds/' + guild.id">
-            <img *ngIf="guild.iconUrl; else discordIcon" mat-list-icon [src]="guild.iconUrl" />
-            <div mat-line>{{ guild.name }}</div>
-            <div mat-line>{{ guild.role === 'admin' ? 'Admin' : 'Moderator' }}</div>
-            <mat-icon class="expand-icon">expand_more</mat-icon>
+            <img *ngIf="guild.iconUrl; else discordIcon" matListItemIcon [src]="guild.iconUrl" />
+            <div matListItemTitle>{{ guild.name }}</div>
+            <div matListItemLine>{{ guild.role === 'admin' ? 'Admin' : 'Moderator' }}</div>
 
             <ng-template #discordIcon>
-              <svg mat-list-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 245 240">
+              <svg matListItemIcon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 245 240">
                 <style>
                   .st0 {
                     fill: #ffffff;

frontend/src/app/settings/settings.component.scss

@@ -43,6 +43,6 @@ mat-sidenav-content {
   flex-direction: column;
 }
 
-.expand-icon {
-  min-width: 24px;
+img[matListItemIcon] {
+  border-radius: 50%;
 }

frontend/src/app/settings/sound-manager/can-deactivate-sound-manager.guard.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 import { combineLatest, Observable } from 'rxjs';
 import { first, map } from 'rxjs/operators';

frontend/src/app/settings/sound-manager/sound-delete-confirm/sound-delete-confirm.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Sound } from 'src/app/services/sounds.service';
 
 @Component({

frontend/src/app/settings/sound-manager/sound-details/sound-details.component.html

@@ -9,25 +9,25 @@
 
   <ng-template matExpansionPanelContent>
     <div>
-      <mat-form-field appearance="outline">
+      <mat-form-field>
         <mat-label>Name</mat-label>
         <input matInput [(ngModel)]="sound.name" (ngModelChange)="soundEntry.checkChanges$.next()" maxlength="64" />
       </mat-form-field>
-      <mat-form-field appearance="outline">
+      <mat-form-field>
         <mat-label>Category</mat-label>
         <input matInput [(ngModel)]="sound.category" (ngModelChange)="soundEntry.checkChanges$.next()" maxlength="64" />
       </mat-form-field>
     </div>
 
     <div>
-      <mat-form-field appearance="outline">
+      <mat-form-field>
         <mat-label>Volume adjustment</mat-label>
         <mat-select [(ngModel)]="volumeAdjustmentMode" (ngModelChange)="soundEntry.checkChanges$.next()">
           <mat-option value="auto">Automatic</mat-option>
           <mat-option value="manual">Manual</mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field appearance="outline">
+      <mat-form-field>
         <mat-label>Adjustment value</mat-label>
         <input
           matInput
@@ -38,7 +38,7 @@
           [ngModelOptions]="{ updateOn: 'blur' }"
           [disabled]="volumeAdjustmentMode === 'auto'"
         />
-        <span matSuffix>dB</span>
+        <span matTextSuffix>dB</span>
       </mat-form-field>
     </div>
 
@@ -79,8 +79,7 @@ <h3>Statistics</h3>
   <mat-action-row>
     <input class="hidden" type="file" accept=".mp3" (change)="onImportFileChange($event)" #fileImport />
     <button mat-stroked-button (click)="playClick.emit()">
-      <ng-container *ngIf="!isPlaying; else stopButton"><mat-icon>play_arrow</mat-icon> Play</ng-container>
-      <ng-template #stopButton><mat-icon>pause</mat-icon> Stop</ng-template>
+      <mat-icon>{{ isPlaying ? 'pause' : 'play_arrow' }}</mat-icon> {{ isPlaying ? 'Stop' : 'Play' }}
     </button>
     <div class="spinner-button-container">
       <button mat-stroked-button [disabled]="isBusy" (click)="!isBusy && fileImport.click()"