From e2a5a2aadf462c8fcd9e4d53ae9c7a8c388d5dc8 Mon Sep 17 00:00:00 2001
From: jasquat <jasquat@users.noreply.github.com>
Date: Tue, 9 May 2023 17:38:15 -0400
Subject: [PATCH] use a toggle tip instead of the popover w/ burnettk

---
 .../src/components/NavigationBar.tsx          | 32 ++++++++++++++++++-
 spiffworkflow-frontend/src/index.css          | 27 ++++++++--------
 2 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/spiffworkflow-frontend/src/components/NavigationBar.tsx b/spiffworkflow-frontend/src/components/NavigationBar.tsx
index 94e86961f..791dbbc4f 100644
--- a/spiffworkflow-frontend/src/components/NavigationBar.tsx
+++ b/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}
         </>
       );
     }
diff --git a/spiffworkflow-frontend/src/index.css b/spiffworkflow-frontend/src/index.css
index 30c4f4bbb..f7075b49b 100644
--- a/spiffworkflow-frontend/src/index.css
+++ b/spiffworkflow-frontend/src/index.css
@@ -114,20 +114,9 @@ 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 {
+.cds--header__global .cds--btn--primary.button-link {
   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;
 }