From 044076ca1df0f32b8869e55a4da492a67373f972 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 30 Sep 2019 15:52:53 -0400
Subject: [PATCH] more cleanup

---
 src/ui/component/syncPassword/view.jsx        |  1 +
 src/ui/component/userEmailNew/view.jsx        | 33 ++++++++------
 .../component/youtubeTransferStatus/view.jsx  | 43 +++++++------------
 src/ui/page/channels/view.jsx                 |  2 +-
 src/ui/scss/component/_button.scss            |  5 +++
 src/ui/scss/component/_form-field.scss        |  8 ++++
 src/ui/scss/component/_modal.scss             |  1 -
 src/ui/scss/component/_navigation.scss        |  2 +-
 src/ui/scss/component/_tags.scss              | 14 +++---
 9 files changed, 59 insertions(+), 50 deletions(-)

diff --git a/src/ui/component/syncPassword/view.jsx b/src/ui/component/syncPassword/view.jsx
index 1dcd6fcc4..f62f43738 100644
--- a/src/ui/component/syncPassword/view.jsx
+++ b/src/ui/component/syncPassword/view.jsx
@@ -27,6 +27,7 @@ function SyncPassword(props: Props) {
     <Form onSubmit={handleSubmit}>
       <Card
         title={__('Enter Your LBRY Password')}
+        subtitle={__('You set your wallet password when you previously installed LBRY.')}
         actions={
           <div>
             <FormField
diff --git a/src/ui/component/userEmailNew/view.jsx b/src/ui/component/userEmailNew/view.jsx
index 748585775..8988b4f83 100644
--- a/src/ui/component/userEmailNew/view.jsx
+++ b/src/ui/component/userEmailNew/view.jsx
@@ -52,19 +52,26 @@ function UserEmailNew(props: Props) {
           error={errorMessage}
           onChange={e => setEmail(e.target.value)}
         />
-        <FormField
-          type="checkbox"
-          name="sync_checkbox"
-          label={__('Sync your balance between devices')}
-          helper={
-            balance > 0
-              ? __("This is only available if you don't have a balance")
-              : __('Maybe some more text about something')
-          }
-          checked={syncEnabled}
-          onChange={() => setSync(!syncEnabled)}
-          disabled={balance > 0}
-        />
+        {!IS_WEB && (
+          <FormField
+            type="checkbox"
+            name="sync_checkbox"
+            label={__('Sync balance and preferences across devices')}
+            helper={
+              balance > 0 ? (
+                __('This feature is not yet available for wallets with balances, but the gerbils are working on it.')
+              ) : (
+                <React.Fragment>
+                  {__('Blockchain expert?')}{' '}
+                  <Button button="link" href="https://lbry.com/faq/account-sync" label={__('Learn More')} />
+                </React.Fragment>
+              )
+            }
+            checked={syncEnabled}
+            onChange={() => setSync(!syncEnabled)}
+            disabled={balance > 0}
+          />
+        )}
         <div className="card__actions">
           <Button button="primary" type="submit" label={__('Continue')} disabled={!newEmail || !valid || isPending} />
         </div>
diff --git a/src/ui/component/youtubeTransferStatus/view.jsx b/src/ui/component/youtubeTransferStatus/view.jsx
index 1cde1ae56..c47c19d2b 100644
--- a/src/ui/component/youtubeTransferStatus/view.jsx
+++ b/src/ui/component/youtubeTransferStatus/view.jsx
@@ -21,29 +21,14 @@ export default function YoutubeTransferStatus(props: Props) {
   const { youtubeChannels, ytImportPending, claimChannels, videosImported, checkYoutubeTransfer, updateUser } = props;
   const hasChannels = youtubeChannels && youtubeChannels.length;
 
-  let transferEnabled = false;
-  let transferStarted = false;
-  let transferComplete = false;
-  if (hasChannels) {
-    for (var i = 0; i < youtubeChannels.length; i++) {
-      const { transfer_state: transferState, transferable } = youtubeChannels[i];
-      if (transferable) {
-        transferEnabled = true;
-      }
-
-      if (transferState === COMPLETED_TRANSFER) {
-        transferComplete = true;
-      }
-
-      if (transferState === PENDING_TRANSFER) {
-        transferStarted = true;
-      }
-    }
-  }
+  const transferEnabled = youtubeChannels.some(status => status.transferable);
+  const hasPendingTransfers = youtubeChannels.some(status => status.transfer_state === PENDING_TRANSFER);
+  const hasCompleteTransfers = youtubeChannels.some(status => status.transfer_state === COMPLETED_TRANSFER);
+  console.log('?', hasChannels && (hasPendingTransfers || (!hasPendingTransfers && !hasCompleteTransfers)));
 
   let total;
   let complete;
-  if (!transferComplete && videosImported) {
+  if (hasPendingTransfers && videosImported) {
     complete = videosImported[0];
     total = videosImported[1];
   }
@@ -66,7 +51,7 @@ export default function YoutubeTransferStatus(props: Props) {
 
   React.useEffect(() => {
     // If a channel is transferrable, theres nothing to check
-    if (transferStarted && !transferComplete) {
+    if (hasPendingTransfers) {
       checkYoutubeTransfer();
 
       let interval = setInterval(() => {
@@ -78,17 +63,17 @@ export default function YoutubeTransferStatus(props: Props) {
         clearInterval(interval);
       };
     }
-  }, [transferComplete, transferStarted, checkYoutubeTransfer, updateUser]);
+  }, [hasPendingTransfers, checkYoutubeTransfer, updateUser]);
 
   return (
     hasChannels &&
-    !transferComplete && (
+    (hasPendingTransfers || transferEnabled) && (
       <div>
         <Card
           title={youtubeChannels.length > 1 ? __('Your YouTube Channels') : __('Your YouTube Channel')}
           subtitle={
             <span>
-              {transferStarted
+              {hasPendingTransfers
                 ? __('Your videos are currently being transferred. There is nothing else for you to do.')
                 : __('Your videos are ready to be transferred.')}
             </span>
@@ -113,10 +98,14 @@ export default function YoutubeTransferStatus(props: Props) {
             </section>
           }
           actions={
-            transferEnabled &&
-            !ytImportPending && (
+            transferEnabled && (
               <div className="card__actions">
-                <Button button="primary" onClick={claimChannels} label={__('Claim Channels')} />
+                <Button
+                  button="primary"
+                  disabled={ytImportPending}
+                  onClick={claimChannels}
+                  label={youtubeChannels.length > 1 ? __('Claim Channels') : __('Claim Channel')}
+                />
                 <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/youtube#transfer" />
               </div>
             )
diff --git a/src/ui/page/channels/view.jsx b/src/ui/page/channels/view.jsx
index d69442f70..35aebfb90 100644
--- a/src/ui/page/channels/view.jsx
+++ b/src/ui/page/channels/view.jsx
@@ -27,7 +27,7 @@ export default function ChannelsPage(props: Props) {
       {channels && channels.length ? (
         <div className="card">
           <ClaimList
-            header={__('Your Channels On LBRY')}
+            header={__('Your Channels')}
             loading={fetchingChannels}
             uris={channels.map(channel => channel.permanent_url)}
           />
diff --git a/src/ui/scss/component/_button.scss b/src/ui/scss/component/_button.scss
index 04dbb7ebf..89f94f469 100644
--- a/src/ui/scss/component/_button.scss
+++ b/src/ui/scss/component/_button.scss
@@ -56,6 +56,11 @@
       stroke: $lbry-white;
     }
   }
+
+  [data-mode='dark'] & {
+    border-color: $lbry-teal-4;
+    color: $lbry-teal-3;
+  }
 }
 
 .button--alt {
diff --git a/src/ui/scss/component/_form-field.scss b/src/ui/scss/component/_form-field.scss
index ab605c8f2..15c28e22c 100644
--- a/src/ui/scss/component/_form-field.scss
+++ b/src/ui/scss/component/_form-field.scss
@@ -60,6 +60,10 @@ textarea {
   border-radius: var(--input-border-radius);
   background-color: $lbry-white;
   border-width: 1px;
+
+  [data-mode='dark'] & {
+    background-color: var(--dm-color-02);
+  }
 }
 
 fieldset-section {
@@ -69,6 +73,10 @@ fieldset-section {
     width: auto;
     text-transform: none;
     color: lighten($lbry-black, 20%);
+
+    [data-mode='dark'] & {
+      color: $lbry-gray-3;
+    }
   }
 }
 
diff --git a/src/ui/scss/component/_modal.scss b/src/ui/scss/component/_modal.scss
index 0a2bdba2e..a7f3961ed 100644
--- a/src/ui/scss/component/_modal.scss
+++ b/src/ui/scss/component/_modal.scss
@@ -23,7 +23,6 @@
   overflow: auto;
   padding: var(--spacing-large);
   word-break: break-word;
-  box-shadow: none;
 
   @media (min-width: 501px) {
     min-width: 500px;
diff --git a/src/ui/scss/component/_navigation.scss b/src/ui/scss/component/_navigation.scss
index 7ee96d310..2dde70268 100644
--- a/src/ui/scss/component/_navigation.scss
+++ b/src/ui/scss/component/_navigation.scss
@@ -40,7 +40,7 @@
 }
 
 .navigation-links__inline {
-  margin-left: 1.7rem;
+  margin-left: calc(var(--spacing-medium) + var(--spacing-small));
 }
 
 .navigation-link__wrapper {
diff --git a/src/ui/scss/component/_tags.scss b/src/ui/scss/component/_tags.scss
index 1b36925e0..da6f20e6d 100644
--- a/src/ui/scss/component/_tags.scss
+++ b/src/ui/scss/component/_tags.scss
@@ -40,16 +40,16 @@ $main: $lbry-teal-5;
   // Nested style needed for more specificity
   .tag__input {
     @extend .tag--remove;
-    border: 1px dashed;
-    border-color: $lbry-teal-5;
-    background-color: mix($lbry-teal-1, $lbry-white, 10%);
     height: auto;
     padding: calc(var(--spacing-miniscule) - 1px) var(--spacing-small);
-    margin-top: -2px;
-    border: 1px dashed lighten($lbry-teal-5, 10%);
+    background-color: mix($lbry-teal-1, $lbry-white, 10%);
+    border: 1px dashed;
+    border-color: lighten($lbry-teal-5, 10%);
+    margin-top: -2px; // To handle the border height
 
-    ::placeholder {
-      color: black;
+    [data-mode='dark'] & {
+      background-color: var(--dm-color-02);
+      border-color: $lbry-white;
     }
   }
 }