round corners and add border, and close by default

This commit is contained in:
burnettk 2023-05-09 22:55:56 -04:00
parent 7e9787d5fe
commit 79b64d3e94
2 changed files with 4 additions and 34 deletions

View File

@ -86,43 +86,11 @@ export default function NavigationBar() {
return activeKey === menuItemPath; return activeKey === menuItemPath;
}; };
const [openTwo, setOpenTwo] = useState<boolean>(false); const [openProfileMenu, setOpenProfileMenu] = useState<boolean>(false);
const popover = (
<div style={{ display: 'flex' }} id="profile-user-button">
<Popover open={openTwo} isTabTip align="bottom-right">
<button
aria-label="User Actions"
className="hot-button"
type="button"
onClick={() => {
setOpenTwo(!openTwo);
}}
>
<div className="user-circle with-top-margin">
{UserService.getPreferredUsername()[0].toUpperCase()}
</div>
</button>
<PopoverContent className="p-3">
<p>{UserService.getPreferredUsername()}</p>
<p>{UserService.getUserEmail()}</p>
<hr />
<Button
kind="ghost"
className="button-link-for-popover"
onClick={handleLogout}
>
<Logout />
&nbsp;&nbsp;Sign out
</Button>
</PopoverContent>
</Popover>
</div>
);
const toggletip = ( const toggletip = (
<div style={{ display: 'flex' }} id="profile-user-button"> <div style={{ display: 'flex' }} id="profile-user-button">
<Toggletip defaultOpen isTabTip align="bottom-right"> <Toggletip open={openProfileMenu} isTabTip align="bottom-right">
<ToggletipButton <ToggletipButton
aria-label="User Actions" aria-label="User Actions"
className="profile-user-toggle-button" className="profile-user-toggle-button"

View File

@ -224,6 +224,8 @@ h1.with-icons {
#profile-user-button .cds--popover--bottom-right .cds--popover-content { #profile-user-button .cds--popover--bottom-right .cds--popover-content {
bottom: 11px; bottom: 11px;
right: -2px; right: -2px;
border-radius: 5px;
border: 3px solid black;
} }
#profile-user-button .cds--popover-caret { #profile-user-button .cds--popover-caret {