From 77dd71b8e98fb2850c56f3db85d11646aa5b156e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Grabowski?= <michal.grabowski@ibexa.co>
Date: Tue, 8 Nov 2022 16:08:07 +0100
Subject: [PATCH 1/3] IBX-4213: Missing hovers on icons

---
 .../Resources/public/scss/_buttons.scss       | 28 +++++++++
 .../public/scss/_content-type-selector.scss   | 22 ++++++-
 .../public/scss/_header-user-menu.scss        | 14 ++++-
 .../Resources/public/scss/_main-header.scss   | 60 +++++++++++++------
 .../admin/ui/component/input_text.html.twig   |  4 +-
 .../themes/admin/ui/form_fields.html.twig     |  4 ++
 6 files changed, 109 insertions(+), 23 deletions(-)

diff --git a/src/bundle/Resources/public/scss/_buttons.scss b/src/bundle/Resources/public/scss/_buttons.scss
index 0ce1f18182..c940d9e2b5 100644
--- a/src/bundle/Resources/public/scss/_buttons.scss
+++ b/src/bundle/Resources/public/scss/_buttons.scss
@@ -19,6 +19,10 @@
 
     &:hover {
         border-color: transparent;
+
+        .ibexa-icon {
+            fill: $ibexa-color-primary;
+        }
     }
 
     &--primary.ibexa-btn {
@@ -31,6 +35,10 @@
         &:hover {
             color: $ibexa-color-white;
             box-shadow: 0 0 0 transparent, $ibexa-btn-hover-box-shadow;
+
+            .ibexa-icon {
+                fill: $ibexa-color-white;
+            }
         }
 
         &:hover:focus {
@@ -95,6 +103,10 @@
 
         &:hover {
             border-color: $ibexa-color-dark;
+
+            .ibexa-icon {
+                fill: $ibexa-color-dark;
+            }
         }
 
         &:focus {
@@ -153,6 +165,10 @@
             background-color: $ibexa-color-dark;
             box-shadow: 0 0 0 transparent, $ibexa-btn-hover-box-shadow-dark;
 
+            .ibexa-icon {
+                fill: $ibexa-color-white;
+            }
+
             &:focus {
                 box-shadow: $ibexa-btn-focus-box-shadow, $ibexa-btn-hover-box-shadow-dark;
             }
@@ -184,6 +200,10 @@
             box-shadow: 0 0 0 transparent, $ibexa-btn-hover-box-shadow-info;
             background-color: $ibexa-color-info;
 
+            .ibexa-icon {
+                fill: $ibexa-color-white;
+            }
+
             &:focus {
                 color: $ibexa-color-white;
                 box-shadow: $ibexa-btn-focus-box-shadow-info, $ibexa-btn-hover-box-shadow-info;
@@ -204,6 +224,10 @@
             color: $ibexa-color-dark;
             fill: $ibexa-color-dark;
             border-color: $ibexa-color-dark;
+
+            .ibexa-icon {
+                fill: $ibexa-color-dark;
+            }
         }
 
         &.ibexa-btn--inverted-hover {
@@ -211,6 +235,10 @@
                 color: $ibexa-color-white;
                 fill: $ibexa-color-white;
                 border-color: $ibexa-color-white;
+
+                .ibexa-icon {
+                    fill: $ibexa-color-white;
+                }
             }
         }
 
diff --git a/src/bundle/Resources/public/scss/_content-type-selector.scss b/src/bundle/Resources/public/scss/_content-type-selector.scss
index dcc8a8912b..37483a6a36 100644
--- a/src/bundle/Resources/public/scss/_content-type-selector.scss
+++ b/src/bundle/Resources/public/scss/_content-type-selector.scss
@@ -10,15 +10,31 @@
             border-bottom: calculateRem(1px) solid transparent;
             transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
 
+            .ibexa-icon--toggle {
+                position: absolute;
+                right: calculateRem(12px);
+                transition: var(--bs-accordion-btn-icon-transition);
+            }
+
             &:not(.collapsed) {
                 box-shadow: calculateRem(4px) calculateRem(22px) calculateRem(47px) 0 rgba($ibexa-color-info, 0.05);
                 border-bottom-color: $ibexa-color-light;
+
+                .ibexa-icon--toggle {
+                    transform: var(--bs-accordion-btn-icon-transform);
+                }
+            }
+
+            &:hover {
+                color: $ibexa-color-primary;
+
+                .ibexa-icon--toggle {
+                    fill: $ibexa-color-primary;
+                }
             }
 
             &::after {
-                width: calculateRem(12px);
-                height: calculateRem(12px);
-                background-size: unset;
+                display: none;
             }
         }
     }
diff --git a/src/bundle/Resources/public/scss/_header-user-menu.scss b/src/bundle/Resources/public/scss/_header-user-menu.scss
index 20ce7dab69..d714a0ea39 100644
--- a/src/bundle/Resources/public/scss/_header-user-menu.scss
+++ b/src/bundle/Resources/public/scss/_header-user-menu.scss
@@ -29,7 +29,7 @@
         margin-left: calculateRem(8px);
         border: none;
 
-        &:after {
+        &::after {
             content: '';
             width: 0;
             height: 0;
@@ -38,6 +38,12 @@
             border-right: calculateRem(4px) solid transparent;
             border-top: calculateRem(4px) solid $ibexa-color-white;
         }
+
+        &:hover {
+            &::after {
+                border-top: calculateRem(4px) solid $ibexa-color-info;
+            }
+        }
     }
 
     &__thumbnail-wrapper {
@@ -53,6 +59,12 @@
         height: calculateRem(24px);
         padding-bottom: calculateRem(4px);
         cursor: pointer;
+
+        &:hover {
+            .ibexa-icon {
+                fill: $ibexa-color-info;
+            }
+        }
     }
 
     &__notice-dot {
diff --git a/src/bundle/Resources/public/scss/_main-header.scss b/src/bundle/Resources/public/scss/_main-header.scss
index 910d603382..64bda6730b 100644
--- a/src/bundle/Resources/public/scss/_main-header.scss
+++ b/src/bundle/Resources/public/scss/_main-header.scss
@@ -46,11 +46,17 @@
         border-color: $ibexa-color-info;
         background: $ibexa-color-info-800;
 
-        &.ibexa-input--text:not(:disabled) {
-            &:focus,
-            &:hover {
-                border-color: $ibexa-color-info;
-                background: $ibexa-color-info-800;
+        &.ibexa-input--text:not(:focus):placeholder-shown {
+            border-color: transparent;
+        }
+
+        &.ibexa-input--text {
+            &:not(:disabled) {
+                &:focus,
+                &:hover {
+                    border-color: $ibexa-color-info;
+                    background: $ibexa-color-info-800;
+                }
             }
         }
 
@@ -58,20 +64,32 @@
             color: $ibexa-color-light;
         }
 
-        &.ibexa-input--text:not(:focus):placeholder-shown {
-            border-color: transparent;
-        }
-
         &::placeholder {
             color: $ibexa-color-light;
         }
     }
 
-    .ibexa-input-text-wrapper__action-btn--search {
-        background: $ibexa-color-info-600;
-        width: calculateRem(58px);
-        height: calculateRem(48px);
-        transform: translateX(10px);
+    .ibexa-input-text-wrapper__action-btn {
+        &:hover {
+            .ibexa-icon {
+                fill: $ibexa-color-info;
+            }
+        }
+
+        &--search {
+            background: $ibexa-color-info-600;
+            width: calculateRem(58px);
+            height: calculateRem(48px);
+            transform: translateX(10px);
+
+            &:hover {
+                box-shadow: 0 calculateRem(22px) calculateRem(24px) 0 rgba($ibexa-color-info, 0.2);
+
+                .ibexa-icon {
+                    fill: $ibexa-color-white;
+                }
+            }
+        }
     }
 
     &__user-menu-column {
@@ -80,8 +98,16 @@
         align-items: center;
         justify-content: flex-end;
     }
-}
 
-.ibexa-input--text:not(:focus):placeholder-shown + .ibexa-input-text-wrapper__actions .ibexa-input-text-wrapper__action-btn--search {
-    background-color: transparent;
+    .ibexa-input--text:not(:focus):placeholder-shown + .ibexa-input-text-wrapper__actions .ibexa-input-text-wrapper__action-btn--search {
+        background-color: transparent;
+
+        &:hover {
+            box-shadow: none;
+
+            .ibexa-icon {
+                fill: $ibexa-color-info;
+            }
+        }
+    }
 }
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig
index 0e8f467237..775219c846 100644
--- a/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig
@@ -30,7 +30,7 @@
             {% if is_password_input %}
                 <button
                     type="button"
-                    class="btn ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--password-toggler"
+                    class="btn ibexa-btn ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--password-toggler"
                     tabindex="5"
                 >
                     <svg class="ibexa-icon ibexa-icon--small ibexa-input-text-wrapper__password-show">
@@ -41,7 +41,7 @@
                     </svg>
                 </button>
             {% elseif has_search %}
-                <button type="{{ search_button_type|default('submit') }}" class="btn ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--search" tabindex="-1">
+                <button type="{{ search_button_type|default('submit') }}" class="btn ibexa-btn ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--search" tabindex="-1">
                     <svg class="ibexa-icon ibexa-icon--small">
                         <use xlink:href="{{ ibexa_icon_path('search') }}"></use>
                     </svg>
diff --git a/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig b/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig
index fd0e01014b..96f630cc64 100644
--- a/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig
@@ -93,6 +93,10 @@
                 <span class="ibexa-content-type-selector__group-title accordion-header">
                     <button type="button" class="accordion-button {% if not loop.first %} collapsed{% endif %}" data-bs-toggle="collapse" data-bs-target="#{{ group_label }}">
                         {{ choice_translation_domain is same as(false) ? group_label : group_label|trans({}, choice_translation_domain) }}
+
+                        <svg class="ibexa-icon ibexa-icon--tiny-small ibexa-icon--toggle">
+                            <use xlink:href="{{ ibexa_icon_path('caret-down') }}"></use>
+                        </svg>
                     </button>
                 </span>
                 <div class="ibexa-content-type-selector__list-wrapper accordion-collapse collapse{% if loop.first %} show{% endif %}" id="{{ group_label }}">

From 91c2b82fa1bb77a18d91c9af454eebb5fe1dac32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Grabowski?= <michal.grabowski@ibexa.co>
Date: Mon, 14 Nov 2022 12:05:35 +0100
Subject: [PATCH 2/3] added missing classes

---
 src/bundle/Resources/public/scss/_inputs.scss             | 8 --------
 .../views/themes/admin/ui/component/input_text.html.twig  | 8 ++++----
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/src/bundle/Resources/public/scss/_inputs.scss b/src/bundle/Resources/public/scss/_inputs.scss
index 3089b9a283..ab16b198cb 100644
--- a/src/bundle/Resources/public/scss/_inputs.scss
+++ b/src/bundle/Resources/public/scss/_inputs.scss
@@ -370,14 +370,6 @@
         width: calculateRem(24px);
         height: calculateRem(24px);
         padding: 0;
-        fill: $ibexa-color-dark;
-
-        &--clear {
-            .ibexa-icon {
-                width: calculateRem(8px);
-                height: calculateRem(8px);
-            }
-        }
     }
 
     &--type-number {
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig
index 775219c846..1aa38698b8 100644
--- a/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig
@@ -19,18 +19,18 @@
         {% block actions %}
             <button 
                 type="button" 
-                class="btn ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--clear" 
+                class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--clear"
                 tabindex="-1"
                 {% if should_clear_button_send_form %}data-send-form-after-clearing{% endif %}
             >
-                <svg class="ibexa-icon">
+                <svg class="ibexa-icon ibexa-icon--tiny">
                     <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
                 </svg>
             </button>
             {% if is_password_input %}
                 <button
                     type="button"
-                    class="btn ibexa-btn ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--password-toggler"
+                    class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--password-toggler"
                     tabindex="5"
                 >
                     <svg class="ibexa-icon ibexa-icon--small ibexa-input-text-wrapper__password-show">
@@ -41,7 +41,7 @@
                     </svg>
                 </button>
             {% elseif has_search %}
-                <button type="{{ search_button_type|default('submit') }}" class="btn ibexa-btn ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--search" tabindex="-1">
+                <button type="{{ search_button_type|default('submit') }}" class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--search" tabindex="-1">
                     <svg class="ibexa-icon ibexa-icon--small">
                         <use xlink:href="{{ ibexa_icon_path('search') }}"></use>
                     </svg>

From 4358fea48e0bcc4eeda1c539de47fa2c58d6bbda Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Grabowski?= <michal.grabowski@ibexa.co>
Date: Mon, 14 Nov 2022 12:11:44 +0100
Subject: [PATCH 3/3] absolute to flex

---
 src/bundle/Resources/public/scss/_content-type-selector.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/bundle/Resources/public/scss/_content-type-selector.scss b/src/bundle/Resources/public/scss/_content-type-selector.scss
index 37483a6a36..79040d2144 100644
--- a/src/bundle/Resources/public/scss/_content-type-selector.scss
+++ b/src/bundle/Resources/public/scss/_content-type-selector.scss
@@ -5,14 +5,13 @@
 
     &__group-title {
         .accordion-button {
+            justify-content: space-between;
             font-size: $ibexa-text-font-size-medium;
             font-weight: 600;
             border-bottom: calculateRem(1px) solid transparent;
             transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
 
             .ibexa-icon--toggle {
-                position: absolute;
-                right: calculateRem(12px);
                 transition: var(--bs-accordion-btn-icon-transition);
             }