dark mode love plus other fixes

package.json

@@ -128,8 +128,8 @@
     "husky": "^0.14.3",
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
-    "lbry-redux": "lbryio/lbry-redux#74f55ba9e3b81b5364788a8cbdd89bd2884d40d0",
+    "lbry-redux": "lbryio/lbry-redux#b6a7dd0d99f0f8cfc204d3734b6cfc6eb7f8303d",
-    "lbryinc": "lbryio/lbryinc#5aba3127c879f5aaa9b1eccaf57aae97449df183",
+    "lbryinc": "lbryio/lbryinc#f5bee9cd300c4bdc05228e31ea15cfc430975f67",
     "lint-staged": "^7.0.2",
     "localforage": "^1.7.1",
     "lodash-es": "^4.17.14",

src/ui/component/claimPreview/view.jsx

@@ -188,24 +188,27 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
           <div className="claim-preview-title">
             {claim ? <TruncatedText text={title || claim.name} lines={1} /> : <span>{__('Nothing here')}</span>}
           </div>
-          {!hideActions && actions !== undefined ? (
+          {!pending && (
-            actions
+            <React.Fragment>
-          ) : (
+              {!hideActions && actions !== undefined ? (
-            <div className="card__actions--inline">
+                actions
-              {isChannel && !channelIsBlocked && !claimIsMine && (
+              ) : (
-                <SubscribeButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
+                <div className="card__actions--inline">
+                  {isChannel && !channelIsBlocked && !claimIsMine && (
+                    <SubscribeButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
+                  )}
+                  {isChannel && !isSubscribed && !claimIsMine && (
+                    <BlockButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
+                  )}
+                  {!isChannel && claim && <FileProperties uri={uri} />}
+                </div>
               )}
-              {isChannel && !isSubscribed && !claimIsMine && (
+            </React.Fragment>
-                <BlockButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
-              )}
-              {!isChannel && claim && <FileProperties uri={uri} />}
-            </div>
           )}
         </div>
 
         <div className="claim-preview-properties">
           <div className="media__subtitle">
-            {pending && <div>Pending...</div>}
             {!isResolvingUri && (
               <div>
                 {claim ? (
@@ -223,12 +226,16 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
                   </Fragment>
                 )}
                 <div>
-                  {claim &&
+                  {pending ? (
+                    <div>Pending...</div>
+                  ) : (
+                    claim &&
                     (isChannel ? (
                       type !== 'inline' && `${claimsInChannel} ${__('publishes')}`
                     ) : (
                       <DateTime timeAgo uri={uri} />
-                    ))}
+                    ))
+                  )}
                 </div>
               </div>
             )}

src/ui/component/userEmailNew/view.jsx

@@ -19,7 +19,7 @@ type Props = {
 function UserEmailNew(props: Props) {
   const { errorMessage, isPending, addUserEmail, syncEnabled, setSync, balance } = props;
   const [newEmail, setEmail] = useState('');
-  const [ageConfirmation, setAgeConfirmation] = useState(false);
+  const [ageConfirmation, setAgeConfirmation] = useState(true);
   const valid = newEmail.match(EMAIL_REGEX);
 
   function handleSubmit() {

src/ui/component/userSignIn/index.js

@@ -15,7 +15,7 @@ import {
   selectGetSyncErrorMessage,
   selectSyncHash,
 } from 'lbryinc';
-import { selectMyChannelClaims, selectBalance, selectFetchingMyChannels } from 'lbry-redux';
+import { selectMyChannelClaims, selectBalance, selectFetchingMyChannels, selectCreatingChannel } from 'lbry-redux';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 import UserSignIn from './view';
 
@@ -36,6 +36,7 @@ const select = state => ({
   syncingWallet: selectGetSyncIsPending(state),
   getSyncError: selectGetSyncErrorMessage(state),
   hasSynced: Boolean(selectSyncHash(state)),
+  creatingChannel: selectCreatingChannel(state),
 });
 
 const perform = dispatch => ({

src/ui/component/userSignIn/view.jsx

@@ -30,6 +30,7 @@ type Props = {
   hasSynced: boolean,
   syncingWallet: boolean,
   getSyncError: ?string,
+  creatingChannel: boolean,
 };
 
 function UserSignIn(props: Props) {
@@ -50,6 +51,7 @@ function UserSignIn(props: Props) {
     getSyncError,
     hasSynced,
     fetchingChannels,
+    creatingChannel,
   } = props;
   const { search } = location;
   const urlParams = new URLSearchParams(search);
@@ -70,7 +72,7 @@ function UserSignIn(props: Props) {
   // The verbose variable names are an attempt to alleviate _some_ of the confusion from handling all edge cases that come from
   // reward claiming, channel creation, account syncing, and youtube transfer
   const canHijackSignInFlowWithSpinner = hasVerifiedEmail && !getSyncError;
-  const isCurrentlyFetchingSomething = fetchingChannels || claimingReward || syncingWallet;
+  const isCurrentlyFetchingSomething = fetchingChannels || claimingReward || syncingWallet || creatingChannel;
   const isWaitingForSomethingToFinish =
     // If the user has claimed the email award, we need to wait until the balance updates sometime in the future
     (!hasFetchedReward && !hasClaimedEmailAward) || (syncEnabled && !hasSynced);
@@ -80,7 +82,12 @@ function UserSignIn(props: Props) {
   const showUserVerification = hasVerifiedEmail && !rewardsApproved;
   const showSyncPassword = syncEnabled && getSyncError && !hasSynced;
   const showChannelCreation =
-    hasVerifiedEmail && balance && balance > DEFAULT_BID_FOR_FIRST_CHANNEL && channelCount === 0 && !hasYoutubeChannels;
+    hasVerifiedEmail &&
+    balance !== undefined &&
+    balance !== null &&
+    balance > DEFAULT_BID_FOR_FIRST_CHANNEL &&
+    channelCount === 0 &&
+    !hasYoutubeChannels;
   const showYoutubeTransfer = hasVerifiedEmail && hasYoutubeChannels && !isYoutubeTransferComplete;
   const showLoadingSpinner =
     canHijackSignInFlowWithSpinner && (isCurrentlyFetchingSomething || isWaitingForSomethingToFinish);

src/ui/page/channels/view.jsx

@@ -15,10 +15,22 @@ type Props = {
 export default function ChannelsPage(props: Props) {
   const { channels, fetchChannelListMine, fetchingChannels, youtubeChannels } = props;
   const hasYoutubeChannels = youtubeChannels && Boolean(youtubeChannels.length);
+  const hasPendingChannels = channels && channels.some(channel => channel.confirmations === -1);
 
   useEffect(() => {
     fetchChannelListMine();
-  }, [fetchChannelListMine]);
+
+    let interval;
+    if (hasPendingChannels) {
+      interval = setInterval(() => {
+        fetchChannelListMine();
+      }, 5000);
+    }
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [fetchChannelListMine, hasPendingChannels]);
 
   return (
     <Page>

src/ui/redux/actions/publish.js

@@ -54,7 +54,10 @@ export const doCheckPendingPublishesApp = () => (dispatch: Dispatch, getState: G
   const onConfirmed = claim => {
     if (selectosNotificationsEnabled(getState())) {
       const notif = new window.Notification('LBRY Publish Complete', {
-        body: `${claim.value.title} has been published to lbry://${claim.name}. Click here to view it`,
+        body: __('%nameOrTitle% has been published to lbry://%name%. Click here to view it.', {
+          nameOrTitle: claim.value_type === 'channel' ? `@${claim.name}` : claim.value.title,
+          name: claim.name,
+        }),
         silent: false,
       });
       notif.onclick = () => {

src/ui/scss/component/_button.scss

@@ -70,7 +70,11 @@
 
 .button--link {
   [data-mode='dark'] & {
-    color: $lbry-teal-3;
+    color: $lbry-teal-4;
+
+    &:hover {
+      color: $lbry-teal-3;
+    }
   }
 }
 

src/ui/scss/component/_card.scss

@@ -203,7 +203,7 @@
   font-size: var(--font-body);
 
   [data-mode='dark'] & {
-    background-color: var(--dm-color-04);
+    background-color: var(--color-card-actions--dark);
     color: inherit;
   }
 }

src/ui/scss/component/_claim-list.scss

@@ -15,7 +15,7 @@ $border-color--dark: var(--dm-color-04);
   font-size: var(--font-body);
   border-top-left-radius: var(--card-radius);
   border-top-right-radius: var(--card-radius);
-  color: $lbry-white;
+  background-color: var(--color-card-actions);
 
   & > *:not(:last-child) {
     margin-right: 0.5rem;
@@ -26,22 +26,6 @@ $border-color--dark: var(--dm-color-04);
     margin-bottom: 0;
   }
 
-  // Normal link buttons are too dark on the black file list background
-  .button--link {
-    color: $lbry-teal-3;
-
-    &:hover {
-      color: $lbry-teal-1;
-    }
-
-    [data-mode='dark'] & {
-      color: $lbry-teal-4;
-      &:hover {
-        color: $lbry-teal-1;
-      }
-    }
-  }
-
   // Fix this in @lbry/components, we shouldn't need to be this specific
   checkbox-element input[type='checkbox']:checked + label {
     color: $lbry-white;
@@ -49,6 +33,7 @@ $border-color--dark: var(--dm-color-04);
 
   [data-mode='dark'] & {
     color: var(--dm-color-01);
+    background-color: var(--color-card-actions--dark);
   }
 }
 
@@ -61,25 +46,12 @@ $border-color--dark: var(--dm-color-04);
   margin-bottom: 0;
   padding: 0 var(--spacing-medium);
   padding-right: var(--spacing-large);
-  background-image: 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");
-  border: 1px solid $lbry-white;
-  color: $lbry-white;
-  background-color: lighten($lbry-black, 10%);
 
   [data-mode='dark'] & {
     color: var(--dm-color-01);
   }
 }
 
-.claim-list__header,
-.claim-list__dropdown {
-  background-color: lighten($lbry-black, 10%);
-
-  [data-mode='dark'] & {
-    background-color: var(--dm-color-07);
-  }
-}
-
 .claim-list__alt-controls {
   display: flex;
   align-items: center;

src/ui/scss/component/_form-field.scss

@@ -40,31 +40,35 @@ textarea {
   height: var(--input-height);
   padding-bottom: 0.1em;
 
+  &::placeholder {
+    color: $lbry-gray-5;
+    opacity: 0.4;
+  }
+
   [data-mode='dark'] & {
     &::placeholder {
-      opacity: 0.4;
       color: $lbry-white;
     }
   }
 }
 
-input,
-select,
-textarea {
-  border-color: lighten($lbry-black, 20%);
-  border-radius: var(--input-border-radius);
-  background-color: $lbry-white;
-  border-width: 1px;
-
-  [data-mode='dark'] & {
-    background-color: var(--dm-color-02);
-    border-color: $lbry-black;
-  }
-}
-
 fieldset-section {
   margin-bottom: var(--spacing-small);
 
+  input,
+  select,
+  textarea {
+    border-color: lighten($lbry-black, 20%);
+    border-radius: var(--input-border-radius);
+    background-color: $lbry-white;
+    border-width: 1px;
+
+    [data-mode='dark'] & {
+      background-color: var(--dm-color-03);
+      border-color: $lbry-black;
+    }
+  }
+
   label {
     width: auto;
     text-transform: none;
@@ -188,9 +192,8 @@ fieldset-group {
         background-color: $lbry-white;
 
         [data-mode='dark'] & {
-          background-color: var(--dm-color-02);
+          background-color: var(--dm-color-03);
-          border-color: $lbry-gray-2;
+          border-color: var(--dm-color-02);
-          color: $lbry-gray-1;
         }
       }
     }
@@ -211,7 +214,7 @@ fieldset-group {
 
         [data-mode='dark'] & {
           &:focus {
-            border-image-source: linear-gradient(to right, $lbry-gray-4, $lbry-teal-5 5%);
+            border-image-source: linear-gradient(to right, var(--dm-color-02), $lbry-teal-5 5%);
           }
         }
       }
@@ -294,7 +297,7 @@ fieldset-section {
     input:not(.form-field--copyable),
     textarea,
     select {
-      border-color: var(--dm-color-01);
+      border-color: $lbry-gray-5;
     }
   }
 }

src/ui/scss/component/_icon.scss

@@ -15,4 +15,8 @@
     position: absolute;
     stroke: $lbry-gray-5;
   }
+
+  [data-mode='dark'] & {
+    background-color: var(--color-card-actions--dark);
+  }
 }

src/ui/scss/component/_navigation.scss

@@ -77,10 +77,10 @@
   }
 
   [data-mode='dark'] & {
-    color: var(--dm-color-01);
+    color: darken($lbry-white, 30%);
 
     svg {
-      stroke: var(--dm-color-01);
+      stroke: darken($lbry-white, 30%);
     }
 
     &:hover,

src/ui/scss/component/_tags.scss

@@ -48,8 +48,8 @@ $main: $lbry-teal-5;
     margin-top: -2px; // To handle the border height
 
     [data-mode='dark'] & {
-      background-color: var(--dm-color-02);
+      background-color: var(--dm-color-03);
-      border-color: $lbry-white;
+      border-color: $lbry-gray-4;
     }
   }
 }

src/ui/scss/component/_wunderbar.scss

@@ -20,6 +20,10 @@
     position: absolute;
     z-index: 1;
     stroke: $lbry-gray-5;
+
+    [data-mode='dark'] & {
+      stroke: $lbry-gray-3;
+    }
   }
 }
 

src/ui/scss/init/_vars.scss

@@ -41,6 +41,7 @@ $large-breakpoint: 1921px;
   --color-background: #f7f7f7;
   --color-background--splash: #270f34;
   --color-card-actions: #f7fbfe;
+  --color-card-actions--dark: #545454;
 
   // Dark Mode
   --dm-color-01: #ddd;

static/app-strings.json

@@ -812,5 +812,11 @@
   "Claim Your 20 LBC Invite Reward": "Claim Your 20 LBC Invite Reward",
   "Publish something totally wacky and wild.": "Publish something totally wacky and wild.",
   "LBRY names cannot contain spaces or reserved symbols": "LBRY names cannot contain spaces or reserved symbols",
-  "If you bid more than %amount% LBC, when someone navigates to %uri%, it will load your published content. However, you can get a longer version of this URL for any bid.": "If you bid more than %amount% LBC, when someone navigates to %uri%, it will load your published content. However, you can get a longer version of this URL for any bid."
+  "If you bid more than %amount% LBC, when someone navigates to %uri%, it will load your published content. However, you can get a longer version of this URL for any bid.": "If you bid more than %amount% LBC, when someone navigates to %uri%, it will load your published content. However, you can get a longer version of this URL for any bid.",
+  "Blockchain expert? %learn_more%": "Blockchain expert? %learn_more%",
+  "Your Blocked Channels": "Your Blocked Channels",
+  "You aren’t blocking any channels": "You aren’t blocking any channels",
+  "When you block a channel, all content from that channel will be hidden.": "When you block a channel, all content from that channel will be hidden.",
+  "dfsdfsdf": "dfsdfsdf",
+  "Light": "Light"
 }

yarn.lock

@@ -6850,17 +6850,17 @@ lazy-val@^1.0.3, lazy-val@^1.0.4:
     yargs "^13.2.2"
     zstd-codec "^0.1.1"
 
-lbry-redux@lbryio/lbry-redux#74f55ba9e3b81b5364788a8cbdd89bd2884d40d0:
+lbry-redux@lbryio/lbry-redux#b6a7dd0d99f0f8cfc204d3734b6cfc6eb7f8303d:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/74f55ba9e3b81b5364788a8cbdd89bd2884d40d0"
+  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/b6a7dd0d99f0f8cfc204d3734b6cfc6eb7f8303d"
   dependencies:
     proxy-polyfill "0.1.6"
     reselect "^3.0.0"
     uuid "^3.3.2"
 
-lbryinc@lbryio/lbryinc#5aba3127c879f5aaa9b1eccaf57aae97449df183:
+lbryinc@lbryio/lbryinc#f5bee9cd300c4bdc05228e31ea15cfc430975f67:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/5aba3127c879f5aaa9b1eccaf57aae97449df183"
+  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/f5bee9cd300c4bdc05228e31ea15cfc430975f67"
   dependencies:
     reselect "^3.0.0"