Combined boxes and changed some things

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">
+      <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"/>
 
       <div>
-          <input type="submit" value="Sync Now"/>
+        <button class="button button--inverse" data-id="scroll-to-claim" type="button">Sync now</button>
       </div>
-      </form>
     </div>
   </section>
 

web/js/yt2/app.js

@@ -250,7 +250,10 @@ new App();
 
 
 
-document.getElementById("scroll-to-claim").onclick = () => {
+const youtubeCtas = document.querySelectorAll("[data-id='scroll-to-claim']");
+
+youtubeCtas.forEach(cta => {
+  cta.onclick = () => {
     const element = document.getElementById("claim-section");
     const elementOffset = element.offsetTop - 2;
 
@@ -260,3 +263,4 @@ document.getElementById("scroll-to-claim").onclick = () => {
       document.getElementById("lbry_channel_name").focus();
     }, 300);
   };
+});

web/scss/pages/_youtube.scss

@@ -66,13 +66,28 @@ $lbry-yt-blue: mix($lbry-blue-5, $lbry-black, 50%);
 
 
 
-.error-block {
+.error-block,
-  border: 1px solid var(--lbry-red-5);
+.sync-status {
-  background-color: var(--lbry-red-4);
+  margin: 0 auto 0.5rem; padding: 0.5rem 0.75rem;
-  color: var(--lbry-white);
+
+  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 {