use a toggle tip instead of the popover w/ burnettk

spiffworkflow-frontend/src/components/NavigationBar.tsx

@@ -1,4 +1,7 @@
 import {
+  Toggletip,
+  ToggletipButton,
+  ToggletipContent,
   Popover,
   PopoverContent,
   Button,
@@ -117,6 +120,33 @@ export default function NavigationBar() {
     </div>
   );
 
+  const toggletip = (
+    <div style={{ display: 'flex' }} id="profile-user-button">
+      <Toggletip defaultOpen isTabTip align="bottom-right">
+        <ToggletipButton
+          aria-label="User Actions"
+          className="profile-user-toggle-button"
+          type="button"
+        >
+          <div className="user-circle">
+            {UserService.getPreferredUsername()[0].toUpperCase()}
+          </div>
+        </ToggletipButton>
+        <ToggletipContent className="profile-user-toggletip">
+          <p>
+            <strong>{UserService.getPreferredUsername()}</strong>
+          </p>
+          <p>{UserService.getUserEmail()}</p>
+          <hr />
+          <Button className="button-link" onClick={handleLogout}>
+            <Logout />
+            &nbsp;&nbsp;Sign out
+          </Button>
+        </ToggletipContent>
+      </Toggletip>
+    </div>
+  );
+
   const loginAndLogoutAction = () => {
     if (UserService.isLoggedIn()) {
       return (
@@ -126,7 +156,7 @@ export default function NavigationBar() {
               {SPIFF_ENVIRONMENT}
             </HeaderGlobalAction>
           ) : null}
-          {popover}
+          {toggletip}
         </>
       );
     }

spiffworkflow-frontend/src/index.css

@@ -114,20 +114,9 @@ h2 {
   padding-left: 0;
 }
 
-.cds--btn--ghost.button-link-for-popover {
+.cds--header__global .cds--btn--primary.button-link {
-  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;
+  background-color: #393939;
   padding-left: 0;
 }
 
@@ -217,11 +206,21 @@ h1.with-icons {
   margin-bottom: 1em;
 }
 
+.profile-user-toggletip {
+  background-color: #393939;
+  color: #f4f4f4;
+  margin-right: 8px;
+  margin-top: -20px;
+}
 #profile-user-button {
+  margin-top: 8px;
   margin-right: 8px;
 }
+#profile-user-button .cds--popover-content::before {
+  content: none;
+}
 
-.hot-button:hover {
+.profile-user-toggle-button:hover {
   background-color: #161616;
 }