From 6bbef0a975df144e55604807ae69be847238d047 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Tue, 9 Dec 2025 11:20:43 +0100
Subject: [PATCH] feat: various improvements in styles and layout

---
 assets/styles/_base.css                       |   6 +-
 assets/styles/components/button.css           |   5 +-
 .../Booking/Create/IndexController.php        |   2 +-
 templates/account/index.html.twig             |   2 +-
 templates/account/personal_data.html.twig     |   2 +-
 .../booking/create/authenticate.html.twig     | 104 +++++++++---------
 .../{ => create}/modal_cancel.html.twig       |   8 +-
 templates/booking/edit/modal_cancel.html.twig |   8 +-
 8 files changed, 70 insertions(+), 67 deletions(-)
 rename templates/booking/{ => create}/modal_cancel.html.twig (75%)

diff --git a/assets/styles/_base.css b/assets/styles/_base.css
index 98befd2..681ff5d 100644
--- a/assets/styles/_base.css
+++ b/assets/styles/_base.css
@@ -46,13 +46,13 @@
 }
 
 .bg-outer--1 {
-    background-image: url('../images/bg_4.jpg'), linear-gradient(131.39deg, #0070E0 10.55%, #165883 53.93%, #18527B 80.73%);
+    background-image: url('../images/bg_4.jpg'), linear-gradient(190deg, rgba(24, 82, 123, 1) 0%, rgba(22, 88, 131, 1) 62%, rgba(0, 112, 224, 1) 100%);;
 }
 
 .bg-outer--2 {
-    background-image: url('../images/bg_5.jpg'), linear-gradient(131.39deg, #0070E0 10.55%, #165883 53.93%, #18527B 80.73%);
+    background-image: url('../images/bg_5.jpg'), linear-gradient(190deg, rgba(24, 82, 123, 1) 0%, rgba(22, 88, 131, 1) 62%, rgba(0, 112, 224, 1) 100%);;
 }
 
 .bg-inner {
-    background-image: linear-gradient(311.39deg, #0070E0cc 16.35%, #165883cc 41.93%, #18527Bcc 56.29%);
+    background-image: linear-gradient(190deg, rgba(24, 82, 123, 0.8) 0%, rgba(22, 88, 131, 0.8) 62%, rgba(0, 112, 224, 0.8) 100%);;
 }
diff --git a/assets/styles/components/button.css b/assets/styles/components/button.css
index d09e6b4..4984eb9 100644
--- a/assets/styles/components/button.css
+++ b/assets/styles/components/button.css
@@ -14,12 +14,13 @@
 }
 
 .button--secondary {
-    @apply bg-none bg-primary-light text-white;
+    @apply bg-none bg-primary-dark text-white;
     @apply hover:bg-primary-light/80;
 }
 
 .button--primary {
-    @apply bg-pink text-white;
+    background: linear-gradient(120deg, #960167 0%, #9e036a 40%, #fa1a8c 100%);
+    @apply text-white;
     @apply hover:bg-none hover:bg-pink/80;
 }
 
diff --git a/src/Controller/Booking/Create/IndexController.php b/src/Controller/Booking/Create/IndexController.php
index 21c2f57..3d21bce 100644
--- a/src/Controller/Booking/Create/IndexController.php
+++ b/src/Controller/Booking/Create/IndexController.php
@@ -150,7 +150,7 @@ class IndexController extends AbstractController
             return $this->htmxRedirect($request, $returnUrl);
         }
 
-        return $this->render('booking/modal_cancel.html.twig');
+        return $this->render('booking/create/modal_cancel.html.twig');
     }
 
     /**
diff --git a/templates/account/index.html.twig b/templates/account/index.html.twig
index ffb6987..c20e63c 100644
--- a/templates/account/index.html.twig
+++ b/templates/account/index.html.twig
@@ -6,7 +6,7 @@
             Mein<br>Account
         </h1>
     </div>
-    <div class="p-4 ld:p-8">
+    <div class="p-4 lg:p-8">
         <nav>
             <ul class="divide-y divide-primary-bg/40">
                 <li class="py-4">
diff --git a/templates/account/personal_data.html.twig b/templates/account/personal_data.html.twig
index b0188e6..4ae153e 100644
--- a/templates/account/personal_data.html.twig
+++ b/templates/account/personal_data.html.twig
@@ -6,7 +6,7 @@
             Meine<br>Daten
         </h1>
     </div>
-    <div class="p-4 ld:p-8">
+    <div class="p-4 lg:p-8">
         <div class="divide-y divide-primary-bg/40">
             <div class="grid md:grid-cols-2 gap-x-8 gap-y-4 pb-8">
                 <div class="text-white">
diff --git a/templates/booking/create/authenticate.html.twig b/templates/booking/create/authenticate.html.twig
index 5bb0eb1..66b87cf 100644
--- a/templates/booking/create/authenticate.html.twig
+++ b/templates/booking/create/authenticate.html.twig
@@ -5,38 +5,33 @@
 
         {% include '_partials/_flashes.html.twig' %}
 
-        <h1 class="text-white uppercase pb-4 mb-8 border-b border-primary-bg/40">
+        <h1 class="text-white uppercase pb-4 mb-4 border-b border-primary-bg/40">
             Neue<br>Buchung
         </h1>
 
-        <div class="text-white uppercase pb-4 lg:pb-8">
-            {{ travel_title }}
-            <br>
-            {{ travel_date_from | date('d.m.Y') }} - {{ travel_date_to | date('d.m.Y') }}
-            <br>
+        <div class="lg:flex lg:space-x-8 pb-8 mb-8 border-b border-primary-bg/40">
             {% if cmsData.hotel.images is defined %}
                 <img src="{{ cmsData.hotel.images.resized.l[0].url }}"
                      alt="{{ cmsData.hotel.images.resized.l[0].alt }}"
-                     class="block w-full max-w-64 h-auto mt-4">
+                     class="block w-full max-w-64 h-auto mb-4">
             {% endif %}
+            <div class="text-white uppercase max-w-96">
+                <div class="text-xl lg:text-2xl font-semibold">
+                    {{ travel_title }}
+                </div>
+                <div class="text-lg font-semibold">
+                    {{ travel_date_from | date('d.m.Y') }} - {{ travel_date_to | date('d.m.Y') }}
+                </div>
+            </div>
         </div>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <div class="space-y-8 max-w-screen-sm">
             <div>
-                <a href="{{ path('app_booking_create_step_1') }}" class="button button--secondary mb-4">
+                <a href="{{ path('app_booking_create_step_1') }}" class="button button--primary w-full md:w-auto">
                     Als Gast fortfahren
                 </a>
-
-                <h2 class="text-base text-white">
-                    Noch kein Account?
-                </h2>
-                <p class="text-white">
-                    Nach Abschluss deiner Buchung wird automatisch ein Account für dich erstellt.
-                    Du erhältst dann Zugangsdaten per E-Mail und kannst deine Buchungen jederzeit verwalten.
-                </p>
             </div>
             <div>
-                <h2 class="text-base text-white">
+                <h2 class="text-white">
                     Mit bestehendem Account anmelden
                 </h2>
 
@@ -44,45 +39,52 @@
                     {% include '_partials/_alert.html.twig' with { 'level': 'error', messages: [ error.messageKey|trans(error.messageData, 'security') ] } %}
                 {% endif %}
 
-                <div class="pb-4">
-                    <form action="{{ path('app_login') }}" method="post">
-                        <div class="mb-4">
-                            <label for="username" class="mb-1 font-semibold text-white">
-                                E-Mail:
-                            </label>
-                            <input type="email"
-                                   id="username"
-                                   name="_username"
-                                   value="{{ last_username }}"
-                                   class="form-field"
-                                   required
-                                   autocomplete="username">
-                        </div>
+                <form action="{{ path('app_login') }}" method="post">
+                    <div class="mb-4">
+                        <label for="username" class="mb-1 font-semibold text-white">
+                            E-Mail:
+                        </label>
+                        <input type="email"
+                               id="username"
+                               name="_username"
+                               value="{{ last_username }}"
+                               class="form-field"
+                               required
+                               autocomplete="username">
+                    </div>
 
-                        <div class="mb-4">
-                            <label for="password" class="mb-1 font-semibold text-white">
-                                Passwort:
-                            </label>
-                            <input type="password"
-                                   id="password"
-                                   name="_password"
-                                   class="form-field"
-                                   required
-                                   autocomplete="current-password">
-                        </div>
+                    <div class="mb-4">
+                        <label for="password" class="mb-1 font-semibold text-white">
+                            Passwort:
+                        </label>
+                        <input type="password"
+                               id="password"
+                               name="_password"
+                               class="form-field"
+                               required
+                               autocomplete="current-password">
+                    </div>
 
-                        <button type="submit" class="button button--primary">
-                            Anmelden und fortfahren
-                        </button>
-                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
-                    </form>
-                </div>
+                    <button type="submit" class="button button--primary w-full md:w-auto">
+                        Anmelden und fortfahren
+                    </button>
+                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
+                </form>
 
                 <a href="{{ path('app_reset_password') }}"
-                   class="text-sm underline text-white">
+                   class="inline-block text-sm underline text-white mt-2">
                     Passwort vergessen?
                 </a>
+            </div>
 
+            <div>
+                <h3 class=" text-white">
+                    Noch kein Account?
+                </h3>
+                <div class="text-white">
+                    Nach Abschluss deiner Buchung wird automatisch ein Account für dich erstellt.
+                    Du erhältst dann Zugangsdaten per E-Mail und kannst deine Buchungen jederzeit verwalten.
+                </div>
             </div>
         </div>
 
diff --git a/templates/booking/modal_cancel.html.twig b/templates/booking/create/modal_cancel.html.twig
similarity index 75%
rename from templates/booking/modal_cancel.html.twig
rename to templates/booking/create/modal_cancel.html.twig
index d01eac0..7d4d4c9 100644
--- a/templates/booking/modal_cancel.html.twig
+++ b/templates/booking/create/modal_cancel.html.twig
@@ -10,13 +10,13 @@
         <button type="button"
                 hx-post="{{ path('app_booking_cancel') }}"
                 hx-target="body"
-                class="button button--small button--primary">
-            Ja
+                class="button button--primary">
+            Abbrechen
         </button>
         <button type="button"
                 {{ stimulus_action('modal', 'close') }}
-                class="button button--small button--secondary">
-            Nein
+                class="button button--secondary">
+            Weiter
         </button>
     </div>
 {% endblock %}
diff --git a/templates/booking/edit/modal_cancel.html.twig b/templates/booking/edit/modal_cancel.html.twig
index 5e7148e..fe621ec 100644
--- a/templates/booking/edit/modal_cancel.html.twig
+++ b/templates/booking/edit/modal_cancel.html.twig
@@ -10,13 +10,13 @@
         <button type="button"
                 hx-post="{{ path('app_booking_edit_cancel', {id: bookingId}) }}"
                 hx-target="body"
-                class="button button--small button--primary">
-            Ja
+                class="button button--primary">
+            Abbrechen
         </button>
         <button type="button"
                 {{ stimulus_action('modal', 'close') }}
-                class="button button--small button--secondary">
-            Nein
+                class="button button--secondary">
+            Weiter
         </button>
     </div>
 {% endblock %}