feat: back-button in booking create flow

assets/styles/components/button.css

@@ -1,7 +1,7 @@
 .button {
     @apply inline-flex items-center justify-center space-x-2 h-10 leading-10 px-4 md:px-8 cursor-pointer;
     @apply uppercase leading-none text-center;
-    @apply transition-colors outline-none focus:outline-2 focus:outline-offset-2 focus:outline-primary-light;
+    @apply transition-colors outline-none focus:outline-2 focus:outline-offset-2 focus:outline-primary-dark;
     @apply rounded-md;
 }
 
@@ -20,42 +20,47 @@
 }
 
 .button--secondary {
-    @apply bg-none bg-primary-dark text-white;
+    @apply bg-none bg-primary-light text-white;
-    @apply hover:bg-primary-light/80;
+    @apply hover:bg-primary-light/50;
+}
+
+.button--neutral {
+    @apply bg-none bg-gray-200;
+    @apply hover:bg-gray-200/50;
 }
 
 .sbw {
     .button--primary {
         @apply bg-none bg-sbw-secondary text-white;
-        @apply hover:bg-none hover:bg-sbw-primary/80;
+        @apply hover:bg-none hover:bg-sbw-primary/50;
     }
 
     .button--secondary {
         @apply bg-none bg-sbw-primary-dark text-white;
-        @apply hover:bg-none hover:bg-sbw-primary/80;
+        @apply hover:bg-none hover:bg-sbw-primary/50;
     }
 }
 
 .snz {
     .button--primary {
         @apply bg-none bg-snz-secondary text-white;
-        @apply hover:bg-none hover:bg-snz-primary/80;
+        @apply hover:bg-none hover:bg-snz-primary/50;
     }
 
     .button--secondary {
         @apply bg-none bg-snz-primary-dark text-white;
-        @apply hover:bg-none hover:bg-snz-primary/80;
+        @apply hover:bg-none hover:bg-snz-primary/50;
     }
 }
 
 .ser {
     .button--primary {
         @apply bg-none bg-ser-secondary text-white;
-        @apply hover:bg-none hover:bg-ser-primary/80;
+        @apply hover:bg-none hover:bg-ser-primary/50;
     }
 
     .button--secondary {
         @apply bg-none bg-ser-primary text-white;
-        @apply hover:bg-none hover:bg-ser-primary/80;
+        @apply hover:bg-none hover:bg-ser-primary/50;
     }
 }

templates/booking/create/step_2.html.twig

@@ -62,17 +62,25 @@
         <div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
             <div class="flex justify-between" hx-disinherit="*">
                 <button type="button"
+                        title="Buchung abbrechen"
                         hx-get="{{ path('app_booking_cancel') }}"
                         hx-target="body"
                         hx-swap="beforeend"
-                        class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
+                        class="button button--neutral w-10 h-10 px-0">
                     <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                 </button>
+                <div class="flex items-center gap-2">
+                    <a href="{{ path('app_booking_create_step_1') }}"
+                       class="button button--secondary"
+                       {{ qa_attribute('btn-back') }}>
+                        Zurück
+                    </a>
                     <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
                         Weiter zu Schritt 3
                     </button>
                 </div>
             </div>
+        </div>
     {{ form_rest(form) }}
     {{ form_end(form) }}
 {% endblock %}

templates/booking/create/step_2_participant.html.twig

@@ -37,8 +37,8 @@
         <div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
             <div class="flex justify-between">
                 <a href="{{ path('app_booking_create_step_2') }}"
-                   class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
+                   class="button button--secondary">
-                    <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
+                    Zurück
                 </a>
                 <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
                     Speichern

templates/booking/create/step_3.html.twig

@@ -72,17 +72,25 @@
         <div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
             <div class="flex justify-between" hx-disinherit="*">
                 <button type="button"
+                        title="Buchung abbrechen"
                         hx-get="{{ path('app_booking_cancel') }}"
                         hx-target="body"
                         hx-swap="beforeend"
-                        class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
+                        class="button button--neutral w-10 h-10 px-0">
                     <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                 </button>
+                <div class="flex items-center gap-2">
+                    <a href="{{ path('app_booking_create_step_2') }}"
+                       class="button button--secondary"
+                       {{ qa_attribute('btn-back') }}>
+                        Zurück
+                    </a>
                     <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
                         Weiter zu Schritt 4
                     </button>
                 </div>
             </div>
+        </div>
     {{ form_rest(form) }}
     {{ form_end(form) }}
 {% endblock %}

templates/booking/create/step_4.html.twig

@@ -565,12 +565,19 @@
         <div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
             <div class="flex justify-between" hx-disinherit="*">
                 <button type="button"
+                        title="Buchung abbrechen"
                         hx-get="{{ path('app_booking_cancel') }}"
                         hx-target="body"
                         hx-swap="beforeend"
-                        class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
+                        class="button button--neutral w-10 h-10 px-0">
                     <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                 </button>
+                <div class="flex items-center gap-2">
+                    <a href="{{ path('app_booking_create_step_3') }}"
+                       class="button button--secondary"
+                       {{ qa_attribute('btn-back') }}>
+                        Zurück
+                    </a>
                     <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
                         {% if bookingCreateDto.bookingStatus == 'A' %}
                             Anfragen
@@ -580,6 +587,7 @@
                     </button>
                 </div>
             </div>
+        </div>
     {{ form_rest(form) }}
     {{ form_end(form) }}
 {% endblock %}