fixes after ng update

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;