From 2a8bfe10fc157d168be23920637cb7aa865e799d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Tue, 7 Jun 2022 15:58:54 +0200
Subject: [PATCH] Improve theming of buttons and product detail page for site
 ser

---
 .../Assets/scss/components/_buttons.scss       |  3 ++-
 .../Assets/scss/components/_tooltips.scss      |  4 ++--
 .../Templates/AjaxTable/Datestable.html        | 18 +++++++++---------
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
index 89939a49..dee0f7cd 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
@@ -26,7 +26,7 @@
 
     &--active,
     &--secondary {
-        @apply bg-ep-primary;
+        @apply bg-ep-secondary;
         @apply sbw:bg-sbw-primary;
         @apply snz:bg-snz-primary;
         @apply uch:bg-uch-primary;
@@ -40,6 +40,7 @@
     &--dark {
         @apply bg-ep-primary-dark;
         @apply ser:bg-ser-primary;
+        @apply ser:hover:bg-ser-secondary ser:group-hover:bg-ser-secondary;
     }
 
     &--light {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_tooltips.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_tooltips.scss
index 373bde97..2f868ced 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_tooltips.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_tooltips.scss
@@ -1,7 +1,7 @@
 @import "~cooltipz-css/src/cooltipz";
 
 :root {
-    --cooltipz-bg-color: theme('colors.ep.secondary');
-    --cooltipz-border-color: theme('colors.ep.secondary');
+    --cooltipz-bg-color: theme('colors.gray.700');
+    --cooltipz-border-color: theme('colors.gray.700');
     --cooltipz-text-color: theme('colors.white');
 }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html
index cdfb41ae..08025cd1 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html
@@ -49,7 +49,7 @@
                                 <f:if condition="{bookable} && {row.available} && {row.showBookingButton}">
                                     <f:then>
                                         <button type="button"
-                                                class="text-left text-ep-primary-light text-sm md:text-base"
+                                                class="text-left text-ep-primary-light ser:text-ser-primary text-sm md:text-base"
                                                 data-action="product-details#loadPrices"
                                                 data-date-uid="{row.dateUid}">
                                             {row.dateStart} - {row.dateEnd}
@@ -93,7 +93,7 @@
                                         </span>
                                     </f:if>
                                     <button type="button"
-                                            class="text-ep-primary-light col-span-2 text-sm md:text-base text-left leading-none whitespace-nowrap p-1"
+                                            class="text-ep-primary-light ser:text-ser-primary col-span-2 text-sm md:text-base text-left leading-none whitespace-nowrap p-1"
                                             data-action="pricetable#openModal"
                                             data-type="services"
                                             data-uid="{row.dateUid}"
@@ -121,7 +121,7 @@
                                 <f:if condition="{row.showBookingButton}">
                                     <f:then>
                                         <button type="button"
-                                                class="flex space-x-1 items-center {f:if(condition: row.available, then: 'text-ep-primary-light', else: 'text-gray-300')}"
+                                                class="flex space-x-1 items-center {f:if(condition: row.available, then: 'text-ep-primary-light ser:text-ser-primary', else: 'text-gray-300')}"
                                                 data-action="product-details#loadPrices"
                                                 data-date-uid="{row.dateUid}">
                                             <svg class="w-6 h-6 hidden md:block">
@@ -135,7 +135,7 @@
                                     <f:else>
                                         <a href="{f:uri.typolink(parameter: settings.travelAlertPageUid)}"
                                            title="Reisen-Alert"
-                                           class="flex space-x-1 items-center text-ep-primary-light">
+                                           class="flex space-x-1 items-center text-ep-primary-light ser:text-ser-primary">
                                             <svg class="w-6 h-6 hidden md:block">
                                                 <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
                                             </svg>
@@ -156,7 +156,7 @@
                         <li class="py-2">
                         <button type="button"
                                 data-action="pricetable#toggleSurcharge"
-                                class="flex items-center space-x-1 focus:outline-none text-ep-primary-light">
+                                class="flex items-center space-x-1 focus:outline-none text-ep-primary-light ser:text-ser-primary">
                             <svg class="w-6 h-6">
                                 <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
                             </svg>
@@ -172,7 +172,7 @@
                         <li class="py-2">
                         <button type="button"
                                 data-action="pricetable#toggleDiscount"
-                                class="flex items-center space-x-1 focus:outline-none text-ep-primary-light">
+                                class="flex items-center space-x-1 focus:outline-none text-ep-primary-light ser:text-ser-primary">
                             <svg class="w-6 h-6">
                                 <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
                             </svg>
@@ -187,7 +187,7 @@
                     <f:if condition="{dates -> f:count()} > 5">
                         <li class="py-2">
                         <button type="button"
-                                class="flex items-center space-x-1 focus:outline-none text-ep-primary-light"
+                                class="flex items-center space-x-1 focus:outline-none text-ep-primary-light ser:text-ser-primary"
                                 data-action="pricetable#toggleRows">
                             <svg class="w-6 h-6">
                                 <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-plus-circle"
@@ -203,7 +203,7 @@
                         <li class="py-2">
                         <a href="{altProductLink}"
                            title="{altLabel}"
-                           class="flex items-center space-x-1 focus:outline-none text-ep-primary-light">
+                           class="flex items-center space-x-1 focus:outline-none text-ep-primary-light ser:text-ser-primary">
                             <svg class="w-6 h-6">
                                 <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
                             </svg>
@@ -223,7 +223,7 @@
             <div class="absolute inset-0 w-full h-full bg-overlay-black z-25"
                  data-action="click->modal#close"></div>
             <div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 w-full max-w-xl px-4">
-                <div class="shadow flex items-center justify-between p-4 bg-ep-primary-light text-white rounded-t">
+                <div class="shadow flex items-center justify-between p-4 bg-ep-primary-light ser:bg-ser-primary text-white rounded-t">
                     <span class="text-xl font-bold">
                         Inklusivleistungen {hotel.name}
                     </span>