fix: Remove log out button and show role placeholder

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};
+    }
+  }
 `;

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>
   );