From 539ca8b1b4b59635d3cce3da49bccc8a1175c5b1 Mon Sep 17 00:00:00 2001
From: Jeppe Krogh <kjej@aarhus.dk>
Date: Mon, 29 Jun 2026 13:31:21 +0200
Subject: [PATCH 1/2] Add some spacing and styling to the user menu

---
 assets/styles/app.css         | 40 +++++++++++++++---------
 templates/base.html.twig      | 58 ++++++++++++++++++++++-------------
 translations/messages.da.yaml |  5 +--
 translations/messages.en.yaml |  5 +--
 4 files changed, 67 insertions(+), 41 deletions(-)

diff --git a/assets/styles/app.css b/assets/styles/app.css
index c26b4d4..2ade5d3 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -230,9 +230,7 @@ h3 {
 }
 
 .user-menu__header {
-    padding: var(--itk-space-3);
-    border-bottom: 1px solid var(--itk-slate-100);
-    margin-bottom: var(--itk-space-2);
+    padding: var(--itk-space-2) var(--itk-space-3);
 }
 
 .user-menu__eyebrow {
@@ -251,6 +249,22 @@ h3 {
     color: var(--itk-slate-500);
 }
 
+.user-menu__divider {
+    height: 1px;
+    margin: var(--itk-space-2) 0;
+    background-color: var(--itk-slate-100);
+}
+
+.user-menu__group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--itk-space-1);
+}
+
+.user-menu__group-label {
+    padding: var(--itk-space-1) var(--itk-space-3);
+}
+
 .user-menu__link,
 .user-menu__logout,
 .user-menu__button {
@@ -281,10 +295,14 @@ h3 {
     cursor: pointer;
 }
 
-.user-menu__toggle {
+.user-menu__pref {
     display: flex;
     align-items: center;
-    gap: var(--itk-space-2);
+    justify-content: space-between;
+    gap: var(--itk-space-3);
+    padding: var(--itk-space-2) var(--itk-space-3);
+    font-size: var(--itk-text-sm);
+    color: var(--itk-slate-700);
 }
 
 .toggle-switch {
@@ -309,11 +327,11 @@ h3 {
     transition: transform 0.15s;
 }
 
-.user-menu__toggle[aria-checked="true"] .toggle-switch {
+.user-menu__pref[aria-checked="true"] .toggle-switch {
     background-color: var(--itk-blue);
 }
 
-.user-menu__toggle[aria-checked="true"] .toggle-switch__knob {
+.user-menu__pref[aria-checked="true"] .toggle-switch__knob {
     transform: translateX(14px);
 }
 
@@ -321,10 +339,6 @@ h3 {
     color: var(--itk-danger);
 }
 
-.user-menu__section {
-    padding: var(--itk-space-2) var(--itk-space-3);
-}
-
 .lang-toggle {
     display: inline-flex;
     border: 1px solid var(--itk-slate-200);
@@ -349,10 +363,6 @@ h3 {
     color: #fff;
 }
 
-.user-menu__section .lang-toggle {
-    margin-top: 6px;
-}
-
 .page {
     max-width: var(--itk-container);
     margin: 0 auto;
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 177618c..e4181db 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -38,30 +38,44 @@
                                 <div class="user-menu__name">{{ app.user.name }}</div>
                                 <div class="user-menu__email">{{ app.user.email }}</div>
                             </div>
-                            <div class="user-menu__section">
-                                <div class="user-menu__eyebrow">{{ 'nav.language'|trans }}</div>
-                                <div class="lang-toggle">
-                                    <a href="{{ path('app_locale', {locale: 'da', return: app.request.requestUri}) }}" class="lang-toggle__option {{ app.request.locale == 'da' ? 'lang-toggle__option--active' }}">DA</a>
-                                    <a href="{{ path('app_locale', {locale: 'en', return: app.request.requestUri}) }}" class="lang-toggle__option {{ app.request.locale == 'en' ? 'lang-toggle__option--active' }}">EN</a>
+
+                            <div class="user-menu__divider"></div>
+
+                            <div class="user-menu__group">
+                                <a href="{{ path(is_granted('ROLE_ADMIN') ? 'admin_users' : 'admin_contacts') }}" class="user-menu__link">{{ 'nav.admin'|trans }}</a>
+                            </div>
+
+                            <div class="user-menu__divider"></div>
+
+                            <div class="user-menu__group">
+                                <div class="user-menu__eyebrow user-menu__group-label">{{ 'nav.preferences'|trans }}</div>
+                                <div class="user-menu__pref">
+                                    <span>{{ 'nav.language'|trans }}</span>
+                                    <div class="lang-toggle">
+                                        <a href="{{ path('app_locale', {locale: 'da', return: app.request.requestUri}) }}" class="lang-toggle__option {{ app.request.locale == 'da' ? 'lang-toggle__option--active' }}">DA</a>
+                                        <a href="{{ path('app_locale', {locale: 'en', return: app.request.requestUri}) }}" class="lang-toggle__option {{ app.request.locale == 'en' ? 'lang-toggle__option--active' }}">EN</a>
+                                    </div>
                                 </div>
+                                <form id="mascotToggleForm" method="post" action="{{ path('app_settings_mascot_toggle') }}" class="user-menu__form">
+                                    <input type="hidden" name="_token" value="{{ csrf_token('toggle-mascot') }}">
+                                    <input type="hidden" name="return" value="{{ app.request.requestUri }}">
+                                    <button type="submit" class="user-menu__button user-menu__pref" role="switch" aria-checked="{{ app.user.mascotEnabled ? 'true' : 'false' }}">
+                                        {{ 'nav.show_mascot'|trans }}
+                                        <span class="toggle-switch" aria-hidden="true"><span class="toggle-switch__knob"></span></span>
+                                    </button>
+                                </form>
+                                <form id="starsToggleForm" method="post" action="{{ path('app_settings_stars_toggle') }}" class="user-menu__form">
+                                    <input type="hidden" name="_token" value="{{ csrf_token('toggle-stars') }}">
+                                    <input type="hidden" name="return" value="{{ app.request.requestUri }}">
+                                    <button type="submit" class="user-menu__button user-menu__pref" role="switch" aria-checked="{{ app.user.starsEnabled ? 'true' : 'false' }}">
+                                        {{ 'nav.show_stars'|trans }}
+                                        <span class="toggle-switch" aria-hidden="true"><span class="toggle-switch__knob"></span></span>
+                                    </button>
+                                </form>
                             </div>
-                            <a href="{{ path(is_granted('ROLE_ADMIN') ? 'admin_users' : 'admin_contacts') }}" class="user-menu__link">{{ 'nav.admin'|trans }}</a>
-                            <form id="mascotToggleForm" method="post" action="{{ path('app_settings_mascot_toggle') }}" class="user-menu__form">
-                                <input type="hidden" name="_token" value="{{ csrf_token('toggle-mascot') }}">
-                                <input type="hidden" name="return" value="{{ app.request.requestUri }}">
-                                <button type="submit" class="user-menu__button user-menu__toggle" role="switch" aria-checked="{{ app.user.mascotEnabled ? 'true' : 'false' }}">
-                                    <span class="toggle-switch" aria-hidden="true"><span class="toggle-switch__knob"></span></span>
-                                    {{ 'nav.show_mascot'|trans }}
-                                </button>
-                            </form>
-                            <form id="starsToggleForm" method="post" action="{{ path('app_settings_stars_toggle') }}" class="user-menu__form">
-                                <input type="hidden" name="_token" value="{{ csrf_token('toggle-stars') }}">
-                                <input type="hidden" name="return" value="{{ app.request.requestUri }}">
-                                <button type="submit" class="user-menu__button user-menu__toggle" role="switch" aria-checked="{{ app.user.starsEnabled ? 'true' : 'false' }}">
-                                    <span class="toggle-switch" aria-hidden="true"><span class="toggle-switch__knob"></span></span>
-                                    {{ 'nav.show_stars'|trans }}
-                                </button>
-                            </form>
+
+                            <div class="user-menu__divider"></div>
+
                             <a href="{{ path('app_logout') }}" class="user-menu__logout">{{ 'nav.logout'|trans }}</a>
                         </div>
                     </div>
diff --git a/translations/messages.da.yaml b/translations/messages.da.yaml
index 9880564..f1b03f5 100644
--- a/translations/messages.da.yaml
+++ b/translations/messages.da.yaml
@@ -75,11 +75,12 @@ nav:
     areas: Områder
     users: Brugere
     admin: Administration
+    preferences: Indstillinger
     language: Sprog
     signed_in_as: Logget ind som
     logout: Log ud
-    show_mascot: Din ven Glimt
-    show_stars: Flyvende stjerner
+    show_mascot: Din ven Glimt ⭐
+    show_stars: Flyvende stjerner 💫
 
 action:
     new: Opret
diff --git a/translations/messages.en.yaml b/translations/messages.en.yaml
index e42c1da..e0ac7b9 100644
--- a/translations/messages.en.yaml
+++ b/translations/messages.en.yaml
@@ -75,11 +75,12 @@ nav:
     areas: Areas
     users: Users
     admin: Administration
+    preferences: Preferences
     language: Language
     signed_in_as: Signed in as
     logout: Sign out
-    show_mascot: Show mascot
-    show_stars: Show flying stars
+    show_mascot: Show Glimt ⭐
+    show_stars: Show flying stars 💫x
 
 action:
     new: New

From 5bdb4300f405a860e1fc2e953e473fb220e94f66 Mon Sep 17 00:00:00 2001
From: Jeppe Krogh <kjej@aarhus.dk>
Date: Mon, 29 Jun 2026 15:48:02 +0200
Subject: [PATCH 2/2] Updated changelog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 38df1d4..ef87ca4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+* [PR-20](https://github.com/itk-dev/itk-project-database/pull/20)
+  Minor improvements to the user menu styling.
 * [PR-18](https://github.com/itk-dev/itk-project-database/pull/18)
   Rework the dashboard with an outstanding-work panel and a redesigned activity
   feed, add help text to every graph, and fix the mascot's finish nudges.