From 0d53386ca1a145c929e4ed094ae2ccb2d2a1a370 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Sat, 11 Oct 2025 10:46:47 -0400
Subject: [PATCH] Use shared button tokens for mobile menu and subscribe

---
 index.html           |  2 +-
 js/channelProfile.js | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 2d89cc49..9647ce39 100644
--- a/index.html
+++ b/index.html
@@ -95,7 +95,7 @@
         -->
         <button
           id="mobileMenuBtn"
-          class="md:hidden ml-2 mr-4 flex items-center justify-center w-10 h-10 rounded-full bg-transparent hover:bg-transparent focus:outline-none focus:ring-2 focus:ring-[#0f172a] z-[60] fade-in"
+          class="md:hidden ml-2 mr-4 flex items-center justify-center w-10 h-10 rounded-full bg-transparent hover:bg-transparent focus-ring z-[60] fade-in"
           type="button"
           aria-expanded="false"
           aria-controls="sidebar"
diff --git a/js/channelProfile.js b/js/channelProfile.js
index 3d65a477..809e3f6f 100644
--- a/js/channelProfile.js
+++ b/js/channelProfile.js
@@ -1477,7 +1477,7 @@ function setupZapButton() {
 
 /**
  * Renders a Subscribe / Unsubscribe button with an icon,
- * using color #fe0032 and the subscribe-button-icon.svg on the left.
+ * using the primary button token styling and the subscribe icon on the left.
  */
 function renderSubscribeButton(channelHex) {
   const container = document.getElementById("subscribeBtnArea");
@@ -1488,14 +1488,14 @@ function renderSubscribeButton(channelHex) {
   container.classList.remove("hidden");
   const alreadySubscribed = subscriptions.isSubscribed(channelHex);
 
-  // We'll use #fe0032 for both subscribe/unsubscribe,
-  // and the same icon. If you prefer separate logic for unsub, you can do it here.
+  // Both subscribe/unsubscribe states share the primary styling and icon.
+  // If you prefer separate logic for unsub, you can do it here.
   container.innerHTML = `
     <button
       id="subscribeToggleBtn"
-      class="flex items-center gap-2 px-4 py-2 rounded text-white
-             hover:opacity-90 focus:outline-none"
-      style="background-color: #fe0032;"
+      type="button"
+      class="btn normal-case rounded hover:opacity-90 focus-visible:bg-primary"
+      data-state="${alreadySubscribed ? "subscribed" : "unsubscribed"}"
     >
       <img
         src="assets/svg/subscribe-button-icon.svg"