alignment with odysee branch

ui/scss/component/_navigation.scss

@@ -227,8 +227,7 @@
   position: fixed;
   width: 100vw;
   height: 100vh;
-  opacity: 0.3;
-  background-color: black;
+  background-color: var(--color-background-overlay);
   z-index: 3;
   left: 0;
   top: var(--header-height);

ui/scss/component/_notification.scss

@@ -17,7 +17,7 @@
   .icon__wrapper {
     width: 1rem;
     height: 1rem;
-    padding: 1rem;
+    padding: 1.2rem;
     border-radius: var(--border-radius);
     margin-right: var(--spacing-m);
 
@@ -89,6 +89,11 @@
   overflow: hidden;
 }
 
+.notification__title,
+.notification__text {
+  max-width: 30rem;
+}
+
 .notification__time {
   font-size: var(--font-small);
   color: var(--color-text-help);
@@ -135,4 +140,9 @@
   border-radius: 50%;
   background-color: var(--color-primary);
   margin-left: var(--spacing-s);
+  margin-top: var(--spacing-s);
+
+  @media (min-width: $breakpoint-small) {
+    margin-top: 0;
+  }
 }

ui/scss/init/_gui.scss

@@ -234,7 +234,7 @@ textarea {
 
 .help--card-actions {
   @extend .help;
-  margin-top: var(--spacing-l);
+  margin-top: var(--spacing-m);
 }
 
 .empty {

ui/scss/init/_mixins.scss

@@ -115,30 +115,6 @@
   -webkit-user-select: none;
 }
 
-// TODO: Make customizable
-// The `background-position` in `loading-animation` is the same width as this `background-size`
-// The same values can be passed to both
-@mixin placeholder {
-  animation-duration: 4s;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  animation-name: loading-animation;
-  animation-timing-function: linear;
-  background-color: transparent;
-  background-image: linear-gradient(to right, var(--color-gray-3) 10%, transparent 80%, var(--color-gray-3) 100%);
-  background-repeat: repeat;
-  background-size: 500px;
-
-  [data-mode='dark'] & {
-    background-image: linear-gradient(
-      to right,
-      rgba($lbry-white, 0.1) 10%,
-      transparent 80%,
-      rgba($lbry-white, 0.1) 100%
-    );
-  }
-}
-
 // Use CSS variables without upsetting Sass-Lint
 // https://github.com/sasstools/sass-lint/issues/1161#issuecomment-390537190
 @mixin root-prop($prop: null, $value: null) {
@@ -208,6 +184,7 @@
   animation: pulse 2s infinite ease-in-out;
   background-color: var(--color-placeholder-background);
   border-radius: var(--card-radius);
+  border-width: 0;
 }
 
 @mixin mediaThumbHoverZoom {

ui/scss/init/_vars.scss

@@ -50,7 +50,7 @@ $breakpoint-large: 1600px;
   --mac-titlebar-height: 1.5rem;
   --mobile: 600px;
   --side-nav-width: 230px;
-  --side-nav-width--micro: 100px;
+  --side-nav-width--micro: 125px;
 
   --spacing-main-padding: var(--spacing-xl);
   --floating-viewer-width: 32rem;

web/component/ads.jsx

@@ -1,11 +1,11 @@
 // @flow
+import { DOMAIN, SHOW_ADS } from 'config';
 import * as PAGES from 'constants/pages';
 import React, { useEffect } from 'react';
 import { withRouter } from 'react-router';
 import I18nMessage from 'component/i18nMessage';
 import Button from 'component/button';
 import classnames from 'classnames';
-import { DOMAIN } from 'config';
 
 const ADS_URL = '//assets.revcontent.com/master/delivery.js';
 const IS_MOBILE = typeof window.orientation !== 'undefined';
@@ -24,7 +24,7 @@ function Ads(props: Props) {
   } = props;
 
   useEffect(() => {
-    if (type === 'video') {
+    if (SHOW_ADS && type === 'video') {
       try {
         const d = document;
         const s = 'script';
@@ -42,7 +42,7 @@ function Ads(props: Props) {
   }, [type]);
 
   useEffect(() => {
-    if (!IS_MOBILE && type === 'sidebar') {
+    if (SHOW_ADS && !IS_MOBILE && type === 'sidebar') {
       const script = document.createElement('script');
       script.src = ADS_URL;
       script.async = true;
@@ -78,6 +78,10 @@ function Ads(props: Props) {
     </I18nMessage>
   );
 
+  if (!SHOW_ADS) {
+    return false;
+  }
+
   return type === 'video' ? (
     <div className="ads__claim-item">
       <div id="62d1eb10-e362-4873-99ed-c64a4052b43b" />

web/component/fileViewerEmbeddedEnded/view.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import Button from 'component/button';
 import { formatLbryUrlForWeb } from 'util/url';
 import { withRouter } from 'react-router';
-import { URL } from 'config';
+import { URL, SITE_NAME } from 'config';
 import * as ICONS from 'constants/icons';
 
 type Props = {
@@ -16,20 +16,21 @@ function FileViewerEmbeddedEnded(props: Props) {
 
   const prompts = isAuthenticated
     ? {
-        discuss_auth: 'Continue the discussion on lbry.tv',
+        discuss_auth: `Continue the discussion on ${SITE_NAME}`,
         tip_auth: 'Always tip your creators',
       }
     : {
         bigtech_unauth: 'Together, we can take back control from big tech',
-        discuss_unauth: 'Continue the discussion on lbry.tv',
-        find_unauth: 'Find more great content on lbry.tv',
+        discuss_unauth: `Continue the discussion on ${SITE_NAME}`,
+        find_unauth: `Find more great content on ${SITE_NAME}`,
         a_b_unauth: "We test a lot of messages here. Wouldn't it be funny if the one telling you that did the best?",
-        earn_unauth: 'Join lbry.tv and earn to watch.',
+        earn_unauth: `Join ${SITE_NAME} and earn to watch.`,
         blockchain_unauth: "Now if anyone asks, you can say you've used a blockchain.",
       };
 
   const promptKeys = Object.keys(prompts);
   const promptKey = promptKeys[Math.floor(Math.random() * promptKeys.length)];
+  // $FlowFixMe
   const prompt = prompts[promptKey];
   const lbrytvLink = `${URL}${formatLbryUrlForWeb(uri)}?src=${promptKey}`;
 

web/src/html.js

@@ -200,8 +200,8 @@ async function getHtml(ctx) {
       parseURI(inviteChannelUrl);
       const claim = await getClaimFromChainqueryOrRedirect(ctx, inviteChannelUrl);
       const invitePageMetadata = buildClaimOgMetadata(inviteChannelUrl, claim, {
-        title: `Join ${claim.name} on LBRY`,
-        description: `Join ${claim.name} on LBRY, a content wonderland owned by everyone (and no one).`,
+        title: `Join ${claim.name} on ${SITE_NAME}`,
+        description: `Join ${claim.name} on ${SITE_NAME}, a content wonderland owned by everyone (and no one).`,
       });
 
       return insertToHead(html, invitePageMetadata);
@@ -209,8 +209,8 @@ async function getHtml(ctx) {
       // Something about the invite channel is messed up
       // Enter generic invite metadata
       const invitePageMetadata = buildOgMetadata({
-        title: `Join a friend on LBRY`,
-        description: `Join a friend on LBRY, a content wonderland owned by everyone (and no one).`,
+        title: `Join a friend on ${SITE_NAME}`,
+        description: `Join a friend on ${SITE_NAME}, a content wonderland owned by everyone (and no one).`,
       });
       return insertToHead(html, invitePageMetadata);
     }