From 794978f35e9ae96bb4fc37bc72dea9657a2f91a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98rjan=20Aare=20J=C3=B8rgensen?= <oajo@equinor.com>
Date: Thu, 9 Jan 2025 16:14:02 +0100
Subject: [PATCH] fix: Remove log out button and show role placeholder

---
 src/features/AppBar/Icons/Icons.styled.ts | 25 +++++++++++++++++++++++
 src/features/AppBar/Icons/Icons.tsx       | 15 +++++++-------
 2 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/features/AppBar/Icons/Icons.styled.ts b/src/features/AppBar/Icons/Icons.styled.ts
index 778838df..9590b758 100644
--- a/src/features/AppBar/Icons/Icons.styled.ts
+++ b/src/features/AppBar/Icons/Icons.styled.ts
@@ -1,7 +1,32 @@
 import styled from 'styled-components';
 import { spacings } from '../../../tokens/spacings';
+import { theme } from '../../../tokens/theme';
 
 export const Icons = styled.div`
   display: flex;
   gap: ${spacings.SMALL};
+
+  /* Remove interaction hints since this is no longer a menu */
+  .menu-item:hover {
+    background: white;
+    cursor: default;
+  }
+
+  .user-info {
+    display: flex;
+    flex-direction: column;
+    row-gap: ${spacings.X_SMALL};
+    list-style: none;
+    line-height: 1.5;
+    margin: 0;
+    padding: 0;
+
+    .name {
+      font-weight: 700;
+    }
+
+    .role {
+      color: ${theme.light.text.staticIconsTertiary};
+    }
+  }
 `;
diff --git a/src/features/AppBar/Icons/Icons.tsx b/src/features/AppBar/Icons/Icons.tsx
index 39778a2f..f97d2587 100644
--- a/src/features/AppBar/Icons/Icons.tsx
+++ b/src/features/AppBar/Icons/Icons.tsx
@@ -1,5 +1,5 @@
 import { useMsal } from '@azure/msal-react';
-import { Button, Menu } from '@equinor/eds-core-react';
+import { Menu } from '@equinor/eds-core-react';
 import { account_circle as accountCircle } from '@equinor/eds-icons';
 import MenuIcon from '../../../components/MenuIcon/MenuIcon';
 import * as Styled from './Icons.styled';
@@ -17,12 +17,13 @@ export const Icons = () => {
   return (
     <Styled.Icons>
       <MenuIcon icon={icons.userInfo}>
-        <Menu.Section title="Logged in">
-          <Menu.Item>{instance.getActiveAccount()?.name}</Menu.Item>
-          <Menu.Item as={'div'}>
-            <Button onClick={() => instance.logoutRedirect()}>Log out</Button>
-          </Menu.Item>
-        </Menu.Section>
+        <Menu.Item as={'div'} className="menu-item">
+          <ul className="user-info">
+            <li className="name">{instance.getActiveAccount()?.name}</li>
+            <li className="role">[Admin|User|Reader] role</li>
+            {/* TODO add proper role name */}
+          </ul>
+        </Menu.Item>
       </MenuIcon>
     </Styled.Icons>
   );