From 6ce7e66441fb29acc6fb4b57bdbe953a7f5c5cd0 Mon Sep 17 00:00:00 2001
From: Stefan Hagspiel <shagspiel@dachcom.ch>
Date: Thu, 2 Apr 2026 14:17:02 +0200
Subject: [PATCH] update admin UI styles: adjust notification and avatar
 elements for improved alignment and responsiveness

---
 public/css/admin.css                     |  37 ++++++++++++++---------
 public/img/avatar.png                    | Bin 3648 -> 1553 bytes
 templates/admin/index/index.html.twig    |   2 +-
 templates/admin/login/layout.html.twig   |   1 +
 templates/admin/misc/admin_css.html.twig |  19 ++++++++++--
 5 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/public/css/admin.css b/public/css/admin.css
index 040d3ff..7b37e20 100644
--- a/public/css/admin.css
+++ b/public/css/admin.css
@@ -152,9 +152,9 @@
 
 #opendxp_avatar img {
     position: absolute;
-    left: 12px;
-    bottom: 50px;
-    width:36px;
+    left: 14px;
+    bottom: 54px;
+    width: 32px;
     border-radius: 18px;
     cursor: pointer;
 }
@@ -2328,27 +2328,34 @@ ul.leaflet-draw-actions.leaflet-draw-actions-top.leaflet-draw-actions-bottom li:
     display: none;
 }
 
-#opendxp_notification > img {
+#opendxp_notification > span.notification-icon {
     position: absolute;
-    width: 24px;
-    height: 24px;
-    top: 11px;
-    left: 18px;
+    width: 60px;
+    height: 48px;
+    top: 0;
+    left: 0;
+    background-color: var(--color-neutral-a);
+    mask: url(/bundles/opendxpadmin/img/material-icons/outline-sms-24px.svg) no-repeat center / 24px 24px;
+    -webkit-mask: url(/bundles/opendxpadmin/img/material-icons/outline-sms-24px.svg) no-repeat center / 24px 24px;
 }
 
 #notification_value {
     background-color: var(--color-neutral-a);
-    border-radius: 9px;
+    border-radius: 100px;
     color: var(--color-white);
     font-size: 10px;
-    line-height: 1.3;
-    min-height: 12px;
-    padding: 4px 4px;
+    font-weight: 600;
+    line-height: 1;
+    min-width: 18px;
+    min-height: 18px;
+    padding: 4px 5px;
     background-clip: padding-box;
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     position: absolute;
-    right: 12px;
-    top: 12px;
+    right: 9px;
+    top: 6px;
 }
 
 /** END notifications **/
diff --git a/public/img/avatar.png b/public/img/avatar.png
index 8bdb7de866fa142e75b352972314db01236bb9fc..0a0fdbb16a283bc7cfea74275dacee9e2a14cf89 100644
GIT binary patch
literal 1553
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
DJdV%?

literal 3648
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
S0Id=L0000<MNUMnLSTX*x$4va

diff --git a/templates/admin/index/index.html.twig b/templates/admin/index/index.html.twig
index 1e9f3e1..e9c3140 100644
--- a/templates/admin/index/index.html.twig
+++ b/templates/admin/index/index.html.twig
@@ -125,7 +125,7 @@
 
     {% block notification %}
         <div id="opendxp_notification" data-menu-tooltip="{{ "notifications"|trans([],'admin') }}" class="opendxp_icon_comments">
-            <img src="/bundles/opendxpadmin/img/material-icons/outline-sms-24px.svg">
+            <span class="notification-icon"></span>
             <span id="notification_value" style="display:none;"></span>
         </div>
     {% endblock %}
diff --git a/templates/admin/login/layout.html.twig b/templates/admin/login/layout.html.twig
index 208b712..4706ae8 100644
--- a/templates/admin/login/layout.html.twig
+++ b/templates/admin/login/layout.html.twig
@@ -26,6 +26,7 @@
         <style>
             #content button {
                 background: {{ customColor }};
+                color: var(--color-white);
             }
 
             #content a {
diff --git a/templates/admin/misc/admin_css.html.twig b/templates/admin/misc/admin_css.html.twig
index 125608a..b5bbbb2 100644
--- a/templates/admin/misc/admin_css.html.twig
+++ b/templates/admin/misc/admin_css.html.twig
@@ -42,15 +42,30 @@
     {% endfor %}
 {% endif %}
 
-{# CUSTOM BRANDING #}
+{# custom branding #}
 {% if adminSettings is defined and adminSettings['branding']['color_admin_interface'] is defined %}
-    {% set interfaceColor = adminSettings['branding']['color_admin_interface'] %}
+{% set interfaceColor = adminSettings['branding']['color_admin_interface'] %}
+{% if interfaceColor is not empty %}
 #opendxp_avatar {
     background-color: {{ interfaceColor }} !important;
 }
 
+#opendxp_notification {
+    background-color: {{ interfaceColor }} !important;
+}
+
+#opendxp_notification > span.notification-icon {
+    background: var(--color-white) !important;
+}
+
+#opendxp_signet {
+    background-color: {{ interfaceColor }} !important;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGNpcmNsZSBjeD0iMjU2IiBjeT0iMjU2IiByPSIxMjAiIGZpbGw9IiNFNkZGMkEiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyNCIvPjwvc3ZnPg==) !important;
+}
+
 #opendxp_navigation li:hover:after {
     background-color: {{ interfaceColor }} !important;
 }
 {% endif %}
+{% endif %}