IBX-7613: header-user-menu UI fixes

ibexa · Mar 6, 2024 · e17e5ec · e17e5ec
1 parent 9ca6366
commit e17e5ec
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 36 deletions.
diff --git a/src/bundle/Resources/public/scss/_header-user-menu.scss b/src/bundle/Resources/public/scss/_header-user-menu.scss
@@ -7,8 +7,7 @@
 
     &__popup-menu {
         z-index: 1060;
-        top: calculateRem(65px);
-        right: calculateRem(24px);
+        top: calculateRem(53px);
         min-width: calculateRem(200px);
         padding: 0;
 
@@ -25,57 +24,50 @@
         font-size: $ibexa-text-font-size-small;
     }
 
+    .ibexa-focus-mode-form {
+        color: $ibexa-color-dark;
+        margin-top: calculateRem(12px);
+    }
+
     &__toggler {
         display: flex;
         align-items: center;
         position: relative;
         margin-left: calculateRem(16px);
-        padding: calculateRem(2px) calculateRem(20px) calculateRem(2px) calculateRem(2px);
-        border-radius: calculateRem(12px);
-        border: calculateRem(1px) solid transparent;
+        padding: calculateRem(2px);
+        border-radius: calculateRem(13px);
+        border: 0;
         background: rgba($ibexa-color-white, 0.1);
 
-        &::before,
-        &::after {
-            content: '';
-            position: absolute;
-            z-index: 1;
-            width: calculateRem(7px);
-            height: calculateRem(1px);
-            background: $ibexa-color-white;
-        }
-
-        &::before {
-            transform: rotate(135deg);
-            right: calculateRem(5px);
-        }
-
-        &::after {
-            transform: rotate(-135deg);
-            right: calculateRem(10px);
-        }
-
-        &:hover {
-            &::before,
-            &::after {
-                background: $ibexa-color-info;
-            }
+        .ibexa-icon {
+            fill: $ibexa-color-white;
+            margin-left: calculateRem(5px);
+            margin-right: calculateRem(4px);
+            transform: rotate(0deg);
+            transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
         }
 
         &--expanded {
-            &::before {
-                transform: rotate(45deg);
+            .ibexa-icon {
+                transform: rotate(-180deg);
             }
+        }
 
-            &::after {
-                transform: rotate(-45deg);
+        &:hover {
+            .ibexa-icon {
+                fill: $ibexa-color-info;
             }
         }
     }
 
     &__thumbnail-wrapper {
         display: flex;
         border-radius: 50%;
+
+        .ibexa-user-thumbnail {
+            width: calculateRem(22px);
+            height: calculateRem(22px);
+        }
     }
 
     &__notifications-toggler {

diff --git a/src/bundle/Resources/public/scss/_popup-menu.scss b/src/bundle/Resources/public/scss/_popup-menu.scss
@@ -73,7 +73,7 @@
         width: 100%;
         cursor: pointer;
         padding: calculateRem(9px);
-        color: $ibexa-color-black;
+        color: $ibexa-color-dark;
         font-size: calculateRem(14px);
         text-align: left;
         text-decoration: none;

diff --git a/src/bundle/Resources/views/themes/admin/ui/focus_mode_form.html.twig b/src/bundle/Resources/views/themes/admin/ui/focus_mode_form.html.twig
@@ -2,6 +2,6 @@
 
 {% form_theme form '@ibexadesign/ui/form_fields.html.twig'  %}
 
-{{ form_start(form, { attr: { class: 'mt-2'}}) }}
+{{ form_start(form, { attr: { class: 'ibexa-focus-mode-form' }}) }}
     {{ form_widget(form.enabled) }}
 {{ form_end(form) }}
diff --git a/src/bundle/Resources/views/themes/admin/ui/menu/user.html.twig b/src/bundle/Resources/views/themes/admin/ui/menu/user.html.twig
@@ -21,6 +21,9 @@
                     user_content: user.content,
                 } %}
             </div>
+            <svg class="ibexa-icon ibexa-icon--tiny">
+                <use xlink:href="{{ ibexa_icon_path('caret-down') }}"></use>
+            </svg>
         </button>
 
         {{ include('@ibexadesign/account/notifications/modal.html.twig') }}