From b7cd22ef6b88500d33f104e2e48810cad8991eee Mon Sep 17 00:00:00 2001
From: Piet Ostendorp <piet@ostendorp-online.de>
Date: Fri, 14 Nov 2025 00:02:47 +0100
Subject: [PATCH] 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              |  2 +-
 .../theater-layout.component.css              |  6 +--
 .../theater-layout.component.html             | 38 +++++++++++++++++--
 .../theater-overlay.component.css             |  3 ++
 .../theater-overlay.component.html            | 11 ++++--
 5 files changed, 50 insertions(+), 10 deletions(-)

diff --git a/src/app/seat/seat.component.html b/src/app/seat/seat.component.html
index 5513fe3..f115ccc 100644
--- a/src/app/seat/seat.component.html
+++ b/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>
diff --git a/src/app/theater-layout/theater-layout.component.css b/src/app/theater-layout/theater-layout.component.css
index 055c8c8..853af5c 100644
--- a/src/app/theater-layout/theater-layout.component.css
+++ b/src/app/theater-layout/theater-layout.component.css
@@ -1,4 +1,4 @@
-:host {
-border-radius: 0.5rem;
-  background-color: white;
+.mirrored {
+  transform: scaleX(-1);
+  display: inline-block;
 }
diff --git a/src/app/theater-layout/theater-layout.component.html b/src/app/theater-layout/theater-layout.component.html
index cd0560d..1acb4ce 100644
--- a/src/app/theater-layout/theater-layout.component.html
+++ b/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%);">
-  <p class="flex justify-center text-2xl fond-bold p-1">
+<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-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>
diff --git a/src/app/theater-overlay/theater-overlay.component.css b/src/app/theater-overlay/theater-overlay.component.css
index e69de29..dd48b70 100644
--- a/src/app/theater-overlay/theater-overlay.component.css
+++ b/src/app/theater-overlay/theater-overlay.component.css
@@ -0,0 +1,3 @@
+:host {
+  min-height: 100%;
+}
diff --git a/src/app/theater-overlay/theater-overlay.component.html b/src/app/theater-overlay/theater-overlay.component.html
index c4c736e..ef160bd 100644
--- a/src/app/theater-overlay/theater-overlay.component.html
+++ b/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>