Make the hall look less ugly

Enhanced theater layout with speaker and lamp icons, adjusted seat button spacing, and improved overlay component styling for better visual structure and alignment.

src/app/seat/seat.component.html

@@ -1,4 +1,4 @@
-<button (click)="updateSelectedSeats(this.seat())" [disabled]="state() == TheaterSeatState.BOOKED || state() == TheaterSeatState.RESERVED || !seatService.getSeatIsSelected()" class="mx-1 hover:opacity-50">
+<button (click)="updateSelectedSeats(this.seat())" [disabled]="state() == TheaterSeatState.BOOKED || state() == TheaterSeatState.RESERVED || !seatService.getSeatIsSelected()" class="mx-0.5 hover:opacity-50">
   <mat-icon [ngStyle]="{color: isSelectedAndAvaliable() ? '#6366f1': getSeatStateColor() }" style="font-size: 30px; width: 30px; height: 30px">
     {{ seat().row.category.icon }}
   </mat-icon>

src/app/theater-layout/theater-layout.component.css

@@ -1,4 +1,4 @@
-:host {
+.mirrored {
-border-radius: 0.5rem;
+  transform: scaleX(-1);
-  background-color: white;
+  display: inline-block;
 }

src/app/theater-layout/theater-layout.component.html

@@ -1,10 +1,42 @@
-<div class="m-auto w-200 h-10 bg-gray-300 mb-20" style="clip-path: polygon(0% 0%,100% 0%,90% 100%,10% 100%);">
+<div class="m-auto w-200 h-10 bg-gray-200 mb-22" style="clip-path: polygon(0% 0%,100% 0%,90% 100%,10% 100%);">
-  <p class="flex justify-center text-2xl fond-bold p-1">
+  <p class="flex justify-center text-lg font-bold p-1.5">
     Leinwand
   </p>
 </div>
 <div>
   @for (row of seatsPerRow(); track $index) {
-    <app-seat-row class="flex justify-center" [rowSeatList]="row"></app-seat-row>
+    <div class="flex items-center justify-between">
+
+      <!-- Speaker -->
+      <div class="shrink-0 pl-25">
+        @if ($index % 4 === 0) {
+          <mat-icon class="material-symbols-outlined opacity-25" style="font-size: 30px; width: 30px; height: 30px">
+            speaker
+          </mat-icon>
+        }
+        @if ($index % 4 === 2) {
+          <mat-icon class="material-symbols-outlined opacity-25" style="font-size: 30px; width: 30px; height: 30px">
+            wall_lamp
+          </mat-icon>
+        }
+      </div>
+
+      <!-- Sitzreihe -->
+      <app-seat-row class="flex justify-center" [rowSeatList]="row"></app-seat-row>
+
+      <!-- Speaker -->
+      <div class="shrink-0 pr-25">
+        @if ($index % 4 === 0) {
+          <mat-icon class="material-symbols-outlined opacity-25 mirrored" style="font-size: 30px; width: 30px; height: 30px">
+            speaker
+          </mat-icon>
+        }
+        @if ($index % 4 === 2) {
+          <mat-icon class="material-symbols-outlined opacity-25 mirrored" style="font-size: 30px; width: 30px; height: 30px">
+            wall_lamp
+          </mat-icon>
+        }
+      </div>
+    </div>
   }
 </div>

src/app/theater-overlay/theater-overlay.component.css

@@ -0,0 +1,3 @@
+:host {
+  min-height: 100%;
+}

src/app/theater-overlay/theater-overlay.component.html

@@ -1,9 +1,14 @@
 <app-menu-header title="Vorstellungstickets kaufen" icon="local_activity" [backToSchedule]="true"></app-menu-header>
 
-<div class="flex justify-between h-max">
+<div class="flex justify-between h-100">
 
-  <app-theater-layout [seatsPerRow]="seatsPerRow" class="m-10 w-7/10"></app-theater-layout>
+  <div class="w-7/10 p-10 h-188">
+    <!-- <div class="bg-linear-to-b from-indigo-300 to-pink-300 h-full rounded-lg"> -->
+    <div>
+        <app-theater-layout [seatsPerRow]="seatsPerRow"></app-theater-layout>
+    </div>
+  </div>
 
-  <app-order class="m-10 w-3/10" [performance]="performance" [seatCategories]="seatCategories"></app-order>
+  <app-order class="m-10 mr-20 w-3/10" [performance]="performance" [seatCategories]="seatCategories"></app-order>
 
 </div>