updated some css class names and moved the profile toggle tip over a couple pixels

spiffworkflow-frontend/src/components/NavigationBar.tsx

@@ -2,14 +2,9 @@ import {
   Toggletip,
   ToggletipButton,
   ToggletipContent,
-  Popover,
-  PopoverContent,
   Button,
-  RadioButtonGroup,
-  RadioButton,
   Header,
   HeaderContainer,
-  HeaderMenu,
   HeaderMenuButton,
   SkipToContent,
   SideNav,
@@ -23,7 +18,7 @@ import {
   // @ts-ignore
 } from '@carbon/react';
 // @ts-ignore
-import { Settings, Logout, Login } from '@carbon/icons-react';
+import { Logout, Login } from '@carbon/icons-react';
 import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Can } from '@casl/react';
@@ -86,21 +81,19 @@ export default function NavigationBar() {
     return activeKey === menuItemPath;
   };
 
-  const [openProfileMenu, setOpenProfileMenu] = useState<boolean>(false);
-
-  const toggletip = (
-    <div style={{ display: 'flex' }} id="profile-user-button">
-      <Toggletip open={openProfileMenu} isTabTip align="bottom-right">
+  const profileToggletip = (
+    <div style={{ display: 'flex' }} id="user-profile-toggletip">
+      <Toggletip isTabTip align="bottom-right">
         <ToggletipButton
           aria-label="User Actions"
-          className="profile-user-toggle-button"
+          className="user-profile-toggletip-button"
           type="button"
         >
           <div className="user-circle">
             {UserService.getPreferredUsername()[0].toUpperCase()}
           </div>
         </ToggletipButton>
-        <ToggletipContent className="profile-user-toggletip">
+        <ToggletipContent className="user-profile-toggletip-content">
           <p>
             <strong>{UserService.getPreferredUsername()}</strong>
           </p>
@@ -127,7 +120,7 @@ export default function NavigationBar() {
               {SPIFF_ENVIRONMENT}
             </HeaderGlobalAction>
           ) : null}
-          {toggletip}
+          {profileToggletip}
         </>
       );
     }

spiffworkflow-frontend/src/index.css

@@ -206,41 +206,41 @@ h1.with-icons {
   margin-bottom: 1em;
 }
 
-.profile-user-toggletip {
+.user-profile-toggletip-content {
   background-color: #393939;
   color: #f4f4f4;
   margin-right: 8px;
   margin-top: -20px;
 }
 
-#profile-user-button {
+#user-profile-toggletip {
   margin-top: 8px;
-  margin-right: 8px;
+  margin-right: 12px;
 }
-#profile-user-button .cds--popover-content::before {
+#user-profile-toggletip .cds--popover-content::before {
   content: none;
 }
 
-#profile-user-button .cds--popover--bottom-right .cds--popover-content {
+#user-profile-toggletip .cds--popover--bottom-right .cds--popover-content {
   bottom: 11px;
   right: -2px;
   border-radius: 5px;
   border: 3px solid black;
 }
 
-#profile-user-button .cds--popover-caret {
+#user-profile-toggletip .cds--popover-caret {
   display: none;
 }
 
-.profile-user-toggle-button:hover {
+.user-profile-toggletip-button:hover {
   background-color: #161616;
 }
 
-#profile-user-button .cds--popover--tab-tip__button::after {
+#user-profile-toggletip .cds--popover--tab-tip__button::after {
   content: none;
 }
 
-#profile-user-button .cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button{
+#user-profile-toggletip .cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button{
   background-color: #161616;
 }