diff --git a/ui/component/headerMenuButtons/index.js b/ui/component/headerMenuButtons/index.js index 06c12080a..82a8c19b5 100644 --- a/ui/component/headerMenuButtons/index.js +++ b/ui/component/headerMenuButtons/index.js @@ -3,7 +3,7 @@ import { doSetClientSetting } from 'redux/actions/settings'; import { selectClientSetting } from 'redux/selectors/settings'; import * as SETTINGS from 'constants/settings'; import HeaderMenuButtons from './view'; -import { selectUserVerifiedEmail, selectUser, selectOdyseeMembershipName } from 'redux/selectors/user'; +import { selectUserVerifiedEmail, selectUser } from 'redux/selectors/user'; import { doOpenModal } from 'redux/actions/app'; const select = (state) => ({ @@ -11,7 +11,6 @@ const select = (state) => ({ automaticDarkModeEnabled: selectClientSetting(state, SETTINGS.AUTOMATIC_DARK_MODE_ENABLED), currentTheme: selectClientSetting(state, SETTINGS.THEME), user: selectUser(state), - odyseeMembership: selectOdyseeMembershipName(state), }); const perform = (dispatch) => ({ diff --git a/ui/component/headerMenuButtons/view.jsx b/ui/component/headerMenuButtons/view.jsx index a2da8cb20..873e90e11 100644 --- a/ui/component/headerMenuButtons/view.jsx +++ b/ui/component/headerMenuButtons/view.jsx @@ -2,9 +2,10 @@ import 'scss/component/_header.scss'; import { ENABLE_UI_NOTIFICATIONS, ENABLE_NO_SOURCE_CLAIMS } from 'config'; -import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button'; +import { Menu, MenuList, MenuButton } from '@reach/menu-button'; import * as ICONS from 'constants/icons'; import * as PAGES from 'constants/pages'; +import Button from 'component/button'; import HeaderMenuLink from 'component/common/header-menu-link'; import Icon from 'component/common/icon'; import NotificationHeaderButton from 'component/headerNotificationButton'; @@ -19,13 +20,10 @@ type HeaderMenuButtonProps = { user: ?User, handleThemeToggle: (boolean, string) => void, doOpenModal: (string, {}) => void, - odyseeMembership: ?string, }; export default function HeaderMenuButtons(props: HeaderMenuButtonProps) { - const { authenticated, automaticDarkModeEnabled, currentTheme, user, handleThemeToggle, odyseeMembership } = props; - - const isOnMembershipPage = window.location.pathname === `/$/${PAGES.ODYSEE_MEMBERSHIP}`; + const { authenticated, automaticDarkModeEnabled, currentTheme, user, handleThemeToggle } = props; const notificationsEnabled = ENABLE_UI_NOTIFICATIONS || (user && user.experimental_ui); const livestreamEnabled = Boolean(ENABLE_NO_SOURCE_CLAIMS && user && !user.odysee_live_disabled); @@ -58,27 +56,18 @@ export default function HeaderMenuButtons(props: HeaderMenuButtonProps) { {notificationsEnabled && } - - - - - - - - - - {/* don't show upgrade button if on membership page or already have a membership */} - {!isOnMembershipPage && !odyseeMembership && ( - - )} - - - handleThemeToggle(automaticDarkModeEnabled, currentTheme)}> - - {currentTheme === 'light' ? __('Dark') : __('Light')} - - - + {authenticated && ( + + + + + + )} ); } diff --git a/ui/component/headerProfileMenuButton/view.jsx b/ui/component/headerProfileMenuButton/view.jsx index 837325bb0..8067c77cc 100644 --- a/ui/component/headerProfileMenuButton/view.jsx +++ b/ui/component/headerProfileMenuButton/view.jsx @@ -88,6 +88,9 @@ export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) { )} {authenticated ? ( + + +
+ +
- +
+ + + +
diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss index fc59ec4c1..8b83cee72 100644 --- a/ui/scss/component/_header.scss +++ b/ui/scss/component/_header.scss @@ -475,3 +475,21 @@ margin: 0; } } + +.channel__selector { + width: 100%; + .menu__link { + width: 100% !important; + .claim-preview__title { + text-align: left; + } + .comment__badge { + flex: 1; + text-align: left; + } + .icon--ChevronDown { + margin-left: auto; + margin-right: 0; + } + } +} diff --git a/ui/scss/component/menu-button.scss b/ui/scss/component/menu-button.scss index 224c44e21..1551796e7 100644 --- a/ui/scss/component/menu-button.scss +++ b/ui/scss/component/menu-button.scss @@ -144,6 +144,8 @@ reach-portal { .menu__list--header { @extend .menu__list; + margin-top: 10px; + .channel__selector { margin: 0px; display: flex; @@ -153,6 +155,13 @@ reach-portal { } } + .MuiPaper-root { + top: calc(var(--header-height) - 11px) !important; + @media (max-width: $breakpoint-small) { + top: calc(var(--header-height-mobile) - 11px) !important; + } + } + [data-reach-menu-item][data-selected] { .menu__link { color: var(--color-odysee-contrast) !important; @@ -175,8 +184,6 @@ reach-portal { color: var(--color-odysee-contrast) !important; } } - - margin-top: 10px; } .menu__list--comments {