From ac459120ca01198ac8b0ebb7d44c0b2eff985849 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt <sean@lbry.io> Date: Thu, 18 Apr 2019 15:10:46 -0400 Subject: [PATCH 01/12] fix: app deep linking --- src/ui/index.jsx | 24 ++++++++---------------- 1 file changed, 8 insertions(+), 16 deletions(-) diff --git a/src/ui/index.jsx b/src/ui/index.jsx index ca5d4c062..df69c2e41 100644 --- a/src/ui/index.jsx +++ b/src/ui/index.jsx @@ -26,11 +26,13 @@ import pjson from 'package.json'; import app from './app'; import analytics from './analytics'; import doLogWarningConsoleMessage from './logWarningConsoleMessage'; -import { ConnectedRouter } from 'connected-react-router'; +import { ConnectedRouter, push } from 'connected-react-router'; import cookie from 'cookie'; +import { formatLbryUriForWeb } from 'util/uri'; + import(/* webpackChunkName: "styles" */ /* webpackPrefetch: true */ -'scss/all.scss'); + 'scss/all.scss'); const APPPAGEURL = 'lbry://?'; @@ -47,16 +49,6 @@ if (process.env.SEARCH_API_URL) { setSearchApi(process.env.SEARCH_API_URL); } -// @if TARGET='app' -ipcRenderer.on('navigate-backward', () => { - // app.store.dispatch(doHistoryBack()); -}); - -ipcRenderer.on('navigate-forward', () => { - // app.store.dispatch(doHistoryForward()); -}); -// @endif - // @if TARGET='web' const SDK_API_URL = process.env.SDK_API_URL || 'https://api.piratebay.com/api/proxy'; Lbry.setDaemonConnectionString(SDK_API_URL); @@ -66,7 +58,6 @@ Lbry.setDaemonConnectionString(SDK_API_URL); // We interect with ipcRenderer to get the auth key from a users keyring // We keep a local variable for authToken beacuse `ipcRenderer.send` does not // contain a response, so there is no way to know when it's been set - let authToken; Lbryio.setOverride( 'setAuthToken', @@ -141,9 +132,10 @@ ipcRenderer.on('open-uri-requested', (event, uri, newSession) => { app.store.dispatch(doConditionalAuthNavigate(newSession)); } else if (uri.startsWith(APPPAGEURL)) { const navpage = uri.replace(APPPAGEURL, '').toLowerCase(); - // app.store.dispatch(doNavigate(`/${navpage}`)); + app.store.dispatch(push(`/$/${navpage}`)); } else if (isURIValid(uri)) { - // app.store.dispatch(doNavigate('/show', { uri })); + const formattedUri = formatLbryUriForWeb(uri); + app.store.dispatch(push(formattedUri)); } else { app.store.dispatch( doToast({ @@ -156,7 +148,7 @@ ipcRenderer.on('open-uri-requested', (event, uri, newSession) => { ipcRenderer.on('open-menu', (event, uri) => { if (uri && uri.startsWith('/help')) { - // app.store.dispatch(doNavigate('/help')); + app.store.dispatch(push('/$/help')); } }); From e676d0b4fb85a6b1ad9558b9358874ac8c668beb Mon Sep 17 00:00:00 2001 From: Sean Yesmunt <sean@lbry.io> Date: Thu, 18 Apr 2019 15:40:53 -0400 Subject: [PATCH 02/12] add back static import of styles --- src/ui/index.jsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/ui/index.jsx b/src/ui/index.jsx index df69c2e41..e01169358 100644 --- a/src/ui/index.jsx +++ b/src/ui/index.jsx @@ -30,9 +30,10 @@ import { ConnectedRouter, push } from 'connected-react-router'; import cookie from 'cookie'; import { formatLbryUriForWeb } from 'util/uri'; -import(/* webpackChunkName: "styles" */ -/* webpackPrefetch: true */ - 'scss/all.scss'); +// Import our app styles +// If a style is not necessary for the initial page load, it should be removed from `all.scss` +// and loaded dynamically in the component that consumes it +import 'scss/all.scss'; const APPPAGEURL = 'lbry://?'; From d0bad3cf01e174658d9b163b50160373983045d3 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt <sean@lbry.io> Date: Fri, 19 Apr 2019 12:19:55 -0400 Subject: [PATCH 03/12] prevent thumbnails from shinking to 0 width --- src/ui/scss/component/_media.scss | 12 ++---------- src/ui/scss/component/_search.scss | 2 +- 2 files changed, 3 insertions(+), 11 deletions(-) diff --git a/src/ui/scss/component/_media.scss b/src/ui/scss/component/_media.scss index 5363166dc..be8c545f5 100644 --- a/src/ui/scss/component/_media.scss +++ b/src/ui/scss/component/_media.scss @@ -35,13 +35,12 @@ } .media__thumb { + flex-shrink: 0; width: 20rem; } .media__info { margin-left: var(--spacing-vertical-medium); - width: calc(80% - 20rem); - min-width: 40rem; } } @@ -49,12 +48,11 @@ font-size: 2rem; .media__thumb { - width: 30rem; + width: 25rem; } .media__info { margin-left: var(--spacing-vertical-large); - flex: 1; } .media__subtext { @@ -73,12 +71,6 @@ width: 11em; } - .media__info { - width: calc(100% - 10em); - min-width: auto; - position: relative; - } - .media__title { margin-bottom: var(--spacing-vertical-small); } diff --git a/src/ui/scss/component/_search.scss b/src/ui/scss/component/_search.scss index 1ce718c0b..160ecf35c 100644 --- a/src/ui/scss/component/_search.scss +++ b/src/ui/scss/component/_search.scss @@ -1,7 +1,6 @@ .search__header { background-color: $lbry-black; color: $lbry-white; - min-height: 300px; padding: var(--spacing-vertical-large); .placeholder { @@ -14,6 +13,7 @@ .media__subtitle { color: rgba($lbry-white, 0.9); + font-size: 0.7em; } html[data-mode='dark'] & { From 81fc2d596c907fb5da2d1a5b78e9502560498da5 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt <sean@lbry.io> Date: Fri, 19 Apr 2019 12:25:28 -0400 Subject: [PATCH 04/12] fix: default thumbnail on prod electron --- src/ui/component/cardMedia/view.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/component/cardMedia/view.jsx b/src/ui/component/cardMedia/view.jsx index 6c9f41994..54e692eee 100644 --- a/src/ui/component/cardMedia/view.jsx +++ b/src/ui/component/cardMedia/view.jsx @@ -15,7 +15,7 @@ class CardMedia extends React.PureComponent<Props> { style={ thumbnail ? { backgroundImage: `url('${thumbnail}')` } - : { backgroundImage: `url(/${Placeholder})` } + : { backgroundImage: `url(${Placeholder})` } } className="media__thumb" /> From 62a6b739428e17d9c3c8592f24563388f01ce660 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt <sean@lbry.io> Date: Fri, 19 Apr 2019 12:55:21 -0400 Subject: [PATCH 05/12] only navigate away from claim if abandoning then i can still see other claims on that page --- src/ui/modal/modalRemoveFile/index.js | 4 ++-- src/ui/redux/actions/file.js | 6 +++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/ui/modal/modalRemoveFile/index.js b/src/ui/modal/modalRemoveFile/index.js index 9b44ce8d0..59d0cdb70 100644 --- a/src/ui/modal/modalRemoveFile/index.js +++ b/src/ui/modal/modalRemoveFile/index.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import { doDeleteFileAndGoBack } from 'redux/actions/file'; +import { doDeleteFileAndMaybeGoBack } from 'redux/actions/file'; import { makeSelectTitleForUri, makeSelectClaimIsMine, makeSelectFileInfoForUri } from 'lbry-redux'; import { doHideModal } from 'redux/actions/app'; import ModalRemoveFile from './view'; @@ -13,7 +13,7 @@ const select = (state, props) => ({ const perform = dispatch => ({ closeModal: () => dispatch(doHideModal()), deleteFile: (fileInfo, deleteFromComputer, abandonClaim) => { - dispatch(doDeleteFileAndGoBack(fileInfo, deleteFromComputer, abandonClaim)); + dispatch(doDeleteFileAndMaybeGoBack(fileInfo, deleteFromComputer, abandonClaim)); }, }); diff --git a/src/ui/redux/actions/file.js b/src/ui/redux/actions/file.js index fee8cb114..4fba2425d 100644 --- a/src/ui/redux/actions/file.js +++ b/src/ui/redux/actions/file.js @@ -10,6 +10,7 @@ import { selectFileInfosByOutpoint, } from 'lbry-redux'; import { doHideModal } from 'redux/actions/app'; +import { goBack } from 'connected-react-router'; export function doOpenFileInFolder(path) { return () => { @@ -58,11 +59,14 @@ export function doDeleteFile(outpoint, deleteFromComputer, abandonClaim) { }; } -export function doDeleteFileAndGoBack(fileInfo, deleteFromComputer, abandonClaim) { +export function doDeleteFileAndMaybeGoBack(fileInfo, deleteFromComputer, abandonClaim) { return dispatch => { const actions = []; actions.push(doHideModal()); actions.push(doDeleteFile(fileInfo, deleteFromComputer, abandonClaim)); dispatch(batchActions(...actions)); + if (abandonClaim) { + dispatch(goBack()); + } }; } From 58f655ae85a5c12ff9a5bbb34b66731785967c53 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt <sean@lbry.io> Date: Fri, 19 Apr 2019 12:57:00 -0400 Subject: [PATCH 06/12] prevent long download path links from screwing up the page layout --- src/ui/component/fileDetails/view.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ui/component/fileDetails/view.jsx b/src/ui/component/fileDetails/view.jsx index fc55a98a3..72bdee683 100644 --- a/src/ui/component/fileDetails/view.jsx +++ b/src/ui/component/fileDetails/view.jsx @@ -104,6 +104,7 @@ class FileDetails extends PureComponent<Props> { {__('Downloaded to')} {': '} <Button + constrict button="link" onClick={() => openFolder(downloadPath)} label={downloadNote || downloadPath} From 0b4919db3fd820a8b7cf4dddebcc24eed8ef23fc Mon Sep 17 00:00:00 2001 From: Sean Yesmunt <sean@lbry.io> Date: Fri, 19 Apr 2019 13:56:58 -0400 Subject: [PATCH 07/12] fix: don't show insufficient credits message on my own claims --- src/ui/page/file/view.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ui/page/file/view.jsx b/src/ui/page/file/view.jsx index ddd779975..36250354f 100644 --- a/src/ui/page/file/view.jsx +++ b/src/ui/page/file/view.jsx @@ -151,7 +151,7 @@ class FilePage extends React.Component<Props> { mediaType, contentType, fileName, - }) + }); const showFile = PLAYABLE_MEDIA_TYPES.includes(mediaType) || PREVIEW_MEDIA_TYPES.includes(mediaType); @@ -176,7 +176,7 @@ class FilePage extends React.Component<Props> { editUri = buildURI(uriObject); } - const insufficientCredits = costInfo && costInfo.cost > balance; + const insufficientCredits = !claimIsMine && costInfo && costInfo.cost > balance; return ( <Page notContained className="main--file-page"> From af4b34146e498e03850f15b8639a6ec53ec6d935 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt <sean@lbry.io> Date: Fri, 19 Apr 2019 14:02:46 -0400 Subject: [PATCH 08/12] add lbry uri navigation on search page and make it easy to copy --- src/ui/page/file/view.jsx | 4 +--- src/ui/page/search/view.jsx | 5 ++++- src/ui/scss/component/_media.scss | 1 + 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/ui/page/file/view.jsx b/src/ui/page/file/view.jsx index 36250354f..47a506fc3 100644 --- a/src/ui/page/file/view.jsx +++ b/src/ui/page/file/view.jsx @@ -181,9 +181,7 @@ class FilePage extends React.Component<Props> { return ( <Page notContained className="main--file-page"> <div className="grid-area--content"> - <h1 className="media__uri"> - <Button navigate={uri} label={uri} /> - </h1> + <h1 className="media__uri">{uri}</h1> {insufficientCredits && ( <div className="media__insufficient-credits help--warning"> {__( diff --git a/src/ui/page/search/view.jsx b/src/ui/page/search/view.jsx index c28774704..97e80f753 100644 --- a/src/ui/page/search/view.jsx +++ b/src/ui/page/search/view.jsx @@ -10,6 +10,7 @@ import Page from 'component/page'; import ToolTip from 'component/common/tooltip'; import Icon from 'component/common/icon'; import SearchOptions from 'component/searchOptions'; +import Button from 'component/button'; type Props = { doSearch: string => void, location: UrlLocation }; @@ -43,7 +44,9 @@ export default function SearchPage(props: Props) { <Fragment> {isValid && ( <header className="search__header"> - <h1 className="media__uri">{uri}</h1> + <Button navigate={uri} className="media__uri"> + {uri} + </Button> {isChannel ? ( <ChannelTile size="large" isSearchResult uri={uri} /> ) : ( diff --git a/src/ui/scss/component/_media.scss b/src/ui/scss/component/_media.scss index be8c545f5..37072a30d 100644 --- a/src/ui/scss/component/_media.scss +++ b/src/ui/scss/component/_media.scss @@ -145,6 +145,7 @@ font-size: 1.1rem; padding-bottom: 5px; opacity: 0.6; + user-select: all; } .media__insufficient-credits { From 538cf4dc460309e01cb9d90b644d819254bd8e9b Mon Sep 17 00:00:00 2001 From: Sean Yesmunt <sean@lbry.io> Date: Fri, 19 Apr 2019 14:47:25 -0400 Subject: [PATCH 09/12] encode search query before navigating --- src/ui/component/wunderbar/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/component/wunderbar/index.js b/src/ui/component/wunderbar/index.js index 9945ff217..50f849afb 100644 --- a/src/ui/component/wunderbar/index.js +++ b/src/ui/component/wunderbar/index.js @@ -22,7 +22,7 @@ const select = state => ({ const perform = (dispatch, ownProps) => ({ onSearch: query => { - ownProps.history.push({ pathname: `/$/search`, search: `?q=${query}` }); + ownProps.history.push({ pathname: `/$/search`, search: `?q=${encodeURIComponent(query)}` }); analytics.apiLogSearch(); }, onSubmit: uri => { From f52c4f229719a264ad0f94774e8e997f2b219295 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt <sean@lbry.io> Date: Fri, 19 Apr 2019 15:28:43 -0400 Subject: [PATCH 10/12] fix: account locked styling --- src/ui/page/rewards/view.jsx | 42 +++++++++++++++++++----------------- 1 file changed, 22 insertions(+), 20 deletions(-) diff --git a/src/ui/page/rewards/view.jsx b/src/ui/page/rewards/view.jsx index 65aab22ae..91ac446d3 100644 --- a/src/ui/page/rewards/view.jsx +++ b/src/ui/page/rewards/view.jsx @@ -56,26 +56,28 @@ class RewardsPage extends PureComponent<Props> { } return ( <section className="card card--section"> - <p> - {__( - 'This account must undergo review before you can participate in the rewards program.' - )}{' '} - {__('This can take anywhere from several minutes to several days.')} - </p> + <div className="card__content"> + <p> + {__( + 'This account must undergo review before you can participate in the rewards program.' + )}{' '} + {__('This can take anywhere from several minutes to several days.')} + </p> - <p> - {__( - 'We apologize for this inconvenience, but have added this additional step to prevent fraud.' - )} - </p> - <p> - {`${__('If you continue to see this message, send us an email to help@lbry.com.')} ${__( - 'Please enjoy free content in the meantime!' - )}`} - </p> - <p> + <p> + {__( + 'We apologize for this inconvenience, but have added this additional step to prevent fraud.' + )} + </p> + <p> + {`${__( + 'If you continue to see this message, send us an email to help@lbry.com.' + )} ${__('Please enjoy free content in the meantime!')}`} + </p> + </div> + <div className="card__actions"> <Button navigate="/" button="primary" label="Return Home" /> - </p> + </div> </section> ); } @@ -138,8 +140,8 @@ class RewardsPage extends PureComponent<Props> { <p className="card__content"> {claimed && claimed.length ? __( - "You have claimed all available rewards! We're regularly adding more so be sure to check back later." - ) + "You have claimed all available rewards! We're regularly adding more so be sure to check back later." + ) : __('There are no rewards available at this time, please check back later.')} </p> </section> From 4e97858d597ebf3b2ee4218796bb1a761710a9da Mon Sep 17 00:00:00 2001 From: Sean Yesmunt <sean@lbry.io> Date: Fri, 19 Apr 2019 15:30:53 -0400 Subject: [PATCH 11/12] dark scrollbar styling --- src/ui/scss/component/_scrollbar.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/ui/scss/component/_scrollbar.scss b/src/ui/scss/component/_scrollbar.scss index 10a4a8856..a554ae4b1 100644 --- a/src/ui/scss/component/_scrollbar.scss +++ b/src/ui/scss/component/_scrollbar.scss @@ -20,4 +20,8 @@ ::-webkit-scrollbar-track { background-color: transparent; + + html[data-mode='dark'] & { + background-color: $lbry-black; + } } From 7c852b30b8313a3234394c633855d882cd0512cd Mon Sep 17 00:00:00 2001 From: Sean Yesmunt <sean@lbry.io> Date: Fri, 19 Apr 2019 17:15:41 -0400 Subject: [PATCH 12/12] add back invite guide --- src/ui/component/sideBar/index.js | 2 ++ src/ui/component/sideBar/view.jsx | 48 ++++++++++++++++--------- src/ui/redux/selectors/app.js | 8 +++++ src/ui/scss/all.scss | 1 - src/ui/scss/component/_banner.scss | 1 + src/ui/scss/component/_file-render.scss | 1 - src/ui/scss/component/_menu.scss | 10 ------ src/ui/scss/component/_navigation.scss | 4 +-- src/ui/scss/component/_tooltip.scss | 2 -- 9 files changed, 44 insertions(+), 33 deletions(-) delete mode 100644 src/ui/scss/component/_menu.scss diff --git a/src/ui/component/sideBar/index.js b/src/ui/component/sideBar/index.js index 1e874f605..0b3b67846 100644 --- a/src/ui/component/sideBar/index.js +++ b/src/ui/component/sideBar/index.js @@ -1,9 +1,11 @@ import { connect } from 'react-redux'; import { selectUnreadAmount } from 'redux/selectors/subscriptions'; +import { selectShouldShowInviteGuide } from 'redux/selectors/app'; import SideBar from './view'; const select = state => ({ unreadSubscriptionTotal: selectUnreadAmount(state), + shouldShowInviteGuide: selectShouldShowInviteGuide(state), }); const perform = () => ({}); diff --git a/src/ui/component/sideBar/view.jsx b/src/ui/component/sideBar/view.jsx index af31ff32d..5a626a59d 100644 --- a/src/ui/component/sideBar/view.jsx +++ b/src/ui/component/sideBar/view.jsx @@ -6,37 +6,46 @@ import Button from 'component/button'; import classnames from 'classnames'; import Tooltip from 'component/common/tooltip'; -type SideBarLink = { - label: string, - path: string, - active: boolean, - icon: ?string, - subLinks: Array<SideBarLink>, - guide: ?string, -}; - type Props = { unreadSubscriptionTotal: number, + shouldShowInviteGuide: string, }; class SideBar extends React.PureComponent<Props> { render() { - const { unreadSubscriptionTotal } = this.props; - const buildLink = (path, label, icon) => ({ + const { unreadSubscriptionTotal, shouldShowInviteGuide } = this.props; + const buildLink = (path, label, icon, guide) => ({ navigate: path ? `$/${path}` : '/', label, icon, + guide, }); - const renderLink = (linkProps, index) => ( - <li key={index}> + const renderLink = (linkProps, index) => { + const { guide } = linkProps; + + const inner = ( <Button {...linkProps} - className="navigation__link" + className={classnames('navigation__link', { + 'navigation__link--guide': guide, + })} activeClass="navigation__link--active" /> - </li> - ); + ); + + return ( + <li key={index}> + {guide ? ( + <Tooltip key={guide} alwaysVisible direction="right" body={guide}> + {inner} + </Tooltip> + ) : ( + inner + )} + </li> + ); + }; return ( <nav className="navigation"> @@ -70,7 +79,12 @@ class SideBar extends React.PureComponent<Props> { ...buildLink(PAGES.ACCOUNT, 'Overview', ICONS.ACCOUNT), }, { - ...buildLink(PAGES.INVITE, 'Invite', ICONS.INVITE), + ...buildLink( + PAGES.INVITE, + 'Invite', + ICONS.INVITE, + shouldShowInviteGuide && __('Check this out!') + ), }, { ...buildLink(PAGES.REWARDS, 'Rewards', ICONS.FEATURED), diff --git a/src/ui/redux/selectors/app.js b/src/ui/redux/selectors/app.js index 69c4fdee3..85e23eac2 100644 --- a/src/ui/redux/selectors/app.js +++ b/src/ui/redux/selectors/app.js @@ -138,3 +138,11 @@ export const selectSearchOptionsExpanded = createSelector( selectState, state => state.searchOptionsExpanded ); + +export const selectShouldShowInviteGuide = createSelector( + makeSelectClientSetting(SETTINGS.FIRST_RUN_COMPLETED), + makeSelectClientSetting(SETTINGS.INVITE_ACKNOWLEDGED), + (firstRunCompleted, inviteAcknowledged) => { + return firstRunCompleted ? !inviteAcknowledged : false; + } +); diff --git a/src/ui/scss/all.scss b/src/ui/scss/all.scss index db0ad0fee..b117a2b2c 100644 --- a/src/ui/scss/all.scss +++ b/src/ui/scss/all.scss @@ -28,7 +28,6 @@ @import 'component/markdown-editor'; @import 'component/markdown-preview'; @import 'component/media'; -@import 'component/menu'; @import 'component/modal'; @import 'component/navigation'; @import 'component/notice'; diff --git a/src/ui/scss/component/_banner.scss b/src/ui/scss/component/_banner.scss index 1cb809241..7b71ce173 100644 --- a/src/ui/scss/component/_banner.scss +++ b/src/ui/scss/component/_banner.scss @@ -7,6 +7,7 @@ .banner--first-run { height: 310px; + padding-right: var(--spacing-vertical-medium); // Adjust this class inside other `.banner--xxx` styles for control over animation .banner__item--static-for-animation { diff --git a/src/ui/scss/component/_file-render.scss b/src/ui/scss/component/_file-render.scss index abd4fff00..093db5e93 100644 --- a/src/ui/scss/component/_file-render.scss +++ b/src/ui/scss/component/_file-render.scss @@ -6,7 +6,6 @@ overflow: hidden; position: absolute; - z-index: 1; html[data-mode='dark'] & { border: 1px solid rgba($lbry-gray-1, 0.3); diff --git a/src/ui/scss/component/_menu.scss b/src/ui/scss/component/_menu.scss deleted file mode 100644 index c2bd27a94..000000000 --- a/src/ui/scss/component/_menu.scss +++ /dev/null @@ -1,10 +0,0 @@ -.menu-container { - display: inline-block; - - .menu { - padding-top: var(--spacing-vertical-medium); - position: absolute; - white-space: nowrap; - z-index: 1; - } -} diff --git a/src/ui/scss/component/_navigation.scss b/src/ui/scss/component/_navigation.scss index 805785e64..5ef13c6af 100644 --- a/src/ui/scss/component/_navigation.scss +++ b/src/ui/scss/component/_navigation.scss @@ -4,12 +4,13 @@ height: calc(100vh - var(--header-height)); display: flex; flex-direction: column; - overflow-y: overlay; + overflow: visible; background-color: $lbry-white; border-right: 1px solid rgba($lbry-gray-1, 0.9); padding-top: var(--spacing-vertical-large); padding-right: var(--spacing-vertical-small); font-size: 1.2rem; + z-index: 2; html[data-mode='dark'] & { background-color: $lbry-black; @@ -41,7 +42,6 @@ ); content: ''; position: absolute; - z-index: 0; html[data-mode='dark'] & { background-image: linear-gradient( diff --git a/src/ui/scss/component/_tooltip.scss b/src/ui/scss/component/_tooltip.scss index dfd460622..35e24abb1 100644 --- a/src/ui/scss/component/_tooltip.scss +++ b/src/ui/scss/component/_tooltip.scss @@ -3,8 +3,6 @@ position: relative; .tooltip__body { - z-index: 2; - visibility: hidden; }