sartography
/
spiff-arena
mirror of https://github.com/sartography/spiff-arena.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
jasquat 2023-05-10 09:33:21 -04:00
parent 79b64d3e94
commit 1efbb8f564
2 changed files with 16 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
spiffworkflow-frontend/src/components/NavigationBar.tsx
View File

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

18
spiffworkflow-frontend/src/index.css
View File

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