From 1a226d73bd81e8482b6b73456874ebc7659e32b0 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Thu, 20 Feb 2025 12:09:01 +0100
Subject: [PATCH] fix(headerbar): profile menu design changes

---
 components/header-bar/i18n/en.pot             |  34 ++--
 .../src/__e2e__/stories/me-with-avatar.js     |   1 +
 .../src/debug-info/debug-info-menu-item.js    |  41 +++--
 ..._headerbar_contains_a_profile_menu.feature |   8 +-
 ...con_if_the_user_does_not_have_an_avatar.js |   6 +-
 ...an_image_icon_if_the_user_has_an_avatar.js |   6 +-
 .../the_user_can_edit_his_profile.js          |   6 +-
 ...the_user_can_go_to_the_about_dhis2_page.js |   2 +-
 .../the_user_can_go_to_the_help_page.js       |   2 +-
 .../the_user_can_log_out.js                   |   2 +-
 ...e_user_name_and_username_are_displayed.js} |  12 +-
 .../index.js                                  |   4 +-
 components/header-bar/src/header-bar.js       |   4 +-
 .../header-bar/src/header-bar.prod.stories.js |   1 +
 .../src/profile-menu/profile-header.js        | 106 +++++------
 .../src/profile-menu/profile-menu.js          | 169 ++++++++++--------
 .../src/profile-menu/update-notification.js   |  58 ++++--
 components/header-bar/src/profile.js          |   6 +-
 18 files changed, 255 insertions(+), 213 deletions(-)
 rename components/header-bar/src/features/the_headerbar_contains_a_profile_menu/{the_user_name_and_email_are_displayed.js => the_user_name_and_username_are_displayed.js} (58%)

diff --git a/components/header-bar/i18n/en.pot b/components/header-bar/i18n/en.pot
index b24ee470f4..1c12896a8d 100644
--- a/components/header-bar/i18n/en.pot
+++ b/components/header-bar/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-06-12T03:40:49.012Z\n"
-"PO-Revision-Date: 2024-06-12T03:40:49.013Z\n"
+"POT-Creation-Date: 2025-02-20T09:30:45.543Z\n"
+"PO-Revision-Date: 2025-02-20T09:30:45.547Z\n"
 
 msgid "Search apps"
 msgstr "Search apps"
@@ -47,32 +47,32 @@ msgstr "Online"
 msgid "Offline"
 msgstr "Offline"
 
-msgid "Edit profile"
-msgstr "Edit profile"
+msgid "Logged in as "
+msgstr "Logged in as "
 
 msgid "Settings"
 msgstr "Settings"
 
-msgid "Account"
-msgstr "Account"
+msgid "Account security"
+msgstr "Account security"
+
+msgid "My profile"
+msgstr "My profile"
 
 msgid "Help"
 msgstr "Help"
 
-msgid "About DHIS2"
-msgstr "About DHIS2"
-
-msgid "Logout"
-msgstr "Logout"
+msgid "System info"
+msgstr "System info"
 
-msgid "New {{appName}} version available"
-msgstr "New {{appName}} version available"
+msgid "Log out"
+msgstr "Log out"
 
-msgid "New app version available"
-msgstr "New app version available"
+msgid "New {{appName}} version available — Reload to update"
+msgstr "New {{appName}} version available — Reload to update"
 
-msgid "Click to reload"
-msgstr "Click to reload"
+msgid "New app version available — Reload to update"
+msgstr "New app version available — Reload to update"
 
 msgid "header bar profile"
 msgstr "header bar profile"
diff --git a/components/header-bar/src/__e2e__/stories/me-with-avatar.js b/components/header-bar/src/__e2e__/stories/me-with-avatar.js
index 0c41c255c3..33526161e3 100644
--- a/components/header-bar/src/__e2e__/stories/me-with-avatar.js
+++ b/components/header-bar/src/__e2e__/stories/me-with-avatar.js
@@ -14,6 +14,7 @@ MeWithAvatar.decorators = [
         me: {
             name: 'John Doe',
             email: 'john_doe@dhis2.org',
+            username: 'john_doe',
             settings: {
                 keyUiLocale: 'en',
             },
diff --git a/components/header-bar/src/debug-info/debug-info-menu-item.js b/components/header-bar/src/debug-info/debug-info-menu-item.js
index 89e7cd759a..380b33a59d 100644
--- a/components/header-bar/src/debug-info/debug-info-menu-item.js
+++ b/components/header-bar/src/debug-info/debug-info-menu-item.js
@@ -1,5 +1,4 @@
-import { colors } from '@dhis2/ui-constants'
-import { MenuItem } from '@dhis2-ui/menu'
+import { colors, spacers } from '@dhis2/ui-constants'
 import PropTypes from 'prop-types'
 import React from 'react'
 import i18n from '../locales/index.js'
@@ -42,27 +41,45 @@ export const DebugInfoMenuItem = ({ hideProfileMenu, showDebugInfoModal }) => {
             <style jsx>{`
                 .root {
                     color: ${colors.grey700};
-                    font-style: italic;
-                    font-size: 14px;
-                    line-height: 17px;
+                    font-size: 12px;
+                    line-height: 15px;
                 }
                 .instance-info {
-                    margin-bottom: 4px;
+                    margin-block-end: ${spacers.dp4};
+                    word-break: break-all;
                 }
                 .version {
-                    white-space: no-wrap;
+                    word-break: break-all;
+                }
+                .debug-info-menu-item {
+                    padding: 0;
                 }
             `}</style>
         </div>
     )
 
     return (
-        <MenuItem
-            dense
+        <button
             onClick={openDebugModal}
-            label={debugInfoLabel}
-            dataTest="dhis2-ui-headerbar-debuginfo"
-        />
+            data-test="dhis2-ui-headerbar-debuginfo"
+        >
+            {debugInfoLabel}
+            <style jsx>{`
+                button {
+                    width: 100%;
+                    margin-block-start: ${spacers.dp4};
+                    padding: ${spacers.dp8} ${spacers.dp12};
+                    background-color: ${colors.grey050};
+                    border: none;
+                    border-block-start: 1px solid ${colors.grey300};
+                    cursor: pointer;
+                    text-align: left;
+                }
+                button:hover {
+                    background-color: ${colors.grey200};
+                }
+            `}</style>
+        </button>
     )
 }
 
diff --git a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu.feature b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu.feature
index 56d423a8ac..5daf074d30 100644
--- a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu.feature
+++ b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu.feature
@@ -4,13 +4,13 @@ Feature: The HeaderBar contains a profile menu
         Given the HeaderBar loads without an error and the user does not have an avatar
         Then the headerbar contains a text icon of size 36px
         When the user clicks on the text icon
-        Then the profile menu contains a text icon of size 48px
+        Then the profile menu contains a text icon of size 36px
 
     Scenario: The HeaderBar shows an image icon if the user has an avatar
         Given the HeaderBar loads without an error and the user has an avatar
         Then the headerbar contains an image icon of size 36px
         When the user clicks on the image icon
-        Then the profile menu contains an image icon of size 48px
+        Then the profile menu contains an image icon of size 36px
 
     Scenario: The menu is closed by default
         Given the HeaderBar loads without an error
@@ -21,11 +21,11 @@ Feature: The HeaderBar contains a profile menu
         When the user clicks on the profile icons
         Then the menu opens
 
-    Scenario: The user name and email are displayed
+    Scenario: The user name and username are displayed
         Given the HeaderBar loads without an error
         When the user opens the menu
         And contains the user name
-        And contains the user email
+        And contains the user username
 
     Scenario: The user can edit his profile
         Given the HeaderBar loads without an error
diff --git a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_a_text_icon_if_the_user_does_not_have_an_avatar.js b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_a_text_icon_if_the_user_does_not_have_an_avatar.js
index 9d6f4c6a90..d2db26d32c 100644
--- a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_a_text_icon_if_the_user_does_not_have_an_avatar.js
+++ b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_a_text_icon_if_the_user_does_not_have_an_avatar.js
@@ -20,11 +20,11 @@ When('the user clicks on the text icon', () => {
     cy.get('[data-test="headerbar-profile-icon-text"]').click()
 })
 
-Then(`the profile menu contains a text icon of size 48px`, () => {
+Then(`the profile menu contains a text icon of size 36px`, () => {
     cy.fixture('HeaderBar/me').then(() => {
         cy.get('[data-test="headerbar-profile-menu-icon-text"]')
             .should('be.visible')
-            .and('have.css', 'height', '48px')
-            .and('have.css', 'width', '48px')
+            .and('have.css', 'height', '36px')
+            .and('have.css', 'width', '36px')
     })
 })
diff --git a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_an_image_icon_if_the_user_has_an_avatar.js b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_an_image_icon_if_the_user_has_an_avatar.js
index 02012b8525..38afba7c4a 100644
--- a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_an_image_icon_if_the_user_has_an_avatar.js
+++ b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_an_image_icon_if_the_user_has_an_avatar.js
@@ -15,9 +15,9 @@ When('the user clicks on the image icon', () => {
     cy.get('[data-test="headerbar-profile-icon-image"]').click()
 })
 
-Then('the profile menu contains an image icon of size 48px', () => {
+Then('the profile menu contains an image icon of size 36px', () => {
     cy.get('[data-test="headerbar-profile-menu-icon-image"]')
         .should('be.visible')
-        .and('have.css', 'height', '48px')
-        .and('have.css', 'width', '48px')
+        .and('have.css', 'height', '36px')
+        .and('have.css', 'width', '36px')
 })
diff --git a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_edit_his_profile.js b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_edit_his_profile.js
index e3a3a867c9..e72978bc5b 100644
--- a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_edit_his_profile.js
+++ b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_edit_his_profile.js
@@ -1,7 +1,7 @@
 import { Then } from '@badeball/cypress-cucumber-preprocessor'
 
 Then('contains a link to edit the profile', () => {
-    cy.get('[data-test="headerbar-profile-edit-profile-link"]').should(
-        'be.visible'
-    )
+    cy.get('[data-test="headerbar-profile-menu"] > li').should((lis) => {
+        expect(lis.eq(3)).to.be.visible
+    })
 })
diff --git a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_go_to_the_about_dhis2_page.js b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_go_to_the_about_dhis2_page.js
index 496904bd08..80df88f688 100644
--- a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_go_to_the_about_dhis2_page.js
+++ b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_go_to_the_about_dhis2_page.js
@@ -2,6 +2,6 @@ import { Then } from '@badeball/cypress-cucumber-preprocessor'
 
 Then('contains a link to the About DHIS2 page', () => {
     cy.get('[data-test="headerbar-profile-menu"] > li').should((lis) => {
-        expect(lis.eq(3)).to.be.visible
+        expect(lis.eq(5)).to.be.visible
     })
 })
diff --git a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_go_to_the_help_page.js b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_go_to_the_help_page.js
index 26e3d0d87d..dd38a654a0 100644
--- a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_go_to_the_help_page.js
+++ b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_go_to_the_help_page.js
@@ -2,6 +2,6 @@ import { Then } from '@badeball/cypress-cucumber-preprocessor'
 
 Then('contains a link to the help page', () => {
     cy.get('[data-test="headerbar-profile-menu"] > li').should((lis) => {
-        expect(lis.eq(2)).to.be.visible
+        expect(lis.eq(4)).to.be.visible
     })
 })
diff --git a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_log_out.js b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_log_out.js
index 777a9b9a4b..11e8aa9b80 100644
--- a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_log_out.js
+++ b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_log_out.js
@@ -5,7 +5,7 @@ const logoutUrl = `${baseUrl}dhis-web-commons-security/logout.action`
 
 Then('contains a link to log out the user', () => {
     cy.get('[data-test="headerbar-profile-menu"] > li').should((lis) => {
-        const menuItem = lis.eq(4)
+        const menuItem = lis.eq(7)
         expect(menuItem).to.be.visible
         expect(menuItem.find('a')).to.have.attr('href', logoutUrl)
     })
diff --git a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_name_and_email_are_displayed.js b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_name_and_username_are_displayed.js
similarity index 58%
rename from components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_name_and_email_are_displayed.js
rename to components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_name_and_username_are_displayed.js
index e1701d8358..e662b63ee6 100644
--- a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_name_and_email_are_displayed.js
+++ b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_name_and_username_are_displayed.js
@@ -7,16 +7,16 @@ Then('contains the user name', () => {
     ).then(([win, $name]) => {
         console.log('win.dataProviderData', win.dataProviderData)
         const { name } = win.dataProviderData.me
-        expect($name.text()).to.equal(name)
+        expect($name.text()).to.contain(name)
     })
 })
 
-Then('contains the user email', () => {
+Then('contains the user username', () => {
     cy.all(
         () => cy.window(),
-        () => cy.get('[data-test="headerbar-profile-user-email"]')
-    ).then(([win, $email]) => {
-        const { email } = win.dataProviderData.me
-        expect($email.text()).to.equal(email)
+        () => cy.get('[data-test="headerbar-profile-user-subtitle"]')
+    ).then(([win, $username]) => {
+        const { username } = win.dataProviderData.me
+        expect($username.text()).to.equal(username)
     })
 })
diff --git a/components/header-bar/src/features/the_headerbar_should_display_app_update_notification/index.js b/components/header-bar/src/features/the_headerbar_should_display_app_update_notification/index.js
index 5ab56b45dd..ea8bb0e6ca 100644
--- a/components/header-bar/src/features/the_headerbar_should_display_app_update_notification/index.js
+++ b/components/header-bar/src/features/the_headerbar_should_display_app_update_notification/index.js
@@ -31,13 +31,13 @@ Then('the update notification should not be displayed', () => {
 Then('the update notification should be displayed', () => {
     cy.get('[data-test="dhis2-ui-headerbar-updatenotification"]')
         .should('contain', 'New Data Visualizer version available')
-        .should('contain', 'Click to reload')
+        .should('contain', 'Reload to update')
 })
 
 Then('the update notification should be displayed without app name', () => {
     cy.get('[data-test="dhis2-ui-headerbar-updatenotification"]')
         .should('contain', 'New app version available')
-        .should('contain', 'Click to reload')
+        .should('contain', 'Reload to update')
 })
 
 When('the user clicks the update notification', () => {
diff --git a/components/header-bar/src/header-bar.js b/components/header-bar/src/header-bar.js
index 673c6b4ab9..7606f62604 100755
--- a/components/header-bar/src/header-bar.js
+++ b/components/header-bar/src/header-bar.js
@@ -22,7 +22,7 @@ const query = {
     user: {
         resource: 'me',
         params: {
-            fields: ['authorities', 'avatar', 'email', 'name', 'settings'],
+            fields: ['authorities', 'avatar', 'name', 'settings', 'username'],
         },
     },
     apps: {
@@ -98,7 +98,7 @@ export const HeaderBar = ({
 
                             <Profile
                                 name={data.user.name}
-                                email={data.user.email}
+                                username={data.user.username}
                                 avatarId={data.user.avatar?.id}
                                 helpUrl={data.help.helpPageLink}
                             />
diff --git a/components/header-bar/src/header-bar.prod.stories.js b/components/header-bar/src/header-bar.prod.stories.js
index 5f142bd6d4..3d3c2f7d2a 100644
--- a/components/header-bar/src/header-bar.prod.stories.js
+++ b/components/header-bar/src/header-bar.prod.stories.js
@@ -34,6 +34,7 @@ const customData = {
     me: {
         name: 'John Doe',
         email: 'john_doe@dhis2.org',
+        username: 'john_doe',
         settings: {
             keyUiLocale: 'en',
         },
diff --git a/components/header-bar/src/profile-menu/profile-header.js b/components/header-bar/src/profile-menu/profile-header.js
index 1ffc063612..279d48a070 100755
--- a/components/header-bar/src/profile-menu/profile-header.js
+++ b/components/header-bar/src/profile-menu/profile-header.js
@@ -1,19 +1,26 @@
-import { useConfig } from '@dhis2/app-runtime'
+import { colors, spacers } from '@dhis2/ui-constants'
 import { UserAvatar } from '@dhis2-ui/user-avatar'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { joinPath } from '../join-path.js'
 import i18n from '../locales/index.js'
 
 const ProfileName = ({ children }) => (
     <div data-test="headerbar-profile-username">
-        {children}
-
+        <span>
+            {i18n.t('Logged in as ')}
+            <strong>{children}</strong>
+        </span>
         <style jsx>{`
             div {
-                margin-bottom: 3px;
-                font-size: 16px;
-                line-height: 19px;
+                font-size: 13px;
+                line-height: 15px;
+                color: ${colors.grey900};
+            }
+            span {
+                word-break: break-all;
+            }
+            strong {
+                font-weight: 700;
             }
         `}</style>
     </div>
@@ -22,63 +29,36 @@ ProfileName.propTypes = {
     children: PropTypes.string,
 }
 
-const ProfileEmail = ({ children }) => (
-    <div data-test="headerbar-profile-user-email">
+const ProfileSubtitle = ({ children }) => (
+    <div data-test="headerbar-profile-user-subtitle">
         {children}
 
         <style jsx>{`
             div {
-                margin-bottom: 6px;
-                font-size: 14px;
-                line-height: 16px;
+                font-size: 13px;
+                line-height: 15px;
+                color: ${colors.grey600};
+                word-break: break-all;
             }
         `}</style>
     </div>
 )
-ProfileEmail.propTypes = {
-    children: PropTypes.string,
-}
-
-const ProfileEdit = ({ children }) => {
-    const { baseUrl } = useConfig()
-
-    return (
-        <a
-            href={joinPath(baseUrl, 'dhis-web-user-profile/#/profile')}
-            data-test="headerbar-profile-edit-profile-link"
-        >
-            {children}
-
-            <style jsx>{`
-                a {
-                    color: rgba(0, 0, 0, 0.87);
-                    font-size: 12px;
-                    line-height: 14px;
-                    text-decoration: underline;
-                    cursor: pointer;
-                }
-            `}</style>
-        </a>
-    )
-}
-
-ProfileEdit.propTypes = {
+ProfileSubtitle.propTypes = {
     children: PropTypes.string,
 }
 
-const ProfileDetails = ({ name, email }) => (
+const ProfileDetails = ({ name, username }) => (
     <div>
         <ProfileName>{name}</ProfileName>
-        <ProfileEmail>{email}</ProfileEmail>
-        <ProfileEdit>{i18n.t('Edit profile')}</ProfileEdit>
+        <ProfileSubtitle>{username}</ProfileSubtitle>
 
         <style jsx>{`
             div {
                 display: flex;
                 flex-direction: column;
-                margin-inline-start: 20px;
-                color: #000;
-                font-size: 14px;
+                gap: ${spacers.dp4};
+                padding-block-start: 1px;
+                font-size: 13px;
                 font-weight: 400;
             }
         `}</style>
@@ -86,26 +66,36 @@ const ProfileDetails = ({ name, email }) => (
 )
 
 ProfileDetails.propTypes = {
-    email: PropTypes.string,
     name: PropTypes.string,
+    username: PropTypes.string,
 }
 
-export const ProfileHeader = ({ name, email, avatarId }) => (
+export const ProfileHeader = ({ name, avatarId, username }) => (
     <div>
-        <UserAvatar
-            avatarId={avatarId}
-            name={name}
-            dataTest="headerbar-profile-menu-icon"
-            large
-        />
-        <ProfileDetails name={name} email={email} />
+        <span className="user-avatar">
+            <UserAvatar
+                avatarId={avatarId}
+                name={name}
+                dataTest="headerbar-profile-menu-icon"
+                medium
+            />
+        </span>
+        <ProfileDetails name={name} username={username} />
 
         <style jsx>{`
             div {
                 display: flex;
                 flex-direction: row;
-                margin-inline-start: 24px;
-                padding-top: 20px;
+                overflow: hidden;
+                align-items: flex-start;
+                gap: ${spacers.dp8};
+                padding: ${spacers.dp12} ${spacers.dp8};
+                margin-block-end: ${spacers.dp4};
+                background: ${colors.grey100};
+                border-block-end: 1px solid ${colors.grey300};
+            }
+            span.user-avatar {
+                flex-shrink: 0;
             }
         `}</style>
     </div>
@@ -113,6 +103,6 @@ export const ProfileHeader = ({ name, email, avatarId }) => (
 
 ProfileHeader.propTypes = {
     avatarId: PropTypes.string,
-    email: PropTypes.string,
     name: PropTypes.string,
+    username: PropTypes.string,
 }
diff --git a/components/header-bar/src/profile-menu/profile-menu.js b/components/header-bar/src/profile-menu/profile-menu.js
index f292d0c9d6..bffbace630 100755
--- a/components/header-bar/src/profile-menu/profile-menu.js
+++ b/components/header-bar/src/profile-menu/profile-menu.js
@@ -1,15 +1,14 @@
 import { clearSensitiveCaches, useConfig } from '@dhis2/app-runtime'
-import { colors } from '@dhis2/ui-constants'
+import { colors, elevations } from '@dhis2/ui-constants'
 import {
-    IconSettings24,
-    IconInfo24,
-    IconLogOut24,
-    IconUser24,
-    IconQuestion24,
+    IconSettings16,
+    IconMore16,
+    IconLogOut16,
+    IconUser16,
+    IconQuestion16,
+    IconLock16,
 } from '@dhis2/ui-icons'
-import { Card } from '@dhis2-ui/card'
 import { Center } from '@dhis2-ui/center'
-import { Divider } from '@dhis2-ui/divider'
 import { Layer } from '@dhis2-ui/layer'
 import { CircularLoader } from '@dhis2-ui/loader'
 import { MenuDivider, MenuItem } from '@dhis2-ui/menu'
@@ -35,87 +34,95 @@ const LoadingMask = () => (
 
 const ProfileContents = ({
     name,
-    email,
     avatarId,
     helpUrl,
     hideProfileMenu,
     showDebugInfoModal,
+    username,
 }) => {
     const { baseUrl } = useConfig()
     const [loading, setLoading] = useState(false)
 
     return (
-        <Card>
-            <div>
-                <ProfileHeader name={name} email={email} avatarId={avatarId} />
-                <Divider margin="13px 0 7px 0" />
-                <ul data-test="headerbar-profile-menu">
+        <div>
+            <ProfileHeader
+                name={name}
+                username={username}
+                avatarId={avatarId}
+            />
+            <ul data-test="headerbar-profile-menu">
+                <MenuItem
+                    dense
+                    href={joinPath(baseUrl, 'dhis-web-user-profile/#/settings')}
+                    label={i18n.t('Settings')}
+                    value="settings"
+                    icon={<IconSettings16 color={colors.grey600} />}
+                />
+                <MenuItem
+                    dense
+                    href={joinPath(baseUrl, 'dhis-web-user-profile/#/account')}
+                    label={i18n.t('Account security')}
+                    value="account"
+                    icon={<IconLock16 color={colors.grey600} />}
+                />
+                <MenuItem
+                    dense
+                    href={joinPath(baseUrl, 'dhis-web-user-profile/#/profile')}
+                    label={i18n.t('My profile')}
+                    value="account"
+                    icon={<IconUser16 color={colors.grey600} />}
+                />
+                <MenuDivider dense />
+                {helpUrl && (
                     <MenuItem
-                        href={joinPath(
-                            baseUrl,
-                            'dhis-web-user-profile/#/settings'
-                        )}
-                        label={i18n.t('Settings')}
-                        value="settings"
-                        icon={<IconSettings24 color={colors.grey700} />}
+                        dense
+                        href={helpUrl}
+                        label={i18n.t('Help')}
+                        value="help"
+                        icon={<IconQuestion16 color={colors.grey600} />}
                     />
-                    <MenuItem
-                        href={joinPath(
-                            baseUrl,
-                            'dhis-web-user-profile/#/account'
-                        )}
-                        label={i18n.t('Account')}
-                        value="account"
-                        icon={<IconUser24 color={colors.grey700} />}
-                    />
-                    {helpUrl && (
-                        <MenuItem
-                            href={helpUrl}
-                            label={i18n.t('Help')}
-                            value="help"
-                            icon={<IconQuestion24 color={colors.grey700} />}
-                        />
+                )}
+                <MenuItem
+                    dense
+                    href={joinPath(
+                        baseUrl,
+                        'dhis-web-user-profile/#/aboutPage'
                     )}
-                    <MenuItem
-                        href={joinPath(
-                            baseUrl,
-                            'dhis-web-user-profile/#/aboutPage'
-                        )}
-                        label={i18n.t('About DHIS2')}
-                        value="about"
-                        icon={<IconInfo24 color={colors.grey700} />}
-                    />
-                    <MenuItem
-                        href={joinPath(
-                            baseUrl,
-                            'dhis-web-commons-security/logout.action'
-                        )}
-                        // NB: By MenuItem implementation, this callback
-                        // overwrites default navigation behavior but maintains
-                        // the href attribute
-                        onClick={async () => {
-                            setLoading(true)
-                            await clearSensitiveCaches()
-                            setLoading(false)
-                            window.location.assign(
-                                joinPath(
-                                    baseUrl,
-                                    'dhis-web-commons-security/logout.action'
-                                )
+                    label={i18n.t('System info')}
+                    value="about"
+                    icon={<IconMore16 color={colors.grey600} />}
+                />
+                <MenuDivider dense />
+                <MenuItem
+                    dense
+                    href={joinPath(
+                        baseUrl,
+                        'dhis-web-commons-security/logout.action'
+                    )}
+                    // NB: By MenuItem implementation, this callback
+                    // overwrites default navigation behavior but maintains
+                    // the href attribute
+                    onClick={async () => {
+                        setLoading(true)
+                        await clearSensitiveCaches()
+                        setLoading(false)
+                        window.location.assign(
+                            joinPath(
+                                baseUrl,
+                                'dhis-web-commons-security/logout.action'
                             )
-                        }}
-                        label={i18n.t('Logout')}
-                        value="logout"
-                        icon={<IconLogOut24 color={colors.grey700} />}
-                    />
-                    <MenuDivider dense />
-                    <DebugInfoMenuItem
-                        hideProfileMenu={hideProfileMenu}
-                        showDebugInfoModal={showDebugInfoModal}
-                    />
-                    <UpdateNotification hideProfileMenu={hideProfileMenu} />
-                </ul>
-            </div>
+                        )
+                    }}
+                    label={i18n.t('Log out')}
+                    value="logout"
+                    icon={<IconLogOut16 color={colors.grey600} />}
+                />
+                <DebugInfoMenuItem
+                    hideProfileMenu={hideProfileMenu}
+                    showDebugInfoModal={showDebugInfoModal}
+                />
+                <UpdateNotification hideProfileMenu={hideProfileMenu} />
+            </ul>
 
             {loading && <LoadingMask />}
 
@@ -123,6 +130,10 @@ const ProfileContents = ({
                 div {
                     width: 100%;
                     padding: 0;
+                    box-shadow: ${elevations.e300};
+                    border-radius: 3px;
+                    border: 1px solid ${colors.grey300};
+                    overflow: auto;
                 }
 
                 ul {
@@ -139,7 +150,7 @@ const ProfileContents = ({
                     display: block;
                 }
             `}</style>
-        </Card>
+        </div>
     )
 }
 
@@ -147,9 +158,9 @@ ProfileContents.propTypes = {
     hideProfileMenu: PropTypes.func.isRequired,
     showDebugInfoModal: PropTypes.func.isRequired,
     avatarId: PropTypes.string,
-    email: PropTypes.string,
     helpUrl: PropTypes.string,
     name: PropTypes.string,
+    username: PropTypes.string,
 }
 
 export const ProfileMenu = ({ ...props }) => (
@@ -170,7 +181,7 @@ ProfileMenu.propTypes = {
     hideProfileMenu: PropTypes.func.isRequired,
     showDebugInfoModal: PropTypes.func.isRequired,
     avatarId: PropTypes.string,
-    email: PropTypes.string,
     helpUrl: PropTypes.string,
     name: PropTypes.string,
+    username: PropTypes.string,
 }
diff --git a/components/header-bar/src/profile-menu/update-notification.js b/components/header-bar/src/profile-menu/update-notification.js
index ec342b16e6..11ddd7fdf6 100644
--- a/components/header-bar/src/profile-menu/update-notification.js
+++ b/components/header-bar/src/profile-menu/update-notification.js
@@ -1,6 +1,5 @@
 import { useConfig } from '@dhis2/app-runtime'
-import { colors } from '@dhis2/ui-constants'
-import { MenuItem } from '@dhis2-ui/menu'
+import { colors, spacers } from '@dhis2/ui-constants'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { useHeaderBarContext } from '../header-bar-context.js'
@@ -20,45 +19,68 @@ export function UpdateNotification({ hideProfileMenu }) {
             <div className="spacer" />
             <div className="message">
                 {appName
-                    ? i18n.t('New {{appName}} version available', { appName })
-                    : i18n.t('New app version available')}
-                <br />
-                {i18n.t('Click to reload')}
+                    ? i18n.t(
+                          'New {{appName}} version available — Reload to update',
+                          { appName }
+                      )
+                    : i18n.t('New app version available — Reload to update')}
             </div>
             <style jsx>{`
                 .root {
                     display: flex;
                     flex-direction: row;
-                    align-items: center;
-                    font-size: 14px;
-                    line-height: 17px;
+                    align-items: flex-start;
+                    font-size: 12px;
+                    line-height: 15px;
+                    color: ${colors.grey700};
                 }
                 .badge {
                     display: inline-block;
-                    width: 12px;
-                    height: 12px;
-                    margin: 0 8px;
+                    width: 8px;
+                    height: 8px;
+                    margin: 0;
+                    margin-block-start: 3px;
                     border-radius: 6px;
                     background-color: ${colors.blue600};
+                    flex-shrink: 0;
                 }
                 .spacer {
                     display: inline-block;
-                    width: 8px;
+                    width: 6px;
+                    flex-shrink: 0;
                 }
                 .message {
                     display: inline-block;
+                    text-align: start;
                 }
             `}</style>
         </div>
     )
 
     return updateAvailable ? (
-        <MenuItem
-            dense
+        <button
             onClick={onClick}
-            label={updateNotificationLabel}
-            dataTest="dhis2-ui-headerbar-updatenotification"
-        />
+            aria-label={i18n.t('New app version available — Reload to update')}
+            data-test="dhis2-ui-headerbar-updatenotification"
+        >
+            {updateNotificationLabel}
+            <style jsx>{`
+                button {
+                    display: flex;
+                    align-items: center;
+                    background: ${colors.grey050};
+                    border: none;
+                    padding: ${spacers.dp8} ${spacers.dp12};
+                    width: 100%;
+                    cursor: pointer;
+                    font-size: 12px;
+                    line-height: 15px;
+                    color: ${colors.grey700};
+                }
+                    button:hover {
+                        background: ${colors.grey200};
+            `}</style>
+        </button>
     ) : null
 }
 
diff --git a/components/header-bar/src/profile.js b/components/header-bar/src/profile.js
index b610a814c6..5eeff392fe 100755
--- a/components/header-bar/src/profile.js
+++ b/components/header-bar/src/profile.js
@@ -6,7 +6,7 @@ import i18n from './locales/index.js'
 import { useOnDocClick } from './profile/use-on-doc-click.js'
 import { ProfileMenu } from './profile-menu/index.js'
 
-const Profile = ({ name, email, avatarId, helpUrl }) => {
+const Profile = ({ name, avatarId, helpUrl, username }) => {
     const [showProfileMenu, setShowProfileMenu] = useState(false)
     const [showDebugInfoModal, setShowDebugInfoModal] = useState(false)
     const hideProfileMenu = useCallback(
@@ -45,7 +45,7 @@ const Profile = ({ name, email, avatarId, helpUrl }) => {
                 <ProfileMenu
                     avatarId={avatarId}
                     name={name}
-                    email={email}
+                    username={username}
                     helpUrl={helpUrl}
                     hideProfileMenu={hideProfileMenu}
                     showDebugInfoModal={() => {
@@ -94,8 +94,8 @@ const Profile = ({ name, email, avatarId, helpUrl }) => {
 Profile.propTypes = {
     name: PropTypes.string.isRequired,
     avatarId: PropTypes.string,
-    email: PropTypes.string,
     helpUrl: PropTypes.string,
+    username: PropTypes.string,
 }
 
 export default Profile