fix: Clean up the application header

src/components/InfoPageComponent/InfoPageComponent.style.tsx

@@ -23,6 +23,7 @@ const InnerWrapper = styled.div`
 
   row-gap: ${spacings.LARGE};
   width: 50%;
+  max-width: 60ch; /* Prevent text content being too wide and hard to read */
 
   > a {
     display: flex;
@@ -32,5 +33,10 @@ const InnerWrapper = styled.div`
       margin-left: ${spacings.SMALL};
     }
   }
+
+  ul {
+    margin: 0;
+    line-height: 1.5rem;
+  }
 `;
 export { InnerWrapper, StyledInforPage as Page };

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,38 +1,45 @@
 import { useMsal } from '@azure/msal-react';
-import { Button, Menu } from '@equinor/eds-core-react';
-import {
-  account_circle as accountCircle,
-  notifications,
-} from '@equinor/eds-icons';
+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';
 
 export const Icons = () => {
-  const { instance } = useMsal();
+  const { instance, accounts } = useMsal();
 
   const icons = {
-    notifications: {
-      title: 'Notifications',
-      data: notifications,
-    },
     userInfo: {
       title: 'UserInfo',
       data: accountCircle,
     },
   };
 
+  const displayRoles = () => {
+    const roles = accounts[0].idTokenClaims?.roles;
+
+    if (roles === undefined) return 'No roles assigned.';
+    if (roles.length === 1) return roles[0] + ' role';
+
+    const splitRoles = roles.map((role) => role?.split('.')[1]);
+
+    if (splitRoles.length === 2) {
+      return `${splitRoles[0]} and ${splitRoles[1]} roles`;
+    } else {
+      return `${splitRoles.slice(0, -1).join(', ')} and ${
+        splitRoles[splitRoles.length - 1]
+      } roles`;
+    }
+  };
+
   return (
     <Styled.Icons>
-      <MenuIcon icon={icons.notifications}>
-        <Menu.Item>Notifications (Not ready yet)</Menu.Item>
-      </MenuIcon>
       <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">{displayRoles()}</li>
+          </ul>
+        </Menu.Item>
       </MenuIcon>
     </Styled.Icons>
   );

src/pages/About/About.tsx

@@ -5,28 +5,38 @@ export const About = () => {
   return (
     <InfoPageComponent title="About PEPM">
       <Typography variant="body_long">
-        It began with the forging of the Great Rings. Three were given to{' '}
-        <Typography link href="https://nr.no/">
-          Norsk Regnesentral
-        </Typography>
-        , immortal, wisest and fairest of all beings. Seven to the Dwarf-Lords,
-        great miners and craftsmen of the mountain halls. And nine, nine rings
-        were gifted to the race of Men, who above all else desire power. For
-        within these rings was bound the strength and the will to govern each
-        race. But they were all of them deceived, for another ring was made.
-        Deep in the land of Mordor, in the Fires of Mount Doom, the Dark Lord
-        Sauron forged a master ring, and into this ring he poured his cruelty,
-        his malice and his will to dominate all life.
+        PEPM is developed in collaboration with Equinor/Bouvet/Norwegian
+        Computing Center.
       </Typography>
-      <Typography variant="h3">One ring to rule them all.</Typography>
       <Typography variant="body_long">
-        One by one, the free lands of Middle-Earth fell to the power of the
-        Ring, but there were some who resisted. A last alliance of men and elves
-        marched against the armies of Mordor, and on the very slopes of Mount
-        Doom, they fought for the freedom of Middle-Earth. Victory was near, but
-        the power of the ring could not be undone. It was in this moment, when
-        all hope had faded, that Isildur, son of the king, took up his father’s
-        sword.
+        The goal of the application is to extract reservoir modelling parameters
+        for object-based and variogram-based methods from digital geological
+        process models. The digital models are representative for various
+        outcrop analogues and subsurface reservoirs. PEPM will provide
+        geomodelling parameters on a scenario basis ready to be used in a FMU
+        (Fast Modelling Update) context.
+      </Typography>
+      <Typography variant="body_short_bold">PEPM allows for</Typography>
+      <Typography>
+        <ul>
+          <li>
+            Import digital conceptual models from Delft3D-GT in .nc (NetCDF)
+            format
+          </li>
+          <li>
+            Assign metadata to the digital conceptual model related to
+            depositional environments, architectural elements and relevant
+            analogues and subsurface reservoir intervals
+          </li>
+          <li>Estimation of object size of architectural elements</li>
+          <li>
+            Estimation of variogram parameters for architectural elements, grain
+            size, porosity and permeability{' '}
+          </li>
+          <li>Make the results available through an API</li>
+          <li>Export results to an Excel spreadsheet</li>
+          <li>Export the model grid file in a RESQML format</li>
+        </ul>
       </Typography>
     </InfoPageComponent>
   );

src/pages/Api/Api.tsx

@@ -5,10 +5,14 @@ import { InfoPageComponent } from '../../components/InfoPageComponent/InfoPageCo
 export const Api = () => {
   return (
     <InfoPageComponent title="Using the PEPM API">
-      <Typography variant="body_long">Api to come her soon!</Typography>
+      <Typography variant="body_long">
+        For API documentation and interactive testing, please visit our Swagger
+        UI interface.
+      </Typography>
+      {/* TODO Add a link to Swagger */}
       <Typography link href="">
-        Read all the API documentation on the Swagger page
-        <Icon data={externalLink} title={'Link to Api'} />
+        PEPM API reference
+        <Icon data={externalLink} title={'Link to Swagger'} size={18} />
       </Typography>
     </InfoPageComponent>
   );