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/components/ArticleItem.tsx | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

(limited to 'frontend/src/components/ArticleItem.tsx')

diff --git a/frontend/src/components/ArticleItem.tsx b/frontend/src/components/ArticleItem.tsx
index c61923a..f8fac24 100644
--- a/frontend/src/components/ArticleItem.tsx
+++ b/frontend/src/components/ArticleItem.tsx
@@ -51,38 +51,36 @@ export function ArticleItem({ article, onReadChange }: Props) {
 
 	return (
 		<div
-			className={`group flex items-center gap-3 rounded-lg border p-3 hover:bg-gray-50 ${
+			className={`group flex items-center gap-3 rounded-lg p-3 transition-all duration-200 ${
 				article.isRead
-					? "border-gray-200 bg-white"
-					: "border-blue-200 bg-blue-50"
+					? "bg-white hover:bg-stone-50"
+					: "border-l-2 border-l-sky-500 bg-sky-50/50"
 			}`}
 		>
 			<button
 				type="button"
 				onClick={() => handleToggleRead(article.id, article.isRead)}
-				className={`flex-shrink-0 rounded p-1 transition-colors ${
+				className={`flex-shrink-0 rounded-md p-1.5 transition-all duration-150 ${
 					article.isRead
-						? "text-gray-400 hover:text-gray-600"
-						: "text-blue-600 hover:text-blue-700"
+						? "text-stone-300 hover:bg-stone-100 hover:text-stone-500"
+						: "text-sky-500 hover:bg-sky-100 hover:text-sky-600"
 				}`}
 				title={article.isRead ? "Mark as unread" : "Mark as read"}
 			>
 				<FontAwesomeIcon
 					icon={article.isRead ? faCheck : faCircle}
-					className="w-4 h-4"
+					className="h-4 w-4"
 				/>
 			</button>
-			<div className="flex-1 min-w-0">
+			<div className="min-w-0 flex-1">
 				<button
 					type="button"
 					onClick={() => handleArticleClick(article)}
-					className={`text-left w-full group-hover:text-blue-600 transition-colors ${
-						article.isRead ? "text-gray-700" : "text-gray-900 font-medium"
+					className={`w-full text-left transition-colors duration-150 group-hover:text-sky-700 ${
+						article.isRead ? "text-stone-500" : "font-medium text-stone-900"
 					}`}
 				>
-					<div className="flex items-center gap-2 break-words">
-						{article.title}
-					</div>
+					<span className="break-words">{article.title}</span>
 				</button>
 			</div>
 		</div>
-- 
cgit v1.2.3-70-g09d2