diff --git a/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenu.js b/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenu.js index 7af959d75..8c4477b42 100644 --- a/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenu.js +++ b/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenu.js @@ -7,6 +7,7 @@ const { useRouteFocused } = require('stremio-router'); const Popup = require('stremio/common/Popup'); const useBinaryState = require('stremio/common/useBinaryState'); const NavMenuContent = require('./NavMenuContent'); +const styles = require('./styles.less'); const NavMenu = (props) => { const routeFocused = useRouteFocused(); @@ -42,6 +43,7 @@ const NavMenu = (props) => { onCloseRequest={closeMenu} renderLabel={renderLabel} renderMenu={renderMenu} + className={styles['nav-menu-popup-label']} /> ); }; diff --git a/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less b/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less index 8b58f3796..aa9d175a0 100644 --- a/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less +++ b/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less @@ -3,6 +3,15 @@ @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~stremio/common/screen-sizes.less'; +:import('~stremio/common/Popup/styles.less') { + popup-menu-container: menu-container; +} + +.nav-menu-popup-label { + .popup-menu-container { + margin-top: 1rem; + } +} .nav-menu-container { width: 22rem; max-height: calc(100vh - var(--horizontal-nav-bar-size)); diff --git a/src/common/Popup/styles.less b/src/common/Popup/styles.less index e81de9033..e74c2cfa0 100644 --- a/src/common/Popup/styles.less +++ b/src/common/Popup/styles.less @@ -17,8 +17,7 @@ visibility: hidden; border-radius: var(--border-radius); background-color: var(--modal-background-color); - box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40, - 0 1.1rem 0.85rem @color-background-dark5-20; + box-shadow: var(--outer-glow); cursor: auto; &.menu-direction-top-left {