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/FeedItem.tsx | 37 +++++++++++++++++++-----------------
 1 file changed, 20 insertions(+), 17 deletions(-)

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

diff --git a/frontend/src/components/FeedItem.tsx b/frontend/src/components/FeedItem.tsx
index 80c8992..8333f75 100644
--- a/frontend/src/components/FeedItem.tsx
+++ b/frontend/src/components/FeedItem.tsx
@@ -41,26 +41,29 @@ export function FeedItem({ feed, onFeedUnsubscribed }: Props) {
 	};
 
 	return (
-		<div className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
-			<div className="flex items-start justify-between">
-				<div className="flex-1">
-					<h3 className="text-lg font-semibold text-gray-900">{feed.title}</h3>
-					<p className="mt-1 text-sm text-gray-500">
-						<a href={feed.url} target="_blank" rel="noreferrer">
-							{feed.url}
-						</a>
+		<div className="group rounded-xl border border-stone-200 bg-white p-5 transition-all duration-200 hover:border-stone-300 hover:shadow-sm">
+			<div className="flex items-start justify-between gap-4">
+				<div className="min-w-0 flex-1">
+					<h3 className="truncate text-base font-semibold text-stone-900">
+						{feed.title}
+					</h3>
+					<a
+						href={feed.url}
+						target="_blank"
+						rel="noreferrer"
+						className="mt-1 block truncate text-sm text-stone-400 transition-colors hover:text-sky-600"
+					>
+						{feed.url}
+					</a>
+					<p className="mt-2 text-xs text-stone-400">
+						Last fetched: {formatDateTime(new Date(feed.fetchedAt))}
 					</p>
-					<div className="mt-2 flex items-center gap-4 text-sm">
-						<span className="text-gray-400">
-							Last fetched: {formatDateTime(new Date(feed.fetchedAt))}
-						</span>
-					</div>
 				</div>
-				<div className="flex items-center gap-2">
+				<div className="flex items-center gap-1">
 					<button
 						type="button"
 						onClick={() => handleMarkAllRead(feed.id)}
-						className="rounded p-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+						className="rounded-lg p-2 text-stone-400 transition-all duration-150 hover:bg-stone-100 hover:text-stone-600"
 						title="Mark all as read"
 					>
 						<FontAwesomeIcon icon={faCheck} />
@@ -68,7 +71,7 @@ export function FeedItem({ feed, onFeedUnsubscribed }: Props) {
 					<button
 						type="button"
 						onClick={() => handleMarkAllUnread(feed.id)}
-						className="rounded p-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+						className="rounded-lg p-2 text-stone-400 transition-all duration-150 hover:bg-stone-100 hover:text-stone-600"
 						title="Mark all as unread"
 					>
 						<FontAwesomeIcon icon={faCircle} />
@@ -76,7 +79,7 @@ export function FeedItem({ feed, onFeedUnsubscribed }: Props) {
 					<button
 						type="button"
 						onClick={() => handleUnsubscribeFeed(feed.id)}
-						className="rounded p-2 text-red-600 hover:bg-red-50 hover:text-red-700"
+						className="rounded-lg p-2 text-stone-400 transition-all duration-150 hover:bg-red-50 hover:text-red-600"
 						title="Unsubscribe from feed"
 					>
 						<FontAwesomeIcon icon={faTrash} />
-- 
cgit v1.2.3-70-g09d2