diff --git a/spiffworkflow-frontend/src/components/NavigationBar.tsx b/spiffworkflow-frontend/src/components/NavigationBar.tsx index 3789cfff..5ac96034 100644 --- a/spiffworkflow-frontend/src/components/NavigationBar.tsx +++ b/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(false); - - const toggletip = ( -
- + const profileToggletip = ( +
+
{UserService.getPreferredUsername()[0].toUpperCase()}
- +

{UserService.getPreferredUsername()}

@@ -127,7 +120,7 @@ export default function NavigationBar() { {SPIFF_ENVIRONMENT} ) : null} - {toggletip} + {profileToggletip} ); } diff --git a/spiffworkflow-frontend/src/index.css b/spiffworkflow-frontend/src/index.css index 730b8848..00bd2d8c 100644 --- a/spiffworkflow-frontend/src/index.css +++ b/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; }