fix mobile buttons

src/app/modules/shows/dialog/report-dialog/report-dialog.component.html

@@ -1,5 +1,6 @@
 <div mat-dialog-content>
-  <p>Bitte melde die in dieser Veranstaltung verwendeten CCLI-Titel. Die Meldung ist Teil der CCLI-Lizenz und sorgt dafür, dass Songwriter und Verlage korrekt vergütet werden.</p>
+  <p>Bitte melde die in dieser Veranstaltung verwendeten CCLI-Titel. Die Meldung ist Teil der CCLI-Lizenz und sorgt
+    dafür, dass Songwriter und Verlage korrekt vergütet werden.</p>
   <p>
     Die Meldung erfolgt über
     <a [href]="reportingUrl" rel="noreferrer" target="_blank">{{ reportingUrl }}</a>.
@@ -12,29 +13,29 @@
     </div>
 
     @for (song of data.songs; track song.title + song.ccliNumber) {
-    <div class="list-item">
-      <div>{{ song.title }}</div>
-      <div class="number-cell">
-        <span>{{ song.ccliNumber }}</span>
-        <a
-          (click)="markOpened(song.ccliNumber)"
-          [attr.aria-label]="'CCLI-Titel melden: ' + song.title"
-          [href]="getSongReportingUrl(song.ccliNumber)"
-          rel="noreferrer"
-          target="_blank"
-          class="btn-icon report-link"
-        >
-          <fa-icon [icon]="faOpen"></fa-icon>
-        </a>
-        @if (wasOpened(song.ccliNumber)) {
-        <fa-icon [icon]="faCheck" class="opened-check"></fa-icon>
-        }
+      <div class="list-item">
+        <div>{{ song.title }}</div>
+        <div class="number-cell">
+          <span>{{ song.ccliNumber }}</span>
+          <a
+            (click)="markOpened(song.ccliNumber)"
+            [attr.aria-label]="'CCLI-Titel melden: ' + song.title"
+            [href]="getSongReportingUrl(song.ccliNumber)"
+            rel="noreferrer"
+            target="_blank"
+            class="btn-icon report-link"
+          >
+            <fa-icon [icon]="faOpen"></fa-icon>
+          </a>
+          @if (wasOpened(song.ccliNumber)) {
+            <fa-icon [icon]="faCheck" class="opened-check"></fa-icon>
+          }
+        </div>
       </div>
-    </div>
     }
   </div>
 </div>
-<div mat-dialog-actions>
-  <button [mat-dialog-close]="false" mat-button>Abbrechen</button>
-  <button [mat-dialog-close]="true" cdkFocusInitial mat-button>Alle CCLI-Titel wurden gemeldet</button>
-</div>
+<app-button-row>
+  <app-button (click)="dialogRef.close(false)" [icon]="faClose">Abbrechen</app-button>
+  <app-button (click)="dialogRef.close(true)" [icon]="faReport">Alle CCLI-Titel wurden gemeldet</app-button>
+</app-button-row>

src/app/modules/shows/dialog/report-dialog/report-dialog.component.less

@@ -72,3 +72,7 @@
     justify-content: flex-start;
   }
 }
+
+app-button-row {
+  margin: 0 var(--gap-l) var(--gap-l);
+}

src/app/modules/shows/dialog/report-dialog/report-dialog.component.ts

@@ -1,8 +1,9 @@
 import {Component, inject} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogActions, MatDialogClose, MatDialogContent} from '@angular/material/dialog';
-import {MatButton} from '@angular/material/button';
+import {MAT_DIALOG_DATA, MatDialogContent, MatDialogRef} from '@angular/material/dialog';
 import {FaIconComponent} from '@fortawesome/angular-fontawesome';
-import {faArrowUpRightFromSquare, faCheck} from '@fortawesome/free-solid-svg-icons';
+import {faArrowUpRightFromSquare, faCheck, faCompactDisc, faXmark} from '@fortawesome/free-solid-svg-icons';
+import {ButtonRowComponent} from '../../../../widget-modules/components/button-row/button-row.component';
+import {ButtonComponent} from '../../../../widget-modules/components/button/button.component';
 
 export interface ReportDialogSong {
   title: string;
@@ -15,7 +16,7 @@ export interface ReportDialogData {
 
 @Component({
   selector: 'app-report-dialog',
-  imports: [MatButton, MatDialogActions, MatDialogContent, MatDialogClose, FaIconComponent],
+  imports: [MatDialogContent, FaIconComponent, ButtonRowComponent, ButtonComponent],
   templateUrl: './report-dialog.component.html',
   styleUrl: './report-dialog.component.less',
   standalone: true,
@@ -25,6 +26,11 @@ export class ReportDialogComponent {
   public readonly faOpen = faArrowUpRightFromSquare;
   public readonly faCheck = faCheck;
   public data = inject<ReportDialogData>(MAT_DIALOG_DATA);
+  public dialogRef = inject(MatDialogRef<ReportDialogComponent>);
+
+  public faReport = faCompactDisc;
+  public faClose = faXmark;
+
   private readonly openedNumbers = new Set<string>();
 
   public getSongReportingUrl(ccliNumber: string): string {

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

@@ -1,6 +1,11 @@
 .row {
   display: flex;
   flex-direction: row-reverse;
+  @media screen and (max-width: 860px) {
+    flex-direction: column-reverse;
+  }
+  gap: var(--gap-m);
   width: 100%;
   flex-wrap: wrap;
+  padding-top: var(--gap-l);
 }

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

@@ -1,6 +1,6 @@
-<button [disabled]="disabled" mat-button>
+<button [disabled]="disabled">
   @if (icon) {
-  <span><fa-icon [icon]="icon"></fa-icon><span class="content">&nbsp;</span></span>
+    <span><fa-icon [icon]="icon"></fa-icon><span class="content">&nbsp;</span></span>
   }
   <span class="button-content">
     <ng-content></ng-content>

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

@@ -8,8 +8,16 @@
 }
 
 button {
-  color: var(--text);
+  display: flex;
+  color: var(--primary-color);
   transition: var(--transition);
+  border-radius: 4px;
+  font-size: 1rem;
+  background: var(--surface-strong);
+
+  border: 1px solid var(--primary-color);
+  padding: var(--gap-s);
+  cursor: pointer;
 
   :host(.full-width) & {
     width: 100%;
@@ -18,18 +26,19 @@ button {
 
   &:hover {
     color: var(--primary-active);
+    background: var(--surface-subtle);
   }
 
   @media screen and (max-width: 860px) {
-    font-size: 30px;
+    font-size: 1.2rem;
+    width: 100%;
+    justify-content: center;
+    .button-content {
+      flex-grow: 1;
+    }
   }
 }
 
-.button-content {
-  @media screen and (max-width: 860px) {
-    display: none ;
-  }
-}
 
 fa-icon {
   width: 20px;

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

@@ -1,6 +1,5 @@
 import {Component, Input} from '@angular/core';
 import {IconProp} from '@fortawesome/fontawesome-svg-core';
-import {MatButton} from '@angular/material/button';
 
 import {FaIconComponent} from '@fortawesome/angular-fontawesome';
 
@@ -8,7 +7,7 @@ import {FaIconComponent} from '@fortawesome/angular-fontawesome';
   selector: 'app-button',
   templateUrl: './button.component.html',
   styleUrls: ['./button.component.less'],
-  imports: [MatButton, FaIconComponent],
+  imports: [FaIconComponent],
   host: {
     '[class.full-width]': 'fullWidth',
   },

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

@@ -1,7 +1,7 @@
 @import "../../../../styles/shadow";
 
 .card {
-  margin: 20px 20px 0;
+  margin: var(--gap-l) var(--gap-l) 0;
   border-radius: 8px;
   background: var(--surface);
   backdrop-filter: blur(15px);
@@ -10,7 +10,7 @@
   width: 800px;
   position: relative;
   color: var(--text);
-  padding: 10px 0;
+  padding: var(--gap-m) 0;
   box-shadow: var(--shadow-card-3);
 
   @media screen and (max-width: 860px) {
@@ -20,7 +20,7 @@
   }
 
   &.padding {
-    padding: 20px;
+    padding: var(--gap-l);
   }
 
   box-sizing: border-box;

src/styles/styles.less

@@ -42,7 +42,11 @@
 
 
   --mat-dialog-supporting-text-color: var(--text);
-  --mat-button-text-label-text-color: var(--color-primary-dark)
+  --mat-button-text-label-text-color: var(--color-primary-dark);
+
+  --gap-l: 20px;
+  --gap-m: calc(var(--gap-l) / 1.618);
+  --gap-s: calc(var(--gap-m) / 1.618);
 }
 
 html {