From 6d41d956277e78a9616fcd05f60c0ac1a8ff4df1 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sun, 5 Oct 2025 22:17:39 +0100
Subject: [PATCH] feat(highlights): update default colors to yellow, orange,
 purple

---
 src/components/Settings.tsx |  6 +--
 src/index.css               | 84 ++++++++++++++++++-------------------
 2 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index c248b16e..8e597413 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -124,7 +124,7 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose }) => {
             <div className="setting-group setting-inline">
               <label>My Highlights</label>
               <ColorPicker
-                selectedColor={localSettings.highlightColorMine || '#eab308'}
+                selectedColor={localSettings.highlightColorMine || '#ffff00'}
                 onColorChange={(color) => setLocalSettings({ ...localSettings, highlightColorMine: color })}
               />
             </div>
@@ -132,7 +132,7 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose }) => {
             <div className="setting-group setting-inline">
               <label>Friends Highlights</label>
               <ColorPicker
-                selectedColor={localSettings.highlightColorFriends || '#f97316'}
+                selectedColor={localSettings.highlightColorFriends || '#ff8c00'}
                 onColorChange={(color) => setLocalSettings({ ...localSettings, highlightColorFriends: color })}
               />
             </div>
@@ -140,7 +140,7 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose }) => {
             <div className="setting-group setting-inline">
               <label>Nostrverse Highlights</label>
               <ColorPicker
-                selectedColor={localSettings.highlightColorNostrverse || '#9333ea'}
+                selectedColor={localSettings.highlightColorNostrverse || '#800080'}
                 onColorChange={(color) => setLocalSettings({ ...localSettings, highlightColorNostrverse: color })}
               />
             </div>
diff --git a/src/index.css b/src/index.css
index 99dae0db..fa02fa37 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1480,18 +1480,18 @@ body {
 
 /* Level colors in sidebar items */
 .highlight-item.level-mine {
-  border-color: color-mix(in srgb, var(--highlight-color-mine, #eab308) 60%, #333);
-  box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-mine, #eab308) 25%, transparent);
+  border-color: color-mix(in srgb, var(--highlight-color-mine, #ffff00) 60%, #333);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-mine, #ffff00) 25%, transparent);
 }
 
 .highlight-item.level-friends {
-  border-color: color-mix(in srgb, var(--highlight-color-friends, #f97316) 60%, #333);
-  box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-friends, #f97316) 25%, transparent);
+  border-color: color-mix(in srgb, var(--highlight-color-friends, #ff8c00) 60%, #333);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-friends, #ff8c00) 25%, transparent);
 }
 
 .highlight-item.level-nostrverse {
-  border-color: color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 60%, #333);
-  box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 25%, transparent);
+  border-color: color-mix(in srgb, var(--highlight-color-nostrverse, #800080) 60%, #333);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-nostrverse, #800080) 25%, transparent);
 }
 
 .highlight-quote-icon {
@@ -1503,15 +1503,15 @@ body {
 
 /* Level-colored quote icon */
 .highlight-item.level-mine .highlight-quote-icon {
-  color: var(--highlight-color-mine, #eab308);
+  color: var(--highlight-color-mine, #ffff00);
 }
 
 .highlight-item.level-friends .highlight-quote-icon {
-  color: var(--highlight-color-friends, #f97316);
+  color: var(--highlight-color-friends, #ff8c00);
 }
 
 .highlight-item.level-nostrverse .highlight-quote-icon {
-  color: var(--highlight-color-nostrverse, #9333ea);
+  color: var(--highlight-color-nostrverse, #800080);
 }
 
 .highlight-content {
@@ -1656,63 +1656,63 @@ body {
 /* Three-level highlight colors */
 .content-highlight-marker.level-mine,
 .content-highlight.level-mine {
-  background: color-mix(in srgb, var(--highlight-color-mine, #eab308) 35%, transparent);
-  box-shadow: 0 0 8px color-mix(in srgb, var(--highlight-color-mine, #eab308) 20%, transparent);
+  background: color-mix(in srgb, var(--highlight-color-mine, #ffff00) 35%, transparent);
+  box-shadow: 0 0 8px color-mix(in srgb, var(--highlight-color-mine, #ffff00) 20%, transparent);
 }
 
 .content-highlight-marker.level-mine:hover,
 .content-highlight.level-mine:hover {
-  background: color-mix(in srgb, var(--highlight-color-mine, #eab308) 50%, transparent);
-  box-shadow: 0 0 12px color-mix(in srgb, var(--highlight-color-mine, #eab308) 30%, transparent);
+  background: color-mix(in srgb, var(--highlight-color-mine, #ffff00) 50%, transparent);
+  box-shadow: 0 0 12px color-mix(in srgb, var(--highlight-color-mine, #ffff00) 30%, transparent);
 }
 
 .content-highlight-marker.level-friends,
 .content-highlight.level-friends {
-  background: color-mix(in srgb, var(--highlight-color-friends, #f97316) 35%, transparent);
-  box-shadow: 0 0 8px color-mix(in srgb, var(--highlight-color-friends, #f97316) 20%, transparent);
+  background: color-mix(in srgb, var(--highlight-color-friends, #ff8c00) 35%, transparent);
+  box-shadow: 0 0 8px color-mix(in srgb, var(--highlight-color-friends, #ff8c00) 20%, transparent);
 }
 
 .content-highlight-marker.level-friends:hover,
 .content-highlight.level-friends:hover {
-  background: color-mix(in srgb, var(--highlight-color-friends, #f97316) 50%, transparent);
-  box-shadow: 0 0 12px color-mix(in srgb, var(--highlight-color-friends, #f97316) 30%, transparent);
+  background: color-mix(in srgb, var(--highlight-color-friends, #ff8c00) 50%, transparent);
+  box-shadow: 0 0 12px color-mix(in srgb, var(--highlight-color-friends, #ff8c00) 30%, transparent);
 }
 
 .content-highlight-marker.level-nostrverse,
 .content-highlight.level-nostrverse {
-  background: color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 35%, transparent);
-  box-shadow: 0 0 8px color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 20%, transparent);
+  background: color-mix(in srgb, var(--highlight-color-nostrverse, #800080) 35%, transparent);
+  box-shadow: 0 0 8px color-mix(in srgb, var(--highlight-color-nostrverse, #800080) 20%, transparent);
 }
 
 .content-highlight-marker.level-nostrverse:hover,
 .content-highlight.level-nostrverse:hover {
-  background: color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 50%, transparent);
-  box-shadow: 0 0 12px color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 30%, transparent);
+  background: color-mix(in srgb, var(--highlight-color-nostrverse, #800080) 50%, transparent);
+  box-shadow: 0 0 12px color-mix(in srgb, var(--highlight-color-nostrverse, #800080) 30%, transparent);
 }
 
 /* Underline styles for three levels */
 .content-highlight-underline.level-mine {
-  text-decoration-color: color-mix(in srgb, var(--highlight-color-mine, #eab308) 80%, transparent);
+  text-decoration-color: color-mix(in srgb, var(--highlight-color-mine, #ffff00) 80%, transparent);
 }
 
 .content-highlight-underline.level-mine:hover {
-  text-decoration-color: var(--highlight-color-mine, #eab308);
+  text-decoration-color: var(--highlight-color-mine, #ffff00);
 }
 
 .content-highlight-underline.level-friends {
-  text-decoration-color: color-mix(in srgb, var(--highlight-color-friends, #f97316) 80%, transparent);
+  text-decoration-color: color-mix(in srgb, var(--highlight-color-friends, #ff8c00) 80%, transparent);
 }
 
 .content-highlight-underline.level-friends:hover {
-  text-decoration-color: var(--highlight-color-friends, #f97316);
+  text-decoration-color: var(--highlight-color-friends, #ff8c00);
 }
 
 .content-highlight-underline.level-nostrverse {
-  text-decoration-color: color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 80%, transparent);
+  text-decoration-color: color-mix(in srgb, var(--highlight-color-nostrverse, #800080) 80%, transparent);
 }
 
 .content-highlight-underline.level-nostrverse:hover {
-  text-decoration-color: var(--highlight-color-nostrverse, #9333ea);
+  text-decoration-color: var(--highlight-color-nostrverse, #800080);
 }
 
 /* Ensure highlights work in both light and dark mode */
@@ -1740,50 +1740,50 @@ body {
   /* Three-level overrides for light mode */
   .content-highlight-marker.level-mine,
   .content-highlight.level-mine {
-    background: color-mix(in srgb, var(--highlight-color-mine, #eab308) 40%, transparent);
-    box-shadow: 0 0 6px color-mix(in srgb, var(--highlight-color-mine, #eab308) 15%, transparent);
+    background: color-mix(in srgb, var(--highlight-color-mine, #ffff00) 40%, transparent);
+    box-shadow: 0 0 6px color-mix(in srgb, var(--highlight-color-mine, #ffff00) 15%, transparent);
   }
 
   .content-highlight-marker.level-mine:hover,
   .content-highlight.level-mine:hover {
-    background: color-mix(in srgb, var(--highlight-color-mine, #eab308) 55%, transparent);
-    box-shadow: 0 0 10px color-mix(in srgb, var(--highlight-color-mine, #eab308) 25%, transparent);
+    background: color-mix(in srgb, var(--highlight-color-mine, #ffff00) 55%, transparent);
+    box-shadow: 0 0 10px color-mix(in srgb, var(--highlight-color-mine, #ffff00) 25%, transparent);
   }
 
   .content-highlight-marker.level-friends,
   .content-highlight.level-friends {
-    background: color-mix(in srgb, var(--highlight-color-friends, #f97316) 40%, transparent);
-    box-shadow: 0 0 6px color-mix(in srgb, var(--highlight-color-friends, #f97316) 15%, transparent);
+    background: color-mix(in srgb, var(--highlight-color-friends, #ff8c00) 40%, transparent);
+    box-shadow: 0 0 6px color-mix(in srgb, var(--highlight-color-friends, #ff8c00) 15%, transparent);
   }
 
   .content-highlight-marker.level-friends:hover,
   .content-highlight.level-friends:hover {
-    background: color-mix(in srgb, var(--highlight-color-friends, #f97316) 55%, transparent);
-    box-shadow: 0 0 10px color-mix(in srgb, var(--highlight-color-friends, #f97316) 25%, transparent);
+    background: color-mix(in srgb, var(--highlight-color-friends, #ff8c00) 55%, transparent);
+    box-shadow: 0 0 10px color-mix(in srgb, var(--highlight-color-friends, #ff8c00) 25%, transparent);
   }
 
   .content-highlight-marker.level-nostrverse,
   .content-highlight.level-nostrverse {
-    background: color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 40%, transparent);
-    box-shadow: 0 0 6px color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 15%, transparent);
+    background: color-mix(in srgb, var(--highlight-color-nostrverse, #800080) 40%, transparent);
+    box-shadow: 0 0 6px color-mix(in srgb, var(--highlight-color-nostrverse, #800080) 15%, transparent);
   }
 
   .content-highlight-marker.level-nostrverse:hover,
   .content-highlight.level-nostrverse:hover {
-    background: color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 55%, transparent);
-    box-shadow: 0 0 10px color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 25%, transparent);
+    background: color-mix(in srgb, var(--highlight-color-nostrverse, #800080) 55%, transparent);
+    box-shadow: 0 0 10px color-mix(in srgb, var(--highlight-color-nostrverse, #800080) 25%, transparent);
   }
 
   .content-highlight-underline.level-mine {
-    text-decoration-color: color-mix(in srgb, var(--highlight-color-mine, #eab308) 90%, transparent);
+    text-decoration-color: color-mix(in srgb, var(--highlight-color-mine, #ffff00) 90%, transparent);
   }
 
   .content-highlight-underline.level-friends {
-    text-decoration-color: color-mix(in srgb, var(--highlight-color-friends, #f97316) 90%, transparent);
+    text-decoration-color: color-mix(in srgb, var(--highlight-color-friends, #ff8c00) 90%, transparent);
   }
 
   .content-highlight-underline.level-nostrverse {
-    text-decoration-color: color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 90%, transparent);
+    text-decoration-color: color-mix(in srgb, var(--highlight-color-nostrverse, #800080) 90%, transparent);
   }
   
   .highlight-indicator {