feat: improved button sizes in mobile view

assets/styles/components/button.css

@@ -1,6 +1,6 @@
 .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 inline-flex items-center justify-center space-x-2 h-8 leading-8 md:h-10 md:leading-10 px-4 md:px-8 cursor-pointer;
+    @apply uppercase leading-none text-center text-sm md:text-base;
     @apply transition-colors outline-none focus:outline-2 focus:outline-offset-2 focus:outline-primary-dark;
     @apply rounded-md;
 }

templates/_partials/_cancel_button.html.twig

@@ -0,0 +1,7 @@
+<button type="button"
+        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-8 h-8 md:w-10 md:h-10">
+    <svg class="w-6 h-6 md:w-8 md: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>

templates/booking/create/modal_cancel.html.twig

@@ -4,19 +4,19 @@
 
 {% block content %}
     <div class="pb-8">
-        Willst du den Buchungsvorgang wirklich abbrechen?
+        Möchtest du den Buchungsvorgang wirklich abbrechen?
     </div>
-    <div class="flex justify-between">
+    <div class="flex flex-col space-y-4 md:flex-row md:space-y-0 justify-between">
         <button type="button"
                 hx-post="{{ path('app_booking_cancel') }}"
                 hx-target="body"
                 class="button button--primary">
-            Abbrechen
+            Ja, Buchung abbrechen
         </button>
         <button type="button"
                 {{ stimulus_action('modal', 'close') }}
                 class="button button--secondary">
-            Weiter
+            Nein, Buchung abschließen
         </button>
     </div>
 {% endblock %}

templates/booking/create/step_1.html.twig

@@ -87,13 +87,7 @@
         </div>
         <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"
-                        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">
-                    <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>
+                {% include '_partials/_cancel_button.html.twig' %}
                 <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit')}}>
                     Weiter zu Schritt 2
                 </button>

templates/booking/create/step_2.html.twig

@@ -61,14 +61,7 @@
         </div>
         <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="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>
+                {% include '_partials/_cancel_button.html.twig' %}
                 <div class="flex items-center gap-2">
                     <a href="{{ path('app_booking_create_step_1') }}"
                        class="button button--secondary"

templates/booking/create/step_3.html.twig

@@ -71,14 +71,7 @@
         </div>
         <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="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>
+                {% include '_partials/_cancel_button.html.twig' %}
                 <div class="flex items-center gap-2">
                     <a href="{{ path('app_booking_create_step_2') }}"
                        class="button button--secondary"

templates/booking/create/step_4.html.twig

@@ -564,14 +564,7 @@
         </div>
         <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="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>
+                {% include '_partials/_cancel_button.html.twig' %}
                 <div class="flex items-center gap-2">
                     <a href="{{ path('app_booking_create_step_3') }}"
                        class="button button--secondary"

templates/booking/edit/index.html.twig

@@ -86,8 +86,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" hx-disinherit="*">
                 <a href="{{ isDirty ? path('app_booking_edit_cancel', {id: bookingData.id}) : path('app_bookings') }}"
-                   class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
-                    <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>
+                   class="inline-flex items-center justify-center bg-gray-200 rounded-md w-8 h-8 md:w-10 md:h-10">
+                    <svg class="w-6 h-6 md:w-8 md: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>
                 </a>
                 {% if isDirty %}
                     <button type="submit"

templates/booking/edit/participant.html.twig

@@ -34,9 +34,9 @@
         <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_edit', {id: bookingDto.booking.id}) }}"
-                   class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10"
+                   class="inline-flex items-center justify-center bg-gray-200 rounded-md w-8 h-8 md:w-10 md:h-10"
                    {{ qa_attribute('btn-cancel') }}>
-                    <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>
+                    <svg class="w-6 h-6 md:w-8 md: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>
                 </a>
                 <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
                     Speichern