diff options
Diffstat (limited to 'frontend/src/components/ArticleItem.tsx')
| -rw-r--r-- | frontend/src/components/ArticleItem.tsx | 24 |
1 files changed, 11 insertions, 13 deletions
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> |