From 7704894a7c5a8bacf568412651e8d41a3872be9e Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Sun, 25 May 2025 19:04:21 +0000
Subject: [PATCH] Fix reply text color visibility in light and dark modes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added --color-reply-text CSS variable with proper colors for light (#666) and dark (#ccc) modes
- Created .reply-button CSS class using the color variable
- Updated reply buttons in App.tsx to use the new class instead of inline styles
- Reply text is now properly visible: dark grey in light mode, light grey in dark mode

Resolves issue #7

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: humanizersequel <humanizersequel@users.noreply.github.com>
---
 ui/src/App.css   | 11 +++++++++++
 ui/src/App.tsx   | 20 ++------------------
 ui/src/index.css |  2 ++
 3 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/ui/src/App.css b/ui/src/App.css
index 62c02e9..7061160 100644
--- a/ui/src/App.css
+++ b/ui/src/App.css
@@ -266,6 +266,17 @@ input, textarea {
   cursor: not-allowed;
 }
 
+.reply-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 0.8em;
+  opacity: 0.6;
+  padding: 2px 4px;
+  margin-top: 4px;
+  color: var(--color-reply-text);
+}
+
 .node-not-connected {
   position: fixed;
   top: 0;
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 58df932..49a33f8 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -979,15 +979,7 @@ function App() {
                                 {/* Reply button */}
                                 <button
                                   onClick={() => setReplyingTo(message)}
-                                  style={{
-                                    background: 'none',
-                                    border: 'none',
-                                    cursor: 'pointer',
-                                    fontSize: '0.8em',
-                                    opacity: 0.6,
-                                    padding: '2px 4px',
-                                    marginTop: '4px'
-                                  }}
+                                  className="reply-button"
                                   title="Reply to this message"
                                 >
                                   ↩️ Reply
@@ -1068,15 +1060,7 @@ function App() {
                             {!message.file_info && (
                               <button
                                 onClick={() => setReplyingTo(message)}
-                                style={{
-                                  background: 'none',
-                                  border: 'none',
-                                  cursor: 'pointer',
-                                  fontSize: '0.8em',
-                                  opacity: 0.6,
-                                  padding: '2px 4px',
-                                  marginTop: '4px'
-                                }}
+                                className="reply-button"
                                 title="Reply to this message"
                               >
                                 ↩️ Reply
diff --git a/ui/src/index.css b/ui/src/index.css
index 4ae40e9..fb88fac 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -17,6 +17,7 @@
   --color-text-muted: #666;
   --color-text-subtle: #999;
   --color-text-timestamp: #999;
+  --color-reply-text: #666;
   --color-button-primary: #4b9ad8;
   --color-button-primary-hover: #357abd;
   --color-button-disabled: #cccccc;
@@ -98,6 +99,7 @@ button:focus-visible {
     --color-text-muted: #aaa;
     --color-text-subtle: #888;
     --color-text-timestamp: #888;
+    --color-reply-text: #ccc;
     --color-button-primary: #4b9ad8;
     --color-button-primary-hover: #357abd;
     --color-button-disabled: #555;