From 58d132139ba8d5fa17c8681a0275047ce4cca809 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Wed, 3 Dec 2025 03:51:29 +0900
Subject: feat(frontend): design update

---
 frontend/src/pages/UnreadArticles.tsx | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

(limited to 'frontend/src/pages/UnreadArticles.tsx')

diff --git a/frontend/src/pages/UnreadArticles.tsx b/frontend/src/pages/UnreadArticles.tsx
index dc4c377..28cc8b5 100644
--- a/frontend/src/pages/UnreadArticles.tsx
+++ b/frontend/src/pages/UnreadArticles.tsx
@@ -11,21 +11,29 @@ export function UnreadArticles() {
 	});
 
 	if (fetching) {
-		return <div className="p-4">Loading unread articles...</div>;
+		return (
+			<div className="py-8 text-center">
+				<p className="text-sm text-stone-400">Loading unread articles...</p>
+			</div>
+		);
 	}
 
 	if (error) {
-		return <div className="p-4 text-red-600">Error: {error.message}</div>;
+		return (
+			<div className="rounded-lg bg-red-50 p-4 text-sm text-red-600">
+				Error: {error.message}
+			</div>
+		);
 	}
 
 	return (
 		<div>
-			<div className="border-b border-gray-200 bg-white px-4 py-3">
-				<h1 className="text-xl font-semibold text-gray-900">Unread Articles</h1>
+			<div className="mb-6">
+				<h1 className="text-xl font-semibold text-stone-900">Unread</h1>
 				{data?.unreadArticles && (
-					<p className="text-sm text-gray-500">
+					<p className="mt-1 text-sm text-stone-400">
 						{data.unreadArticles.length} article
-						{data.unreadArticles.length !== 1 ? "s" : ""}
+						{data.unreadArticles.length !== 1 ? "s" : ""} to read
 					</p>
 				)}
 			</div>
-- 
cgit v1.2.3-70-g09d2