From 6396476220f485ced5c270c157db4b8499202dab Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Fri, 17 Oct 2025 23:47:05 -0400
Subject: [PATCH] Fix channel action icons for theme support

---
 css/tailwind.source.css    | 56 +++++++++++++++++++++++++++++++++++++-
 views/channel-profile.html | 49 +++++++++++++++++++++++++--------
 2 files changed, 92 insertions(+), 13 deletions(-)

diff --git a/css/tailwind.source.css b/css/tailwind.source.css
index 6f729f4d..2609c402 100644
--- a/css/tailwind.source.css
+++ b/css/tailwind.source.css
@@ -1810,12 +1810,18 @@
   }
 
   .profile-switcher__add {
+    --profile-switcher-add-hover-bg: color-mix(
+      in srgb,
+      var(--color-accent) 14%,
+      transparent
+    );
+
     @apply card flex cursor-pointer items-center gap-4 border border-dashed border-border border-opacity-40 bg-surface text-left text-muted transition duration-base ease-out hover:border-accent hover:border-opacity-60 hover:text-text focus-visible:border-accent focus-visible:border-opacity-60;
   }
 
   .profile-switcher__add:hover,
   .profile-switcher__add:focus-visible {
-    background-color: color-mix(in srgb, var(--color-accent) 14%, transparent);
+    background-color: var(--profile-switcher-add-hover-bg);
   }
 
   .profile-switcher__addAvatar {
@@ -2005,6 +2011,54 @@
     pointer-events: none;
   }
 
+  .channel-action-button {
+    --channel-action-bg: color-mix(
+      in srgb,
+      var(--surface-overlay-panel) 78%,
+      transparent
+    );
+    --channel-action-border: color-mix(
+      in srgb,
+      var(--border-overlay) 92%,
+      transparent
+    );
+    --channel-action-bg-hover: color-mix(
+      in srgb,
+      var(--color-accent) 22%,
+      var(--surface-overlay-panel)
+    );
+    --channel-action-ring: color-mix(
+      in srgb,
+      var(--color-accent) 48%,
+      transparent
+    );
+    --channel-action-bg-active: color-mix(
+      in srgb,
+      var(--color-accent-pressed) 28%,
+      var(--surface-overlay-panel)
+    );
+
+    color: var(--color-text);
+    background-color: var(--channel-action-bg);
+    border: 1px solid var(--channel-action-border);
+  }
+
+  .channel-action-button:hover,
+  .channel-action-button:focus-visible {
+    color: var(--color-accent-strong);
+    background-color: var(--channel-action-bg-hover);
+  }
+
+  .channel-action-button:focus,
+  .channel-action-button:focus-visible {
+    box-shadow: 0 0 0 var(--icon-button-ring-width) var(--channel-action-ring);
+  }
+
+  .channel-action-button:active {
+    color: var(--color-accent-pressed);
+    background-color: var(--channel-action-bg-active);
+  }
+
   .modal-nav .icon-button {
     box-shadow: none;
     padding: 0;
diff --git a/views/channel-profile.html b/views/channel-profile.html
index ba77fd80..e182c4aa 100644
--- a/views/channel-profile.html
+++ b/views/channel-profile.html
@@ -38,40 +38,65 @@
           <button
             id="zapButton"
             type="button"
-            class="icon-button"
+            class="icon-button channel-action-button"
             aria-label="Open zap dialog"
             aria-haspopup="dialog"
             aria-expanded="false"
             aria-controls="zapControls"
           >
-            <img
-              src="assets/svg/lightning-bolt.svg"
-              alt="Zap"
+            <svg
               class="icon-image"
-            />
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+              focusable="false"
+            >
+              <polygon
+                points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
           </button>
           <button
             id="channelShareBtn"
             type="button"
-            class="icon-button"
+            class="icon-button channel-action-button"
             aria-label="Share channel"
           >
-            <img
-              src="assets/svg/share-video.svg"
-              alt="Share channel"
+            <svg
               class="icon-image"
-            />
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+              focusable="false"
+            >
+              <path
+                fill="currentColor"
+                d="M5 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm11.122 12.065A4 4 0 1 1 24 20a4 4 0 0 1-7.878-.935l-5.488-2.927a6.009 6.009 0 0 1-.943 1.764l5.488 2.927ZM24 4a4 4 0 1 1-7.878.935l-5.488 2.927a6.01 6.01 0 0 1-.943-1.764l5.488-2.927A4 4 0 0 1 24 4Z"
+              />
+            </svg>
           </button>
           <button
             id="channelMoreBtn"
             type="button"
-            class="icon-button"
+            class="icon-button channel-action-button"
             aria-haspopup="true"
             aria-expanded="false"
             aria-label="Channel options"
             aria-controls="channelProfileMoreMenu"
           >
-            <img src="assets/svg/ellipsis.svg" alt="More" class="h-5 w-5" />
+            <svg
+              class="icon-image"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+              focusable="false"
+            >
+              <circle cx="5" cy="12" r="2" fill="currentColor" />
+              <circle cx="12" cy="12" r="2" fill="currentColor" />
+              <circle cx="19" cy="12" r="2" fill="currentColor" />
+            </svg>
           </button>
         </div>
       </div>