diff --git a/package.json b/package.json index f93cf526b..1569deac7 100644 --- a/package.json +++ b/package.json @@ -171,7 +171,6 @@ "react-router-dom": "^5.1.0", "react-simplemde-editor": "^4.0.0", "react-spring": "^8.0.20", - "react-sticky-box": "^0.8.0", "reakit": "^1.0.0-beta.13", "redux": "^3.6.0", "redux-persist": "^5.10.0", diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx index 5909a7e89..464110b06 100644 --- a/ui/component/header/view.jsx +++ b/ui/component/header/view.jsx @@ -2,7 +2,7 @@ import * as ICONS from 'constants/icons'; import { SETTINGS } from 'lbry-redux'; import * as PAGES from 'constants/pages'; -import React, { Fragment } from 'react'; +import React from 'react'; import { withRouter } from 'react-router'; import classnames from 'classnames'; import Button from 'component/button'; @@ -206,14 +206,17 @@ const Header = (props: Props) => { ) : ( <>
- - + + )}
{email} - ) : ( - - history.push(`/$/${PAGES.AUTH}`)}> - - {__('Register')} - - history.push(`/$/${PAGES.AUTH_SIGNIN}`)}> - - {__('Sign In')} - - - )} + ) : null} @@ -364,22 +356,20 @@ const Header = (props: Props) => { )} - {!authHeader ? ( + {!authHeader && !backout ? (
{(!IS_WEB || authenticated) && ( - - ); diff --git a/ui/component/router/view.jsx b/ui/component/router/view.jsx index 4222f7bf3..08a5f20bc 100644 --- a/ui/component/router/view.jsx +++ b/ui/component/router/view.jsx @@ -229,15 +229,17 @@ function AppRouter(props: Props) { - + diff --git a/ui/component/sideNavigation/index.js b/ui/component/sideNavigation/index.js index dbd6e4981..958cb7486 100644 --- a/ui/component/sideNavigation/index.js +++ b/ui/component/sideNavigation/index.js @@ -1,7 +1,7 @@ import { connect } from 'react-redux'; import { selectSubscriptions } from 'redux/selectors/subscriptions'; import { selectPurchaseUriSuccess, doClearPurchasedUriSuccess, SETTINGS } from 'lbry-redux'; -import { selectUserVerifiedEmail } from 'redux/selectors/user'; +import { selectUserVerifiedEmail, selectUser } from 'redux/selectors/user'; import { makeSelectClientSetting } from 'redux/selectors/settings'; import { doSignOut } from 'redux/actions/app'; import { selectUnreadNotificationCount } from 'redux/selectors/notifications'; @@ -14,6 +14,7 @@ const select = state => ({ email: selectUserVerifiedEmail(state), purchaseSuccess: selectPurchaseUriSuccess(state), unreadCount: selectUnreadNotificationCount(state), + user: selectUser(state), }); export default connect(select, { diff --git a/ui/component/sideNavigation/view.jsx b/ui/component/sideNavigation/view.jsx index 3ab83f3cb..b8f939043 100644 --- a/ui/component/sideNavigation/view.jsx +++ b/ui/component/sideNavigation/view.jsx @@ -4,7 +4,6 @@ import * as PAGES from 'constants/pages'; import * as ICONS from 'constants/icons'; import React from 'react'; import Button from 'component/button'; -import StickyBox from 'react-sticky-box/dist/esnext'; import classnames from 'classnames'; import NotificationBubble from 'component/notificationBubble'; @@ -62,6 +61,7 @@ const ABSOLUTE_LINKS: Array<{ label: __('New Channel'), navigate: `/$/${PAGES.CHANNEL_NEW}`, icon: ICONS.CHANNEL, + hideForUnauth: true, }, { label: __('Uploads'), @@ -78,14 +78,21 @@ const ABSOLUTE_LINKS: Array<{ }, { label: __('Creator Analytics'), - navigate: `/$/${PAGES.CREATOR_ANALYTICS}`, + navigate: `/$/${PAGES.CREATOR_DASHBOARD}`, icon: ICONS.ANALYTICS, + hideForUnauth: true, + }, + { + label: __('Wallet'), + navigate: `/$/${PAGES.WALLET}`, + icon: ICONS.WALLET, + hideForUnauth: true, }, { label: __('Notifications'), navigate: `/$/${PAGES.NOTIFICATIONS}`, icon: ICONS.NOTIFICATION, - extra: , + extra: , hideForUnauth: true, }, { @@ -96,7 +103,7 @@ const ABSOLUTE_LINKS: Array<{ }, { label: __('Invites'), - navigate: `/$/${PAGES.INVITES}`, + navigate: `/$/${PAGES.INVITE}`, icon: ICONS.INVITE, hideForUnauth: true, }, @@ -114,6 +121,35 @@ const ABSOLUTE_LINKS: Array<{ }, ]; +const UNAUTH_LINKS: Array<{ + label: string, + navigate: string, + icon: string, + extra?: Node, + hideForUnauth?: boolean, +}> = [ + { + label: __('Sign In'), + navigate: `/$/${PAGES.AUTH_SIGNIN}`, + icon: ICONS.SIGN_IN, + }, + { + label: __('Register'), + navigate: `/$/${PAGES.AUTH}`, + icon: ICONS.SIGN_UP, + }, + { + label: __('Settings'), + navigate: `/$/${PAGES.SETTINGS}`, + icon: ICONS.SETTINGS, + }, + { + label: __('Help'), + navigate: `/$/${PAGES.HELP}`, + icon: ICONS.HELP, + }, +]; + type Props = { subscriptions: Array, email: ?string, @@ -126,6 +162,7 @@ type Props = { unreadCount: number, purchaseSuccess: boolean, doClearPurchasedUriSuccess: () => void, + user: ?User, }; function SideNavigation(props: Props) { @@ -140,11 +177,23 @@ function SideNavigation(props: Props) { isMediumScreen, isOnFilePage, unreadCount, + user, } = props; + const notificationsEnabled = user && user.experimental_ui; const isAuthenticated = Boolean(email); const [pulseLibrary, setPulseLibrary] = React.useState(false); const isPersonalized = !IS_WEB || isAuthenticated; const isAbsolute = isOnFilePage || isMediumScreen; + const microNavigation = !sidebarOpen || isMediumScreen; + const subLinks = email + ? ABSOLUTE_LINKS.filter(link => { + if (!notificationsEnabled && link.icon === ICONS.NOTIFICATION) { + return false; + } + + return true; + }) + : UNAUTH_LINKS; React.useEffect(() => { if (purchaseSuccess) { @@ -176,20 +225,16 @@ function SideNavigation(props: Props) { return () => window.removeEventListener('keydown', handleKeydown); }, [sidebarOpen, setSidebarOpen, isAbsolute]); - const Wrapper = ({ children }: any) => - !isOnFilePage && !isMediumScreen ? ( - - {children} - - ) : ( - children - ); - return ( - +
{!isOnFilePage && ( -
)} ); diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss index ac1faaacf..4a5b89197 100644 --- a/ui/scss/component/_claim-list.scss +++ b/ui/scss/component/_claim-list.scss @@ -350,7 +350,7 @@ } @media (max-width: $breakpoint-medium) and (min-width: $breakpoint-small) { - $width: calc((100vw - var(--side-nav-width) - (var(--spacing-m) * 3)) / 3); + $width: calc((100vw - var(--side-nav-width--micro) - (var(--spacing-l) * 3)) / 3); width: $width; @include handleClaimTileGifThumbnail($width); @@ -365,7 +365,7 @@ } @media (max-width: $breakpoint-small) { - $width: calc((100vw / 2) - var(--spacing-s) * 2 - var(--spacing-m) / 2); + $width: calc((100vw / 2) - var(--spacing-xs) - var(--spacing-m) / 2); width: $width; @include handleClaimTileGifThumbnail($width); margin-bottom: var(--spacing-l); diff --git a/ui/scss/component/_content.scss b/ui/scss/component/_content.scss index bb22a092f..d061246d7 100644 --- a/ui/scss/component/_content.scss +++ b/ui/scss/component/_content.scss @@ -1,11 +1,7 @@ .content__viewer { @extend .card; position: absolute; - top: var(--spacing-l); - - @media (max-width: $breakpoint-small) { - top: var(--spacing-s); - } + top: var(--spacing-s); } .content__viewer--inline { diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss index b12ce0839..80105e3cd 100644 --- a/ui/scss/component/_header.scss +++ b/ui/scss/component/_header.scss @@ -110,7 +110,7 @@ .header__navigation-item--icon { @media (max-width: $breakpoint-small) { - margin-left: 0; + margin: 0; } } diff --git a/ui/scss/component/_main.scss b/ui/scss/component/_main.scss index 75f51749b..f1fc86279 100644 --- a/ui/scss/component/_main.scss +++ b/ui/scss/component/_main.scss @@ -20,6 +20,10 @@ padding-left: 0; padding-right: 0; + > :first-child { + flex-shrink: 0; + } + @media (max-width: $breakpoint-small) { padding: var(--spacing-xs); padding-top: var(--spacing-m); @@ -43,10 +47,12 @@ margin-right: auto; margin-left: auto; + @media (max-width: $breakpoint-medium) and (min-width: $breakpoint-small) { + margin: 0 var(--spacing-l); + } + @media (max-width: $breakpoint-medium) { width: 100%; - margin-right: var(--spacing-s); - margin-left: var(--spacing-s); } } @@ -67,6 +73,11 @@ .file-page__recommended { width: 25rem; height: 0%; + + @media (max-width: $breakpoint-medium) { + width: auto; + margin-top: var(--spacing-l); + } } @media (max-width: $breakpoint-medium) { diff --git a/ui/scss/component/_navigation.scss b/ui/scss/component/_navigation.scss index 6f67b2cbd..558a3214d 100644 --- a/ui/scss/component/_navigation.scss +++ b/ui/scss/component/_navigation.scss @@ -1,25 +1,41 @@ -.navigation { +.navigation__wrapper { width: var(--side-nav-width); + height: calc(100vh - var(--header-height)); +} + +.navigation__wrapper--micro { + width: var(--side-nav-width--micro); @media (max-width: $breakpoint-small) { - display: none; + width: 0; } } -.navigation--filepage { - z-index: 4; +.navigation__wrapper--absolute { + &:not(.navigation__wrapper--micro) { + width: 0; + } +} + +.navigation { position: fixed; - top: var(--header-height); left: 0; + top: var(--header-height); + width: var(--side-nav-width); height: calc(100vh - var(--header-height)); + overflow-y: auto; + border-right: 1px solid var(--color-border); + padding-top: var(--spacing-l); + padding-bottom: var(--spacing-l); +} + +.navigation--filepage { + @extend .navigation; + z-index: 4; width: var(--side-nav-width--large); - overflow-y: scroll; - margin-top: 0; - padding: var(--spacing-l); - padding-top: var(--spacing-s); - padding-left: 0; - border-top: 1px solid var(--color-border); + padding-top: 0; background-color: var(--color-card-background); + border-top: 1px solid var(--color-border); box-shadow: var(--card-box-shadow); .navigation-link { @@ -28,7 +44,12 @@ } .navigation--micro { + @extend .navigation; width: var(--side-nav-width--micro); + + @media (max-width: $breakpoint-small) { + display: none; + } } .navigation__secondary { @@ -38,18 +59,18 @@ .navigation-link { display: block; position: relative; - transition: color 0.2s; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--color-navigation-link); - margin-bottom: var(--spacing-s); padding-left: var(--spacing-s); + font-size: var(--font-body); + font-weight: var(--font-weight-bold); .icon { height: 1.5rem; width: 1.5rem; - stroke: var(--color-gray-5); + stroke: var(--color-navigation-icon); } .button__content { @@ -58,17 +79,9 @@ flex-direction: column; } - .button__label { - font-size: var(--font-small); - } - - &:hover { - @extend .navigation-link--extra; - color: var(--color-gray-5); - - .icon { - stroke: var(--color-gray-5); - } + &:hover:not(.navigation-link--active), + &:focus { + @extend .navigation-link--highlighted; } @media (min-width: $breakpoint-medium) { @@ -86,8 +99,6 @@ .button__label { margin-top: 0; - font-size: var(--font-body); - font-weight: var(--font-weight-bold); } &:focus { @@ -97,14 +108,11 @@ } .navigation-link--active { - background-color: var(--color-primary-alt); - border-radius: var(--border-radius); - border-top-left-radius: 0; - border-bottom-left-radius: 0; - color: var(--color-primary); + background-color: var(--color-navigation-active); + color: var(--color-navigation-active-text); .icon { - stroke: var(--color-primary); + stroke: var(--color-navigation-active-text); } } @@ -116,11 +124,13 @@ } } -.navigation-link--extra { - border-radius: var(--border-radius); - border-top-left-radius: 0; - border-bottom-left-radius: 0; - background-color: var(--color-gray-1); +.navigation-link--highlighted { + background-color: var(--color-navigation-hover); + color: var(--color-navigation-hover-text); + + .icon { + stroke: var(--color-navigation-hover-text); + } } .navigation-links { @@ -130,15 +140,6 @@ list-style: none; } -.navigation-links--relative { - @extend .navigation-links; - margin-right: var(--spacing-m); - - .navigation-link { - padding-left: var(--spacing-s); - } -} - .navigation-links--micro { .icon { height: 1.5rem; @@ -158,7 +159,6 @@ } .navigation-link { - margin-bottom: var(--spacing-xs); padding-left: 0; } diff --git a/ui/scss/component/_notification.scss b/ui/scss/component/_notification.scss index d47f8459b..efb93e577 100644 --- a/ui/scss/component/_notification.scss +++ b/ui/scss/component/_notification.scss @@ -68,3 +68,9 @@ align-items: center; justify-content: center; } + +.notification__bubble--inline { + @extend .notification__bubble; + top: 0.75rem; + right: 1rem; +} diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss index fb500c20e..e401af264 100644 --- a/ui/scss/init/_gui.scss +++ b/ui/scss/init/_gui.scss @@ -313,6 +313,14 @@ textarea { } } +.mobile-only { + display: none; + + @media (max-width: $breakpoint-small) { + display: block; + } +} + .mobile-hidden { @media (max-width: $breakpoint-small) { display: none !important; diff --git a/ui/scss/themes/dark.scss b/ui/scss/themes/dark.scss index 02eb887bf..7af8a3d7c 100644 --- a/ui/scss/themes/dark.scss +++ b/ui/scss/themes/dark.scss @@ -12,8 +12,14 @@ --color-link: var(--color-primary); --color-link-hover: #60e1ba; --color-link-active: #60e1ba; - --color-link-icon: #6a7580; - --color-navigation-link: #b3bcc6; + + --color-navigation-icon: #76808a; + --color-navigation-link: #b9c3ce; + --color-navigation-active: #333a41; + --color-navigation-active-text: #bac5d0; + --color-navigation-hover: #272c32; + --color-navigation-hover-text: #bac5d0; + --color-button-primary-bg: var(--color-primary-alt); --color-button-primary-bg-hover: #44796c; --color-button-primary-text: var(--color-primary); @@ -24,18 +30,18 @@ --color-button-alt-bg: #4d5660; --color-button-alt-bg-hover: #3e464d; --color-button-alt-text: #e2e9f0; - --color-header-button: var(--color-link-icon); + --color-header-button: #434b54; --color-button-border: var(--color-gray-5); // Color --color-focus: #2d69a5; --color-background-overlay: #212529d7; - --color-background: #212529; + --color-background: #1c1f22; --color-background-overlay: #21252980; - --color-border: #4f5b64; - --color-card-background: #2c3237; + --color-border: #343c43; + --color-card-background: #23292e; --color-card-background-highlighted: #384046; - --color-header-background: #434b53; + --color-header-background: #2c3137; --color-tab-text: var(--color-white); --color-tabs-background: #434b53; --color-tab-divider: var(--color-white); @@ -64,8 +70,8 @@ --color-input: #f4f4f5; --color-input-label: #d4d4d4; --color-input-placeholder: #f4f4f5; - --color-input-bg: #5d6772; - --color-input-bg-copyable: #434b53; + --color-input-bg: #4f5861; + --color-input-bg-copyable: #4f5861; --color-input-border: var(--color-border); --color-input-border-active: var(--color-secondary); --color-input-toggle: var(--color-primary); @@ -74,8 +80,8 @@ // Menu --color-menu-background: var(--color-header-background); - --color-menu-background--selected: #89939e; - --color-menu-background--active: #89939e; + --color-menu-background--selected: #5d646c; + --color-menu-background--active: #3a3f44; --color-menu-icon: #a7a7a7; --color-menu-icon-active: #d6d6d6; @@ -83,8 +89,8 @@ --color-table-highlight: #3a444e; // Search - --color-search-suggestion: #212529; - --color-search-suggestion-background: #cce6fb; + --color-search-suggestion: var(--color-text); + --color-search-suggestion-background: #313d46; --color-placeholder-background: #4e5862; --color-spinner-light: #5a6570; --color-spinner-dark: #212529; diff --git a/ui/scss/themes/light.scss b/ui/scss/themes/light.scss index 5b22b8c9d..0182cc920 100644 --- a/ui/scss/themes/light.scss +++ b/ui/scss/themes/light.scss @@ -1,8 +1,13 @@ :root { // Button - --color-link-icon: var(--color-gray-4); + --color-navigation-icon: var(--color-gray-5); --color-link-active: var(--color-primary); --color-navigation-link: var(--color-gray-5); + --color-navigation-active: var(--color-primary-alt); + --color-navigation-active-text: var(--color-primary); + --color-navigation-hover: var(--color-gray-1); + --color-navigation-hover-text: #3f3f3f; + --color-header-button: var(--color-button-alt-bg); --color-button-border: var(--color-gray-3); diff --git a/yarn.lock b/yarn.lock index 83a1beafc..c4708d59e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -881,7 +881,7 @@ core-js-pure "^3.0.0" regenerator-runtime "^0.13.4" -"@babel/runtime@^7.1.2", "@babel/runtime@^7.1.5", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.7", "@babel/runtime@^7.8.4": +"@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.7", "@babel/runtime@^7.8.4": version "7.10.2" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.2.tgz#d103f21f2602497d38348a32e008637d506db839" integrity sha512-6sF3uQw2ivImfVIl62RZ7MXhO2tap69WeWK57vAaimT6AZbE4FbqjdEJIN1UqoD6wI6B+1n9UiagafH1sxjOtg== @@ -9049,14 +9049,6 @@ react-spring@^8.0.20, react-spring@^8.0.27: "@babel/runtime" "^7.3.1" prop-types "^15.5.8" -react-sticky-box@^0.8.0: - version "0.8.0" - resolved "https://registry.yarnpkg.com/react-sticky-box/-/react-sticky-box-0.8.0.tgz#1c191936af8f5420087b703ec6da4ef46060076c" - dependencies: - "@babel/runtime" "^7.1.5" - prop-types "^15.6.2" - resize-observer-polyfill "^1.5.1" - react@^16.8.2: version "16.13.0" resolved "https://registry.yarnpkg.com/react/-/react-16.13.0.tgz#d046eabcdf64e457bbeed1e792e235e1b9934cf7" @@ -9514,10 +9506,6 @@ reselect@^3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/reselect/-/reselect-3.0.1.tgz#efdaa98ea7451324d092b2b2163a6a1d7a9a2147" -resize-observer-polyfill@^1.5.1: - version "1.5.1" - resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464" - resolve-cwd@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"