color scheme changes
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
})}
|
||||
|
||||
Reference in New Issue
Block a user