Implement UI styling updates: typography, sidebar, feed items, controls, dark mode

3 files changed, 90 insertions, 86 deletions

diff --git a/frontend/src/components/FeedItem.css b/frontend/src/components/FeedItem.css
index 916ee42..06fac2f 100644
--- a/frontend/src/components/FeedItem.css
+++ b/frontend/src/components/FeedItem.css
@@ -1,8 +1,8 @@
 .feed-item {
-    border-bottom: 1px solid #f0f0f0;
-    padding: 1rem 0;
+    padding: 1rem;
+    margin-top: 5rem;
     list-style: none;
-    /* Ensure no bullets if used in ul */
+    border-bottom: none;
 }
 
 .feed-item.read .item-title {
@@ -18,21 +18,22 @@
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
+    margin-bottom: 0.5rem;
 }
 
 .item-title {
-    font-size: 1.2rem;
+    font-size: 1.25rem;
+    /* Legacy h3 size approx */
     text-decoration: none;
     color: #333;
     display: block;
-    margin-bottom: 0.5rem;
     flex: 1;
-    /* Take up remaining space */
 }
 
 .item-title:hover {
-    text-decoration: underline;
-    color: #007bff;
+    text-decoration: none;
+    color: blue;
+    /* Legacy link color */
 }
 
 .item-actions {
@@ -41,36 +42,39 @@
     margin-left: 1rem;
 }
 
+/* Legacy controls were simple text/links, but buttons are fine if minimal */
 .action-btn {
-    background: none;
-    border: 1px solid #ddd;
-    border-radius: 4px;
+    background: whitesmoke;
+    border: none;
     cursor: pointer;
     padding: 2px 6px;
     font-size: 1rem;
-    line-height: 1;
+    color: blue;
+    font-weight: bold;
 }
 
 .action-btn:hover {
-    background-color: #f8f9fa;
-    border-color: #ccc;
+    background-color: #eee;
 }
 
-.action-btn.is-starred {
-    color: gold;
-    border-color: gold;
+.dateline {
+    margin-top: 0;
+    font-weight: normal;
+    font-size: .75em;
+    color: #ccc;
+    margin-bottom: 1rem;
 }
 
-.item-meta {
-    font-size: 0.85rem;
-    color: #666;
-    margin-bottom: 0.5rem;
+.dateline a {
+    color: #ccc;
+    text-decoration: none;
 }
 
 .item-description {
-    color: #444;
+    color: #000;
     line-height: 1.5;
-    font-size: 0.95rem;
+    font-size: 1rem;
+    margin-top: 1rem;
 }
 
 .item-description img {
@@ -78,4 +82,11 @@
     height: auto;
     display: block;
     margin: 1rem 0;
+}
+
+.item-description blockquote {
+    padding: 1rem 1rem 0 1rem;
+    border-left: 4px solid #ddd;
+    color: #666;
+    margin-left: 0;
 }
\ No newline at end of file
diff --git a/frontend/src/components/FeedItem.tsx b/frontend/src/components/FeedItem.tsx
index aa0cea8..ae6f8a5 100644
--- a/frontend/src/components/FeedItem.tsx
+++ b/frontend/src/components/FeedItem.tsx
@@ -60,27 +60,29 @@ export default function FeedItem({ item: initialItem }: FeedItemProps) {
                 <a href={item.url} target="_blank" rel="noopener noreferrer" className="item-title">
                     {item.title || '(No Title)'}
                 </a>
-                <div className="item-actions">
+            </div>
+            <div className="dateline">
+                <a href={item.url} target="_blank" rel="noopener noreferrer">
+                    {new Date(item.publish_date).toLocaleDateString()}
+                    {item.feed_title && ` - ${item.feed_title}`}
+                </a>
+                <div className="item-actions" style={{ display: 'inline-block', float: 'right' }}>
                     <button
                         onClick={toggleRead}
                         className={`action-btn ${item.read ? 'is-read' : 'is-unread'}`}
                         title={item.read ? "Mark as unread" : "Mark as read"}
                     >
-                        {item.read ? '📖' : 'uo'}
+                        {item.read ? 'keep unread' : 'mark read'}
                     </button>
                     <button
                         onClick={toggleStar}
                         className={`action-btn ${item.starred ? 'is-starred' : 'is-unstarred'}`}
                         title={item.starred ? "Unstar" : "Star"}
                     >
-                        {item.starred ? '★' : '☆'}
+                        {item.starred ? 'unstar' : 'star'}
                     </button>
                 </div>
             </div>
-            <div className="item-meta">
-                <span className="item-date">{new Date(item.publish_date).toLocaleDateString()}</span>
-                {item.feed_title && <span className="item-feed"> - {item.feed_title}</span>}
-            </div>
             {item.description && (
                 <div className="item-description" dangerouslySetInnerHTML={{ __html: item.description }} />
             )}
diff --git a/frontend/src/components/FeedList.css b/frontend/src/components/FeedList.css
index b8ca7e6..1c7395a 100644
--- a/frontend/src/components/FeedList.css
+++ b/frontend/src/components/FeedList.css
@@ -1,106 +1,97 @@
 .feed-list {
-    padding: 1rem;
-    background: white;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    /* Removed card styling */
+    padding: 0;
+    background: transparent;
 }
 
 .feed-list h2 {
-    margin-top: 0;
-    border-bottom: 1px solid #eee;
-    padding-bottom: 0.5rem;
+    font-size: 1.2rem;
+    margin-bottom: 0.5rem;
+    border-bottom: 1px solid #999;
+    padding-bottom: 0.25rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
 }
 
-.feed-list-items {
+.feed-list-items,
+.tag-list-items,
+.filter-list {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 
 .feed-item {
-    padding: 0.75rem 0;
-    border-bottom: 1px solid #f0f0f0;
+    padding: 0.25rem 0;
+    border-bottom: none;
+    /* Clean look */
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
-.feed-item:last-child {
-    border-bottom: none;
-}
-
 .feed-title {
-    text-decoration: none;
     color: #333;
-    font-weight: 500;
+    text-decoration: none;
+    font-size: 0.9rem;
 }
 
 .feed-title:hover {
-    color: #007bff;
+    text-decoration: underline;
+    color: #000;
 }
 
 .feed-category {
-    background: #e9ecef;
-    padding: 0.2rem 0.5rem;
-    border-radius: 4px;
-    font-size: 0.8rem;
-    color: #666;
+    display: none;
+    /* Hide category in sidebar list to save space/match legacy simplicity if needed */
 }
+
 .tag-section {
     margin-top: 2rem;
-    border-top: 1px solid #eee;
-    padding-top: 1rem;
-}
-
-.tag-list-items {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
 }
 
-.tag-item {
-    display: inline-block;
-}
-
-.tag-link {
-    display: block;
-    padding: 0.3rem 0.6rem;
-    background: #e9ecef;
-    border-radius: 12px;
-    text-decoration: none;
+.tag-link,
+.filter-list li a {
     color: #333;
+    text-decoration: none;
     font-size: 0.9rem;
-    transition: background-color 0.2s;
+    display: block;
+    padding: 0.1rem 0;
 }
 
-.tag-link:hover {
-    background: #dde2e6;
+.tag-link:hover,
+.filter-list li a:hover {
+    text-decoration: underline;
+    background: transparent;
+    /* No hover bg */
     color: #000;
 }
 
 .filter-section {
-    padding-bottom: 1rem;
-    border-bottom: 1px solid #eee;
-    margin-bottom: 1rem;
+    margin-bottom: 2rem;
 }
 
 .filter-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    gap: 1rem;
+    display: block;
+    /* Stack vertically */
+}
+.filter-list {
+    display: block;
 }
 
 .filter-list li a {
     text-decoration: none;
     color: #333;
-    font-weight: 500;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-weight: bold;
+    font-variant: small-caps;
+    text-transform: lowercase;
+    font-size: 1.1rem;
+    display: block;
+    margin-bottom: 0.5rem;
 }
 
 .filter-list li a:hover {
-    color: #007bff;
+    color: blue;
+    background-color: transparent;
 }