IBX-3070: Fix header user thumbnail (#475)

ibexa · Jun 27, 2022 · 0849906 · 0849906
1 parent 603fe2a
commit 0849906
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 deletions.
diff --git a/src/bundle/Resources/public/scss/_header-user-menu.scss b/src/bundle/Resources/public/scss/_header-user-menu.scss
@@ -24,9 +24,8 @@
     }
 
     &__image {
-        width: calculateRem(30px);
-        height: calculateRem(30px);
-        border: calculateRem(3px) solid $ibexa-color-black;
+        width: calculateRem(24px);
+        height: calculateRem(24px);
         border-radius: 50%;
         cursor: pointer;
     }
@@ -48,6 +47,12 @@
         }
     }
 
+    &__thumbnail {
+        display: flex;
+        border: calculateRem(3px) solid $ibexa-color-black;
+        border-radius: 50%;
+    }
+
     &__notifications-toggler {
         display: flex;
         align-items: flex-end;

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
@@ -16,17 +16,19 @@
             <span class="ibexa-header-user-menu__notice-dot ibexa-header-user-menu__notice-dot--no-notice"></span>
         </div>
         <button class="ibexa-header-user-menu__toggler">
-            {% if user_image.mimeType == "image/svg+xml" %}
-                <svg width="30" height="30" xmlns="http://www.w3.org/2000/svg">
-                    <use xlink:href="{{ user_image.resource }}"></use>
-                </svg>
-            {% else %}
-                <img
-                    class="ibexa-header-user-menu__image"
-                    src="{{ user_image.resource }}"
-                    alt="{{ user.name }}"
-                />
-            {% endif %}
+            <div class="ibexa-header-user-menu__thumbnail">
+                {% if user_image.mimeType == "image/svg+xml" %}
+                    <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+                        <use xlink:href="{{ user_image.resource }}"></use>
+                    </svg>
+                {% else %}
+                    <img
+                        class="ibexa-header-user-menu__image"
+                        src="{{ user_image.resource }}"
+                        alt="{{ user.name }}"
+                    />
+                {% endif %}
+            </div>
         </button>
 
         {{ include('@ibexadesign/account/notifications/modal.html.twig') }}