changed to display the username in a circle that can be expanded w/ burnettk

spiffworkflow-frontend/src/components/ActiveUsers.tsx

@@ -42,7 +42,7 @@ export default function ActiveUsers() {
     return (
       <div
         title={`${activeUser.username} is also viewing this page`}
-        className="user-circle"
+        className="user-circle user-circle-for-list"
       >
         {activeUser.username.charAt(0).toUpperCase()}
       </div>

spiffworkflow-frontend/src/components/NavigationBar.tsx

@@ -1,6 +1,12 @@
 import {
+  Popover,
+  PopoverContent,
+  Button,
+  RadioButtonGroup,
+  RadioButton,
   Header,
   HeaderContainer,
+  HeaderMenu,
   HeaderMenuButton,
   SkipToContent,
   SideNav,
@@ -14,7 +20,7 @@ import {
   // @ts-ignore
 } from '@carbon/react';
 // @ts-ignore
-import { Logout, Login } from '@carbon/icons-react';
+import { Settings, Logout, Login } from '@carbon/icons-react';
 import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Can } from '@casl/react';
@@ -77,6 +83,40 @@ export default function NavigationBar() {
     return activeKey === menuItemPath;
   };
 
+  const [openTwo, setOpenTwo] = useState<boolean>(false);
+
+  const popover = (
+    <div style={{ display: 'flex' }} id="profile-user-button">
+      <Popover open={openTwo} isTabTip align="bottom-right">
+        <button
+          aria-label="User Actions"
+          className="hot-button"
+          type="button"
+          onClick={() => {
+            setOpenTwo(!openTwo);
+          }}
+        >
+          <div className="user-circle with-top-margin">
+            {UserService.getPreferredUsername()[0].toUpperCase()}
+          </div>
+        </button>
+        <PopoverContent className="p-3">
+          <p>{UserService.getPreferredUsername()}</p>
+          <p>{UserService.getUserEmail()}</p>
+          <hr />
+          <Button
+            kind="ghost"
+            className="button-link-for-popover"
+            onClick={handleLogout}
+          >
+            <Logout />
+            &nbsp;&nbsp;Sign out
+          </Button>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+
   const loginAndLogoutAction = () => {
     if (UserService.isLoggedIn()) {
       return (
@@ -86,16 +126,7 @@ export default function NavigationBar() {
               {SPIFF_ENVIRONMENT}
             </HeaderGlobalAction>
           ) : null}
-          <HeaderGlobalAction className="username-header-text unclickable-text">
+          {popover}
-            {UserService.getPreferredUsername()}
-          </HeaderGlobalAction>
-          <HeaderGlobalAction
-            aria-label="Logout"
-            onClick={handleLogout}
-            data-qa="logout-button"
-          >
-            <Logout />
-          </HeaderGlobalAction>
         </>
       );
     }

spiffworkflow-frontend/src/index.css

@@ -114,6 +114,23 @@ h2 {
   padding-left: 0;
 }
 
+.cds--btn--ghost.button-link-for-popover {
+  color: #f4f4f4;
+  padding-left: 0;
+}
+.cds--btn--ghost.button-link-for-popover:visited {
+  color: #f4f4f4;
+  padding-left: 0;
+}
+.cds--btn--ghost.button-link-for-popover:hover {
+  color: #f4f4f4;
+  padding-left: 0;
+}
+.cds--btn--ghost.button-link-for-popover:visited:hover {
+  color: #f4f4f4;
+  padding-left: 0;
+}
+
 .cds--header__global .cds--btn--primary {
   background-color: #161616
 }
@@ -200,6 +217,22 @@ h1.with-icons {
   margin-bottom: 1em;
 }
 
+#profile-user-button {
+  margin-right: 8px;
+}
+
+.hot-button:hover {
+  background-color: #161616;
+}
+
+#profile-user-button .cds--popover--tab-tip__button::after {
+  content: none;
+}
+
+#profile-user-button .cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button{
+  background-color: #161616;
+}
+
 .with-top-margin {
   margin-top: 1em;
 }
@@ -471,49 +504,12 @@ svg.notification-icon {
   border-radius: 50%;
   color: #fff;
   font-weight: bold;
+}
+
+.user-circle-for-list {
   margin-right: 10px;
 }
 
-.user-circle.color-1 {
-  background-color: #8e8e8e;
-}
-
-.user-circle.color-2 {
-  background-color: #a57c63;
-}
-
-.user-circle.color-3 {
-  background-color: #8f7c7c;
-}
-
-.user-circle.color-4 {
-  background-color: #9a927f;
-}
-
-.user-circle.color-5 {
-  background-color: #5e5d5d;
-}
-
-.user-circle.color-6 {
-  background-color: #676767;
-}
-
-.user-circle.color-7 {
-  background-color: #6d7d6d;
-}
-
-.user-circle.color-8 {
-  background-color: #7a7171;
-}
-
-.user-circle.color-9 {
-  background-color: #837d63;
-}
-
-.user-circle.color-10 {
-  background-color: #686a70;
-}
-
 /* Randomize color assignment */
 .user-circle:nth-child(1) {
   background-color: #8e8e8e;