From 1a61d34ae66196a9164d06da65a2677c1f80ce03 Mon Sep 17 00:00:00 2001
From: syeopite <syeopite@syeopite.dev>
Date: Sun, 17 Sep 2023 11:58:14 -0700
Subject: [PATCH] Use button instead of anchor for try reddit link

---
 assets/css/default.css        | 29 +++++++++++++++++++++--------
 assets/js/comments.js         |  4 ++--
 src/invidious/views/watch.ecr |  4 ++--
 3 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/assets/css/default.css b/assets/css/default.css
index 271aec30d..919d64c32 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -58,6 +58,11 @@ body {
   justify-content: flex-end;
 }
 
+button.simulated_a  {
+  background: none;
+  border: none;
+}
+
 
 /*
  * Channel page
@@ -533,7 +538,9 @@ span > select {
 .light-theme a:active,
 .light-theme summary:hover,
 .light-theme a:focus,
-.light-theme summary:focus {
+.light-theme summary:focus,
+.light-theme .simulated_a:hover,
+.light-theme .simulated_a:active {
   color: #075A9E !important;
 }
 
@@ -551,7 +558,7 @@ span > select {
   background-color: #fff2;
 }
 
-.light-theme a {
+.light-theme a, .light-theme .simulated_a {
   color: #335d7a;
   text-decoration: none;
 }
@@ -576,7 +583,9 @@ span > select {
   .no-theme a:active,
   .no-theme summary:hover,
   .no-theme a:focus,
-  .no-theme summary:focus {
+  .no-theme summary:focus,
+  .no-theme .simulated_a:hover,
+  .no-theme .simulated_a:active {
     color: #075A9E !important;
   }
 
@@ -594,7 +603,7 @@ span > select {
     background-color: #fff2;
   }
 
-  .no-theme a {
+  .no-theme a, .no-theme .simulated_a{
     color: #335d7a;
     text-decoration: none;
   }
@@ -632,7 +641,9 @@ span > select {
 .dark-theme a:active,
 .dark-theme summary:hover,
 .dark-theme a:focus,
-.dark-theme summary:focus {
+.dark-theme summary:focus,
+.dark-theme .simulated_a:hover,
+.dark-theme .simulated_a:active {
   color: rgb(0, 182, 240);
 }
 
@@ -650,7 +661,7 @@ span > select {
   color: #ddd;
 }
 
-.dark-theme a {
+.dark-theme a, .dark-theme .simulated_a {
   color: #adadad;
   text-decoration: none;
 }
@@ -690,7 +701,9 @@ body.dark-theme {
 @media (prefers-color-scheme: dark) {
   .no-theme a:hover,
   .no-theme a:active,
-  .no-theme a:focus {
+  .no-theme a:focus,
+  .no-theme .simulated_a:hover,
+  .no-theme .simulated_a:active {
     color: rgb(0, 182, 240);
   }
 
@@ -708,7 +721,7 @@ body.dark-theme {
     color: #ddd;
   }
 
-  .no-theme a {
+  .no-theme a, .no-theme .simulated_a{
     color: #adadad;
     text-decoration: none;
   }
diff --git a/assets/js/comments.js b/assets/js/comments.js
index f6fffeea5..45817bffb 100644
--- a/assets/js/comments.js
+++ b/assets/js/comments.js
@@ -78,9 +78,9 @@ function get_youtube_comments() {
             <div id="comments-turned-off-on-video-message" class="h-box v-box">
                 <p><b>${video_data.comments_youtube_disabled_text}</b></p>
 
-                <p><b><a href="javascript:void(0)" data-comments="reddit" id="try-reddit-comments-link">
+                <p><b><button href="javascript:void(0)" data-comments="reddit" id="try-reddit-comments-link" class="simulated_a">
                     ${video_data.comments_youtube_disabled_try_reddit}
-                </a></b></p>
+                </button></b></p>
             </div>`;
 
             document.getElementById("try-reddit-comments-link").onclick = swap_comments;
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index 6056a3960..65b71dc50 100644
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@@ -319,9 +319,9 @@ we're going to need to do it here in order to allow for translations.
 
                             <p>
                                 <b>
-                                    <a href="javascript:void(0)" data-comments="reddit" id="try-reddit-comments-link">
+                                    <button data-comments="reddit" id="try-reddit-comments-link" class="simulated_a">
                                         <%= HTML.escape(I18n.translate(locale, "comments_youtube_disabled_try_reddit")) %>
-                                    </a>
+                                    </button>
                                 </b>
                             </p>
                         </div>