diff --git a/static/img/favicon.png b/static/img/favicon.png index 4570d2248..20e725d6e 100644 Binary files a/static/img/favicon.png and b/static/img/favicon.png differ diff --git a/static/img/lbry-favicon.png b/static/img/lbry-favicon.png new file mode 100644 index 000000000..4570d2248 Binary files /dev/null and b/static/img/lbry-favicon.png differ diff --git a/ui/component/channelThumbnail/spaceman.png b/ui/component/channelThumbnail/spaceman.png new file mode 100644 index 000000000..4300ae1c1 Binary files /dev/null and b/ui/component/channelThumbnail/spaceman.png differ diff --git a/ui/component/claimTilesDiscover/view.jsx b/ui/component/claimTilesDiscover/view.jsx index 069c8f7ca..5a55a1537 100644 --- a/ui/component/claimTilesDiscover/view.jsx +++ b/ui/component/claimTilesDiscover/view.jsx @@ -291,7 +291,7 @@ function ClaimTilesDiscover(props: Props) { }; const modifiedUris = uris ? uris.slice() : []; - const fixUris = pinUrls || ['lbry://@AlisonMorrow#6/LBRY#8']; + const fixUris = pinUrls || ['lbry://@Odysee#8/Does-Google-Own-Odysee#4']; if (pin && modifiedUris && modifiedUris.length > 2 && window.location.pathname === '/') { fixUris.forEach((fixUri) => { @@ -308,7 +308,13 @@ function ClaimTilesDiscover(props: Props) { <ul className="claim-grid"> {modifiedUris && modifiedUris.length ? modifiedUris.map((uri, index) => ( - <ClaimPreviewTile key={uri} uri={uri} properties={renderProperties} live={resolveLive(index)} /> + <ClaimPreviewTile + showNoSourceClaims={hasNoSource || showNoSourceClaims} + key={uri} + uri={uri} + properties={renderProperties} + live={resolveLive(index)} + /> )) : new Array(pageSize) .fill(1) diff --git a/ui/component/commentCreate/view.jsx b/ui/component/commentCreate/view.jsx index 12028b6de..1fce8fb04 100644 --- a/ui/component/commentCreate/view.jsx +++ b/ui/component/commentCreate/view.jsx @@ -42,7 +42,10 @@ type Props = { isReply: boolean, activeChannel: string, activeChannelClaim: ?ChannelClaim, - livestream?: boolean, + bottom: boolean, + onSubmit: (string, string) => void, + livestream: boolean, + embed?: boolean, toast: (string) => void, claimIsMine: boolean, sendTip: ({}, (any) => void, (any) => void) => void, @@ -63,7 +66,11 @@ export function CommentCreate(props: Props) { isReply, parentId, activeChannelClaim, + onSubmit, + bottom, livestream, + embed, + toast, claimIsMine, sendTip, doToast, @@ -106,7 +113,7 @@ export function CommentCreate(props: Props) { function altEnterListener(e: SyntheticKeyboardEvent<*>) { const KEYCODE_ENTER = 13; - if ((e.ctrlKey || e.metaKey) && e.keyCode === KEYCODE_ENTER) { + if ((livestream || e.ctrlKey || e.metaKey) && e.keyCode === KEYCODE_ENTER) { e.preventDefault(); buttonref.current.click(); } @@ -256,6 +263,10 @@ export function CommentCreate(props: Props) { setIsSupportComment(false); setCommentFailure(false); + if (onSubmit) { + onSubmit(commentValue, activeChannelClaim.name); + } + if (onDoneReplying) { onDoneReplying(); } @@ -280,6 +291,11 @@ export function CommentCreate(props: Props) { <div role="button" onClick={() => { + if (embed) { + window.open(`https://odysee.com/$/${PAGES.AUTH}?redirect=/$/${PAGES.LIVESTREAM}`); + return; + } + const pathPlusRedirect = `/$/${PAGES.CHANNEL_NEW}?redirect=${pathname}`; if (livestream) { window.open(pathPlusRedirect); @@ -344,6 +360,7 @@ export function CommentCreate(props: Props) { className={classnames('comment__create', { 'comment__create--reply': isReply, 'comment__create--nested-reply': isNested, + 'comment__create--bottom': bottom, })} > <FormField diff --git a/ui/component/fileReactions/view.jsx b/ui/component/fileReactions/view.jsx index 7221b40ea..a6f60ebb5 100644 --- a/ui/component/fileReactions/view.jsx +++ b/ui/component/fileReactions/view.jsx @@ -1,4 +1,5 @@ // @flow +import * as REACTION_TYPES from 'constants/reactions'; import * as ICONS from 'constants/icons'; import React from 'react'; import classnames from 'classnames'; @@ -15,18 +16,44 @@ type Props = { likeCount: number, dislikeCount: number, myReaction: ?string, + livestream?: boolean, }; function FileReactions(props: Props) { - const { claim, uri, doFetchReactions, doReactionLike, doReactionDislike, likeCount, dislikeCount } = props; + const { + claim, + uri, + doFetchReactions, + doReactionLike, + doReactionDislike, + myReaction, + likeCount, + dislikeCount, + livestream, + } = props; const claimId = claim && claim.claim_id; const channel = claim && claim.signing_channel && claim.signing_channel.name; const isCollection = claim && claim.value_type === 'collection'; // hack because nudge gets cut off by card on cols. React.useEffect(() => { - if (claimId) { + function fetchReactions() { doFetchReactions(claimId); } - }, [claimId, doFetchReactions]); + + let fetchInterval; + if (claimId) { + fetchReactions(); + + if (livestream) { + fetchInterval = setInterval(fetchReactions, 45000); + } + } + + return () => { + if (fetchInterval) { + clearInterval(fetchInterval); + } + }; + }, [claimId, doFetchReactions, livestream]); return ( <> @@ -41,20 +68,46 @@ function FileReactions(props: Props) { title={__('I like this')} requiresAuth={IS_WEB} authSrc="filereaction_like" - className={classnames('button--file-action')} - label={formatNumberWithCommas(likeCount, 0)} + className={classnames('button--file-action', { 'button--fire': myReaction === REACTION_TYPES.LIKE })} + label={ + <> + {myReaction === REACTION_TYPES.LIKE && ( + <> + <div className="button__fire-glow" /> + <div className="button__fire-particle1" /> + <div className="button__fire-particle2" /> + <div className="button__fire-particle3" /> + <div className="button__fire-particle4" /> + <div className="button__fire-particle5" /> + <div className="button__fire-particle6" /> + </> + )} + {formatNumberWithCommas(likeCount, 0)} + </> + } iconSize={18} - icon={ICONS.UPVOTE} + icon={myReaction === REACTION_TYPES.LIKE ? ICONS.FIRE_ACTIVE : ICONS.FIRE} onClick={() => doReactionLike(uri)} /> <Button requiresAuth={IS_WEB} authSrc={'filereaction_dislike'} title={__('I dislike this')} - className={classnames('button--file-action')} - label={formatNumberWithCommas(dislikeCount, 0)} + className={classnames('button--file-action', { 'button--slime': myReaction === REACTION_TYPES.DISLIKE })} + label={ + <> + {myReaction === REACTION_TYPES.DISLIKE && ( + <> + <div className="button__slime-stain" /> + <div className="button__slime-drop1" /> + <div className="button__slime-drop2" /> + </> + )} + {formatNumberWithCommas(dislikeCount, 0)} + </> + } iconSize={18} - icon={ICONS.DOWNVOTE} + icon={myReaction === REACTION_TYPES.DISLIKE ? ICONS.SLIME_ACTIVE : ICONS.SLIME} onClick={() => doReactionDislike(uri)} /> </> diff --git a/ui/component/fileViewerEmbeddedTitle/view.jsx b/ui/component/fileViewerEmbeddedTitle/view.jsx index e97b56e73..da5f00df0 100644 --- a/ui/component/fileViewerEmbeddedTitle/view.jsx +++ b/ui/component/fileViewerEmbeddedTitle/view.jsx @@ -5,7 +5,8 @@ import FilePrice from 'component/filePrice'; import { formatLbryUrlForWeb } from 'util/url'; import { withRouter } from 'react-router'; import { URL } from 'config'; -import * as ICONS from 'constants/icons'; +import OdyseeLogo from 'component/header/odysee_logo.png'; +import OdyseeLogoWithText from 'component/header/odysee_white.png'; type Props = { uri: string, @@ -36,7 +37,10 @@ function FileViewerEmbeddedTitle(props: Props) { {...contentLinkProps} /> <div className="file-viewer__embedded-info"> - <Button className="file-viewer__overlay-logo" icon={ICONS.LBRY} aria-label={__('Home')} {...lbryLinkProps} /> + <Button className="file-viewer__overlay-logo" aria-label={__('Home')} {...lbryLinkProps}> + <img src={OdyseeLogo} className=" mobile-only" /> + <img src={OdyseeLogoWithText} className=" mobile-hidden" /> + </Button> {isInApp && <FilePrice uri={uri} />} </div> </div> diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx index feca6bcc3..bc0596d75 100644 --- a/ui/component/header/view.jsx +++ b/ui/component/header/view.jsx @@ -19,6 +19,8 @@ import ChannelThumbnail from 'component/channelThumbnail'; import { remote } from 'electron'; import { IS_MAC } from 'component/app/view'; // @endif +import OdyseeLogoWithWhiteText from './odysee_white.png'; +import OdyseeLogoWithText from './odysee.png'; type Props = { user: ?User, @@ -251,14 +253,7 @@ const Header = (props: Props) => { </span> )} <Button - className="header__navigation-item header__navigation-item--lbry" - // @if TARGET='app' - label={'LBRY'} - // @endif - // @if TARGET='web' - label={LOGO_TITLE} // eslint-disable-line - // @endif - icon={ICONS.LBRY} + className="header__navigation-item header__navigation-item--lbry header__navigation-item--button-mobile" onClick={() => { if (history.location.pathname === '/') window.location.reload(); }} @@ -268,7 +263,12 @@ const Header = (props: Props) => { }} // @endif {...homeButtonNavigationProps} - /> + > + <img + src={currentTheme === 'light' ? OdyseeLogoWithText : OdyseeLogoWithWhiteText} + className="header__odysee" + /> + </Button> {!authHeader && ( <div className="header__center"> diff --git a/ui/component/publishFile/view.jsx b/ui/component/publishFile/view.jsx index 0187af809..35b0b3e62 100644 --- a/ui/component/publishFile/view.jsx +++ b/ui/component/publishFile/view.jsx @@ -612,7 +612,7 @@ function PublishFile(props: Props) { {/* @if TARGET='app' */} {showFileUpload && ( <FileSelector - label={__('File')} + label={__('Video file')} disabled={disabled} currentPath={currentFile} onFileChosen={handleFileChange} diff --git a/ui/component/publishForm/view.jsx b/ui/component/publishForm/view.jsx index b2f353d13..19dc6b761 100644 --- a/ui/component/publishForm/view.jsx +++ b/ui/component/publishForm/view.jsx @@ -182,9 +182,9 @@ function PublishForm(props: Props) { } } else { if (editingURI) { - customSubtitle = __('Update your video'); + customSubtitle = __('Update your video/audio'); } else { - customSubtitle = __('Upload that unlabeled video you found behind the TV in 1991'); + customSubtitle = __('Upload that unlabeled video or cassette you found behind the TV in 1991'); } } @@ -566,6 +566,7 @@ function PublishForm(props: Props) { <Button key={String(modeName)} icon={modeName} + iconSize={18} label={__(MODE_TO_I18N_STR[String(modeName)] || '---')} button="alt" onClick={() => { diff --git a/ui/component/userChannelFollowIntro/view.jsx b/ui/component/userChannelFollowIntro/view.jsx index 970d41f69..be66658a4 100644 --- a/ui/component/userChannelFollowIntro/view.jsx +++ b/ui/component/userChannelFollowIntro/view.jsx @@ -11,7 +11,6 @@ import { AUTO_FOLLOW_CHANNELS, CUSTOM_HOMEPAGE } from 'config'; type Props = { subscribedChannels: Array<Subscription>, onContinue: () => void, - onBack: () => void, channelSubscribe: (sub: Subscription) => void, homepageData: any, prefsReady: boolean, @@ -49,25 +48,26 @@ function UserChannelFollowIntro(props: Props) { <Card title={__('Find channels to follow')} subtitle={__( - 'LBRY works better if you find and follow a couple creators you like. You can also block channels you never want to see.' + 'Odysee works better if you find and follow a couple creators you like. You can also block channels you never want to see.' )} actions={ <React.Fragment> - <div className="section__actions--between"> - <Button button="secondary" onClick={onBack} label={__('Back')} /> - <Button - button={subscribedChannels.length < 1 ? 'alt' : 'primary'} - onClick={onContinue} - label={subscribedChannels.length < 1 ? __('Skip') : __('Continue')} - /> - </div> <div className="section__body"> <ClaimListDiscover - defaultOrderBy={CS.ORDER_BY_TOP} + hideFilters + meta={ + <Button + button={subscribedChannels.length < 1 ? 'alt' : 'primary'} + onClick={onContinue} + label={subscribedChannels.length < 1 ? __('Skip') : __('Continue')} + /> + } + defaultOrderBy={CS.ORDER_BY_TRENDING} defaultFreshness={CS.FRESH_ALL} claimType="channel" claimIds={CUSTOM_HOMEPAGE && channelIds ? channelIds : undefined} defaultTags={followingCount > 3 ? CS.TAGS_FOLLOWED : undefined} + maxPages={3} /> {followingCount > 0 && ( <Nag diff --git a/ui/component/userVerify/view.jsx b/ui/component/userVerify/view.jsx index bbade808d..9849a8b9c 100644 --- a/ui/component/userVerify/view.jsx +++ b/ui/component/userVerify/view.jsx @@ -60,7 +60,7 @@ class UserVerify extends React.PureComponent<Props> { SITE_NAME, }} > - Verified accounts are eligible to earn LBRY Credits for views, watching and reposting content, sharing + Verified accounts are eligible to earn LBRY Credits for views, watching and reposting videos, sharing invite links etc. Verifying also helps us keep the %SITE_NAME% community safe too! %Refresh% or %Skip%. </I18nMessage> </p> diff --git a/ui/modal/modalPublish/view.jsx b/ui/modal/modalPublish/view.jsx index 34075e3c3..077020f6c 100644 --- a/ui/modal/modalPublish/view.jsx +++ b/ui/modal/modalPublish/view.jsx @@ -46,6 +46,7 @@ class ModalPublishSuccess extends React.PureComponent<Props> { } else { publishMessage = __('Your content will be live shortly.'); } + clearPublish(); function handleClose() { closeModal(); diff --git a/ui/page/channelsFollowingDiscover/view.jsx b/ui/page/channelsFollowingDiscover/view.jsx index bf4b88fe5..afd0bc755 100644 --- a/ui/page/channelsFollowingDiscover/view.jsx +++ b/ui/page/channelsFollowingDiscover/view.jsx @@ -127,6 +127,9 @@ function ChannelsFollowingDiscover(props: Props) { claimType={CS.CLAIM_CHANNEL} claimIds={CUSTOM_HOMEPAGE && channelIds ? channelIds : undefined} scrollAnchor={MORE_CHANNELS_ANCHOR} + maxPages={3} + hideFilters + header={<h1 className="section__title">{__('Moon cheese is an acquired taste')}</h1>} /> </Page> ); diff --git a/ui/page/discover/view.jsx b/ui/page/discover/view.jsx index 59a7a49d3..7ef6ba797 100644 --- a/ui/page/discover/view.jsx +++ b/ui/page/discover/view.jsx @@ -2,6 +2,7 @@ import { SHOW_ADS, DOMAIN, SIMPLE_SITE, ENABLE_NO_SOURCE_CLAIMS } from 'config'; import * as ICONS from 'constants/icons'; import * as PAGES from 'constants/pages'; +import * as CS from 'constants/claim_search'; import React, { useRef } from 'react'; import Page from 'component/page'; import ClaimListDiscover from 'component/claimListDiscover'; @@ -11,11 +12,11 @@ import { useIsMobile } from 'effects/use-screensize'; import analytics from 'analytics'; import HiddenNsfw from 'component/common/hidden-nsfw'; import Icon from 'component/common/icon'; -import * as CS from 'constants/claim_search'; import Ads from 'web/component/ads'; import LbcSymbol from 'component/common/lbc-symbol'; import I18nMessage from 'component/i18nMessage'; import useGetLivestreams from 'effects/use-get-livestreams'; +import moment from 'moment'; type Props = { location: { search: string }, @@ -97,8 +98,8 @@ function DiscoverPage(props: Props) { } else { headerLabel = ( <span> - <Icon icon={(dynamicRouteProps && dynamicRouteProps.icon) || ICONS.DISCOVER} size={10} /> - {(dynamicRouteProps && dynamicRouteProps.title) || __('All Content')} + <Icon icon={(dynamicRouteProps && dynamicRouteProps.icon) || ICONS.WILD_WEST} size={10} /> + {(dynamicRouteProps && dynamicRouteProps.title) || __('Wild West')} </span> ); } @@ -106,9 +107,11 @@ function DiscoverPage(props: Props) { return ( <Page noFooter fullWidthPage={tileLayout}> <ClaimListDiscover - limitClaimsPerChannel={3} + hideAdvancedFilter + hideFilters={!dynamicRouteProps} header={repostedUri ? <span /> : undefined} tileLayout={repostedUri ? false : tileLayout} + defaultOrderBy={dynamicRouteProps ? undefined : CS.ORDER_BY_TRENDING} claimType={claimType ? [claimType] : undefined} headerLabel={headerLabel} tags={tags} @@ -117,9 +120,18 @@ function DiscoverPage(props: Props) { injectedItem={ SHOW_ADS && IS_WEB ? (SIMPLE_SITE ? false : !isAuthenticated && <Ads small type={'video'} />) : false } + // Assume wild west page if no dynamicRouteProps + // Not a very good solution, but just doing it for now + // until we are sure this page will stay around + releaseTime={!dynamicRouteProps && `>${Math.floor(moment().subtract(1, 'day').startOf('week').unix())}`} + feeAmount={!dynamicRouteProps && CS.FEE_AMOUNT_ANY} channelIds={ (dynamicRouteProps && dynamicRouteProps.options && dynamicRouteProps.options.channelIds) || undefined } + limitClaimsPerChannel={ + (dynamicRouteProps && dynamicRouteProps.options && dynamicRouteProps.options.limitClaimsPerChannel) || + undefined + } meta={ !dynamicRouteProps ? ( <a diff --git a/ui/page/file/view.jsx b/ui/page/file/view.jsx index a75d497da..987b6bcac 100644 --- a/ui/page/file/view.jsx +++ b/ui/page/file/view.jsx @@ -1,4 +1,5 @@ // @flow +import * as PAGES from 'constants/pages'; import * as React from 'react'; import classnames from 'classnames'; import { lazyImport } from 'util/lazyImport'; @@ -11,6 +12,9 @@ import FileRenderDownload from 'component/fileRenderDownload'; import RecommendedContent from 'component/recommendedContent'; import CollectionContent from 'component/collectionContentSidebar'; import CommentsList from 'component/commentsList'; +import { Redirect } from 'react-router'; +import Button from 'component/button'; +import I18nMessage from 'component/i18nMessage'; import Empty from 'component/common/empty'; const PostViewer = lazyImport(() => import('component/postViewer' /* webpackChunkName: "postViewer" */)); @@ -32,7 +36,9 @@ type Props = { collection?: Collection, collectionId: string, videoTheaterMode: boolean, + claimIsMine: boolean, commentsDisabled: boolean, + isLivestream: boolean, }; function FilePage(props: Props) { @@ -49,9 +55,12 @@ function FilePage(props: Props) { linkedCommentId, setPrimaryUri, videoTheaterMode, + + claimIsMine, commentsDisabled, collection, collectionId, + isLivestream, } = props; const cost = costInfo ? costInfo.cost : null; const hasFileInfo = fileInfo !== undefined; @@ -136,6 +145,10 @@ function FilePage(props: Props) { ); } + if (!claimIsMine && isLivestream) { + return <Redirect to={`/$/${PAGES.LIVESTREAM}`} />; + } + if (obscureNsfw && isMature) { return ( <Page className="file-page" filePage isMarkdown={isMarkdown}> @@ -156,6 +169,18 @@ function FilePage(props: Props) { {!isMarkdown && ( <div className="file-page__secondary-content"> <div> + {claimIsMine && isLivestream && ( + <div className="livestream__creator-message"> + <h4>{__('Only visible to you')}</h4> + <I18nMessage> + People who view this link will be redirected to your livestream. Make sure to use this for sharing + so your title and thumbnail are displayed properly. + </I18nMessage> + <div className="section__actions"> + <Button button="primary" navigate={`/$/${PAGES.LIVESTREAM}`} label={__('View livestream')} /> + </div> + </div> + )} {RENDER_MODES.FLOATING_MODES.includes(renderMode) && <FileTitleSection uri={uri} />} {commentsDisabled && <Empty text={__('The creator of this content has disabled comments.')} />} {!commentsDisabled && <CommentsList uri={uri} linkedCommentId={linkedCommentId} />} diff --git a/ui/page/settings/view.jsx b/ui/page/settings/view.jsx index f0cf63325..2147a3b14 100644 --- a/ui/page/settings/view.jsx +++ b/ui/page/settings/view.jsx @@ -1,6 +1,6 @@ // @flow import * as PAGES from 'constants/pages'; -import * as MODALS from 'constants/modal_types'; +// import * as MODALS from 'constants/modal_types'; import * as ICONS from 'constants/icons'; import * as React from 'react'; import { SETTINGS } from 'lbry-redux'; @@ -17,7 +17,7 @@ import classnames from 'classnames'; import { getPasswordFromCookie } from 'util/saved-passwords'; // $FlowFixMe import homepages from 'homepages'; -import { Lbryio } from 'lbryinc'; +// import { Lbryio } from 'lbryinc'; import Yrbl from 'component/yrbl'; type Price = { @@ -171,7 +171,7 @@ class SettingsPage extends React.PureComponent<Props, State> { const { daemonSettings, allowAnalytics, - showNsfw, + // showNsfw, isAuthenticated, currentTheme, themes, @@ -184,13 +184,13 @@ class SettingsPage extends React.PureComponent<Props, State> { setClientSetting, toggle3PAnalytics, floatingPlayer, - hideReposts, + // hideReposts, clearPlayingUri, darkModeTimes, clearCache, - openModal, myChannelUrls, user, + // openModal, } = this.props; const { storedPassword } = this.state; const noDaemonSettings = !daemonSettings || Object.keys(daemonSettings).length === 0; @@ -225,6 +225,7 @@ class SettingsPage extends React.PureComponent<Props, State> { {/* @endif */} {/* @if TARGET='web' */} + {isAuthenticated && <Card title={__('Payment Methods')} subtitle={__('Add a credit card to tip creators in their local currency')} @@ -239,6 +240,7 @@ class SettingsPage extends React.PureComponent<Props, State> { </div> } /> + } {/* @endif */} <Card title={__('Language')} actions={<SettingLanguage />} /> @@ -394,7 +396,7 @@ class SettingsPage extends React.PureComponent<Props, State> { )} /> - <FormField + {/* <FormField type="checkbox" name="hide_reposts" onChange={(e) => { @@ -408,7 +410,7 @@ class SettingsPage extends React.PureComponent<Props, State> { checked={hideReposts} label={__('Hide reposts')} helper={__('You will not see reposts by people you follow or receive email notifying about them.')} - /> + /> */} {/* <FormField type="checkbox" @@ -419,7 +421,7 @@ class SettingsPage extends React.PureComponent<Props, State> { helper={__('Anonymous content is published without a channel.')} /> */} - <FormField + {/* <FormField type="checkbox" name="show_nsfw" onChange={() => @@ -432,7 +434,7 @@ class SettingsPage extends React.PureComponent<Props, State> { helper={__( 'Mature content may include nudity, intense sexuality, profanity, or other adult content. By displaying mature content, you are affirming you are of legal age to view mature content in your country or jurisdiction. ' )} - /> + /> */} </React.Fragment> } /> diff --git a/ui/redux/reducers/search.js b/ui/redux/reducers/search.js index 3253c95b2..462a865fa 100644 --- a/ui/redux/reducers/search.js +++ b/ui/redux/reducers/search.js @@ -11,9 +11,9 @@ const defaultState: SearchState = { [SEARCH_OPTIONS.CLAIM_TYPE]: SEARCH_OPTIONS.INCLUDE_FILES_AND_CHANNELS, [SEARCH_OPTIONS.MEDIA_AUDIO]: true, [SEARCH_OPTIONS.MEDIA_VIDEO]: true, - [SEARCH_OPTIONS.MEDIA_TEXT]: true, - [SEARCH_OPTIONS.MEDIA_IMAGE]: true, - [SEARCH_OPTIONS.MEDIA_APPLICATION]: true, + [SEARCH_OPTIONS.MEDIA_TEXT]: false, + [SEARCH_OPTIONS.MEDIA_IMAGE]: false, + [SEARCH_OPTIONS.MEDIA_APPLICATION]: false, }, urisByQuery: {}, hasReachedMaxResultsLength: {}, diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss index 60d64bc99..ae8feb4fb 100644 --- a/ui/scss/component/_file-render.scss +++ b/ui/scss/component/_file-render.scss @@ -230,13 +230,28 @@ } .file-viewer__overlay-logo { - color: var(--color-white); - font-weight: bold; + height: 3.5rem; + width: 12rem; + display: flex; + align-items: center; - .icon { - height: 30px; - stroke-width: 5px; + &:hover { + filter: drop-shadow(1px 2px 10px var(--color-gray-3)); } + + @media (max-width: $breakpoint-small) { + margin-right: var(--spacing-m); + width: 2.5rem; + + .button__label { + display: none; + } + } +} + +.file-viewer__overlay-logo--videoend { + height: 3.5rem; + width: 12rem; } .file-viewer--is-playing:not(:hover) .file-viewer__embedded-header { @@ -246,11 +261,15 @@ .file-viewer__embedded-header { position: absolute; display: flex; + align-items: center; justify-content: space-between; width: 100%; top: 0; opacity: 1; z-index: 2; + height: 4rem; + padding-left: var(--spacing-m); + padding-right: var(--spacing-s); font-size: var(--font-large); overflow-x: hidden; overflow-y: hidden; @@ -260,7 +279,6 @@ border-top-right-radius: var(--border-radius); .button { - padding: var(--spacing-s); color: var(--color-white); z-index: 2; diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss index 71ad82eb6..8c2b63f7b 100644 --- a/ui/scss/component/_form-field.scss +++ b/ui/scss/component/_form-field.scss @@ -203,7 +203,7 @@ input-submit { height: var(--height-checkbox); width: var(--height-checkbox); border: 1px solid var(--color-input-border); - border-radius: var(--border-radius); + border-radius: 3px; left: 0px; top: -1px; } diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss index 0c1d0fbd8..d5ad3246a 100644 --- a/ui/scss/component/_header.scss +++ b/ui/scss/component/_header.scss @@ -58,7 +58,6 @@ justify-content: center; align-items: center; border-radius: var(--border-radius); - color: var(--color-text); position: relative; font-weight: var(--font-weight-bold); diff --git a/ui/scss/init/_color.scss b/ui/scss/init/_color.scss deleted file mode 100644 index 70573ea47..000000000 --- a/ui/scss/init/_color.scss +++ /dev/null @@ -1,57 +0,0 @@ -:root { - // Generic colors - --color-primary: #257761; - --color-primary-alt: #e4f4ef; - --color-primary-alt-2: #4b8576; - --color-secondary: #295284; - --color-secondary-alt: #d9eaff; - --color-tertiary: #552470; - --color-tertiary-alt: #f7e8ff; - --color-danger: #9b2023; - --color-danger-alt: #fccdce; - --color-warning: #fff58c; - --color-cost: #ffd580; - --color-focus: #93cff2; - --color-notification: #f02849; - --color-live: #cc190f; - - --color-black: #111; - --color-white: #fdfdfd; - --color-white-alt: #fafafa; - --color-gray-1: #eff1f4; - --color-gray-2: #d8dde1; - --color-gray-3: #ced4da; - --color-gray-4: #abb1b7; - --color-gray-5: #666a6d; - - // Text - --color-text: var(--color-black); - --color-text-subtitle: var(--color-gray-5); - --color-text-inverse: #fdfdfd; - - // Components - - // Button - --color-button-primary-bg: var(--color-primary); - --color-button-primary-text: var(--color-primary-alt); - --color-button-primary-bg-hover: var(--color-primary-alt-2); - --color-button-primary-hover-text: var(--color-primary-alt); - --color-button-secondary-bg: var(--color-secondary-alt); - --color-button-secondary-border: var(--color-secondary-alt); - --color-button-secondary-text: var(--color-secondary); - --color-button-secondary-bg-hover: #b9d0e9; - --color-button-alt-bg: var(--color-gray-1); - --color-button-alt-text: var(--color-text); - --color-button-alt-bg-hover: var(--color-gray-2); - --color-link: var(--color-primary); - --color-link-hover: var(--color-black); - - // Table - --color-table-highlight: var(--color-white-alt); - - // Tag - --color-tag: var(--color-gray-5); - --color-tag-bg: var(--color-button-alt-bg); - --color-tag-hover: var(--color-button-alt-text); - --color-tag-bg-hover: var(--color-button-alt-bg-hover); -} diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss index 1ab69ce7d..44133dfbb 100644 --- a/ui/scss/init/_gui.scss +++ b/ui/scss/init/_gui.scss @@ -60,8 +60,12 @@ ol { position: relative; list-style-position: outside; margin: var(--spacing-xs) 0; - margin-left: var(--spacing-xl); + margin-left: var(--spacing-s); margin-bottom: 0; + + @media (min-width: $breakpoint-small) { + margin-left: var(--spacing-xl); + } } } @@ -267,10 +271,10 @@ textarea { margin-top: var(--spacing-s); &:not(:last-child) { - margin-bottom: var(--spacing-s); + margin-bottom: var(--spacing-m); } - .button--link ~ .button--link { + .button--link + .button--link { margin-left: var(--spacing-s); } @@ -282,7 +286,6 @@ textarea { .help--warning { @extend .help; padding: var(--spacing-s); - color: var(--color-black); border-radius: var(--border-radius); background-color: var(--color-help-warning-bg); color: var(--color-help-warning-text); @@ -499,3 +502,16 @@ textarea { height: 4rem; } } + +.home__meme { + text-align: center; + font-weight: bold; + line-height: 1; + font-size: 1rem; + margin-bottom: var(--spacing-m); + + @media (min-width: $breakpoint-small) { + font-size: 1.2rem; + margin-bottom: var(--spacing-l); + } +} diff --git a/ui/scss/init/_vars.scss b/ui/scss/init/_vars.scss index 7775a9abc..381da76f0 100644 --- a/ui/scss/init/_vars.scss +++ b/ui/scss/init/_vars.scss @@ -9,7 +9,7 @@ $breakpoint-medium: 1150px; $breakpoint-large: 1600px; :root { - --border-radius: 5px; + --border-radius: 10px; --height-input: 2.5rem; --height-button: 2.5rem; --height-checkbox: 24px; diff --git a/ui/scss/themes/dark.scss b/ui/scss/themes/dark.scss index b244eefa6..6cae5e194 100644 --- a/ui/scss/themes/dark.scss +++ b/ui/scss/themes/dark.scss @@ -1,30 +1,30 @@ [theme='dark'] { // Color overrides - --color-primary: #2bbb90; - --color-primary-alt: #3e675d; - --color-primary-alt-2: #065f46; - --color-primary-alt-3: #34e5b0; - --color-secondary: #204166; - --color-secondary-alt: #dbeafe; - --color-secondary-alt-2: #bfdbfe; - --color-secondary-alt-3: #2c5c8c; + --color-primary: #e50054; + --color-primary-alt: #66001880; + --color-fire: #ff6635; + --color-fire-outside: #ff9b20; // Structure - --color-background: var(--color-gray-9); - --color-background-overlay: #21252999; - --color-border: #333338; - --color-card-background: var(--color-gray-8); - --color-card-background-highlighted: var(--color-gray-7); + --color-background: #140e1b; + --color-background-overlay: #0c0d0e95; + --color-border: #30243d; + --color-card-background: #181021; + --color-card-background-highlighted: #241c30; // Text - --color-text: var(--color-white); + --color-text: var(--color-gray-1); --color-text-subtitle: var(--color-gray-4); --color-text-empty: var(--color-text-subtitle); --color-text-help: #bbbbbb; --color-text-warning: #212529; --color-text-warning--background: var(--lbry-yellow-1); - --color-text-error: #f87171; - --color-error: #61373f; + --color-text-error: var(--color-danger); + --color-error: var(--color-danger-alt); + --color-blockquote: var(--color-gray-5); + --color-blockquote-bg: var(--color-card-background-highlighted); + --color-help-warning-text: var(--color-white-alt); + --color-help-warning-bg: #fbbf2450; // Tags (words) --color-tag-words: var(--color-text); @@ -33,87 +33,73 @@ --color-tag-words-bg-hover: var(--color-gray-4); // Header - --color-header-background: var(--color-gray-8); - --color-header-button: var(--color-gray-6); - --color-header-button-hover: var(--color-gray-6); - --color-header-button-active: var(--color-gray-6); + --color-header-button: #38274c; + --color-header-background: #231830; // Button - --color-button-primary-bg: var(--color-primary-alt); - --color-button-primary-bg-hover: var(--color-primary-alt-2); - --color-button-primary-text: var(--color-gray-2); + --color-button-primary-text: white; --color-button-primary-hover-text: var(--color-primary-alt); - --color-button-secondary-bg: var(--color-secondary); - --color-button-secondary-border: var(--color-secondary); - --color-button-secondary-bg-hover: var(--color-secondary-alt-3); - --color-button-secondary-text: var(--color-gray-2); - --color-button-alt-bg: var(--color-gray-7); - --color-button-alt-bg-hover: var(--color-gray-6); - --color-button-alt-text: var(--color-gray-1); - --color-button-border: var(--color-gray-5); - --color-button-toggle-text: var(--color-gray-1); - --color-link: var(--color-primary-alt-3); - --color-link-hover: var(--color-text); - --color-link-focus-bg: var(--color-gray-7); + --color-button-secondary-bg: #2c1543; + --color-button-secondary-border: #4f1c82; + --color-button-secondary-bg-hover: #3b1c5b; + --color-button-secondary-text: #efefef; + --color-button-alt-bg: var(--color-header-button); + --color-button-alt-bg-hover: #2b2037; + --color-button-toggle-text: var(--color-text); + --color-button-toggle-bg: var(--color-primary-alt); + --color-button-toggle-bg-hover: var(--color-primary-alt); + --color-button-alt-text: #e2e9f0; + --color-button-border: #5b4475; + --color-link: var(--color-primary); + --color-link-hover: #d75673; + --color-link-active: #ec1d4c; + --color-link-focus-bg: #3d2d4e; // Input - --color-input: var(--color-white); - --color-input-label: var(--color-gray-3); - --color-input-placeholder: var(--color-gray-1); + --color-input: #f4f4f5; + --color-input-label: #a7a7a7; + --color-input-placeholder: #f4f4f5; --color-input-bg: var(--color-header-button); - --color-input-bg-copyable: var(--color-gray-6); + --color-input-bg-copyable: #4c3861; --color-input-border: var(--color-border); --color-input-border-active: var(--color-secondary); --color-input-toggle: var(--color-primary-alt-3); --color-input-toggle-bg: var(--color-input-bg); --color-input-toggle-bg-hover: var(--color-secondary); --color-input-bg-selected: var(--color-primary-alt); - --color-input-prefix-bg: var(--color-gray-5); + --color-input-prefix-bg: var(--color-input-bg-copyable); --color-input-prefix-border: var(--color-gray-4); --select-toggle-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A"); // Navigation - --color-navigation-icon: var(--color-gray-4); - --color-navigation-link: var(--color-gray-4); - --color-navigation-active: var(--color-gray-7); - --color-navigation-active-text: var(--color-gray-3); - --color-navigation-hover: var(--color-gray-6); - --color-navigation-hover-text: var(--color-gray-3); + --color-navigation-icon: #76808a; + --color-navigation-link: #b9c3ce; + --color-navigation-active: #2b2037; + --color-navigation-active-text: #c6bcd2; + --color-navigation-hover: #21182a; + --color-navigation-hover-text: #c6bcd2; // Tags - --color-tag: var(--color-primary-alt-3); - --color-tag-bg: var(--color-gray-7); + --color-tag: #ff85b1; + --color-tag-bg: var(--color-navigation-hover); --color-tag-hover: var(--color-white); - --color-tag-bg-hover: var(--color-primary-alt); + --color-tag-bg-hover: var(--color-primary-alt-2); + --color-tag-mature-bg: var(--color-primary-alt-2); // Menu --color-menu-background: var(--color-header-background); - --color-menu-background--active: var(--color-gray-7); - --color-menu-icon: var(--color-gray-4); + --color-menu-background--active: var(--color-primary-alt); + --color-menu-icon: #928b9b; + --color-menu-icon-active: #d6d6d6; // Comments - --color-comment-menu: var(--color-gray-5); - --color-comment-menu-hovering: var(--color-gray-2); - --color-comment-threadline: #434b54; - --color-comment-threadline-hover: var(--color-gray-4); + --color-comment-menu: #6a6a6a; + --color-comment-menu-hovering: #e0e0e0; --color-comment-highlighted: #484734; - - // Snack - --color-snack-bg: var(--color-secondary); - - // Superchat - --color-superchat-text: var(--color-black); - --color-superchat-text__light: var(--color-text); - --color-superchat: #fcd34d; - --color-superchat__light: #ef4e1647; - --color-superchat-2: #fde68a; - --color-superchat-3: #fef3c7; - --color-superchat-3__light: #58066087; - --color-superchat-4: #fffbeb; + --color-comment-threadline: #24192f; + --color-comment-threadline-hover: var(--color-gray-4); // Other - --color-focus: #93c5fd50; - --color-nag: var(--color-orange); --color-tab-text: var(--color-white); --color-tabs-background: var(--color-card-background); --color-tab-divider: var(--color-white); @@ -121,14 +107,12 @@ --color-notice: #58563b; --color-purchased: #ffd580; --color-purchased-alt: var(--color-purchased); - --color-purchased-text: var(--color-gray-5); + --color-purchased-text: black; --color-thumbnail-background: var(--color-gray-5); --color-tooltip-bg: #2f3337; - --color-help-warning-bg: #d97706; - --color-help-warning-text: white; - --color-blockquote: var(--color-gray-5); - --color-placeholder-background: #4e5862; - --color-spinner-light: #5a6570; + --color-focus: #e91e6329; + --color-placeholder-background: #261a35; + --color-spinner-light: white; --color-spinner-dark: #212529; --color-login-graphic-background: var(--color-background); diff --git a/ui/scss/themes/light.scss b/ui/scss/themes/light.scss index 5a4260fca..fe75e4586 100644 --- a/ui/scss/themes/light.scss +++ b/ui/scss/themes/light.scss @@ -1,2 +1,155 @@ :root { + // Color overrides + --color-primary: #fa6165; + --color-primary-alt: #fef1f6; + --color-primary-alt-2: #fb7e82; + --color-primary-alt-3: #fbcbdd; + --color-secondary: #f9902a; + --color-secondary-alt: #fee8d2; + --color-secondary-alt-2: #fefcf6; + + // Structure + --color-border: #ededed; + --color-background: #fafafa; + --color-background-overlay: #21252980; + --color-card-background: #ffffff; + --color-card-background-highlighted: #fff5f5; + + // Text + --color-text-selection-bg: var(--color-primary-alt); + --color-text-selection: var(--color-primary); + --color-text-error: var(--color-danger); + --color-text-empty: #999999; + --color-text-help: #999999; + --color-text-subtitle: #767676; + --color-text-warning: #212529; + --color-help-warning-bg: #fef3c7; + --color-text-warning--background: var(--lbry-yellow-1); + --color-blockquote: var(--color-gray-3); + --color-blockquote-bg: var(--color-gray-1); + --color-tooltip-bg: #222; + --color-tooltip-text: #fafafa; + + // Header + --color-header-button: var(--color-button-alt-bg); + --color-header-background: #ffffff; + + // Button + --color-button-alt-bg: var(--color-gray-1); + --color-button-alt-bg-hover: var(--color-gray-2); + --color-button-alt-text: black; + --color-button-primary-bg: var(--color-primary); + --color-button-primary-bg-hover: var(--color-primary-alt-2); + --color-button-primary-text: var(--color-primary-alt); + --color-button-primary-hover-text: var(--color-white); + --color-button-secondary-bg: var(--color-primary-alt); + --color-button-secondary-border: var(--color-primary-alt-3); + --color-button-secondary-text: var(--color-primary); + --color-button-secondary-bg-hover: var(--color-primary-alt-3); + --color-button-toggle-text: var(--color-primary); + --color-button-toggle-bg: var(--color-primary-alt); + --color-button-toggle-bg-hover: var(--color-primary-alt); + --color-button-border: var(--color-gray-3); + --color-link-active: var(--color-primary); + --color-link-focus-bg: #f1f1f1; + --color-link: var(--color-primary); + + // Input + --color-input-bg-selected: var(--color-primary-alt); + --color-input-color: #111111; + --color-input-label: var(--color-gray-5); + --color-input-placeholder: #212529; + --color-input-bg: var(--color-gray-1); + --color-input-border: var(--color-border); + --color-input-border-active: var(--color-secondary); + --color-input-toggle: var(--color-secondary); + --color-input-toggle-bg: var(--color-gray-1); + --color-input-toggle-bg-hover: var(--color-secondary-alt); + --color-input-prefix-bg: var(--color-gray-2); + --color-input-prefix-border: var(--color-gray-5); + --select-toggle-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A"); + + // Navigation + --color-navigation-icon: var(--color-gray-5); + --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; + + // Tags + --color-tag: var(--color-primary-alt-2); + --color-tag-bg: #f9f6f7; + --color-tag-hover: var(--color-button-alt-text); + --color-tag-bg-hover: var(--color-button-alt-bg-hover); + + // Menu + --color-menu-background: var(--color-header-background); + --color-menu-icon: var(--color-navigation-link); + --color-menu-icon-active: var(--color-navigation-link); + --color-menu-background--selected: var(--color-secondary-alt); + --color-menu-background--active: var(--color-primary-alt); + + // Comments + --color-comment-menu: #e0e0e0; + --color-comment-menu-hovering: #6a6a6a; + --color-comment-highlighted: #fff2d9; + --color-comment-threadline: var(--color-gray-1); + --color-comment-threadline-hover: var(--color-gray-4); + + // Superchat + --color-superchat-text: var(--color-black); + --color-superchat: #fcd34d; + --color-superchat__light: #fcd34d50; + --color-superchat-2: #fde68a; + --color-superchat-3: #fef3c7; + --color-superchat-3__light: #fef3c750; + --color-superchat-4: #fffbeb; + + // Color + --color-focus: #8dbff0; + --color-nag: #fa8700; + --color-error: #fcafca; + --color-notice: #fef3ca; + --color-purchased: var(--color-cost); + --color-purchased-alt: #ffebc2; + --color-purchased-text: black; + --color-thumbnail-background: var(--color-gray-1); + --color-spinner-light: #ffffff; + --color-spinner-dark: #212529; + --color-placeholder-background: #f0f0f0; + --color-file-viewer-background: var(--color-card-background); + --color-tabs-background: var(--color-card-background); + --color-tab-divider: var(--color-primary); + --color-modal-background: var(--color-card-background); + + // Icons + --color-follow-bg: #ffd4da; + --color-follow-icon: #e2495e; + --color-view-bg: var(--color-secondary-alt); + --color-view-icon: var(--color-secondary); + + // Editor + --color-editor-cursor: var(--color-text); + --color-editor-quote: #707070; + --color-editor-tag: #ea9400; + --color-editor-attr: #04b0f4; + --color-editor-string: #ff7451; + --color-editor-inline-code-fg: var(--color-text); + --color-editor-inline-code-fg-preview: #2e3439; + --color-editor-inline-code-bg: rgba(157, 161, 165, 0.3); + --color-editor-inline-code-bg-preview: #d0e8ff; + --color-editor-selected: #add6ff; + --color-editor-link: var(--color-link); + --color-editor-url: var(--color-editor-string); + --color-editor-hr: var(--color-editor-tag); + --color-editor-hr-preview: #cccccc; + + // Ads + --color-ads-background: #fae5ff; + --color-ads-link: var(--color-link); + + // Scrollbar + --color-scrollbar-thumb-bg: rgba(0, 0, 0, 0.2); + --color-scrollbar-track-bg: transparent; } diff --git a/ui/util/query-params.js b/ui/util/query-params.js index bf4fa6bcc..af13a036e 100644 --- a/ui/util/query-params.js +++ b/ui/util/query-params.js @@ -38,9 +38,13 @@ export const getSearchQueryString = (query: string, options: any = {}) => { const encodedQuery = encodeURIComponent(query); const queryParams = [ options.exact && !isSurroundedByQuotes(encodedQuery) ? `s="${encodedQuery}"` : `s=${encodedQuery}`, + `free_only=true`, `size=${options.size || DEFAULT_SEARCH_SIZE}`, `from=${options.from || DEFAULT_SEARCH_RESULT_FROM}`, + // `mediaType=${SEARCH_OPTIONS.MEDIA_VIDEO}`, + // `claimType=${SEARCH_OPTIONS.INCLUDE_FILES}`, ]; + const { isBackgroundSearch } = options; const includeUserOptions = typeof isBackgroundSearch === 'undefined' ? false : !isBackgroundSearch; diff --git a/web/component/fileViewerEmbeddedEnded/view.jsx b/web/component/fileViewerEmbeddedEnded/view.jsx index eaf70ee30..420ef9359 100644 --- a/web/component/fileViewerEmbeddedEnded/view.jsx +++ b/web/component/fileViewerEmbeddedEnded/view.jsx @@ -4,7 +4,7 @@ import Button from 'component/button'; import { formatLbryUrlForWeb } from 'util/url'; import { withRouter } from 'react-router'; import { URL, SITE_NAME } from 'config'; -import * as ICONS from 'constants/icons'; +import OdyseeLogoWithText from 'component/header/odysee_white.png'; type Props = { uri: string, @@ -37,7 +37,9 @@ function FileViewerEmbeddedEnded(props: Props) { return ( <div className="file-viewer__overlay"> <div className="file-viewer__overlay-secondary"> - <Button className="file-viewer__overlay-logo" label="LBRY" icon={ICONS.LBRY} href={URL} /> + <Button className="file-viewer__overlay-logo--videoend" href={URL}> + <img src={OdyseeLogoWithText} /> + </Button> </div> <div className="file-viewer__overlay-title">{prompt}</div> <div className="file-viewer__overlay-actions"> diff --git a/web/component/footer.jsx b/web/component/footer.jsx index ad16140a5..0960899d1 100644 --- a/web/component/footer.jsx +++ b/web/component/footer.jsx @@ -1,101 +1,34 @@ -import * as PAGES from 'constants/pages'; import React from 'react'; import Button from 'component/button'; - -const sections = [ - { - name: 'Community', - links: [ - { - label: 'Twitter', - link: 'https://twitter.com/lbrycom', - }, - { - label: 'Reddit', - link: 'https://reddit.com/r/lbry', - }, - { - label: 'Chat (Discord)', - link: 'https://chat.lbry.org/', - }, - { - label: 'Telegram', - link: 'https://t.me/lbryofficial', - }, - { - label: 'Facebook', - link: 'https://www.facebook.com/lbryio', - }, - ], - }, - { - name: 'Resources', - links: [ - { - label: 'FAQ', - link: 'https://lbry.com/faq', - }, - { - label: 'Support --[used in footer; general help/support]--', - link: 'https://lbry.com/faq/support', - }, - { - label: 'YouTube Partner Program', - link: 'https://lbry.com/youtube', - }, - { - label: 'lbry.com', - link: 'https://lbry.com', - }, - { - label: 'lbry.tech', - link: 'https://lbry.tech', - }, - { - label: 'GitHub', - link: 'https://github.com/lbryio', - }, - ], - }, - { - name: 'Policies', - links: [ - { - label: 'Terms of Service', - link: 'https://www.lbry.com/termsofservice', - }, - { - label: 'Privacy Policy', - link: 'https://lbry.com/privacypolicy', - }, - { - label: '2257', - navigate: `/$/${PAGES.CODE_2257}`, - }, - ], - }, -]; +import I18nMessage from 'component/i18nMessage'; export default function Footer() { return ( <footer className="footer"> - <ul className="navigation__tertiary footer__links ul--no-style"> - {sections.map(({ name, links }) => { - return ( - <li key={name} className="footer__section"> - <ul className="ul--no-style"> - <div className="footer__section-title">{__(name)}</div> - {links.map(({ label, link, navigate }) => { - return ( - <li key={label}> - <Button className="footer__link" label={__(label)} href={link} navigate={navigate} /> - </li> - ); - })} - </ul> - </li> - ); - })} + <span className="footer__section-title"> + <I18nMessage tokens={{ lbry_link: <Button button="link" label={'LBRY'} href="https://lbry.com" /> }}> + POWERED BY %lbry_link% + </I18nMessage> + </span> + <ul className="navigation__tertiary footer__links"> + <li className="footer__link"> + <Button label={__('About --[link title in Sidebar or Footer]--')} href="https://lbry.com/about" /> + </li> + <li className="footer__link"> + <Button label={__('Community Guidelines')} href="https://odysee.com/@OdyseeHelp:b/Community-Guidelines:c" /> + </li> + <li className="footer__link"> + <Button label={__('FAQ')} href="https://odysee.com/@OdyseeHelp:b" /> + </li> + <li className="footer__link"> + <Button label={__('Support --[used in footer; general help/support]--')} href="https://lbry.com/support" /> + </li> + <li className="footer__link"> + <Button label={__('Terms')} href="https://lbry.com/termsofservice" /> + </li> + <li className="footer__link"> + <Button label={__('Privacy Policy')} href="https://lbry.com/privacy" /> + </li> </ul> </footer> ); diff --git a/web/component/meme.jsx b/web/component/meme.jsx index 2df8bfe27..ed12e258e 100644 --- a/web/component/meme.jsx +++ b/web/component/meme.jsx @@ -5,7 +5,7 @@ export default function Meme() { return ( <h1 className="home__meme"> <Button button="link" href="https://odysee.com/@Odysee:8?view=discussion"> - {'big gulps, huh?'} + {`don't dead open inside`} </Button> </h1> ); diff --git a/web/package.json b/web/package.json index c75e33d12..924514799 100644 --- a/web/package.json +++ b/web/package.json @@ -31,7 +31,7 @@ "koa-logger": "^3.2.1", "koa-send": "^5.0.0", "koa-static": "^5.0.0", - "lbry-redux": "lbryio/lbry-redux#508e8d36fd91106beb7d6b4edb9f726dae0e6264", + "lbry-redux": "lbryio/lbry-redux#b075c103445a9355d617116fbb491496ecb473da", "lbryinc": "lbryio/lbryinc#8f9a58bfc8312a65614fd7327661cdcc502c4e59", "mysql": "^2.17.1", "node-fetch": "^2.6.1", diff --git a/web/yarn.lock b/web/yarn.lock index 3a43acd81..a9ebe976c 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -3331,9 +3331,9 @@ latest-version@^3.0.0: dependencies: package-json "^4.0.0" -lbry-redux@lbryio/lbry-redux#508e8d36fd91106beb7d6b4edb9f726dae0e6264: +lbry-redux@lbryio/lbry-redux#b075c103445a9355d617116fbb491496ecb473da: version "0.0.1" - resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/508e8d36fd91106beb7d6b4edb9f726dae0e6264" + resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/b075c103445a9355d617116fbb491496ecb473da" dependencies: proxy-polyfill "0.1.6" reselect "^3.0.0"