From fb06a1aec3fa65b2de699a504a8a18ce3cb4231c Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sun, 12 Oct 2025 23:50:34 +0200
Subject: [PATCH] fix: apply user highlight color to both marker and arrow
 icons

- Apply color style directly to both icons in collapsed highlights button
- Update CSS to use color-agnostic pulse animation (opacity/scale)
- Remove hardcoded yellow color and drop-shadow from glow effect
---
 .../HighlightsPanel/HighlightsPanelCollapsed.tsx         | 9 ++++++---
 src/index.css                                            | 8 ++++----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/HighlightsPanel/HighlightsPanelCollapsed.tsx b/src/components/HighlightsPanel/HighlightsPanelCollapsed.tsx
index 0e37bde8..983ae222 100644
--- a/src/components/HighlightsPanel/HighlightsPanelCollapsed.tsx
+++ b/src/components/HighlightsPanel/HighlightsPanelCollapsed.tsx
@@ -23,10 +23,13 @@ const HighlightsPanelCollapsed: React.FC<HighlightsPanelCollapsedProps> = ({
         className={`toggle-highlights-btn with-icon ${hasHighlights ? 'has-highlights' : ''}`}
         title="Expand highlights panel"
         aria-label="Expand highlights panel"
-        style={{ color: highlightColor }}
       >
-        <FontAwesomeIcon icon={faHighlighter} className={hasHighlights ? 'glow' : ''} />
-        <FontAwesomeIcon icon={faChevronRight} />
+        <FontAwesomeIcon 
+          icon={faHighlighter} 
+          className={hasHighlights ? 'glow' : ''} 
+          style={{ color: highlightColor }}
+        />
+        <FontAwesomeIcon icon={faChevronRight} style={{ color: highlightColor }} />
       </button>
     </div>
   )
diff --git a/src/index.css b/src/index.css
index 1277ef73..e4813c3e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1836,17 +1836,17 @@ body.mobile-sidebar-open {
 }
 
 .highlights-container.collapsed .toggle-highlights-btn .glow {
-  color: #ffff00;
-  filter: drop-shadow(0 0 4px rgba(255, 255, 0, 0.6));
   animation: pulse-glow 2s ease-in-out infinite;
 }
 
 @keyframes pulse-glow {
   0%, 100% {
-    filter: drop-shadow(0 0 4px rgba(255, 255, 0, 0.6));
+    opacity: 0.8;
+    transform: scale(1);
   }
   50% {
-    filter: drop-shadow(0 0 8px rgba(255, 255, 0, 0.9));
+    opacity: 1;
+    transform: scale(1.1);
   }
 }