From 067115ba135d6de26789c1bb4a9b692eca6cf005 Mon Sep 17 00:00:00 2001 From: asepharyana Date: Sat, 22 Aug 2026 15:12:00 +0700 Subject: [PATCH] style(web): refine aesthetic to archival precision, remove generic gradients and glowing blobs --- apps/web/app/[section]/[...slug]/page.tsx | 162 +++++----- apps/web/app/[section]/page.tsx | 86 +++--- apps/web/app/components/CommandMenu.tsx | 85 +++--- apps/web/app/components/DocActions.tsx | 19 +- apps/web/app/components/DocForm.tsx | 90 ++---- apps/web/app/components/Header.tsx | 65 ++-- .../app/components/InteractiveTopology.tsx | 153 +++++----- apps/web/app/components/McpConfigSnippet.tsx | 38 ++- apps/web/app/components/PdfExportView.tsx | 48 ++- apps/web/app/components/Sidebar.tsx | 35 ++- apps/web/app/globals.css | 283 ++++++++---------- apps/web/app/layout.tsx | 36 ++- apps/web/app/login/page.tsx | 45 ++- apps/web/app/page.tsx | 113 ++++--- apps/web/app/search/page.tsx | 91 +++--- 15 files changed, 604 insertions(+), 745 deletions(-) diff --git a/apps/web/app/[section]/[...slug]/page.tsx b/apps/web/app/[section]/[...slug]/page.tsx index d05cb98..bff6c35 100644 --- a/apps/web/app/[section]/[...slug]/page.tsx +++ b/apps/web/app/[section]/[...slug]/page.tsx @@ -15,19 +15,16 @@ import { Folder, FileText, Clock, - User, - Tag, History, FileDown, ArrowLeft, - BookOpen, Sparkles, - ShieldCheck, CheckCircle2, XCircle, Target, Trophy, Zap, + Tag, } from "lucide-react"; export const dynamic = "force-dynamic"; @@ -63,7 +60,7 @@ function CustomFieldBadges({ if (customEntries.length === 0) return null; return ( -
+
{customEntries.map(([key, value]) => { const label = key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, " "); let colorClass = "bg-[var(--bg-elevated)] border-[var(--border-color)] text-[var(--text-secondary)]"; @@ -71,36 +68,36 @@ function CustomFieldBadges({ let IconComponent = Tag; if (typeof value === "number") { - colorClass = "bg-[var(--brand)]/10 border-[var(--brand)]/30 text-[var(--brand)] dark:text-[var(--accent)]"; + colorClass = "bg-[var(--bg-elevated)] border-[var(--border-color)] text-[var(--text-primary)] font-semibold"; IconComponent = Target; displayValue = `${value} pts`; } else if (typeof value === "boolean") { colorClass = value - ? "bg-emerald-500/10 border-emerald-500/30 text-emerald-600 dark:text-emerald-400" - : "bg-rose-500/10 border-rose-500/30 text-rose-600 dark:text-rose-400"; + ? "bg-emerald-500/10 border-emerald-500/30 text-emerald-600 dark:text-emerald-400 font-semibold" + : "bg-rose-500/10 border-rose-500/30 text-rose-600 dark:text-rose-400 font-semibold"; IconComponent = value ? CheckCircle2 : XCircle; displayValue = value ? "Solved" : "Pending"; } else if (Array.isArray(value)) { - colorClass = "bg-[var(--brand)]/10 border-[var(--brand)]/30 text-[var(--brand)] dark:text-[var(--accent)]"; + colorClass = "bg-[var(--bg-elevated)] border-[var(--border-color)] text-[var(--text-secondary)]"; IconComponent = Folder; displayValue = value.join(", "); } else { const v = String(value).toLowerCase(); if (/^(easy|simple|beginner)/i.test(v)) { - colorClass = "bg-emerald-500/10 border-emerald-500/30 text-emerald-600 dark:text-emerald-400"; + colorClass = "bg-emerald-500/10 border-emerald-500/30 text-emerald-600 dark:text-emerald-400 font-semibold"; displayValue = "Easy"; } else if (/^(medium|intermediate)/i.test(v)) { - colorClass = "bg-amber-500/10 border-amber-500/30 text-amber-600 dark:text-amber-400"; + colorClass = "bg-amber-500/10 border-amber-500/30 text-amber-600 dark:text-amber-400 font-semibold"; displayValue = "Medium"; } else if (/^(hard|expert|advanced)/i.test(v)) { - colorClass = "bg-rose-500/10 border-rose-500/30 text-rose-600 dark:text-rose-400"; + colorClass = "bg-rose-500/10 border-rose-500/30 text-rose-600 dark:text-rose-400 font-semibold"; displayValue = "Hard"; } else if (/^(pwn|web|crypto|misc|forensic|reverse|binary)/i.test(v)) { - colorClass = "bg-indigo-500/10 border-indigo-500/30 text-indigo-600 dark:text-indigo-300"; + colorClass = "bg-[var(--bg-elevated)] border-[var(--border-color)] text-[var(--text-primary)] font-bold"; IconComponent = Zap; displayValue = v.toUpperCase(); } else if (/ctf|def.?con|event/i.test(v)) { - colorClass = "bg-[var(--brand)]/10 border-[var(--brand)]/30 text-[var(--brand)] dark:text-[var(--accent)]"; + colorClass = "bg-[var(--bg-elevated)] border-[var(--border-color)] text-[var(--text-primary)]"; IconComponent = Trophy; displayValue = String(value); } else { @@ -111,11 +108,11 @@ function CustomFieldBadges({ return ( {label}: - {displayValue} + {displayValue} ); })} @@ -187,33 +184,33 @@ function FolderIndexPage({ {/* Header Card */} -
+
-
- +
+
-

+

{folderName}

-

- Directory: {section}/{slug} +

+ Directory: {section}/{slug}

- + {immediateDocs.length + folders.length} item{folders.length + immediateDocs.length !== 1 ? "s" : ""} - Export PDF Report + Export PDF
@@ -222,8 +219,8 @@ function FolderIndexPage({ {/* Subfolders Grid */} {folders.length > 0 && (
-

- +

+ Subfolders ({folders.length})

@@ -231,16 +228,14 @@ function FolderIndexPage({ -
- -
+
-
+
{folder.split(/[-_]/).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ")}
-
+
{info.docCount} document{info.docCount !== 1 ? "s" : ""}
@@ -253,31 +248,29 @@ function FolderIndexPage({ {/* Documents List */} {immediateDocs.length > 0 && (
-

- +

+ Documents ({immediateDocs.length})

-
+
{immediateDocs.map((doc) => ( -
-
- -
+
+
-
+
{doc.title}
{doc.tags.length > 0 && ( -
+
{doc.tags.slice(0, 4).map((t) => ( #{t} @@ -303,8 +296,8 @@ function FolderIndexPage({ )} {folders.length === 0 && immediateDocs.length === 0 && ( -
-

No documents found in this directory.

+
+

No documents in this directory.

)}
@@ -316,7 +309,7 @@ export default async function DocPage({ params, searchParams }: DocPageProps) { const searchParamsObj = await searchParams; const { edit, path: queryPath, sort } = searchParamsObj; - // Handle direct export views: /[section]/export, /[section]/[...folder]/export, or /export/pdf + // Handle direct export views if (section === "export" || (slug && slug[slug.length - 1] === "export")) { const isTrailingExport = slug && slug[slug.length - 1] === "export"; const targetSlug = isTrailingExport ? slug.slice(0, -1) : slug; @@ -363,7 +356,7 @@ export default async function DocPage({ params, searchParams }: DocPageProps) { Back to document -

+

Edit: {doc.title}

{/* Breadcrumbs Navigation */} -