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) {
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>
</div>
);
@@ -338,10 +338,10 @@ export default function App() {
if (!isAuthenticated) {
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="w-full max-w-md rounded-2xl border bg-background p-6 shadow-xl">
<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="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" />
</div>
<div>
@@ -388,8 +388,8 @@ export default function App() {
return (
<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">
<aside className="flex w-80 shrink-0 flex-col border-r bg-slate-50">
<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-[#111827]">
<div className="p-3">
<Button className="w-full justify-start gap-2" onClick={handleCreateChat}>
<Plus className="h-4 w-4" />
@@ -412,13 +412,13 @@ export default function App() {
key={chat.id}
className={cn(
"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)}
type="button"
>
<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>
);
})}
@@ -478,7 +478,7 @@ export default function App() {
<div
className={cn(
"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}

29
web/src/index.css
View File

@@ -3,19 +3,19 @@
@tailwind utilities;
:root {
--background: 0 0% 100%;
--foreground: 222 47% 11%;
--muted: 210 40% 96.1%;
--muted-foreground: 215 16% 47%;
--border: 214 32% 91%;
--input: 214 32% 91%;
--ring: 221 83% 53%;
--primary: 222 84% 5%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222 47% 11%;
--accent: 210 40% 96.1%;
--accent-foreground: 222 47% 11%;
--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%;
--radius: 0.65rem;
}
@@ -30,6 +30,7 @@ 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;
}