fix monitor bg contrast

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

@@ -36,7 +36,7 @@
   filter: blur(10px);
 
   &.visible {
-    opacity: 0.5;
+    opacity: 0.7;
   }
 }
 
@@ -54,7 +54,7 @@
   filter: blur(5px);
 
   &.visible {
-    opacity: 0.4;
+    opacity: 0.6;
   }
 }
 
@@ -63,7 +63,7 @@
   filter: blur(8px);
 
   &.visible {
-    opacity: 0.2;
+    opacity: 0.4;
   }
 }
 
@@ -72,7 +72,7 @@
   filter: blur(8px);
 
   &.visible {
-    opacity: 0.2;
+    opacity: 0.4;
   }
 }
 

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

@@ -101,10 +101,8 @@
         </div>
         @if (show) {
           <div class="div-bottom">
-            <button class="btn-start-presentation" mat-button routerLink="/presentation/monitor">
+            <app-button [icon]="faDesktop" routerLink="/presentation/monitor">Präsentation starten</app-button>
-              <fa-icon [icon]="faDesktop"></fa-icon>
+
-              Präsentation starten
-            </button>
             <mat-form-field appearance="outline">
               <mat-label>Hintergrund</mat-label>
               <mat-select (ngModelChange)="onBackground($event, show.id)" [ngModel]="show.presentationBackground">

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

@@ -17,9 +17,7 @@ import {CardComponent} from '../../../widget-modules/components/card/card.compon
 import {MatFormField, MatLabel} from '@angular/material/form-field';
 import {MatInput} from '@angular/material/input';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatButton} from '@angular/material/button';
 import {RouterLink} from '@angular/router';
-import {FaIconComponent} from '@fortawesome/angular-fontawesome';
 import {MatSelect} from '@angular/material/select';
 import {MatOption} from '@angular/material/core';
 import {MatSlider, MatSliderThumb} from '@angular/material/slider';
@@ -27,6 +25,7 @@ import {AddSongComponent} from '../../../widget-modules/components/add-song/add-
 import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 import {SectionTypePipe} from '../../../widget-modules/pipes/section-type-translator/section-type.pipe';
 import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.component';
+import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
 
 export interface PresentationSong {
   id: string;
@@ -47,9 +46,7 @@ export interface PresentationSong {
     MatInput,
     ReactiveFormsModule,
     FormsModule,
-    MatButton,
     RouterLink,
-    FaIconComponent,
     MatSelect,
     MatOption,
     MatSlider,
@@ -60,6 +57,7 @@ export interface PresentationSong {
     ShowTypePipe,
     SectionTypePipe,
     PageFrameComponent,
+    ButtonComponent,
   ],
 })
 export class RemoteComponent implements OnDestroy {

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

@@ -9,10 +9,11 @@
           @if (shows.length > 0) {
             <div class="list">
               @for (show of shows; track show.id) {
-                <button (click)="selectShow(show)" mat-stroked-button>
+                <app-button (click)="selectShow(show)" class="full-width">
                   <app-user-name [userId]="show.owner"></app-user-name>
                   , {{ show.showType | showType }}, {{ show.date.toDate() | date: "dd.MM.yyyy" }}
-                </button>
+                </app-button>
+
               }
             </div>
           }

src/app/modules/presentation/select/select.component.ts

@@ -7,17 +7,17 @@ import {Router} from '@angular/router';
 import {fade} from '../../../animations';
 import {AsyncPipe, DatePipe} from '@angular/common';
 import {CardComponent} from '../../../widget-modules/components/card/card.component';
-import {MatButton} from '@angular/material/button';
 import {UserNameComponent} from '../../../services/user/user-name/user-name.component';
 import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.component';
+import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
 
 @Component({
   selector: 'app-select',
   templateUrl: './select.component.html',
   styleUrls: ['./select.component.less'],
   animations: [fade],
-  imports: [CardComponent, MatButton, UserNameComponent, AsyncPipe, DatePipe, ShowTypePipe, PageFrameComponent],
+  imports: [CardComponent, UserNameComponent, AsyncPipe, DatePipe, ShowTypePipe, PageFrameComponent, ButtonComponent],
 })
 export class SelectComponent implements OnInit {
   private showService = inject(ShowService);

src/app/widget-modules/components/button/button.component.less

@@ -1,9 +1,5 @@
-:host {
-  display: inline-flex;
-}
 
 :host(.full-width) {
-  display: flex;
   width: 100%;
 }
 

src/styles/styles.less

@@ -17,6 +17,7 @@
   --color-primary-dark: #48686e;
   --color-primary: #6f8f95;
   --color-primary-light: #85a4aa;
+  --primary-color-sat: #578f9a;
   --primary-color: #6f8f95;
   --primary-hover: #85a4aa;
   --primary-active: #5b797e;