remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Convert admin pages to new Tailwind design pattern

Browse Source 
- Replace 'card' class with 'admin-card' (gradient cards, dark mode support)
- Replace 'muted' class with consistent Tailwind muted states
- Standardize page headers with gradient backgrounds and Lucide icons
- Convert all inline styles to Tailwind classes
- Add admin-page CSS helpers (admin-card, admin-filter-bar, admin-section-title)
- Apply pattern to all 42 admin pages (was only 6 before)
- Zero TypeScript errors, production builds successfully

Co-authored-by: openhands <[email protected]>
This commit is contained in:
openhands committed 2026-07-02 16:05:35 +02:00
1 parent b621ec79a3
commit 928544100b
46 files changed
+790 -635
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/admin/articles/[id]/page.tsx
+11 -5
View File
@@ -1,4 +1,5 @@
import Link from "next/link";
import { Newspaper } from "lucide-react";
import { notFound } from "next/navigation";
import { deleteArticle, updateArticle } from "@/actions/admin-articles";
import { ArticleForm } from "@/components/admin/article-form";
@@ -23,12 +24,17 @@ export default async function EditArticle({
return (
<main>
<p className="muted">
<Link href="/admin/articles">← Articles</Link>
</p>
<h1>Edit article</h1>
<div className="flex items-center gap-3 mb-6">
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
<Newspaper size={20} className="text-[var(--color-primary)]" />
</div>
<div>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Edit article</h1>
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5"><Link href="/admin/articles">← Articles</Link></p>
</div>
</div>
{error ? (
<p className="muted" style={{ marginBottom: "1rem", color: "#dc2626" }}>
<p className="text-xs text-red-600 dark:text-red-400 mb-4">
Error: {error}
</p>
) : null}
src/app/admin/articles/new/page.tsx
+11 -5
View File
@@ -1,4 +1,5 @@
import Link from "next/link";
import { Newspaper } from "lucide-react";
import { createArticle } from "@/actions/admin-articles";
import { ArticleForm } from "@/components/admin/article-form";
@@ -11,12 +12,17 @@ export default async function NewArticle({
return (
<main>
<p className="muted">
<Link href="/admin/articles">← Articles</Link>
</p>
<h1>New article</h1>
<div className="flex items-center gap-3 mb-6">
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
<Newspaper size={20} className="text-[var(--color-primary)]" />
</div>
<div>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">New article</h1>
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5"><Link href="/admin/articles">← Articles</Link></p>
</div>
</div>
{error ? (
<p className="muted" style={{ marginBottom: "1rem", color: "#dc2626" }}>
<p className="text-xs text-red-600 dark:text-red-400 mb-4">
Error: {error}
</p>
) : null}
src/app/admin/articles/page.tsx
+18 -15
View File
@@ -1,4 +1,5 @@
import Link from "next/link";
import { Newspaper } from "lucide-react";
import { StatusCard } from "@/components/admin/dashboard";
import { deleteArticle } from "@/actions/admin-articles";
import { prisma } from "@/lib/prisma";
@@ -25,18 +26,21 @@ export default async function AdminArticles({
return (
<main>
<div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
<h1 style={{ flex: 1 }}>Articles</h1>
<div className="flex items-center gap-3 mb-6">
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
<Newspaper size={20} className="text-[var(--color-primary)]" />
</div>
<div className="flex-1">
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Articles</h1>
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">News articles (<code>website_articles</code>) shown on the public site. 50 most recent.</p>
</div>
<Link href="/admin/articles/new" className="btn btn-primary">
+ New article
</Link>
</div>
<p className="muted" style={{ marginTop: "-0.4rem" }}>
News articles (<code>website_articles</code>) shown on the public site. 50 most recent.
</p>
{error ? (
<p className="muted" style={{ marginBottom: "1rem", color: "#dc2626" }}>
<p className="text-xs text-red-600 dark:text-red-400 mb-4">
Error: {error}
</p>
) : null}
@@ -47,9 +51,9 @@ export default async function AdminArticles({
</div>
<section className="mt-6">
<h2>Recent articles</h2>
<h2 className="admin-section-title">Recent articles</h2>
{articles.length === 0 ? (
<p className="muted">No articles yet.</p>
<div className="admin-empty">No articles yet.</div>
) : (
<table>
<thead>
@@ -64,27 +68,26 @@ export default async function AdminArticles({
{articles.map((a) => (
<tr key={String(a.id)}>
<td>
<Link href={`/admin/articles/${a.id}`} style={{ color: "var(--link-color)" }}>
<Link href={`/admin/articles/${a.id}`}>
{a.title}
</Link>
</td>
<td className="muted">
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<code>{a.slug}</code>
</td>
<td className="muted" style={{ whiteSpace: "nowrap" }}>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
{a.createdAt ? a.createdAt.toISOString().slice(0, 10) : "—"}
</td>
<td>
<div style={{ display: "flex", gap: "0.5rem" }}>
<Link href={`/admin/articles/${a.id}`} className="btn btn-primary" style={{ fontSize: "0.8rem", padding: "0.3rem 0.6rem" }}>
<div className="flex gap-2">
<Link href={`/admin/articles/${a.id}`} className="btn btn-primary">
Edit
</Link>
<form action={deleteArticle} style={{ margin: 0 }}>
<form action={deleteArticle} className="m-0">
<input type="hidden" name="id" value={String(a.id)} />
<button
type="submit"
className="btn btn-danger"
style={{ fontSize: "0.8rem", padding: "0.3rem 0.6rem" }}
>
Delete
</button>