buzzert/Sybil-2
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

color scheme changes

Browse Source
This commit is contained in:
James Magahern
2026-02-14 20:34:10 -08:00
parent 7b6b42f885
commit ec7b33e6ec
5 changed files with 38 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/App.tsx
View File

@@ -609,7 +609,7 @@ export default function App() {
return (
<div className="h-full">
<div className="flex h-full w-full overflow-hidden bg-background">
<aside className="flex w-80 shrink-0 flex-col border-r bg-[#111827]">
<aside className="flex w-80 shrink-0 flex-col border-r bg-[hsl(272_34%_14%)]">
<div className="grid grid-cols-2 gap-2 p-3">
<Button className="justify-start gap-2" onClick={handleCreateChat}>
<Plus className="h-4 w-4" />
@@ -636,7 +636,7 @@ export default function App() {
key={`${item.kind}-${item.id}`}
className={cn(
"mb-1 w-full rounded-lg px-3 py-2 text-left transition",
active ? "bg-slate-700 text-slate-50" : "text-slate-200 hover:bg-slate-800"
active ? "bg-violet-500/30 text-violet-100" : "text-violet-200/85 hover:bg-violet-500/15"
)}
onClick={() => {
setContextMenu(null);
@@ -650,7 +650,7 @@ export default function App() {
{item.kind === "chat" ? <MessageSquare className="h-3.5 w-3.5" /> : <Search className="h-3.5 w-3.5" />}
<p className="truncate text-sm font-medium">{item.title}</p>
</div>
<p className={cn("mt-1 text-xs", active ? "text-slate-200" : "text-slate-400")}>{formatDate(item.updatedAt)}</p>
<p className={cn("mt-1 text-xs", active ? "text-violet-100/90" : "text-violet-300/60")}>{formatDate(item.updatedAt)}</p>
</button>
);
})}

6
web/src/components/auth/auth-screen.tsx
View File

@@ -12,10 +12,10 @@ type Props = {
export function AuthScreen({ authTokenInput, setAuthTokenInput, isSigningIn, authError, onSignIn }: Props) {
return (
<div className="flex h-full items-center justify-center bg-[radial-gradient(circle_at_top,#171f33_0%,#111827_45%,#0b1020_100%)] p-4">
<div className="w-full max-w-md rounded-2xl border bg-[#0f172a] p-6 shadow-xl shadow-black/40">
<div className="flex h-full items-center justify-center bg-[radial-gradient(circle_at_top,#45215f_0%,#2a183d_45%,#191227_100%)] p-4">
<div className="w-full max-w-md rounded-2xl border bg-[hsl(276_32%_14%)] p-6 shadow-xl shadow-violet-950/45">
<div className="mb-5 flex items-start gap-3">
<div className="rounded-lg bg-slate-200 p-2 text-slate-900">
<div className="rounded-lg bg-violet-200 p-2 text-violet-900">
<ShieldCheck className="h-4 w-4" />
</div>
<div>

2
web/src/components/chat/chat-messages-panel.tsx
View File

@@ -26,7 +26,7 @@ export function ChatMessagesPanel({ messages, isLoading, isSending }: Props) {
<div
className={cn(
"max-w-[85%] whitespace-pre-wrap rounded-2xl px-4 py-3 text-sm leading-6",
isUser ? "bg-slate-200 text-slate-900" : "bg-slate-800 text-slate-100"
isUser ? "bg-fuchsia-200 text-fuchsia-950" : "bg-violet-900/80 text-fuchsia-50"
)}
>
{isPendingAssistant ? "Thinking..." : message.content}

22
web/src/components/search/search-results-panel.tsx
View File

@@ -92,8 +92,8 @@ export function SearchResultsPanel({ search, isLoading, isRunning, showPrompt =
) : null}
{(isRunning || !!search?.answerText || !!search?.answerError) && (
<section className="mb-6 rounded-xl border border-slate-600/60 bg-[#121a2e] p-4">
<p className="text-xs font-semibold uppercase tracking-wide text-sky-300/90">Answer</p>
<section className="mb-6 rounded-xl border border-violet-400/35 bg-[hsl(276_31%_15%)] p-4">
<p className="text-xs font-semibold uppercase tracking-wide text-violet-300/90">Answer</p>
{(isAnswerLoading || hasAnswerText) ? (
<div className="mt-2">
<div className="relative">
@@ -111,19 +111,19 @@ export function SearchResultsPanel({ search, isLoading, isRunning, showPrompt =
markdown={search?.answerText ?? ""}
mode="citationTokens"
resolveCitationIndex={resolveCitationIndex}
className="text-sm leading-6 text-slate-100"
className="text-sm leading-6 text-violet-50"
/>
)}
</div>
{!isAnswerExpanded && (isExpandable || isAnswerLoading) ? (
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-7 bg-gradient-to-t from-[#121a2e] to-transparent" />
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-7 bg-gradient-to-t from-[hsl(276_31%_15%)] to-transparent" />
) : null}
</div>
<div className="mt-2 h-5">
{isExpandable ? (
<button
type="button"
className="inline-flex items-center gap-1 text-xs font-medium text-sky-200 hover:text-sky-100"
className="inline-flex items-center gap-1 text-xs font-medium text-violet-200 hover:text-violet-100"
onClick={() => setIsAnswerExpanded((current) => !current)}
>
<span className={cn("inline-block text-[11px] transition-transform", isAnswerExpanded && "rotate-180")}>▾</span>
@@ -143,9 +143,9 @@ export function SearchResultsPanel({ search, isLoading, isRunning, showPrompt =
href={citation.href}
target="_blank"
rel="noreferrer"
className="rounded-md border border-slate-500/60 px-2 py-1 text-xs text-sky-200 hover:bg-slate-700/40"
className="rounded-md border border-violet-400/40 px-2 py-1 text-xs text-violet-200 hover:bg-violet-500/20"
>
<span className="mr-1 rounded bg-slate-700/80 px-1 py-0.5 text-[10px] text-slate-100">{citation.index}</span>
<span className="mr-1 rounded bg-violet-900/70 px-1 py-0.5 text-[10px] text-violet-100">{citation.index}</span>
{citation.label}
</a>
);
@@ -174,15 +174,15 @@ export function SearchResultsPanel({ search, isLoading, isRunning, showPrompt =
<div className="space-y-6">
{search?.results.map((result) => {
return (
<article key={result.id} className="rounded-lg border border-border bg-[#0d1322] px-4 py-4 shadow-sm">
<p className="text-xs text-emerald-300/85">{formatHost(result.url)}</p>
<a href={result.url} target="_blank" rel="noreferrer" className="mt-1 block text-lg font-medium text-sky-300 hover:underline">
<article key={result.id} className="rounded-lg border border-border bg-[hsl(276_30%_13%)] px-4 py-4 shadow-sm">
<p className="text-xs text-violet-300/85">{formatHost(result.url)}</p>
<a href={result.url} target="_blank" rel="noreferrer" className="mt-1 block text-lg font-medium text-violet-300 hover:underline">
{result.title || result.url}
</a>
{(result.publishedDate || result.author) && (
<p className="mt-1 text-xs text-muted-foreground">{[result.publishedDate, result.author].filter(Boolean).join(" • ")}</p>
)}
{result.url ? <p className="mt-2 text-sm leading-6 text-slate-200">{result.url}</p> : null}
{result.url ? <p className="mt-2 text-sm leading-6 text-violet-100/90">{result.url}</p> : null}
</article>
);
})}

40
web/src/index.css
View File

@@ -3,19 +3,19 @@
@tailwind utilities;
:root {
--background: 224 20% 10%;
--foreground: 210 40% 96%;
--muted: 223 18% 16%;
--muted-foreground: 217 15% 65%;
--border: 223 16% 22%;
--input: 223 16% 22%;
--ring: 215 85% 63%;
--primary: 210 40% 98%;
--primary-foreground: 224 24% 11%;
--secondary: 223 18% 18%;
--secondary-foreground: 210 40% 98%;
--accent: 223 18% 20%;
--accent-foreground: 210 40% 98%;
--background: 282 33% 10%;
--foreground: 300 35% 95%;
--muted: 287 24% 16%;
--muted-foreground: 297 16% 72%;
--border: 287 24% 24%;
--input: 287 24% 24%;
--ring: 264 76% 70%;
--primary: 266 72% 67%;
--primary-foreground: 296 45% 12%;
--secondary: 277 24% 19%;
--secondary-foreground: 302 42% 94%;
--accent: 279 24% 22%;
--accent-foreground: 305 45% 94%;
--radius: 0.65rem;
}
@@ -31,7 +31,7 @@ body,
body {
@apply bg-background text-foreground antialiased;
background-image: radial-gradient(circle at top, hsl(222 30% 18%) 0%, hsl(224 21% 11%) 45%, hsl(224 20% 9%) 100%);
background-image: radial-gradient(circle at top, hsl(274 42% 20%) 0%, hsl(271 34% 14%) 42%, hsl(266 32% 9%) 100%);
font-family: "Soehne", "Avenir Next", "Segoe UI", sans-serif;
}
@@ -54,7 +54,7 @@ body {
}
.md-content code {
background: hsl(223 18% 22%);
background: hsl(288 22% 23%);
border-radius: 0.25rem;
padding: 0.05rem 0.3rem;
font-size: 0.86em;
@@ -63,12 +63,12 @@ body {
.md-content pre {
overflow-x: auto;
border-radius: 0.5rem;
background: hsl(223 18% 12%);
background: hsl(287 28% 13%);
padding: 0.6rem 0.75rem;
}
.md-content a {
color: hsl(198 95% 72%);
color: hsl(269 88% 76%);
text-decoration: underline;
}
@@ -76,9 +76,9 @@ body {
display: inline-flex;
align-items: center;
border-radius: 9999px;
border: 1px solid hsl(217 24% 54%);
background: hsl(223 23% 21%);
color: hsl(210 40% 96%);
border: 1px solid hsl(274 40% 55%);
background: hsl(277 33% 21%);
color: hsl(304 42% 96%);
font-size: 0.72rem;
line-height: 1;
padding: 0.12rem 0.38rem;