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

web: dark style

Browse Source
This commit is contained in:
James Magahern
2026-02-13 23:20:57 -08:00
parent 16a668b6ee
commit 83d55df73f
2 changed files with 24 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/App.tsx
View File

@@ -330,7 +330,7 @@ export default function App() {
if (isCheckingSession) { if (isCheckingSession) {
return ( return (
<div className="flex h-full items-center justify-center bg-muted/70"> <div className="flex h-full items-center justify-center">
<p className="text-sm text-muted-foreground">Checking session...</p> <p className="text-sm text-muted-foreground">Checking session...</p>
</div> </div>
); );
@@ -338,10 +338,10 @@ export default function App() {
if (!isAuthenticated) { if (!isAuthenticated) {
return ( return (
<div className="flex h-full items-center justify-center bg-[radial-gradient(circle_at_top,#f8fafc_0%,#eef2f7_45%,#e2e8f0_100%)] p-4"> <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-background p-6 shadow-xl"> <div className="w-full max-w-md rounded-2xl border bg-[#0f172a] p-6 shadow-xl shadow-black/40">
<div className="mb-5 flex items-start gap-3"> <div className="mb-5 flex items-start gap-3">
<div className="rounded-lg bg-slate-900 p-2 text-slate-50"> <div className="rounded-lg bg-slate-200 p-2 text-slate-900">
<ShieldCheck className="h-4 w-4" /> <ShieldCheck className="h-4 w-4" />
</div> </div>
<div> <div>
@@ -388,8 +388,8 @@ export default function App() {
return ( return (
<div className="h-full p-3 md:p-5"> <div className="h-full p-3 md:p-5">
<div className="mx-auto flex h-full w-full max-w-[1560px] overflow-hidden rounded-2xl border bg-background shadow-xl"> <div className="mx-auto flex h-full w-full max-w-[1560px] overflow-hidden rounded-2xl border bg-background shadow-xl shadow-black/40">
<aside className="flex w-80 shrink-0 flex-col border-r bg-slate-50"> <aside className="flex w-80 shrink-0 flex-col border-r bg-[#111827]">
<div className="p-3"> <div className="p-3">
<Button className="w-full justify-start gap-2" onClick={handleCreateChat}> <Button className="w-full justify-start gap-2" onClick={handleCreateChat}>
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
@@ -412,13 +412,13 @@ export default function App() {
key={chat.id} key={chat.id}
className={cn( className={cn(
"mb-1 w-full rounded-lg px-3 py-2 text-left transition", "mb-1 w-full rounded-lg px-3 py-2 text-left transition",
active ? "bg-slate-900 text-slate-50" : "hover:bg-slate-200" active ? "bg-slate-700 text-slate-50" : "text-slate-200 hover:bg-slate-800"
)} )}
onClick={() => setSelectedChatId(chat.id)} onClick={() => setSelectedChatId(chat.id)}
type="button" type="button"
> >
<p className="truncate text-sm font-medium">{getChatTitle(chat)}</p> <p className="truncate text-sm font-medium">{getChatTitle(chat)}</p>
<p className={cn("mt-1 text-xs", active ? "text-slate-300" : "text-slate-500")}>{formatDate(chat.updatedAt)}</p> <p className={cn("mt-1 text-xs", active ? "text-slate-200" : "text-slate-400")}>{formatDate(chat.updatedAt)}</p>
</button> </button>
); );
})} })}
@@ -478,7 +478,7 @@ export default function App() {
<div <div
className={cn( className={cn(
"max-w-[85%] whitespace-pre-wrap rounded-2xl px-4 py-3 text-sm leading-6", "max-w-[85%] whitespace-pre-wrap rounded-2xl px-4 py-3 text-sm leading-6",
isUser ? "bg-slate-900 text-slate-50" : "bg-slate-100 text-slate-900" isUser ? "bg-slate-200 text-slate-900" : "bg-slate-800 text-slate-100"
)} )}
> >
{isPendingAssistant ? "Thinking..." : message.content} {isPendingAssistant ? "Thinking..." : message.content}

29
web/src/index.css
View File

@@ -3,19 +3,19 @@
@tailwind utilities; @tailwind utilities;
:root { :root {
--background: 0 0% 100%; --background: 224 20% 10%;
--foreground: 222 47% 11%; --foreground: 210 40% 96%;
--muted: 210 40% 96.1%; --muted: 223 18% 16%;
--muted-foreground: 215 16% 47%; --muted-foreground: 217 15% 65%;
--border: 214 32% 91%; --border: 223 16% 22%;
--input: 214 32% 91%; --input: 223 16% 22%;
--ring: 221 83% 53%; --ring: 215 85% 63%;
--primary: 222 84% 5%; --primary: 210 40% 98%;
--primary-foreground: 210 40% 98%; --primary-foreground: 224 24% 11%;
--secondary: 210 40% 96.1%; --secondary: 223 18% 18%;
--secondary-foreground: 222 47% 11%; --secondary-foreground: 210 40% 98%;
--accent: 210 40% 96.1%; --accent: 223 18% 20%;
--accent-foreground: 222 47% 11%; --accent-foreground: 210 40% 98%;
--radius: 0.65rem; --radius: 0.65rem;
} }
@@ -30,6 +30,7 @@ body,
} }
body { body {
@apply bg-muted/70 text-foreground antialiased; @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%);
font-family: "Soehne", "Avenir Next", "Segoe UI", sans-serif; font-family: "Soehne", "Avenir Next", "Segoe UI", sans-serif;
} }