Skip to content

Commit 0cd5922

Browse files
kylecarbskylecarbs
committed
fix: replace hardcoded white/slate text colors with semantic tokens
- User message text: text-slate-100 → text-foreground - JSON debug view: text-white/80 → text-muted-foreground - History hidden message: bg-white/[0.03] → bg-muted/30 - Image borders: border-white/10 → border-separator - Fix Tailwind classnames order warnings
1 parent 0b17b52 commit 0cd5922

File tree

6 files changed

+36
-89
lines changed

6 files changed

+36
-89
lines changed

‎src/browser/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -598,7 +598,7 @@ function AppInner() {
598598
})()
599599
) : (
600600
<div
601-
className="[&_p]:text-muted mx-auto w-full max-w-3xl text-center [&_h2]:mb-4 [&_h2]:font-bold [&_h2]:tracking-tight [&_h2]:text-foreground [&_p]:leading-[1.6]"
601+
className="[&_p]:text-muted [&_h2]:text-foreground mx-auto w-full max-w-3xl text-center [&_h2]:mb-4 [&_h2]:font-bold [&_h2]:tracking-tight [&_p]:leading-[1.6]"
602602
style={{
603603
padding: "clamp(40px, 10vh, 100px) 20px",
604604
fontSize: "clamp(14px, 2vw, 16px)",

‎src/browser/components/Messages/HistoryHiddenMessage.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ export const HistoryHiddenMessage: React.FC<HistoryHiddenMessageProps> = ({
1414
return (
1515
<div
1616
className={cn(
17-
"my-5 py-3 px-[15px] bg-white/[0.03] border-l-[3px] border-accent rounded-sm",
18-
"text-muted text-xs font-normal text-center font-sans",
17+
"my-5 rounded-sm border-l-[3px] border-accent bg-muted/30 px-[15px] py-3",
18+
"font-sans text-center text-xs font-normal text-muted",
1919
className
2020
)}
2121
>

‎src/browser/components/Messages/MessageWindow.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export const MessageWindow: React.FC<MessageWindowProps> = ({
8282
<div className="relative z-10 flex flex-col gap-2">
8383
<div data-message-content>
8484
{showJson ? (
85-
<pre className="m-0 overflow-x-auto rounded-xl border border-white/10 bg-black/30 p-3 text-[12px] leading-snug whitespace-pre-wrap text-white/80">
85+
<pre className="border-separator bg-muted text-muted-foreground m-0 overflow-x-auto rounded-xl border p-3 text-[12px] leading-snug whitespace-pre-wrap">
8686
{JSON.stringify(message, null, 2)}
8787
</pre>
8888
) : (

‎src/browser/components/Messages/UserMessage.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ export const UserMessage: React.FC<UserMessageProps> = ({
9999
variant="user"
100100
>
101101
{content && (
102-
<pre className="font-primary m-0 leading-6 break-words whitespace-pre-wrap text-slate-100">
102+
<pre className="font-primary text-foreground m-0 leading-6 break-words whitespace-pre-wrap">
103103
{content}
104104
</pre>
105105
)}
@@ -110,7 +110,7 @@ export const UserMessage: React.FC<UserMessageProps> = ({
110110
key={idx}
111111
src={img.url}
112112
alt={`Attachment ${idx + 1}`}
113-
className="max-h-[300px] max-w-72 rounded-xl border border-white/10 object-cover"
113+
className="border-separator max-h-[300px] max-w-72 rounded-xl border object-cover"
114114
/>
115115
))}
116116
</div>

‎src/browser/components/ProjectCreateModal.tsx‎

Lines changed: 29 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import React, { useState, useCallback } from "react";
22
import { Modal, ModalActions, CancelButton, PrimaryButton } from "./Modal";
3-
import type { IPCApi } from "@/common/types/ipc";
4-
import { DirectoryPickerModal } from "./DirectoryPickerModal";
53
import type { ProjectConfig } from "@/node/config";
64

75
interface ProjectCreateModalProps {
@@ -23,37 +21,14 @@ export const ProjectCreateModal: React.FC<ProjectCreateModalProps> = ({
2321
}) => {
2422
const [path, setPath] = useState("");
2523
const [error, setError] = useState("");
26-
// Detect desktop environment where native directory picker is available
27-
const isDesktop =
28-
window.api.platform !== "browser" && typeof window.api.projects.pickDirectory === "function";
29-
const api = window.api as unknown as IPCApi;
30-
const hasWebFsPicker = window.api.platform === "browser" && !!api.fs?.listDirectory;
3124
const [isCreating, setIsCreating] = useState(false);
32-
const [isDirPickerOpen, setIsDirPickerOpen] = useState(false);
3325

3426
const handleCancel = useCallback(() => {
3527
setPath("");
3628
setError("");
3729
onClose();
3830
}, [onClose]);
3931

40-
const handleWebPickerPathSelected = useCallback((selected: string) => {
41-
setPath(selected);
42-
setError("");
43-
}, []);
44-
45-
const handleBrowse = useCallback(async () => {
46-
try {
47-
const selectedPath = await window.api.projects.pickDirectory();
48-
if (selectedPath) {
49-
setPath(selectedPath);
50-
setError("");
51-
}
52-
} catch (err) {
53-
console.error("Failed to pick directory:", err);
54-
}
55-
}, []);
56-
5732
const handleSelect = useCallback(async () => {
5833
const trimmedPath = path.trim();
5934
if (!trimmedPath) {
@@ -103,14 +78,6 @@ export const ProjectCreateModal: React.FC<ProjectCreateModalProps> = ({
10378
}
10479
}, [path, onSuccess, onClose]);
10580

106-
const handleBrowseClick = useCallback(() => {
107-
if (isDesktop) {
108-
void handleBrowse();
109-
} else if (hasWebFsPicker) {
110-
setIsDirPickerOpen(true);
111-
}
112-
}, [handleBrowse, hasWebFsPicker, isDesktop]);
113-
11481
const handleKeyDown = useCallback(
11582
(e: React.KeyboardEvent) => {
11683
if (e.key === "Enter") {
@@ -122,55 +89,35 @@ export const ProjectCreateModal: React.FC<ProjectCreateModalProps> = ({
12289
);
12390

12491
return (
125-
<>
126-
<Modal
127-
isOpen={isOpen}
128-
title="Add Project"
129-
subtitle="Enter the path to your project directory"
130-
onClose={handleCancel}
131-
isLoading={isCreating}
132-
>
133-
<div className="mb-5 flex gap-2">
134-
<input
135-
type="text"
136-
value={path}
137-
onChange={(e) => {
138-
setPath(e.target.value);
139-
setError("");
140-
}}
141-
onKeyDown={handleKeyDown}
142-
placeholder="/home/user/projects/my-project"
143-
autoFocus
144-
disabled={isCreating}
145-
className="bg-modal-bg border-border-medium focus:border-accent placeholder:text-muted w-full flex-1 rounded border px-3 py-2 font-mono text-sm text-foreground focus:outline-none disabled:opacity-50"
146-
/>
147-
{(isDesktop || hasWebFsPicker) && (
148-
<button
149-
type="button"
150-
onClick={handleBrowseClick}
151-
disabled={isCreating}
152-
className="bg-border-medium hover:bg-border-darker border-border-medium rounded border px-4 text-sm font-medium text-foreground transition-colors disabled:opacity-50"
153-
>
154-
Browse...
155-
</button>
156-
)}
157-
</div>
158-
{error && <div className="text-error -mt-3 mb-3 text-xs">{error}</div>}
159-
<ModalActions>
160-
<CancelButton onClick={handleCancel} disabled={isCreating}>
161-
Cancel
162-
</CancelButton>
163-
<PrimaryButton onClick={() => void handleSelect()} disabled={isCreating}>
164-
{isCreating ? "Adding..." : "Add Project"}
165-
</PrimaryButton>
166-
</ModalActions>
167-
</Modal>
168-
<DirectoryPickerModal
169-
isOpen={isDirPickerOpen}
170-
initialPath={path || "."}
171-
onClose={() => setIsDirPickerOpen(false)}
172-
onSelectPath={handleWebPickerPathSelected}
92+
<Modal
93+
isOpen={isOpen}
94+
title="Add Project"
95+
subtitle="Enter the path to your project directory"
96+
onClose={handleCancel}
97+
isLoading={isCreating}
98+
>
99+
<input
100+
type="text"
101+
value={path}
102+
onChange={(e) => {
103+
setPath(e.target.value);
104+
setError("");
105+
}}
106+
onKeyDown={handleKeyDown}
107+
placeholder="/home/user/projects/my-project"
108+
autoFocus
109+
disabled={isCreating}
110+
className="bg-modal-bg border-border-medium focus:border-accent placeholder:text-muted text-foreground mb-5 w-full rounded border px-3 py-2 font-mono text-sm focus:outline-none disabled:opacity-50"
173111
/>
174-
</>
112+
{error && <div className="text-error -mt-3 mb-3 text-xs">{error}</div>}
113+
<ModalActions>
114+
<CancelButton onClick={handleCancel} disabled={isCreating}>
115+
Cancel
116+
</CancelButton>
117+
<PrimaryButton onClick={() => void handleSelect()} disabled={isCreating}>
118+
{isCreating ? "Adding..." : "Add Project"}
119+
</PrimaryButton>
120+
</ModalActions>
121+
</Modal>
175122
);
176123
};

‎src/browser/components/ThemeToggleButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export function ThemeToggleButton() {
1212
<button
1313
type="button"
1414
onClick={toggleTheme}
15-
className="border-border-light text-muted-foreground hover:border-border-medium/80 hover:bg-toggle-bg/70 focus-visible:ring-1 focus-visible:ring-border-medium flex h-7 w-7 items-center justify-center rounded-md border bg-transparent transition-colors duration-150"
15+
className="border-border-light text-muted-foreground hover:border-border-medium/80 hover:bg-toggle-bg/70 focus-visible:ring-border-medium flex h-7 w-7 items-center justify-center rounded-md border bg-transparent transition-colors duration-150 focus-visible:ring-1"
1616
aria-label={label}
1717
data-testid="theme-toggle"
1818
>

0 commit comments

Comments
 (0)