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 @@
LBRY × YouTube Sync
Get your YouTube videos in front of the LBRY audience
-
+
@@ -50,7 +50,7 @@
Connect with your fans while earning money and rewards
@@ -206,19 +216,11 @@
Sync & Earn
LBRY offers a single-click sync process for existing YouTubers.
-
+
+
+
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 {