.env.defaults

@@ -8,7 +8,7 @@ WEBPACK_ELECTRON_PORT=9091
 WEB_SERVER_PORT=1337
 
 ## APIS
-LBRY_WEB_API=https://api.na-backend.odysee.com # update
+LBRY_WEB_API=https://api.na-backend.odysee.com
 LBRY_WEB_STREAMING_API=https://cdn.lbryplayer.xyz
 LBRY_WEB_BUFFER_API=https://collector-service.api.lbry.tv/api/v1/events/video
 COMMENT_SERVER_API=https://comments.lbry.com/api/v2

ui/component/channelThumbnail/view.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { parseURI } from 'lbry-redux';
 import classnames from 'classnames';
-import Gerbil from './gerbil.png';
+import Spaceman from './spaceman.png';
 import FreezeframeWrapper from 'component/fileThumbnail/FreezeframeWrapper';
 import ChannelStakedIndicator from 'component/channelStakedIndicator';
 import OptimizedImage from 'component/optimizedImage';
@@ -86,7 +86,7 @@ function ChannelThumbnail(props: Props) {
         <OptimizedImage
           alt={__('Channel profile picture')}
           className="channel-thumbnail__default"
-          src={!thumbError && channelThumbnail ? channelThumbnail : Gerbil}
+          src={!thumbError && channelThumbnail ? channelThumbnail : Spaceman}
           loading={noLazyLoad ? undefined : 'lazy'}
           onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
         />
@@ -99,7 +99,7 @@ function ChannelThumbnail(props: Props) {
             <OptimizedImage
               alt={__('Channel profile picture')}
               className="channel-thumbnail__custom"
-              src={!thumbError && channelThumbnail ? channelThumbnail : Gerbil}
+              src={!thumbError && channelThumbnail ? channelThumbnail : Spaceman}
               loading={noLazyLoad ? undefined : 'lazy'}
               onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
             />

ui/component/claimTilesDiscover/view.jsx

@@ -156,7 +156,7 @@ function ClaimTilesDiscover(props: Props) {
   const { location } = useHistory();
   const urlParams = new URLSearchParams(location.search);
   const feeAmountInUrl = urlParams.get('fee_amount');
-  const feeAmountParam = feeAmountInUrl || feeAmount;
+  const feeAmountParam = feeAmountInUrl || feeAmount || CS.FEE_AMOUNT_ONLY_FREE;
   const mutedAndBlockedChannelIds = Array.from(
     new Set(mutedUris.concat(blockedUris).map((uri) => splitBySeparator(uri)[1]))
   );
@@ -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)

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

ui/component/fileActions/view.jsx

@@ -29,6 +29,7 @@ type Props = {
   myChannels: ?Array<ChannelClaim>,
   doToast: ({ message: string }) => void,
   clearPlayingUri: () => void,
+  hideRepost?: boolean,
   isLivestreamClaim: boolean,
   reactionsDisabled: boolean,
   download: (string) => void,
@@ -48,6 +49,7 @@ function FileActions(props: Props) {
     myChannels,
     clearPlayingUri,
     doToast,
+    hideRepost,
     isLivestreamClaim,
     reactionsDisabled,
     download,
@@ -113,9 +115,10 @@ function FileActions(props: Props) {
 
   const lhsSection = (
     <>
-      {ENABLE_FILE_REACTIONS && !reactionsDisabled && <FileReactions uri={uri} />}
+      {ENABLE_FILE_REACTIONS && !reactionsDisabled && <FileReactions uri={uri} livestream={isLivestreamClaim} />}
       <ClaimSupportButton uri={uri} fileAction />
       <ClaimCollectionAddButton uri={uri} fileAction />
+      {!hideRepost && (
         <Button
           button="alt"
           className="button--file-action"
@@ -127,10 +130,11 @@ function FileActions(props: Props) {
           requiresAuth={IS_WEB}
           onClick={handleRepostClick}
         />
+      )}
       <Button
         className="button--file-action"
         icon={ICONS.SHARE}
-        label={__('Share')}
+        label={isMobile ? undefined : __('Share')}
         title={__('Share')}
         onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, webShareable, collectionId })}
       />

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')}
+        className={classnames('button--file-action', { 'button--fire': myReaction === REACTION_TYPES.LIKE })}
-        label={formatNumberWithCommas(likeCount, 0)}
+        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')}
+        className={classnames('button--file-action', { 'button--slime': myReaction === REACTION_TYPES.DISLIKE })}
-        label={formatNumberWithCommas(dislikeCount, 0)}
+        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)}
       />
     </>

ui/component/fileSubtitle/view.jsx

@@ -22,7 +22,7 @@ function FileSubtitle(props: Props) {
         <FileViewCount uri={uri} livestream={livestream} activeViewers={activeViewers} isLive={isLive} />
       </div>
 
-      <FileActions uri={uri} />
+      <FileActions uri={uri} hideRepost={livestream} livestream={livestream} />
     </div>
   );
 }

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>

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"
+                className="header__navigation-item header__navigation-item--lbry header__navigation-item--button-mobile"
-                // @if TARGET='app'
-                label={'LBRY'}
-                // @endif
-                // @if TARGET='web'
-                label={LOGO_TITLE} // eslint-disable-line
-                // @endif
-                icon={ICONS.LBRY}
                 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">

ui/component/optimizedImage/view.jsx

@@ -89,7 +89,9 @@ function OptimizedImage(props: Props) {
     } else {
       setOptimizedSrc(src);
     }
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    // We only want to run this on (1) initial mount and (2) 'src' change. Nothing else.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [src]);
 
   if (!src) {
     return null;

ui/component/publishFile/view.jsx

@@ -512,7 +512,7 @@ function PublishFile(props: Props) {
             {fileSelectSource === SOURCE_UPLOAD && showFileUpload && (
               <>
                 <FileSelector
-                  label={SIMPLE_SITE ? __('Video/audio file') : __('File')}
+                  label={__('File')}
                   disabled={disabled}
                   currentPath={currentFile}
                   onFileChosen={handleFileChange}
@@ -612,7 +612,7 @@ function PublishFile(props: Props) {
           {/* @if TARGET='app' */}
           {showFileUpload && (
             <FileSelector
-              label={__('File')}
+              label={__('Video file')}
               disabled={disabled}
               currentPath={currentFile}
               onFileChosen={handleFileChange}

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={() => {

ui/component/sideNavigation/view.jsx

@@ -305,6 +305,11 @@ function SideNavigation(props: Props) {
       <li className="navigation-link">
         <Button label={__('FAQ')} href="https://odysee.com/@OdyseeHelp:b" />
       </li>
+
+      <li className="navigation-link">
+        <Button label={__('Community Guidelines')} href="https://odysee.com/@OdyseeHelp:b/Community-Guidelines:c" />
+      </li>
+
       <li className="navigation-link">
         <Button label={__('Support --[used in footer; general help/support]--')} href="https://lbry.com/support" />
       </li>

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">
+          <div className="section__body">
-            <Button button="secondary" onClick={onBack} label={__('Back')} />
+            <ClaimListDiscover
+              hideFilters
+              meta={
                 <Button
                   button={subscribedChannels.length < 1 ? 'alt' : 'primary'}
                   onClick={onContinue}
                   label={subscribedChannels.length < 1 ? __('Skip') : __('Continue')}
                 />
-          </div>
+              }
-          <div className="section__body">
+              defaultOrderBy={CS.ORDER_BY_TRENDING}
-            <ClaimListDiscover
-              defaultOrderBy={CS.ORDER_BY_TOP}
               defaultFreshness={CS.FRESH_ALL}
               claimType="channel"
               claimIds={CUSTOM_HOMEPAGE && channelIds ? channelIds : undefined}
               defaultTags={followingCount > 3 ? CS.TAGS_FOLLOWED : undefined}
+              maxPages={3}
             />
             {followingCount > 0 && (
               <Nag

ui/component/userVerify/view.jsx

@@ -12,7 +12,7 @@ import LbcSymbol from 'component/common/lbc-symbol';
 type Props = {
   errorMessage: ?string,
   isPending: boolean,
-  verifyUserIdentity: string => void,
+  verifyUserIdentity: (string) => void,
   verifyPhone: () => void,
   fetchUser: () => void,
   skipLink?: string,
@@ -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>
@@ -73,9 +73,7 @@ class UserVerify extends React.PureComponent<Props> {
           <Card
             icon={ICONS.PHONE}
             title={__('Verify phone number')}
-            subtitle={__(
+            subtitle={__('You will receive an SMS text message confirming your phone number is valid.')}
-              'You will receive an SMS text message confirming your phone number is valid. Does not work for Canada and possibly other regions.'
-            )}
             actions={
               <Fragment>
                 <Button

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();

ui/modal/modalRemoveFile/view.jsx

@@ -53,7 +53,7 @@ function ModalRemoveFile(props: Props) {
                   name="claim_abandon"
                   label={
                     <I18nMessage
-                      tokens={{ lbc: <LbcSymbol prefix={__('reclaim %amount%', { amount: claim.amount })} /> }}
+                      tokens={{ lbc: <LbcSymbol postfix={claim.amount} /> }}
                     >
                       Remove from blockchain (%lbc%)
                     </I18nMessage>

ui/page/channelsFollowingDiscover/view.jsx

@@ -1,13 +1,12 @@
 // @flow
-import * as ICONS from 'constants/icons';
+// import * as ICONS from 'constants/icons';
-import * as PAGES from 'constants/pages';
+// import * as PAGES from 'constants/pages';
+import * as CS from 'constants/claim_search';
 import React from 'react';
 import Page from 'component/page';
-import Button from 'component/button';
+// import Button from 'component/button';
-import ClaimTilesDiscover from 'component/claimTilesDiscover';
 import ClaimListDiscover from 'component/claimListDiscover';
-import * as CS from 'constants/claim_search';
+// import { toCapitalCase } from 'util/string';
-import { toCapitalCase } from 'util/string';
 import { CUSTOM_HOMEPAGE } from 'config';
 
 const MORE_CHANNELS_ANCHOR = 'MoreChannels';
@@ -19,13 +18,6 @@ type Props = {
   homepageData: any,
 };
 
-type ChannelsFollowingItem = {
-  title: string,
-  link?: string,
-  help?: any,
-  options?: {},
-};
-
 function ChannelsFollowingDiscover(props: Props) {
   const { followedTags, subscribedChannels, blockedChannels, homepageData } = props;
   const { PRIMARY_CONTENT } = homepageData;
@@ -39,101 +31,19 @@ function ChannelsFollowingDiscover(props: Props) {
     .concat(blockedChannels)
     .map((uri) => uri.split('#')[1]);
 
-  rowData.push({
-    title: 'Top Channels Of All Time',
-    link: `/$/${PAGES.DISCOVER}?claim_type=channel&${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TOP}&${CS.FRESH_KEY}=${CS.FRESH_ALL}`,
-    options: {
-      pageSize: 12,
-      claimType: 'channel',
-      orderBy: ['effective_amount'],
-    },
-  });
 
-  rowData.push({
-    title: 'Latest From @lbrycast',
-    link: `/@lbrycast:4`,
-    options: {
-      orderBy: ['release_time'],
-      pageSize: 8,
-      channelIds: ['4c29f8b013adea4d5cca1861fb2161d5089613ea'],
-    },
-  });
-
-  rowData.push({
-    title: 'Trending Channels',
-    link: `/$/${PAGES.DISCOVER}?claim_type=channel`,
-    options: {
-      pageSize: 8,
-      claimType: 'channel',
-      orderBy: ['trending_group', 'trending_mixed'],
-    },
-  });
-
-  if (followedTags.length > 0 && followedTags.length < 5) {
-    const followedRows = followedTags.map((tag: Tag) => ({
-      title: `Trending Channels for #${toCapitalCase(tag.name)}`,
-      link: `/$/${PAGES.DISCOVER}?t=${tag.name}&claim_type=channel`,
-      options: {
-        claimType: 'channel',
-        pageSize: 4,
-        tags: [tag.name],
-      },
-    }));
-    rowData.push(...followedRows);
-  }
-
-  if (followedTags.length > 4) {
-    rowData.push({
-      title: 'Trending For Your Tags',
-      link: `/$/${PAGES.TAGS_FOLLOWING}?claim_type=channel`,
-      options: {
-        claimType: 'channel',
-        tags: followedTags.map((tag) => tag.name),
-      },
-    });
-  }
-
-  const rowDataWithGenericOptions = rowData.map((row) => {
-    return {
-      ...row,
-      options: {
-        ...row.options,
-        notChannels,
-      },
-    };
-  });
 
   return (
     <Page>
-      {rowDataWithGenericOptions.map(({ title, link, help, options = {} }) => (
-        <div key={title} className="claim-grid__wrapper">
-          <h1 className="section__actions">
-            {link ? (
-              <Button
-                className="claim-grid__title"
-                button="link"
-                navigate={link}
-                iconRight={ICONS.ARROW_RIGHT}
-                label={__(title)}
-              />
-            ) : (
-              <span className="claim-grid__title">{__(title)}</span>
-            )}
-            {help}
-          </h1>
-
-          <ClaimTilesDiscover {...options} />
-        </div>
-      ))}
-      <h1 id={MORE_CHANNELS_ANCHOR} className="claim-grid__title">
-        {__('More Channels')}
-      </h1>
       <ClaimListDiscover
         defaultOrderBy={CS.ORDER_BY_TRENDING}
         defaultFreshness={CS.FRESH_ALL}
         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>
   );

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} />
+        <Icon icon={(dynamicRouteProps && dynamicRouteProps.icon) || ICONS.WILD_WEST} size={10} />
-        {(dynamicRouteProps && dynamicRouteProps.title) || __('All Content')}
+        {(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

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} />}

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>
               }
             />

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_TEXT]: false,
-    [SEARCH_OPTIONS.MEDIA_IMAGE]: true,
+    [SEARCH_OPTIONS.MEDIA_IMAGE]: false,
-    [SEARCH_OPTIONS.MEDIA_APPLICATION]: true,
+    [SEARCH_OPTIONS.MEDIA_APPLICATION]: false,
   },
   urisByQuery: {},
   hasReachedMaxResultsLength: {},

ui/scss/component/_file-render.scss

@@ -226,13 +226,28 @@
 }
 
 .file-viewer__overlay-logo {
-  color: var(--color-white);
+  height: 3.5rem;
-  font-weight: bold;
+  width: 12rem;
+  display: flex;
+  align-items: center;
 
-  .icon {
+  &:hover {
-    height: 30px;
+    filter: drop-shadow(1px 2px 10px var(--color-gray-3));
-    stroke-width: 5px;
   }
+
+  @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 {
@@ -242,11 +257,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;
@@ -256,7 +275,6 @@
   border-top-right-radius: var(--border-radius);
 
   .button {
-    padding: var(--spacing-s);
     color: var(--color-white);
     z-index: 2;
 

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;
   }

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);
 

ui/scss/init/_color.scss

@@ -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);
-}

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);
+  }
+}

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;

ui/scss/themes/dark.scss

@@ -1,30 +1,30 @@
 [theme='dark'] {
   // Color overrides
-  --color-primary: #2bbb90;
+  --color-primary: #e50054;
-  --color-primary-alt: #3e675d;
+  --color-primary-alt: #66001880;
-  --color-primary-alt-2: #065f46;
+  --color-fire: #ff6635;
-  --color-primary-alt-3: #34e5b0;
+  --color-fire-outside: #ff9b20;
-  --color-secondary: #204166;
-  --color-secondary-alt: #dbeafe;
-  --color-secondary-alt-2: #bfdbfe;
-  --color-secondary-alt-3: #2c5c8c;
 
   // Structure
-  --color-background: var(--color-gray-9);
+  --color-background: #140e1b;
-  --color-background-overlay: #21252999;
+  --color-background-overlay: #0c0d0e95;
-  --color-border: #333338;
+  --color-border: #30243d;
-  --color-card-background: var(--color-gray-8);
+  --color-card-background: #181021;
-  --color-card-background-highlighted: var(--color-gray-7);
+  --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-text-error: var(--color-danger);
-  --color-error: #61373f;
+  --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: #38274c;
-  --color-header-button: var(--color-gray-6);
+  --color-header-background: #231830;
-  --color-header-button-hover: var(--color-gray-6);
-  --color-header-button-active: var(--color-gray-6);
 
   // Button
-  --color-button-primary-bg: var(--color-primary-alt);
+  --color-button-primary-text: white;
-  --color-button-primary-bg-hover: var(--color-primary-alt-2);
-  --color-button-primary-text: var(--color-gray-2);
   --color-button-primary-hover-text: var(--color-primary-alt);
-  --color-button-secondary-bg: var(--color-secondary);
+  --color-button-secondary-bg: #2c1543;
-  --color-button-secondary-border: var(--color-secondary);
+  --color-button-secondary-border: #4f1c82;
-  --color-button-secondary-bg-hover: var(--color-secondary-alt-3);
+  --color-button-secondary-bg-hover: #3b1c5b;
-  --color-button-secondary-text: var(--color-gray-2);
+  --color-button-secondary-text: #efefef;
-  --color-button-alt-bg: var(--color-gray-7);
+  --color-button-alt-bg: var(--color-header-button);
-  --color-button-alt-bg-hover: var(--color-gray-6);
+  --color-button-alt-bg-hover: #2b2037;
-  --color-button-alt-text: var(--color-gray-1);
+  --color-button-toggle-text: var(--color-text);
-  --color-button-border: var(--color-gray-5);
+  --color-button-toggle-bg: var(--color-primary-alt);
-  --color-button-toggle-text: var(--color-gray-1);
+  --color-button-toggle-bg-hover: var(--color-primary-alt);
-  --color-link: var(--color-primary-alt-3);
+  --color-button-alt-text: #e2e9f0;
-  --color-link-hover: var(--color-text);
+  --color-button-border: #5b4475;
-  --color-link-focus-bg: var(--color-gray-7);
+  --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: #f4f4f5;
-  --color-input-label: var(--color-gray-3);
+  --color-input-label: #a7a7a7;
-  --color-input-placeholder: var(--color-gray-1);
+  --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-icon: #76808a;
-  --color-navigation-link: var(--color-gray-4);
+  --color-navigation-link: #b9c3ce;
-  --color-navigation-active: var(--color-gray-7);
+  --color-navigation-active: #2b2037;
-  --color-navigation-active-text: var(--color-gray-3);
+  --color-navigation-active-text: #c6bcd2;
-  --color-navigation-hover: var(--color-gray-6);
+  --color-navigation-hover: #21182a;
-  --color-navigation-hover-text: var(--color-gray-3);
+  --color-navigation-hover-text: #c6bcd2;
 
   // Tags
-  --color-tag: var(--color-primary-alt-3);
+  --color-tag: #ff85b1;
-  --color-tag-bg: var(--color-gray-7);
+  --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-background--active: var(--color-primary-alt);
-  --color-menu-icon: var(--color-gray-4);
+  --color-menu-icon: #928b9b;
+  --color-menu-icon-active: #d6d6d6;
 
   // Comments
-  --color-comment-menu: var(--color-gray-5);
+  --color-comment-menu: #6a6a6a;
-  --color-comment-menu-hovering: var(--color-gray-2);
+  --color-comment-menu-hovering: #e0e0e0;
-  --color-comment-threadline: #434b54;
-  --color-comment-threadline-hover: var(--color-gray-4);
   --color-comment-highlighted: #484734;
-
+  --color-comment-threadline: #24192f;
-  // Snack
+  --color-comment-threadline-hover: var(--color-gray-4);
-  --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;
 
   // 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-focus: #e91e6329;
-  --color-help-warning-text: white;
+  --color-placeholder-background: #261a35;
-  --color-blockquote: var(--color-gray-5);
+  --color-spinner-light: white;
-  --color-placeholder-background: #4e5862;
-  --color-spinner-light: #5a6570;
   --color-spinner-dark: #212529;
   --color-login-graphic-background: var(--color-background);
 

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;
 }

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;
 

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">

web/component/footer.jsx

@@ -1,101 +1,34 @@
-import * as PAGES from 'constants/pages';
 import React from 'react';
 import Button from 'component/button';
-
+import I18nMessage from 'component/i18nMessage';
-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}`,
-      },
-    ],
-  },
-];
 
 export default function Footer() {
   return (
     <footer className="footer">
-      <ul className="navigation__tertiary footer__links ul--no-style">
+      <span className="footer__section-title">
-        {sections.map(({ name, links }) => {
+        <I18nMessage tokens={{ lbry_link: <Button button="link" label={'LBRY'} href="https://lbry.com" /> }}>
-          return (
+          POWERED BY %lbry_link%
-            <li key={name} className="footer__section">
+        </I18nMessage>
-              <ul className="ul--no-style">
+      </span>
-                <div className="footer__section-title">{__(name)}</div>
+      <ul className="navigation__tertiary footer__links">
-                {links.map(({ label, link, navigate }) => {
+        <li className="footer__link">
-                  return (
+          <Button label={__('About --[link title in Sidebar or Footer]--')} href="https://lbry.com/about" />
-                    <li key={label}>
-                      <Button className="footer__link" label={__(label)} href={link} navigate={navigate} />
         </li>
-                  );
+        <li className="footer__link">
-                })}
+          <Button label={__('Community Guidelines')} href="https://odysee.com/@OdyseeHelp:b/Community-Guidelines:c" />
-              </ul>
+        </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>
   );

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>
   );

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",

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"