fix: improve message contrast in session views

This commit is contained in:
OmarMcAdam
2026-01-20 18:13:42 -07:00
parent 1d55ed8215
commit 3656b7f391
2 changed files with 12 additions and 12 deletions

View File

@@ -60,7 +60,7 @@ export default function PartView(props: Props) {
const textClass = () => (tone() === "dark" ? "text-gray-12" : "text-gray-12");
const subtleTextClass = () => (tone() === "dark" ? "text-gray-12/70" : "text-gray-11");
const panelBgClass = () => (tone() === "dark" ? "bg-gray-1/10" : "bg-gray-1/30");
const panelBgClass = () => (tone() === "dark" ? "bg-gray-2/10" : "bg-gray-2/30");
const toolOnly = () => developerMode();
const showToolOutput = () => developerMode();
@@ -83,7 +83,7 @@ export default function PartView(props: Props) {
<summary class={`cursor-pointer text-xs ${subtleTextClass()}`.trim()}>Thinking</summary>
<pre
class={`mt-2 whitespace-pre-wrap break-words text-xs ${
tone() === "dark" ? "text-gray-12" : "text-gray-12"
tone() === "dark" ? "text-gray-1" : "text-gray-12"
}`.trim()}
>
{clampText(String((p() as any).text), 2000)}
@@ -97,19 +97,19 @@ export default function PartView(props: Props) {
<div class="grid gap-2">
<div class="flex items-center justify-between gap-3">
<div
class={`text-xs font-medium ${tone() === "dark" ? "text-gray-12" : "text-gray-12"}`.trim()}
class={`text-xs font-medium ${tone() === "dark" ? "text-gray-1" : "text-gray-12"}`.trim()}
>
Tool · {String((p() as any).tool)}
</div>
<div
class={`rounded-full px-2 py-0.5 text-[11px] font-medium ${
(p() as any).state?.status === "completed"
? "bg-green-7/15 text-green-12"
? "bg-green-3/15 text-green-12"
: (p() as any).state?.status === "running"
? "bg-blue-7/15 text-blue-12"
? "bg-blue-3/15 text-blue-12"
: (p() as any).state?.status === "error"
? "bg-red-7/15 text-red-12"
: "bg-gray-12/10 text-gray-12"
? "bg-red-3/15 text-red-12"
: "bg-gray-2/10 text-gray-1"
}`}
>
{String((p() as any).state?.status ?? "unknown")}
@@ -123,7 +123,7 @@ export default function PartView(props: Props) {
<Show when={showToolOutput() && (p() as any).state?.output && typeof (p() as any).state.output === "string"}>
<pre
class={`whitespace-pre-wrap break-words rounded-lg ${panelBgClass()} p-2 text-xs ${
tone() === "dark" ? "text-gray-12" : "text-gray-12"
tone() === "dark" ? "text-gray-12" : "text-gray-1"
}`.trim()}
>
{clampText(String((p() as any).state.output))}
@@ -141,7 +141,7 @@ export default function PartView(props: Props) {
<summary class={`cursor-pointer text-xs ${subtleTextClass()}`.trim()}>Input</summary>
<pre
class={`mt-2 whitespace-pre-wrap break-words text-xs ${
tone() === "dark" ? "text-gray-12" : "text-gray-12"
tone() === "dark" ? "text-gray-12" : "text-gray-1"
}`.trim()}
>
{safeStringify((p() as any).state.input)}
@@ -167,7 +167,7 @@ export default function PartView(props: Props) {
<Show when={developerMode()}>
<pre
class={`whitespace-pre-wrap break-words text-xs ${
tone() === "dark" ? "text-gray-12" : "text-gray-12"
tone() === "dark" ? "text-gray-12" : "text-gray-1"
}`.trim()}
>
{safeStringify(p())}

View File

@@ -298,7 +298,7 @@ export default function SessionView(props: SessionViewProps) {
<aside class="hidden lg:flex w-72 border-r border-gray-6 bg-gray-1 flex-col">
<div class="px-4 pt-4">
<button
class="w-full flex items-center gap-2 px-3 py-2 rounded-xl bg-gray-12 text-gray-12 text-sm font-medium shadow-lg shadow-gray-12/10"
class="w-full flex items-center gap-2 px-3 py-2 rounded-xl bg-gray-12 text-gray-1 text-sm font-medium shadow-lg shadow-gray-12/10"
onClick={props.createSessionAndOpen}
disabled={props.newTaskDisabled}
>
@@ -381,7 +381,7 @@ export default function SessionView(props: SessionViewProps) {
<div
class={`w-full ${
isUser()
? "max-w-[520px] rounded-2xl bg-gray-12 text-gray-12 shadow-xl shadow-gray-12/5 p-4 text-sm leading-relaxed"
? "max-w-[520px] rounded-2xl bg-gray-4 text-gray-12 shadow-sm border-gray-5 border-1 shadow-gray-12/5 p-4 text-sm leading-relaxed rounded-br-none"
: "max-w-[68ch] text-[15px] leading-7 text-gray-12"
}`}
>