Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-19 18:02:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Popup menu active/hover styles fixed

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-05-09 10:04:05 +03:00
parent c8d9cb0018
commit 322c747330
2 changed files with 15 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/common/NavBar/UserMenu/UserMenu.js
View file

@ -7,6 +7,13 @@ const { Input } = require('stremio-navigation');
const styles = require('./styles');
const UserMenu = ({ className, email, avatar, logout }) => {
const [active, setActive] = React.useState(false);
const onPopupOpen = React.useCallback(() => {
setActive(true);
}, []);
const onPopupClose = React.useCallback(() => {
setActive(false);
}, []);
const [fullscreen, setFullscreen] = React.useState(document.fullscreenElement instanceof HTMLElement);
const toggleFullscreen = React.useCallback(() => {
if (fullscreen) {
@ -26,9 +33,9 @@ const UserMenu = ({ className, email, avatar, logout }) => {
}, []);
return (
<Popup>
<Popup onOpen={onPopupOpen} onClose={onPopupClose}>
<Popup.Label>
<Input className={classnames(className, styles['user-menu-button'])} tabIndex={-1} type={'button'}>
<Input className={classnames(className, styles['user-menu-button'], { 'active': active })} tabIndex={-1} type={'button'}>
<Icon className={classnames(styles['icon'], styles['user-icon'])} icon={'ic_user'} />
<Icon className={classnames(styles['icon'], styles['arrow-icon'])} icon={'ic_arrow_down'} />
</Input>

8
src/common/NavBar/UserMenu/styles.less
View file

@ -8,8 +8,12 @@
overflow: hidden;
cursor: pointer;
&:hover, &:focus {
background-color: var(--color-backgrounddark20);
&:hover {
background-color: var(--color-secondary);
}
&:global(.active) {
background-color: var(--color-background);
}
.icon {