From a832fa17bd4a8b33e24665e482e58d911dc57c61 Mon Sep 17 00:00:00 2001 From: Rafael Date: Mon, 20 Dec 2021 09:32:32 -0300 Subject: [PATCH 1/4] Refactor notificationHeaderButton --- ui/component/headerMenuButtons/view.jsx | 2 +- .../index.js | 10 ++---- .../view.jsx | 32 +++++++------------ 3 files changed, 14 insertions(+), 30 deletions(-) rename ui/component/{notificationHeaderButton => headerNotificationButton}/index.js (59%) rename ui/component/{notificationHeaderButton => headerNotificationButton}/view.jsx (82%) diff --git a/ui/component/headerMenuButtons/view.jsx b/ui/component/headerMenuButtons/view.jsx index d315feb64..adc5835a4 100644 --- a/ui/component/headerMenuButtons/view.jsx +++ b/ui/component/headerMenuButtons/view.jsx @@ -5,7 +5,7 @@ import * as ICONS from 'constants/icons'; import * as PAGES from 'constants/pages'; import HeaderMenuLink from 'component/common/header-menu-link'; import Icon from 'component/common/icon'; -import NotificationHeaderButton from 'component/notificationHeaderButton'; +import NotificationHeaderButton from 'component/headerNotificationButton'; import React from 'react'; type HeaderMenuButtonProps = { diff --git a/ui/component/notificationHeaderButton/index.js b/ui/component/headerNotificationButton/index.js similarity index 59% rename from ui/component/notificationHeaderButton/index.js rename to ui/component/headerNotificationButton/index.js index de08c2ce0..1e139de8b 100644 --- a/ui/component/notificationHeaderButton/index.js +++ b/ui/component/headerNotificationButton/index.js @@ -1,16 +1,10 @@ import { connect } from 'react-redux'; -import { - selectNotifications, - selectIsFetchingNotifications, - selectUnseenNotificationCount, -} from 'redux/selectors/notifications'; +import { selectUnseenNotificationCount } from 'redux/selectors/notifications'; import { doSeeAllNotifications } from 'redux/actions/notifications'; import { selectUser } from 'redux/selectors/user'; import NotificationHeaderButton from './view'; -const select = state => ({ - notifications: selectNotifications(state), - fetching: selectIsFetchingNotifications(state), +const select = (state) => ({ unseenCount: selectUnseenNotificationCount(state), user: selectUser(state), }); diff --git a/ui/component/notificationHeaderButton/view.jsx b/ui/component/headerNotificationButton/view.jsx similarity index 82% rename from ui/component/notificationHeaderButton/view.jsx rename to ui/component/headerNotificationButton/view.jsx index 74c581888..eb1f99e3c 100644 --- a/ui/component/notificationHeaderButton/view.jsx +++ b/ui/component/headerNotificationButton/view.jsx @@ -1,41 +1,31 @@ // @flow -import * as PAGES from 'constants/pages'; +import { ENABLE_UI_NOTIFICATIONS } from 'config'; +import { useHistory } from 'react-router'; import * as ICONS from 'constants/icons'; -import React from 'react'; +import * as PAGES from 'constants/pages'; +import Button from 'component/button'; import Icon from 'component/common/icon'; import NotificationBubble from 'component/notificationBubble'; -import Button from 'component/button'; -import { useHistory } from 'react-router'; -import { ENABLE_UI_NOTIFICATIONS } from 'config'; +import React from 'react'; type Props = { unseenCount: number, - doSeeAllNotifications: () => void, user: ?User, + doSeeAllNotifications: () => void, }; export default function NotificationHeaderButton(props: Props) { - const { - unseenCount, - // notifications, - // fetching, - doSeeAllNotifications, - user, - } = props; - const notificationsEnabled = ENABLE_UI_NOTIFICATIONS || (user && user.experimental_ui); + const { unseenCount, user, doSeeAllNotifications } = props; + const { push } = useHistory(); + const notificationsEnabled = ENABLE_UI_NOTIFICATIONS || (user && user.experimental_ui); function handleMenuClick() { - if (unseenCount > 0) { - doSeeAllNotifications(); - } - + if (unseenCount > 0) doSeeAllNotifications(); push(`/$/${PAGES.NOTIFICATIONS}`); } - if (!notificationsEnabled) { - return null; - } + if (!notificationsEnabled) return null; return ( + + + ); } diff --git a/ui/scss/component/_channel.scss b/ui/scss/component/_channel.scss index b83d89498..986b1c50b 100644 --- a/ui/scss/component/_channel.scss +++ b/ui/scss/component/_channel.scss @@ -363,17 +363,6 @@ $actions-z-index: 2; } } -.channel-staked__tooltip { - display: flex; - align-items: center; - line-height: 1rem; -} - -.channel-staked__tooltip-text { - margin-left: var(--spacing-xs); - font-size: var(--font-xsmall); -} - .channel-staked__wrapper { display: flex; position: absolute; diff --git a/ui/scss/component/_tooltip.scss b/ui/scss/component/_tooltip.scss index 2013b410a..896a040b3 100644 --- a/ui/scss/component/_tooltip.scss +++ b/ui/scss/component/_tooltip.scss @@ -1,8 +1,24 @@ -[data-reach-tooltip] { - border-radius: var(--border-radius); - background-color: var(--color-tooltip-bg); - color: var(--color-tooltip-text); - border: none; - padding: var(--spacing-s); - overflow: hidden; +.MuiTooltip-tooltip { + border-radius: var(--border-radius) !important; + background-color: var(--color-tooltip-bg) !important; + color: var(--color-tooltip-text) !important; + font-size: var(--font-small) !important; +} + +.MuiTooltip-arrow { + color: var(--color-tooltip-bg) !important; + font-size: var(--font-xxsmall) !important; +} + +.channel-staked__tooltip { + display: flex; + align-items: center; + line-height: 1rem; + padding: var(--spacing-xs); + + .channel-staked__tooltip-text { + margin-left: var(--spacing-xs); + font-size: var(--font-xsmall); + font-size: var(--font-small); + } } diff --git a/ui/scss/themes/dark.scss b/ui/scss/themes/dark.scss index bebc2af07..eb39ad54a 100644 --- a/ui/scss/themes/dark.scss +++ b/ui/scss/themes/dark.scss @@ -123,6 +123,7 @@ --color-purchased-text: var(--color-gray-5); --color-thumbnail-background: var(--color-gray-5); --color-tooltip-bg: #2f3337; + --color-tooltip-text: #fafafa; --color-help-warning-bg: #d97706; --color-help-warning-text: white; --color-blockquote: var(--color-gray-5); -- 2.45.3 From 3dfa522fa99d20a41d7bf9f082c473253edff302 Mon Sep 17 00:00:00 2001 From: Rafael Date: Mon, 20 Dec 2021 09:40:24 -0300 Subject: [PATCH 3/4] Decrease --header-height by 20% --- ui/component/fileRenderFloating/view.jsx | 7 +++++-- ui/scss/component/_wunderbar.scss | 2 +- ui/scss/component/menu-button.scss | 2 +- ui/scss/init/_vars.scss | 2 +- 4 files changed, 8 insertions(+), 5 deletions(-) diff --git a/ui/component/fileRenderFloating/view.jsx b/ui/component/fileRenderFloating/view.jsx index ab1fc483c..f36d6fcd1 100644 --- a/ui/component/fileRenderFloating/view.jsx +++ b/ui/component/fileRenderFloating/view.jsx @@ -17,6 +17,10 @@ import { useHistory } from 'react-router'; import { isURIEqual } from 'util/lbryURI'; import AutoplayCountdown from 'component/autoplayCountdown'; +// scss/init/vars.scss +// --header-height +const HEADER_HEIGHT = 64; + const IS_DESKTOP_MAC = typeof process === 'object' ? process.platform === 'darwin' : false; const DEBOUNCE_WINDOW_RESIZE_HANDLER_MS = 100; export const INLINE_PLAYER_WRAPPER_CLASS = 'inline-player__wrapper'; @@ -351,8 +355,7 @@ export default function FileRenderFloating(props: Props) { width: fileViewerRect.width, height: fileViewerRect.height, left: fileViewerRect.x, - // 80px is header height in scss/init/vars.scss - top: fileViewerRect.windowOffset + fileViewerRect.top - 80 - (IS_DESKTOP_MAC ? 24 : 0), + top: fileViewerRect.windowOffset + fileViewerRect.top - HEADER_HEIGHT - (IS_DESKTOP_MAC ? 24 : 0), } : {} } diff --git a/ui/scss/component/_wunderbar.scss b/ui/scss/component/_wunderbar.scss index 0645b6de7..191cb745d 100644 --- a/ui/scss/component/_wunderbar.scss +++ b/ui/scss/component/_wunderbar.scss @@ -103,7 +103,7 @@ position: absolute; left: 0; right: 0; - top: calc(var(--header-height) - (var(--height-input)) + 3px); + top: calc(var(--header-height) - var(--spacing-m) - 3px); @extend .card; box-shadow: var(--card-box-shadow); border-top-right-radius: 0; diff --git a/ui/scss/component/menu-button.scss b/ui/scss/component/menu-button.scss index 593ffa47a..9a23cfd4d 100644 --- a/ui/scss/component/menu-button.scss +++ b/ui/scss/component/menu-button.scss @@ -86,7 +86,7 @@ .menu__list--header { @extend .menu__list; - margin-top: 19px; + margin-top: var(--spacing-s); } .menu__list--comments { diff --git a/ui/scss/init/_vars.scss b/ui/scss/init/_vars.scss index 93009114f..d6a048513 100644 --- a/ui/scss/init/_vars.scss +++ b/ui/scss/init/_vars.scss @@ -72,7 +72,7 @@ $breakpoint-large: 1600px; // Header // This is tied to the floating player so it knows where to attach to // ui/component/fileRenderFloating/view.jsx - --header-height: 80px; + --header-height: 64px; // Inline Player --inline-player-max-height: calc(100vh - var(--header-height) - var(--spacing-l) * 2); -- 2.45.3 From 90f0b669597d94e5e0cc32bb324aff30e74956cf Mon Sep 17 00:00:00 2001 From: zeppi Date: Wed, 26 Jan 2022 16:07:58 -0500 Subject: [PATCH 4/4] more header cherry-pick --- ui/component/header/view.jsx | 146 +++++++++-------- ui/component/headerMenuButtons/view.jsx | 6 +- .../headerNotificationButton/view.jsx | 7 +- ui/component/headerProfileMenuButton/view.jsx | 8 +- ui/scss/component/_header.scss | 153 ++++++++++-------- ui/scss/component/_wunderbar.scss | 4 +- ui/scss/component/menu-button.scss | 6 - ui/scss/init/_gui.scss | 6 - 8 files changed, 170 insertions(+), 166 deletions(-) diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx index b9dd30185..d363a2366 100644 --- a/ui/component/header/view.jsx +++ b/ui/component/header/view.jsx @@ -1,4 +1,6 @@ // @flow +// import 'scss/component/_header.scss'; // ody codesplits this. no. + import { useIsMobile } from 'effects/use-screensize'; import { withRouter } from 'react-router'; import * as ICONS from 'constants/icons'; @@ -18,7 +20,6 @@ import { IS_MAC } from 'component/app/view'; import NavigationButton from 'component/navigationButton'; type Props = { - authenticated: boolean, authHeader: boolean, backout: { backLabel?: string, @@ -50,7 +51,6 @@ type Props = { const Header = (props: Props) => { const { - authenticated, authHeader, backout, balance, @@ -120,8 +120,9 @@ const Header = (props: Props) => { } }, [canBackout, onBackout]); - const userButtons = (className: string) => ( -
+ const userButtons = (hideWallet?: boolean, hideProfile?: boolean) => ( +
+ {isMobile && !authHeader && !canBackout && } 0 @@ -137,7 +138,7 @@ const Header = (props: Props) => { // : __('Your Wallet') // } navigate={`/$/${PAGES.WALLET}`} - className={classnames(className, 'header__navigation-item--balance')} + className="button--file-action header__navigationItem--balance" label={hideBalance || Number(roundedBalance) === 0 ? __('Your Wallet') : roundedBalance} icon={ICONS.LBC} // @if TARGET='app' @@ -165,50 +166,51 @@ const Header = (props: Props) => { }} // @endif > -
+
{!authHeader && canBackout ? ( -
-
+ <> +
+
+ {backTitle &&

{(isMobile && simpleBackTitle) || backTitle}

} + {userButtons(false, isMobile)} + ) : ( <>
- +
+ + {!authHeader && ( + + + + )} + +
- {!authHeader && ( - - - - )} - - {!authHeader && (
{/* @if TARGET='app' */} @@ -223,37 +225,33 @@ const Header = (props: Props) => {
)} + + {!authHeader && !canBackout + ? userButtons(isMobile) + : !isVerifyPage && + !hideCancel && ( +
+
+ )}
- - {!authHeader && !canBackout - ? userButtons('header__navigation-item menu__title mobile-hidden') - : !isVerifyPage && - !hideCancel && ( -
- {/* Add an empty span here so we can use the same style as above */} - {/* This pushes the close button to the right side */} - - -
- )} )}
diff --git a/ui/component/headerMenuButtons/view.jsx b/ui/component/headerMenuButtons/view.jsx index 3000e9958..687fe4b2e 100644 --- a/ui/component/headerMenuButtons/view.jsx +++ b/ui/component/headerMenuButtons/view.jsx @@ -1,4 +1,6 @@ // @flow +// import 'scss/component/_header.scss'; // ody codesplits this; no. + import { ENABLE_UI_NOTIFICATIONS } from 'config'; import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button'; import * as ICONS from 'constants/icons'; @@ -26,7 +28,7 @@ export default function HeaderMenuButtons(props: HeaderMenuButtonProps) {
- + @@ -41,7 +43,7 @@ export default function HeaderMenuButtons(props: HeaderMenuButtonProps) { - + diff --git a/ui/component/headerNotificationButton/view.jsx b/ui/component/headerNotificationButton/view.jsx index 06c0ce9f8..40a94f877 100644 --- a/ui/component/headerNotificationButton/view.jsx +++ b/ui/component/headerNotificationButton/view.jsx @@ -1,4 +1,6 @@ // @flow +// import 'scss/component/_header.scss'; // ody codesplits this; no. REMOVE THESE + import { ENABLE_UI_NOTIFICATIONS } from 'config'; import { useHistory } from 'react-router'; import * as ICONS from 'constants/icons'; @@ -30,10 +32,7 @@ export default function NotificationHeaderButton(props: Props) { return ( - diff --git a/ui/component/headerProfileMenuButton/view.jsx b/ui/component/headerProfileMenuButton/view.jsx index 1e35de7ac..4a1aba3e2 100644 --- a/ui/component/headerProfileMenuButton/view.jsx +++ b/ui/component/headerProfileMenuButton/view.jsx @@ -1,4 +1,6 @@ // @flow +// import 'scss/component/_header.scss'; // REMOVE! + import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button'; import * as ICONS from 'constants/icons'; import * as PAGES from 'constants/pages'; @@ -26,9 +28,9 @@ export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) { {activeChannelUrl ? ( diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss index 906ec911d..17c1c2982 100644 --- a/ui/scss/component/_header.scss +++ b/ui/scss/component/_header.scss @@ -1,3 +1,6 @@ +@import '../init/vars'; +@import '../init/mixins'; + .header { z-index: 3; // Main content uses z-index: 1, other content uses z-index: 2, this ensures it always scrolls under the header position: fixed; @@ -6,6 +9,7 @@ background-color: var(--color-header-background); box-shadow: var(--card-box-shadow); font-size: var(--font-body); + user-select: none; -webkit-user-select: none; -webkit-app-region: drag; @@ -23,31 +27,32 @@ opacity: 1; position: relative; overflow: unset; - width: inherit; - height: inherit; + width: unset; + height: unset; } } - - & > * { - user-select: none; - } } .header--minimal { box-shadow: none; background-color: var(--color-background); border-bottom: none; -} -.header--mac { - padding-top: var(--mac-titlebar-height); + .header__navigation { + padding: var(--spacing-xs); + } + + .header__navigationItem--logo { + height: 3rem; + } } .header__contents { - height: calc(var(--header-height)); display: flex; align-items: center; - padding: 0 var(--spacing-m); + flex: 1; + height: var(--header-height); + padding: var(--spacing-s) var(--spacing-m); @media (max-width: $breakpoint-small) { padding: var(--spacing-xs); @@ -55,17 +60,42 @@ } .header__navigation { - flex: 1; display: flex; align-items: center; + justify-content: space-between; + flex: 1; + height: var(--header-height); + padding: var(--spacing-s) var(--spacing-m); + flex-wrap: nowrap; +} + +.card__actions--between { + .header__menu--left { + @media (max-width: $breakpoint-small) { + max-width: 3rem; + } + } } .header__menu { display: flex; - justify-content: space-between; align-items: center; } +.header__menu--left { + @extend .header__menu; + justify-content: flex-start; +} + +.header__menu--right { + @extend .header__menu; + justify-content: flex-end; + + @media (max-width: $breakpoint-small) { + max-width: 4rem; + } +} + .header__buttons { display: flex; } @@ -77,7 +107,7 @@ max-width: fit-content; } -.header__navigation-item { +.header__navigationItem { height: var(--height-button); display: flex; justify-content: center; @@ -89,11 +119,16 @@ svg { stroke: var(--color-text); } + + &[aria-expanded='true'] { + background-color: var(--color-header-button-active); + } } .header__navigation-item--back, .header__navigation-item--forward, -.header__navigation-item--icon { +.header__navigationItem--icon { + @extend .header__navigationItem; width: var(--height-button); background-color: var(--color-header-button); border-radius: 1.5rem; @@ -109,6 +144,10 @@ } } + @media (max-width: $breakpoint-small) { + margin: 0; + } + span { display: flex; justify-content: center; @@ -116,8 +155,8 @@ } } -.header__navigation-item--profile-pic { - margin-left: var(--spacing-m); +.header__navigationItem--profilePic { + margin-right: var(--spacing-s); .channel-thumbnail { height: var(--height-button); @@ -130,8 +169,8 @@ } } -.header__navigation-item--balance { - @extend .button--file-action; +.header__navigationItem--balance { + @extend .header__navigationItem; margin: 0 var(--spacing-s); color: var(--color-text); @@ -140,17 +179,8 @@ } } -.header__navigation-item--forward { - margin-right: 0; -} - -.header__navigation-item--icon { - @media (max-width: $breakpoint-small) { - margin: 0; - } -} - -.header__navigation-item--lbry { +.header__navigationItem--logo { + @extend .header__navigationItem; height: 4rem; display: flex; align-items: center; @@ -172,61 +202,44 @@ } } -.header--minimal { - .header__navigation-item--lbry { - height: 3rem; - } -} - -.header__navigation-dropdown { - @extend .menu__list--header; - padding: 0; - position: absolute; - list-style-type: none; - background-color: var(--color-header-background); -} - -.header__navigation-button { - margin: 0; - padding: var(--spacing-xxs) var(--spacing-m); - display: flex; - align-items: center; - - &:hover { - cursor: pointer; - background-color: var(--color-menu-background--active); - } -} - -.header__navigation-button-help { - @extend .help; - margin-top: 0; - margin-left: var(--spacing-s); -} - -.header__auth-buttons { +.header__authButtons { display: flex; align-items: center; font-weight: var(--font-weight-bold); - margin-left: var(--spacing-s); & > *:not(:last-child) { margin: 0 var(--spacing-m); } + + @media (max-width: $breakpoint-small) { + .button--link { + margin: 0; + } + + .button--primary { + padding: var(--spacing-xxs); + } + } } .header__center { display: flex; - justify-content: flex-end; + justify-content: center; width: 100%; - - @media (min-width: $breakpoint-small) { - justify-content: center; - } } -.header__auth-title { +.header__authTitle { + @extend .header__center; + justify-content: center; + @media (min-width: $breakpoint-small) { font-size: var(--font-large); } } + +.ReactModal__Overlay { + .button--close { + margin: 0; + margin-top: var(--spacing-xxs); + } +} diff --git a/ui/scss/component/_wunderbar.scss b/ui/scss/component/_wunderbar.scss index 191cb745d..b08561926 100644 --- a/ui/scss/component/_wunderbar.scss +++ b/ui/scss/component/_wunderbar.scss @@ -1,3 +1,5 @@ +@import './header'; + .wunderbar__wrapper { flex: 1; max-width: 30rem; @@ -227,7 +229,7 @@ .wunderbar__mobile-search { @extend .button--alt; - @extend .header__navigation-item--icon; + @extend .header__navigationItem--icon; padding: var(--spacing-xs); margin-right: var(--spacing-m); diff --git a/ui/scss/component/menu-button.scss b/ui/scss/component/menu-button.scss index 9a23cfd4d..8f87e9428 100644 --- a/ui/scss/component/menu-button.scss +++ b/ui/scss/component/menu-button.scss @@ -65,12 +65,6 @@ } } -.menu__title { - &[aria-expanded='true'] { - background-color: var(--color-header-button-active); - } -} - .menu__list { box-shadow: var(--card-box-shadow); animation: menu-animate-in var(--animation-duration) var(--animation-style); diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss index ca563bf9e..e224474ce 100644 --- a/ui/scss/init/_gui.scss +++ b/ui/scss/init/_gui.scss @@ -480,12 +480,6 @@ textarea { } } -.mobile-hidden { - @media (max-width: $breakpoint-small) { - display: none !important; - } -} - .ads-test { height: 50vh; position: relative; -- 2.45.3