diff options
| author | Adam Mathes <adam@adammathes.com> | 2026-02-13 17:07:04 -0800 |
|---|---|---|
| committer | Adam Mathes <adam@adammathes.com> | 2026-02-13 17:07:04 -0800 |
| commit | 777c55c742066c674d544604a388d15b782769ff (patch) | |
| tree | 7833d5accfdb43b7cbb9a9d20cf628fbedbd004f | |
| parent | 993fa16af4fb5891fa9eb06be728933030cf3953 (diff) | |
| download | neko-777c55c742066c674d544604a388d15b782769ff.tar.gz neko-777c55c742066c674d544604a388d15b782769ff.tar.bz2 neko-777c55c742066c674d544604a388d15b782769ff.zip | |
style(v2): move star to right of title and match legacy look (NK-35kxxw)
| -rw-r--r-- | frontend/src/components/FeedItem.css | 11 | ||||
| -rw-r--r-- | frontend/src/components/FeedItem.test.tsx | 2 | ||||
| -rw-r--r-- | frontend/src/components/FeedItem.tsx | 8 |
3 files changed, 10 insertions, 11 deletions
diff --git a/frontend/src/components/FeedItem.css b/frontend/src/components/FeedItem.css index 1e7b9bd..bdca707 100644 --- a/frontend/src/components/FeedItem.css +++ b/frontend/src/components/FeedItem.css @@ -48,24 +48,23 @@ background: none; border: none; cursor: pointer; - font-size: 1.2rem; - padding: 0 0.5rem 0 0; + font-size: 1.25rem; + padding: 0 0 0 0.5rem; vertical-align: middle; transition: color 0.2s; line-height: 1; } .star-btn.is-starred { - color: #ffd700; - /* Gold */ + color: blue; } .star-btn.is-unstarred { - color: #ccc; + color: black; } .star-btn:hover { - color: #ffeb3b; + color: blue; } .action-btn { diff --git a/frontend/src/components/FeedItem.test.tsx b/frontend/src/components/FeedItem.test.tsx index 913e6ff..5ca5582 100644 --- a/frontend/src/components/FeedItem.test.tsx +++ b/frontend/src/components/FeedItem.test.tsx @@ -36,7 +36,7 @@ describe('FeedItem Component', () => { render(<FeedItem item={mockItem} />); const starBtn = screen.getByTitle('Star'); - expect(starBtn).toHaveTextContent('☆'); + expect(starBtn).toHaveTextContent('★'); fireEvent.click(starBtn); // Optimistic update diff --git a/frontend/src/components/FeedItem.tsx b/frontend/src/components/FeedItem.tsx index 23f2bae..2dcbcb9 100644 --- a/frontend/src/components/FeedItem.tsx +++ b/frontend/src/components/FeedItem.tsx @@ -54,6 +54,9 @@ export default function FeedItem({ item: initialItem }: FeedItemProps) { return ( <li className={`feed-item ${item.read ? 'read' : 'unread'} ${loading ? 'loading' : ''}`}> <div className="item-header"> + <a href={item.url} target="_blank" rel="noopener noreferrer" className="item-title"> + {item.title || '(No Title)'} + </a> <button onClick={(e) => { e.stopPropagation(); @@ -62,11 +65,8 @@ export default function FeedItem({ item: initialItem }: FeedItemProps) { className={`star-btn ${item.starred ? 'is-starred' : 'is-unstarred'}`} title={item.starred ? "Unstar" : "Star"} > - {item.starred ? '★' : '☆'} + ★ </button> - <a href={item.url} target="_blank" rel="noopener noreferrer" className="item-title"> - {item.title || '(No Title)'} - </a> </div> <div className="dateline"> <a href={item.url} target="_blank" rel="noopener noreferrer"> |
