Update UI colors and fix intensity legend

Small changes:
- Change navigation button colors for dark theme
- Update toggle button colors and active-state text
- Add missing "→" in the Intensity legend

Author: ivonastojanovic

Lib/profiling/sampling/_heatmap_assets/heatmap.css

@@ -692,6 +692,11 @@
   cursor: pointer;
   user-select: none;
   font-family: var(--font-sans);
+  transition: opacity var(--transition-fast);
+}
+
+.toggle-switch:hover {
+  opacity: 0.85;
 }
 
 .toggle-switch .toggle-label {
@@ -700,14 +705,15 @@
   color: var(--text-muted);
   min-width: 55px;
   text-align: right;
+  transition: color var(--transition-fast);
 }
 
 .toggle-switch .toggle-label:last-child {
   text-align: left;
 }
 
 .toggle-switch .toggle-label.active {
-  color: var(--accent);
+  color: var(--text-primary);
   font-weight: 600;
 }
 
@@ -716,39 +722,51 @@
   width: 36px;
   height: 20px;
   background: var(--bg-tertiary);
-  border: 1px solid var(--border);
-  border-radius: 10px;
+  border: 2px solid var(--border);
+  border-radius: 12px;
   transition: all var(--transition-fast);
+  box-shadow: inset var(--shadow-sm);
+}
+
+.toggle-track:hover {
+  border-color: var(--text-muted);
 }
 
 .toggle-track.on {
   background: var(--accent);
   border-color: var(--accent);
+  box-shadow: 0 0 8px var(--accent-glow);
 }
 
 .toggle-track::after {
   content: '';
   position: absolute;
-  top: 2px;
-  left: 2px;
+  top: 1px;
+  left: 1px;
   width: 14px;
   height: 14px;
   background: white;
   border-radius: 50%;
   box-shadow: var(--shadow-sm);
-  transition: transform var(--transition-fast);
+  transition: all var(--transition-fast);
 }
 
 .toggle-track.on::after {
   transform: translateX(16px);
+  box-shadow: var(--shadow-md);
 }
 
+/* Specific toggle overrides */
 #toggle-color-mode .toggle-track.on {
   background: #8e44ad;
+  border-color: #8e44ad;
+  box-shadow: 0 0 8px rgba(142, 68, 173, 0.3);
 }
 
 #toggle-cold .toggle-track.on {
   background: #e67e22;
+  border-color: #e67e22;
+  box-shadow: 0 0 8px rgba(230, 126, 34, 0.3);
 }
 
 /* Code Container */
@@ -933,22 +951,22 @@
 }
 
 .nav-btn.caller {
-  color: #2563eb;
-  border-color: #2563eb;
+  color: var(--nav-caller);
+  border-color: var(--nav-caller);
 }
 
 .nav-btn.callee {
-  color: #dc2626;
-  border-color: #dc2626;
+  color: var(--nav-callee);
+  border-color: var(--nav-callee);
 }
 
 .nav-btn.caller:hover:not(:disabled) {
-  background: #2563eb;
+  background: var(--nav-caller-hover);
   color: white;
 }
 
 .nav-btn.callee:hover:not(:disabled) {
-  background: #dc2626;
+  background: var(--nav-callee-hover);
   color: white;
 }
 

Lib/profiling/sampling/_heatmap_assets/heatmap_pyfile_template.html

@@ -63,6 +63,7 @@
                 <div class="legend-gradient"></div>
                 <div class="legend-labels">
                     <span>Cold</span>
+                    <span>→</span>
                     <span>Hot</span>
                 </div>
                 <div class="toggle-switch" id="toggle-color-mode" title="Toggle between self time and total time coloring">

Lib/profiling/sampling/_shared_assets/base.css

@@ -73,6 +73,12 @@
   --code-text: #2e3338;
   --code-text-muted: #8b949e;
   --code-accent: #3776ab;
+
+  /* Navigation colors */
+  --nav-caller: #2563eb;
+  --nav-caller-hover: #1d4ed8;
+  --nav-callee: #dc2626;
+  --nav-callee-hover: #b91c1c;
 }
 
 /* Dark theme */
@@ -114,6 +120,12 @@
   --code-text: #e6edf3;
   --code-text-muted: #6e7681;
   --code-accent: #58a6ff;
+
+  /* Navigation colors - dark theme friendly */
+  --nav-caller: #58a6ff;
+  --nav-caller-hover: #4184e4;
+  --nav-callee: #f87171;
+  --nav-callee-hover: #e53e3e;
 }
 
 /* --------------------------------------------------------------------------