Skip to content

Commit 7f33e6d

Browse files
committed
UI: brighten muted text for better readability on dark theme
Bump base text colors: text-2 #7a7a96 → #8e8ea8, text-3 #42425c → #5c5c78, muted-foreground aligned. Also raise opacity modifiers on text-3 across all components (/20,/25 → /50, /30 → /60, /40 → /70) so timestamps, metadata, and placeholders are actually visible.
1 parent 2f7e3e5 commit 7f33e6d

31 files changed

+76
-76
lines changed

src/app/globals.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,8 @@
5757
--color-border-hi: rgba(255,255,255,0.07);
5858
--color-border-focus: rgba(99,102,241,0.5);
5959
--color-text: #e2e2ec;
60-
--color-text-2: #7a7a96;
61-
--color-text-3: #42425c;
60+
--color-text-2: #8e8ea8;
61+
--color-text-3: #5c5c78;
6262
--color-accent-soft: rgba(99,102,241,0.08);
6363
--color-accent-glow: rgba(99,102,241,0.18);
6464
--color-accent-bright: #818CF8;
@@ -91,7 +91,7 @@
9191
--secondary: #13131e;
9292
--secondary-foreground: #e2e2ec;
9393
--muted: #13131e;
94-
--muted-foreground: #7a7a96;
94+
--muted-foreground: #8e8ea8;
9595
--accent: #6366F1;
9696
--accent-foreground: #ffffff;
9797
--destructive: #F43F5E;

src/components/agents/agent-card.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export function AgentCard({ agent, isDefault, onSetDefault }: Props) {
6262
<button
6363
onClick={(e) => { e.stopPropagation(); onSetDefault(agent.id) }}
6464
className="shrink-0 text-[10px] font-600 uppercase tracking-wider px-2 py-0.5 rounded-[6px] cursor-pointer
65-
transition-all border-none bg-transparent text-text-3/30 hover:text-accent-bright hover:bg-accent-soft"
65+
transition-all border-none bg-transparent text-text-3/60 hover:text-accent-bright hover:bg-accent-soft"
6666
style={{ fontFamily: 'inherit' }}
6767
title="Set as default agent for Main Chat"
6868
>
@@ -86,9 +86,9 @@ export function AgentCard({ agent, isDefault, onSetDefault }: Props) {
8686
</span>
8787
)}
8888
</div>
89-
<div className="text-[12px] text-text-3/40 mt-1.5 truncate">{agent.description}</div>
89+
<div className="text-[12px] text-text-3/70 mt-1.5 truncate">{agent.description}</div>
9090
<div className="flex items-center gap-2 mt-1.5">
91-
<span className="text-[11px] text-text-3/30 font-mono">{agent.model || agent.provider}</span>
91+
<span className="text-[11px] text-text-3/60 font-mono">{agent.model || agent.provider}</span>
9292
{agent.tools?.includes('browser') && (
9393
<span className="text-[10px] font-600 uppercase tracking-wider text-sky-400/70 bg-sky-400/[0.08] px-1.5 py-0.5 rounded-[5px]">
9494
browser

src/components/agents/agent-chat-list.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
104104
onChange={(e) => setSearch(e.target.value)}
105105
placeholder="Search agents..."
106106
className="w-full px-4 py-2.5 rounded-[12px] border border-white/[0.04] bg-surface text-text
107-
text-[13px] outline-none transition-all duration-200 placeholder:text-text-3/40 focus-glow"
107+
text-[13px] outline-none transition-all duration-200 placeholder:text-text-3/70 focus-glow"
108108
style={{ fontFamily: 'inherit' }}
109109
/>
110110
</div>
@@ -136,12 +136,12 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
136136
{agent.name}
137137
</span>
138138
{/* Provider badge */}
139-
<span className="text-[10px] text-text-3/30 font-mono shrink-0">
139+
<span className="text-[10px] text-text-3/60 font-mono shrink-0">
140140
{agent.model ? agent.model.split('/').pop()?.split(':')[0] : agent.provider}
141141
</span>
142142
</div>
143143
{preview && (
144-
<div className="text-[12px] text-text-3/40 mt-1 truncate pl-[18px]">
144+
<div className="text-[12px] text-text-3/70 mt-1 truncate pl-[18px]">
145145
{preview}
146146
</div>
147147
)}

src/components/agents/agent-list.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export function AgentList({ inSidebar }: Props) {
8282
onChange={(e) => setSearch(e.target.value)}
8383
placeholder="Search agents..."
8484
className="w-full px-4 py-2.5 rounded-[12px] border border-white/[0.04] bg-surface text-text
85-
text-[13px] outline-none transition-all duration-200 placeholder:text-text-3/40 focus-glow"
85+
text-[13px] outline-none transition-all duration-200 placeholder:text-text-3/70 focus-glow"
8686
style={{ fontFamily: 'inherit' }}
8787
/>
8888
</div>

src/components/agents/agent-sheet.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -315,7 +315,7 @@ export function AgentSheet() {
315315
style={{ fontFamily: 'inherit' }}
316316
/>
317317
</div>
318-
<p className="text-[11px] text-text-3/40 mt-1.5">Press Enter or comma to add. Other agents see these when deciding delegation.</p>
318+
<p className="text-[11px] text-text-3/70 mt-1.5">Press Enter or comma to add. Other agents see these when deciding delegation.</p>
319319
</div>
320320

321321
<div className="mb-8">
@@ -660,7 +660,7 @@ export function AgentSheet() {
660660
})}
661661
</div>
662662
) : (
663-
<p className="text-[12px] text-text-3/40">No skills found in ~/.claude/skills/</p>
663+
<p className="text-[12px] text-text-3/70">No skills found in ~/.claude/skills/</p>
664664
)}
665665
</div>
666666
)}

src/components/auth/access-key-gate.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,7 @@ export function AccessKeyGate({ onAuthenticated }: AccessKeyGateProps) {
222222
autoComplete="off"
223223
className="w-full max-w-[320px] px-6 py-4 rounded-[16px] border border-white/[0.08] bg-surface
224224
text-text text-[16px] text-center font-mono outline-none
225-
transition-all duration-200 placeholder:text-text-3/40
225+
transition-all duration-200 placeholder:text-text-3/70
226226
focus:border-accent-bright/30 focus:shadow-[0_0_30px_rgba(99,102,241,0.1)]"
227227
/>
228228

src/components/auth/user-picker.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export function UserPicker() {
6767
autoFocus
6868
className="w-full max-w-[280px] px-6 py-4 rounded-[16px] border border-white/[0.08] bg-surface
6969
text-text text-[18px] text-center font-display font-600 outline-none
70-
transition-all duration-200 placeholder:text-text-3/40
70+
transition-all duration-200 placeholder:text-text-3/70
7171
focus:border-accent-bright/30 focus:shadow-[0_0_30px_rgba(99,102,241,0.1)]"
7272
style={{ fontFamily: 'inherit' }}
7373
/>

src/components/chat/chat-header.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -265,13 +265,13 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
265265
<span className="text-[11px] text-text-3/60 font-mono block truncate">{shortPath(session.cwd)}</span>
266266
{modelName && (
267267
<>
268-
<span className="text-[11px] text-text-3/30">·</span>
268+
<span className="text-[11px] text-text-3/60">·</span>
269269
<span className="text-[11px] text-text-3/50 font-mono truncate shrink-0">{modelName}</span>
270270
</>
271271
)}
272272
{lastUsage && !streaming && (
273273
<>
274-
<span className="text-[11px] text-text-3/30">·</span>
274+
<span className="text-[11px] text-text-3/60">·</span>
275275
<UsageBadge {...lastUsage} />
276276
</>
277277
)}
@@ -456,7 +456,7 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
456456
{copied ? 'Copied!' : `${resumeHandle.label}: ${resumeHandle.id}`}
457457
</span>
458458
{!copied && (
459-
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3/30 shrink-0">
459+
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3/60 shrink-0">
460460
<rect x="9" y="9" width="13" height="13" rx="2" />
461461
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
462462
</svg>
@@ -478,7 +478,7 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
478478
<span className="text-[11px] font-600 text-[#3B82F6] group-hover:text-[#F43F5E]">
479479
Browser Active
480480
</span>
481-
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" className="text-text-3/30 group-hover:text-[#F43F5E] shrink-0">
481+
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" className="text-text-3/60 group-hover:text-[#F43F5E] shrink-0">
482482
<line x1="18" y1="6" x2="6" y2="18" />
483483
<line x1="6" y1="6" x2="18" y2="18" />
484484
</svg>

src/components/chat/chat-tool-toggles.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ export function ChatToolToggles({ session }: Props) {
126126
<span className={`text-[12px] ${enabled ? 'text-text-2' : 'text-text-3/70'}`}>
127127
{label}
128128
{TOOL_HINTS[toolId] && (
129-
<span className="ml-2 text-[10px] text-text-3/40 font-400">{TOOL_HINTS[toolId]}</span>
129+
<span className="ml-2 text-[10px] text-text-3/70 font-400">{TOOL_HINTS[toolId]}</span>
130130
)}
131131
</span>
132132
</label>
@@ -152,7 +152,7 @@ export function ChatToolToggles({ session }: Props) {
152152
)}
153153

154154
<div className="px-3 py-2 border-t border-white/[0.04] bg-white/[0.02]">
155-
<p className="text-[10px] text-text-3/40">Changes apply to the next message</p>
155+
<p className="text-[10px] text-text-3/70">Changes apply to the next message</p>
156156
</div>
157157
</div>
158158
)}

src/components/chat/message-bubble.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,7 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
189189
<span className={`text-[12px] font-600 ${isUser ? 'text-accent-bright/70' : 'text-text-3'}`}>
190190
{isUser ? (currentUser ? currentUser.charAt(0).toUpperCase() + currentUser.slice(1) : 'You') : (assistantName || 'Claude')}
191191
</span>
192-
<span className="text-[11px] text-text-3/40 font-mono">
192+
<span className="text-[11px] text-text-3/70 font-mono">
193193
{message.time ? fmtTime(message.time) : ''}
194194
</span>
195195
</div>

0 commit comments

Comments
 (0)