From a341a776c1d45402af5549cd41307e96cbd2f9ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?=
 =?UTF-8?q?=E3=83=96?= <netopwibby@thenetwork.email>
Date: Fri, 5 Apr 2019 17:05:25 -0500
Subject: [PATCH] Combined boxes and changed some things

---
 view/template/acquisition/youtube.php | 30 ++++++++++++++-------------
 web/js/yt2/app.js                     | 20 +++++++++++-------
 web/scss/pages/_youtube.scss          | 27 ++++++++++++++++++------
 3 files changed, 49 insertions(+), 28 deletions(-)

diff --git a/view/template/acquisition/youtube.php b/view/template/acquisition/youtube.php
index 2dfa5bfe..a76dd143 100644
--- a/view/template/acquisition/youtube.php
+++ b/view/template/acquisition/youtube.php
@@ -37,7 +37,7 @@
     <div class="inner-wrap inner-wrap--center-left">
       <h1 class="weight-light">LBRY &times; YouTube Sync</h1>
       <h2 class="weight-light">Get your YouTube videos in front of the LBRY audience</h2>
-      <button class="button button--inverse" id="scroll-to-claim" type="button">Claim your channel now</button>
+      <button class="button button--inverse" data-id="scroll-to-claim" type="button">Claim your channel now</button>
     </div>
   </section>
 
@@ -50,7 +50,7 @@
       <h2>Connect with your fans while earning money and rewards</h2>
 
       <form id="youtube_claim" method="post" action="/youtube/token">
-        <div hidden id="sync-status" class="sync-status"></div>
+        <p hidden id="sync-status" class="sync-status"></p>
 
         <input-submit>
           <label class="symbol-prefix">@</label>
@@ -68,6 +68,16 @@
 
           <div hidden id="lbry_error" class="error">LBRY channel name is either not valid or your input is blank</div>
         </input-submit>
+
+        <br/>
+
+        <checkbox-element>
+          <input id="immediate-sync" name="immediate_sync" type="checkbox" value="true"/>
+          <label for="immediate-sync">I want to sync my content to the LBRY network and agree to <a href="/faq/youtube-terms" target="_blank">these terms</a></label>
+          <checkbox-toggle/>
+        </checkbox-element>
+
+        <input type="text" hidden name="type" value="sync"/>
       </form>
 
       <small class="meta">
@@ -206,19 +216,11 @@
       <h3>Sync &amp; Earn</h3>
       <p>LBRY offers a single-click sync process for existing YouTubers.</p>
 
-      <form id="sync" method="post" action="/youtube/token">
-        <checkbox-element>
-          <input id="immediate-sync" name="immediate_sync" type="checkbox" value="true"/>
-          <label for="immediate-sync">I want to sync my content to the LBRY network and agree to <a href="/faq/youtube-terms" target="_blank">these terms</a></label>
-          <checkbox-toggle/>
-        </checkbox-element>
+      <br/>
 
-        <input type="text" hidden name="type" value="sync"/>
-
-        <div>
-          <input type="submit" value="Sync Now"/>
-        </div>
-      </form>
+      <div>
+        <button class="button button--inverse" data-id="scroll-to-claim" type="button">Sync now</button>
+      </div>
     </div>
   </section>
 
diff --git a/web/js/yt2/app.js b/web/js/yt2/app.js
index 8442b081..4296d72f 100644
--- a/web/js/yt2/app.js
+++ b/web/js/yt2/app.js
@@ -250,13 +250,17 @@ new App();
 
 
 
-document.getElementById("scroll-to-claim").onclick = () => {
-  const element = document.getElementById("claim-section");
-  const elementOffset = element.offsetTop - 2;
+const youtubeCtas = document.querySelectorAll("[data-id='scroll-to-claim']");
 
-  window.scroll({ top: elementOffset, behavior: "smooth" });
+youtubeCtas.forEach(cta => {
+  cta.onclick = () => {
+    const element = document.getElementById("claim-section");
+    const elementOffset = element.offsetTop - 2;
 
-  setTimeout(() => { // give the scroll time to finish before focusing
-    document.getElementById("lbry_channel_name").focus();
-  }, 300);
-};
+    window.scroll({ top: elementOffset, behavior: "smooth" });
+
+    setTimeout(() => { // give the scroll time to finish before focusing
+      document.getElementById("lbry_channel_name").focus();
+    }, 300);
+  };
+});
diff --git a/web/scss/pages/_youtube.scss b/web/scss/pages/_youtube.scss
index 93ea9260..d8185e6b 100644
--- a/web/scss/pages/_youtube.scss
+++ b/web/scss/pages/_youtube.scss
@@ -66,13 +66,28 @@ $lbry-yt-blue: mix($lbry-blue-5, $lbry-black, 50%);
 
 
 
-.error-block {
-  border: 1px solid var(--lbry-red-5);
-  background-color: var(--lbry-red-4);
-  color: var(--lbry-white);
+.error-block,
+.sync-status {
+  margin: 0 auto 0.5rem; padding: 0.5rem 0.75rem;
+
+  border-style: solid;
+  border-width: 1px;
   font-size: 0.8rem;
-  margin-bottom: 0.5rem;
-  padding: 0.5rem 0.75rem;
+
+  @media (min-width: 951px) {
+    max-width: 80%;
+  }
+}
+
+.error-block {
+  background-color: var(--lbry-red-4);
+  border-color: var(--lbry-red-5);
+  color: var(--lbry-white);
+}
+
+.sync-status {
+  background-color: rgba($lbry-black, 0.05);
+  border-color: var(--lbry-gray-3);
 }
 
 .hero--youtube {