fixes after ng update

src/app/app.component.less

@@ -1,10 +1,3 @@
 h1 {
   color: red;
 }
-
-
-.manager {
-  //display: grid;
-  //grid-template-columns: 1fr 1fr;
-  //transition: all 1s ease-in-out;
-}

src/app/modules/brand/brand.component.html

@@ -1,4 +1,4 @@
 <div class="brand">
   <app-logo></app-logo>
-  <div class="copyright">© 2019 - 2023 - Benjamin Ifland</div>
+  <div class="copyright">© 2019 - 2024 - Benjamin Ifland</div>
 </div>

src/app/modules/presentation/presentation.module.ts

@@ -5,20 +5,20 @@ import {PresentationRoutingModule} from './presentation-routing.module';
 import {MonitorComponent} from './monitor/monitor.component';
 import {RemoteComponent} from './remote/remote.component';
 import {CardModule} from '../../widget-modules/components/card/card.module';
-import {MatLegacyFormFieldModule as MatFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacySelectModule as MatSelectModule} from '@angular/material/legacy-select';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatSelectModule} from '@angular/material/select';
 import {ShowTypeTranslaterModule} from '../../widget-modules/pipes/show-type-translater/show-type-translater.module';
 import {SectionTypeTranslatorModule} from '../../widget-modules/pipes/section-type-translator/section-type-translator.module';
 import {SongTextModule} from '../../widget-modules/components/song-text/song-text.module';
 import {LegalComponent} from './monitor/legal/legal.component';
-import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
-import {MatLegacySliderModule as MatSliderModule} from '@angular/material/legacy-slider';
+import {MatSliderModule} from '@angular/material/slider';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {AddSongModule} from '../../widget-modules/components/add-song/add-song.module';
 import {LogoComponent} from './monitor/logo/logo.component';
 import {SelectComponent} from './select/select.component';
-import {MatLegacyInputModule as MatInputModule} from '@angular/material/legacy-input';
+import {MatInputModule} from '@angular/material/input';
 import {UserNameModule} from '../../services/user/user-name/user-name.module';
 
 @NgModule({

src/app/modules/presentation/remote/remote.component.html

@@ -77,7 +77,7 @@
 
       <div *ngIf="show" class="div-bottom">
 
-        <button routerLink="/presentation/monitor" mat-button>
+        <button class="btn-start-presentation" mat-button routerLink="/presentation/monitor">
           <fa-icon [icon]="faDesktop"></fa-icon>
           Präsentation starten
         </button>
@@ -98,17 +98,19 @@
         </mat-form-field>
 
         <mat-slider
-          (ngModelChange)="onZoom($event, show.id)"
           [max]="100"
           [min]="10"
-          [ngModel]="show.presentationZoom"
           [step]="2"
-          [thumbLabel]="true"
           color="primary"
           class="zoom-slider"
-        >
+          #slider
+          ngDefaultControl
+        ><input (ngModelChange)="onZoom($event, show.id)"
+                [ngModel]="show.presentationZoom"
+                matSliderThumb>
         </mat-slider>
 
+
       </div>
 
       <app-add-song

src/app/modules/presentation/remote/remote.component.less

@@ -47,21 +47,17 @@
   outline: 0.5px solid #eee;
 
   &:hover {
-    .card-1;
-    outline: 0 solid transparent;
+    outline: 0.5px solid var(--color-primary-light);
   }
 
   &.active {
-    .card-2;
-    outline: 0 solid transparent;
+    outline: 0.5px solid var(--color-primary);
 
     .head {
-      background: #4286f4;
+      background-color: var(--color-primary);
       color: white;
     }
 
-    .fragment {
-    }
   }
 }
 
@@ -79,7 +75,11 @@
 .div-bottom {
   display: grid;
   gap: 20px;
-  grid-template-columns: min-content min-content auto;
+  grid-template-columns: 1fr 1fr 1fr;
+
+  .btn-start-presentation {
+    height: 56px;
+  }
 
   @media screen and (max-width: 860px) {
     gap: 10px;

src/app/modules/shows/show/show.component.ts

@@ -25,7 +25,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
 import {fade} from '../../../animations';
-import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
+import {MatDialog} from '@angular/material/dialog';
 import {ArchiveDialogComponent} from '../dialog/archive-dialog/archive-dialog.component';
 import {closeFullscreen, openFullscreen} from '../../../services/fullscreen';
 

src/app/modules/shows/show/song/song.component.html

@@ -7,9 +7,10 @@
   <div *ngIf="!show.published && !fullscreen" class="song">
     <span class="title">{{ iSong.title }}</span>
     <span *ngIf="!edit" class="keys">
-      <span *ngIf="iSong.keyOriginal !== iSong.key">{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span>
-      <mat-form-field *ngIf="keys" appearance="standard" class="keys">
-        <mat-select [formControl]="keyFormControl">
+      <span *ngIf="iSong.keyOriginal !== iSong.key">{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span><span
+      (click)="openKeySelect()">{{ iSong.key }}</span>
+      <mat-form-field (click)="option.open()" *ngIf="keys" class="transpose">
+        <mat-select #option [formControl]="keyFormControl">
           <mat-option *ngFor="let key of keys" [value]="key">{{ key }}</mat-option>
         </mat-select>
       </mat-form-field>

src/app/modules/shows/show/song/song.component.less

@@ -17,8 +17,18 @@
 }
 
 .keys {
-  width: 40px;
-  margin: -24px 0 -20px 0;
+  position: relative;
+  margin-right: 10px;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--color-primary);
+  }
+}
+
+.transpose {
+  height: 0;
+  position: absolute;
 }
 
 .btn-up {
@@ -54,6 +64,7 @@
   grid-area: delete;
   justify-content: flex-end;
 }
+
 .btn-edit {
   grid-area: edit;
   justify-content: flex-end;

src/app/modules/shows/show/song/song.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, Input, OnInit, ViewChild} from '@angular/core';
 import {ShowSongService} from '../../services/show-song.service';
 import {ShowSong} from '../../services/show-song';
 import {getScale} from '../../../songs/services/key.helper';
@@ -7,6 +7,7 @@ import {ChordMode} from '../../../../widget-modules/components/song-text/song-te
 import {Show} from '../../services/show';
 import {faEraser, faPenToSquare, faSave, faTrash} from '@fortawesome/free-solid-svg-icons';
 import {fade} from '../../../../animations';
+import {MatSelect} from '@angular/material/select';
 
 @Component({
   selector: 'app-song',
@@ -21,6 +22,8 @@ export class SongComponent implements OnInit {
   @Input() public index = -1;
   @Input() public fullscreen = false;
 
+  @ViewChild('option') private keyOptions: MatSelect;
+
   public keys: string[] = [];
   public faDelete = faTrash;
   public faEdit = faPenToSquare;
@@ -75,4 +78,8 @@ export class SongComponent implements OnInit {
       chordMode: value,
     });
   }
+
+  public openKeySelect(): void {
+    this.keyOptions.open();
+  }
 }

src/app/modules/shows/shows.module.ts

@@ -4,17 +4,17 @@ import {CommonModule} from '@angular/common';
 import {ShowsRoutingModule} from './shows-routing.module';
 import {NewComponent} from './new/new.component';
 import {CardModule} from '../../widget-modules/components/card/card.module';
-import {MatLegacyFormFieldModule as MatFormFieldModule} from '@angular/material/legacy-form-field';
+import {MatFormFieldModule} from '@angular/material/form-field';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatLegacyInputModule as MatInputModule} from '@angular/material/legacy-input';
+import {MatInputModule} from '@angular/material/input';
 import {ListComponent} from './list/list.component';
 import {ListItemComponent} from './list/list-item/list-item.component';
 import {ListHeaderModule} from '../../widget-modules/components/list-header/list-header.module';
-import {MatLegacyCheckboxModule as MatCheckboxModule} from '@angular/material/legacy-checkbox';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 import {ButtonRowModule} from '../../widget-modules/components/button-row/button-row.module';
-import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {MatDatepickerModule} from '@angular/material/datepicker';
-import {MatLegacySelectModule as MatSelectModule} from '@angular/material/legacy-select';
+import {MatSelectModule} from '@angular/material/select';
 import {ShowTypeTranslaterModule} from '../../widget-modules/pipes/show-type-translater/show-type-translater.module';
 import {MatNativeDateModule} from '@angular/material/core';
 import {ShowComponent} from './show/show.component';
@@ -27,15 +27,15 @@ import {AddSongModule} from '../../widget-modules/components/add-song/add-song.m
 import {ButtonModule} from '../../widget-modules/components/button/button.module';
 import {OwnerModule} from '../../services/user/owner.module';
 import {UserNameModule} from '../../services/user/user-name/user-name.module';
-import {MatLegacyMenuModule as MatMenuModule} from '@angular/material/legacy-menu';
+import {MatMenuModule} from '@angular/material/menu';
 import {DragDropModule} from '@angular/cdk/drag-drop';
 import {RoleModule} from '../../services/user/role.module';
 import {SortByModule} from '../../widget-modules/pipes/sort-by/sort-by.module';
-import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
+import {MatTooltipModule} from '@angular/material/tooltip';
 import {FilterComponent} from './list/filter/filter.component';
 import {EditComponent} from './edit/edit.component';
 import {ArchiveDialogComponent} from './dialog/archive-dialog/archive-dialog.component';
-import {MatLegacyDialogModule as MatDialogModule} from '@angular/material/legacy-dialog';
+import {MatDialogModule} from '@angular/material/dialog';
 
 @NgModule({
   declarations: [NewComponent, ListComponent, ListItemComponent, ShowComponent, SongComponent, FilterComponent, EditComponent, ArchiveDialogComponent],

src/app/modules/songs/song-list/song-list.module.ts

@@ -5,14 +5,14 @@ import {CardModule} from '../../../widget-modules/components/card/card.module';
 import {RouterModule} from '@angular/router';
 import {LegalTypeTranslatorModule} from '../../../widget-modules/pipes/legal-type-translator/legal-type-translator.module';
 import {ListHeaderModule} from '../../../widget-modules/components/list-header/list-header.module';
-import {MatLegacyFormFieldModule as MatFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInputModule as MatInputModule} from '@angular/material/legacy-input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
 import {FilterComponent} from './filter/filter.component';
 import {ReactiveFormsModule} from '@angular/forms';
-import {MatLegacySelectModule as MatSelectModule} from '@angular/material/legacy-select';
+import {MatSelectModule} from '@angular/material/select';
 import {SongTypeTranslaterModule} from '../../../widget-modules/pipes/song-type-translater/song-type-translater.module';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
-import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
+import {MatTooltipModule} from '@angular/material/tooltip';
 import {RoleModule} from '../../../services/user/role.module';
 import {KeyTranslatorModule} from '../../../widget-modules/pipes/key-translator/key-translator.module';
 

src/app/modules/songs/song/edit/edit-song/edit-song.component.html

@@ -95,16 +95,15 @@
     </mat-form-field>
 
     <mat-form-field appearance="outline">
-      <mat-chip-list #chipList>
-        <mat-chip
+      <mat-chip-grid #chipList>
+        <mat-chip-row
           (removed)="removeFlag(flag)"
           *ngFor="let flag of flags"
           [removable]="true"
-          [selectable]="false"
         >
           {{ flag }}&nbsp;
           <fa-icon (click)="removeFlag(flag)" [icon]="faRemove"></fa-icon>
-        </mat-chip>
+        </mat-chip-row>
         <input
           (matChipInputTokenEnd)="addFlag($event)"
           [matChipInputAddOnBlur]="true"
@@ -112,7 +111,7 @@
           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
           placeholder="Attribute"
         />
-      </mat-chip-list>
+      </mat-chip-grid>
     </mat-form-field>
 
     <div class="half">

src/app/modules/songs/song/edit/edit-song/edit-song.component.ts

@@ -7,9 +7,9 @@ import {EditService} from '../edit.service';
 import {first, map, switchMap} from 'rxjs/operators';
 import {KEYS} from '../../../services/key.helper';
 import {COMMA, ENTER} from '@angular/cdk/keycodes';
-import {MatLegacyChipInputEvent as MatChipInputEvent} from '@angular/material/legacy-chips';
+import {MatChipInputEvent} from '@angular/material/chips';
 import {faExternalLinkAlt, faSave, faTimesCircle} from '@fortawesome/free-solid-svg-icons';
-import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
+import {MatDialog} from '@angular/material/dialog';
 import {SaveDialogComponent} from './save-dialog/save-dialog.component';
 
 @Component({

src/app/modules/songs/song/edit/edit.module.ts

@@ -4,10 +4,10 @@ import {EditComponent} from './edit.component';
 import {CardModule} from '../../../../widget-modules/components/card/card.module';
 import {SongTypeTranslaterModule} from '../../../../widget-modules/pipes/song-type-translater/song-type-translater.module';
 import {ReactiveFormsModule} from '@angular/forms';
-import {MatLegacyInputModule as MatInputModule} from '@angular/material/legacy-input';
-import {MatLegacyCheckboxModule as MatCheckboxModule} from '@angular/material/legacy-checkbox';
-import {MatLegacySelectModule as MatSelectModule} from '@angular/material/legacy-select';
-import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
+import {MatInputModule} from '@angular/material/input';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatSelectModule} from '@angular/material/select';
+import {MatButtonModule} from '@angular/material/button';
 import {ButtonRowModule} from '../../../../widget-modules/components/button-row/button-row.module';
 import {RouterModule} from '@angular/router';
 import {EditSongComponent} from './edit-song/edit-song.component';
@@ -17,13 +17,13 @@ import {FileComponent} from './edit-file/file/file.component';
 import {LegalOwnerTranslatorModule} from '../../../../widget-modules/pipes/legal-owner-translator/legal-owner-translator.module';
 import {LegalTypeTranslatorModule} from '../../../../widget-modules/pipes/legal-type-translator/legal-type-translator.module';
 import {KeyTranslatorModule} from '../../../../widget-modules/pipes/key-translator/key-translator.module';
-import {MatLegacyChipsModule as MatChipsModule} from '@angular/material/legacy-chips';
+import {MatChipsModule} from '@angular/material/chips';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {StatusTranslaterModule} from '../../../../widget-modules/pipes/status-translater/status-translater.module';
 import {ButtonModule} from '../../../../widget-modules/components/button/button.module';
-import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
+import {MatTooltipModule} from '@angular/material/tooltip';
 import {SaveDialogComponent} from './edit-song/save-dialog/save-dialog.component';
-import {MatLegacyDialogModule as MatDialogModule} from '@angular/material/legacy-dialog';
+import {MatDialogModule} from '@angular/material/dialog';
 import {HistoryComponent} from './history/history.component';
 import {SongTextModule} from '../../../../widget-modules/components/song-text/song-text.module';
 

src/app/modules/songs/song/new/new.module.ts

@@ -3,8 +3,8 @@ import {CommonModule} from '@angular/common';
 import {NewComponent} from './new.component';
 import {CardModule} from '../../../../widget-modules/components/card/card.module';
 import {ReactiveFormsModule} from '@angular/forms';
-import {MatLegacyFormFieldModule as MatFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInputModule as MatInputModule} from '@angular/material/legacy-input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
 import {ButtonRowModule} from '../../../../widget-modules/components/button-row/button-row.module';
 import {ButtonModule} from '../../../../widget-modules/components/button/button.module';
 import {AutofocusModule} from '../../../../widget-modules/directives/autofocus/autofocus.module';

src/app/modules/songs/song/song.component.html

@@ -40,14 +40,15 @@
         [text]="song.text"
       ></app-song-text>
 
-      <mat-chip-list
+      <mat-chip-listbox
         *appRole="['leader', 'contributor']"
         aria-label="Attribute"
       >
-        <mat-chip *ngFor="let flag of getFlags(song.flags)">{{
+        <mat-chip-option *ngFor="let flag of getFlags(song.flags)">{{
           flag
-          }}</mat-chip>
-      </mat-chip-list>
+          }}
+        </mat-chip-option>
+      </mat-chip-listbox>
 
       <div *appRole="['leader', 'contributor']" class="text">
         {{ song.comment }}

src/app/modules/songs/song/song.module.ts

@@ -3,17 +3,17 @@ import {CommonModule} from '@angular/common';
 import {SongComponent} from './song.component';
 import {CardModule} from '../../../widget-modules/components/card/card.module';
 import {SongTypeTranslaterModule} from '../../../widget-modules/pipes/song-type-translater/song-type-translater.module';
-import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {ButtonRowModule} from '../../../widget-modules/components/button-row/button-row.module';
 import {RouterModule} from '@angular/router';
 import {LegalOwnerTranslatorModule} from '../../../widget-modules/pipes/legal-owner-translator/legal-owner-translator.module';
 import {SongTextModule} from '../../../widget-modules/components/song-text/song-text.module';
-import {MatLegacyChipsModule as MatChipsModule} from '@angular/material/legacy-chips';
+import {MatChipsModule} from '@angular/material/chips';
 import {RoleModule} from '../../../services/user/role.module';
 import {StatusTranslaterModule} from '../../../widget-modules/pipes/status-translater/status-translater.module';
 import {ButtonModule} from '../../../widget-modules/components/button/button.module';
 import {FileComponent} from './file/file.component';
-import {MatLegacyMenuModule as MatMenuModule} from '@angular/material/legacy-menu';
+import {MatMenuModule} from '@angular/material/menu';
 import {ShowTypeTranslaterModule} from '../../../widget-modules/pipes/show-type-translater/show-type-translater.module';
 
 @NgModule({

src/app/modules/user/user.module.ts

@@ -3,16 +3,16 @@ import {CommonModule} from '@angular/common';
 import {LoginComponent} from './login/login.component';
 import {UserRoutingModule} from './user-routing.module';
 import {CardModule} from '../../widget-modules/components/card/card.module';
-import {MatLegacyFormFieldModule as MatFormFieldModule} from '@angular/material/legacy-form-field';
+import {MatFormFieldModule} from '@angular/material/form-field';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatLegacyInputModule as MatInputModule} from '@angular/material/legacy-input';
+import {MatInputModule} from '@angular/material/input';
 import {ButtonRowModule} from '../../widget-modules/components/button-row/button-row.module';
-import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {AuthMessagePipe} from './login/auth-message.pipe';
 import {InfoComponent} from './info/info.component';
 import {LogoutComponent} from './logout/logout.component';
 import {RolePipe} from './info/role.pipe';
-import {MatLegacySelectModule as MatSelectModule} from '@angular/material/legacy-select';
+import {MatSelectModule} from '@angular/material/select';
 import {PasswordComponent} from './password/password.component';
 import {PasswordSendComponent} from './password-send/password-send.component';
 import {UsersComponent} from './info/users/users.component';

src/app/widget-modules/components/add-song/add-song.component.ts

@@ -1,7 +1,7 @@
 import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {UntypedFormControl} from '@angular/forms';
 import {filterSong} from '../../../services/filter.helper';
-import {MatLegacySelectChange as MatSelectChange} from '@angular/material/legacy-select';
+import {MatSelectChange} from '@angular/material/select';
 import {Song} from '../../../modules/songs/services/song';
 import {ShowSong} from '../../../modules/shows/services/show-song';
 import {ShowSongService} from '../../../modules/shows/services/show-song.service';

src/app/widget-modules/components/add-song/add-song.module.ts

@@ -1,8 +1,8 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {AddSongComponent} from './add-song.component';
-import {MatLegacyFormFieldModule as MatFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacySelectModule as MatSelectModule} from '@angular/material/legacy-select';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatSelectModule} from '@angular/material/select';
 import {NgxMatSelectSearchModule} from 'ngx-mat-select-search';
 import {ReactiveFormsModule} from '@angular/forms';
 

src/app/widget-modules/components/button/button.module.ts

@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {ButtonComponent} from './button.component';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
-import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 
 @NgModule({
   declarations: [ButtonComponent],

src/app/widget-modules/components/card/card.module.ts

@@ -1,7 +1,7 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {CardComponent} from './card.component';
-import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {RouterModule} from '@angular/router';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 

src/app/widget-modules/components/list-header/list-header.module.ts

@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {ListHeaderComponent} from './list-header.component';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
-import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {RouterModule} from '@angular/router';
 import {CardModule} from '../card/card.module';
 

src/app/widget-modules/components/menu-button/menu-button.module.ts

@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {MenuButtonComponent} from './menu-button.component';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
-import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 
 @NgModule({
   declarations: [MenuButtonComponent],

src/app/widget-modules/components/song-text/song-text.module.ts

@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {SongTextComponent} from './song-text.component';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
-import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 
 @NgModule({
   declarations: [SongTextComponent],

src/custom-theme.scss

@@ -14,9 +14,9 @@
 //  If you specify typography styles for the components you use elsewhere, you should delete this line.
 //  If you don't need the default component typographies but still want the hierarchy styles,
 //  you can delete this line and instead use:
-//    `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
-@include mat.all-legacy-component-typographies();
-@include mat.legacy-core();
+//    `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
+@include mat.all-component-typographies();
+@include mat.core();
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
@@ -33,7 +33,7 @@ $wgenerator-theme: mat.define-light-theme($wgenerator-primary, $wgenerator-accen
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include mat.all-legacy-component-themes($wgenerator-theme);
+@include mat.all-component-themes($wgenerator-theme);
 
 
 // Custom Theming for Angular Material
@@ -50,9 +50,9 @@ $wgenerator-theme: mat.define-light-theme($wgenerator-primary, $wgenerator-accen
 //  If you specify typography styles for the components you use elsewhere, you should delete this line.
 //  If you don't need the default component typographies but still want the hierarchy styles,
 //  you can delete this line and instead use:
-//    `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
-@include mat.all-legacy-component-typographies();
-@include mat.legacy-core();
+//    `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
+@include mat.all-component-typographies();
+@include mat.core();
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
@@ -69,7 +69,7 @@ $wgenerator-theme: mat.define-light-theme($wgenerator-primary, $wgenerator-accen
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include mat.all-legacy-component-themes($wgenerator-theme);
+@include mat.all-component-themes($wgenerator-theme);
 
 // Custom Theming for Angular Material
 // For more information: https://material.angular.io/guide/theming
@@ -85,9 +85,9 @@ $wgenerator-theme: mat.define-light-theme($wgenerator-primary, $wgenerator-accen
 //  If you specify typography styles for the components you use elsewhere, you should delete this line.
 //  If you don't need the default component typographies but still want the hierarchy styles,
 //  you can delete this line and instead use:
-//    `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
-@include mat.all-legacy-component-typographies();
-@include mat.legacy-core();
+//    `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
+@include mat.all-component-typographies();
+@include mat.core();
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
@@ -104,5 +104,5 @@ $wgenerator-theme: mat.define-light-theme($wgenerator-primary, $wgenerator-accen
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include mat.all-legacy-component-themes($wgenerator-theme);
+@include mat.all-component-themes($wgenerator-theme);
 

src/styles/styles.less

@@ -4,9 +4,11 @@
 
 @transition: all 300ms ease-in-out;
 
-//html, body {
-//  height: 100%;
-//}
+:root {
+  --color-primary: #4286f4;
+  --color-primary-light: #639af3;
+}
+
 html {
   scroll-behavior: smooth;
 }
@@ -37,17 +39,11 @@ a {
   color: inherit;
 }
 
-.mat-form-field {
+.mat-mdc-form-field {
   width: 100%;
 }
 
-.mat-form-field .mat-form-field-infix {
-  width: unset;
-}
 
-.mat-form-field.mat-form-field-appearance-standard .mat-form-field-underline {
-  height: 0;
-}
 
 
 .content > *:not(router-outlet) {
@@ -79,49 +75,6 @@ body {
   font-family: Roboto, "Helvetica Neue", sans-serif;
 }
 
-perfect-scrollbar.scroll > .ps.ps--scrolling-y > .ps__rail-y,
-perfect-scrollbar.scroll > .ps .ps__rail-y:hover {
-  background-color: #222;
-  opacity: .3;
-}
-
-.mat-chip.mat-standard-chip {
-  background: #fffa;
-}
-
-input:-webkit-autofill,
-input:-webkit-autofill:hover,
-input:-webkit-autofill:focus,
-textarea:-webkit-autofill,
-textarea:-webkit-autofill:hover,
-textarea:-webkit-autofill:focus,
-select:-webkit-autofill,
-select:-webkit-autofill:hover,
-select:-webkit-autofill:focus {
-  -webkit-box-shadow: 0 0 0px 1000px #0000 inset;
-  transition: background-color 5000s ease-in-out 0s;
-}
-
-mat-dialog-container.mat-dialog-container {
-  background: #fffb;
-  backdrop-filter: blur(8px);
-  border-radius: 8px;
-}
-
-.mat-form-field-outline {
-  background: #fff4;
-  border-radius: 4px;
-}
-
-.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-outline-gap {
-  border-top-color: inherit !important;
-}
-
-.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
-.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
-  transform: translateY(-1.0em) scale(0.75);
-}
-
 
 body {
   .swiper-button-next, .swiper-button-prev {
@@ -131,4 +84,7 @@ body {
   .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
     opacity: 0;
   }
+
+  --mat-form-field-container-text-line-height: 16px;
+  --mat-form-field-container-text-size: 16px;
 }