From 91df5ee00378f251ac26dcfe169e474b1a408562 Mon Sep 17 00:00:00 2001
From: Adam Mathes <adam@adammathes.com>
Date: Fri, 13 Feb 2026 10:11:18 -0800
Subject: Implement UI styling updates: typography, sidebar, feed items,
 controls, dark mode

---
 frontend/src/App.css                 |  52 +++++++++++++++---
 frontend/src/components/FeedItem.css |  57 +++++++++++--------
 frontend/src/components/FeedItem.tsx |  16 +++---
 frontend/src/components/FeedList.css | 103 ++++++++++++++++-------------------
 frontend/src/index.css               |  44 ++++++++++-----
 frontend/vite.config.ts              |   7 ---
 6 files changed, 164 insertions(+), 115 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 69edabd..a51fef3 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -22,19 +22,45 @@ body {
 }
 
 .dashboard-header {
-  background: #2c3e50;
+  /* Legacy didn't really have a top header, but we need one for settings/logout. 
+     Keeping it minimal/flat or matching sidebar bg if we want to blend in. 
+     For now, let's make it dark gray to stand out less or match legacy dark mode if applicable.
+     Actually, let's keep it distinct but apply the font styles. */
+  background: #222;
   color: white;
-  padding: 0.75rem 1.5rem;
+  padding: 0.5rem 1rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  flex-shrink: 0;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: bold;
 }
 
 .dashboard-header h1 {
   margin: 0;
-  font-size: 1.25rem;
-  font-weight: 600;
+  font-size: 1.2rem;
+  font-variant: small-caps;
+  text-transform: lowercase;
+}
+
+.nav-link,
+.logout-btn {
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: bold;
+  font-variant: small-caps;
+  text-transform: lowercase;
+  font-size: 1rem;
+  background: transparent;
+  border: none;
+  color: #ccc;
+  cursor: pointer;
+  margin-left: 1rem;
+}
+
+.nav-link:hover,
+.logout-btn:hover {
+  color: white;
+  text-decoration: underline;
 }
 
 .dashboard-content {
@@ -44,19 +70,27 @@ body {
 }
 
 .dashboard-sidebar {
-  width: 300px;
-  background: #f8f9fa;
-  border-right: 1px solid #ddd;
+  width: 15rem;
+  background: var(--sidebar-bg);
+  border-right: 1px solid #999;
   display: flex;
   flex-direction: column;
   overflow-y: auto;
+  padding: 1rem;
 }
 
 .dashboard-main {
   flex: 1;
   padding: 2rem;
   overflow-y: auto;
-  background: #fff;
+  background: var(--bg-color);
+  margin-left: 0;
+}
+
+.dashboard-main>* {
+  max-width: 35rem;
+  /* Legacy width */
+  margin: 0 auto;
 }
 
 .logout-btn {
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;
 }
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 08a3ac9..3d51caf 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,11 +1,23 @@
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: 'Courier New', Courier, monospace;
+  /* Fixed width as requested */
+  line-height: 1.5;
+  font-weight: 400;
+
+  /* Light Mode Defaults */
+  --bg-color: #ffffff;
+  --text-color: rgba(0, 0, 0, 0.87);
+  --sidebar-bg: #ccc;
+  --link-color: #0000EE;
+  /* Standard blue link */
+
+  font-family: 'Courier New', Courier, monospace;
   line-height: 1.5;
   font-weight: 400;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  color: var(--text-color);
+  background-color: var(--bg-color);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -13,21 +25,23 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-color: #24292e;
+    /* Legacy Dark */
+    --text-color: #ffffff;
+    --sidebar-bg: #1b1f23;
+    /* Darker sidebar */
+    --link-color: rgb(90, 200, 250);
+    /* Legacy dark link */
+  }
 }
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  /* Removed flex centering to allow natural flow */
 }
 
 h1 {
@@ -46,9 +60,11 @@ button {
   cursor: pointer;
   transition: border-color 0.25s;
 }
+
 button:hover {
   border-color: #646cff;
 }
+
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
@@ -59,10 +75,12 @@ button:focus-visible {
     color: #213547;
     background-color: #ffffff;
   }
+
   a:hover {
     color: #747bff;
   }
+
   button {
     background-color: #f9f9f9;
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index fe6af7d..1a17086 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -11,11 +11,4 @@ export default defineConfig({
       '/image': 'http://127.0.0.1:4994',
     }
   },
-  test: {
-    exclude: ['tests/**', 'node_modules/**'],
-    environment: 'jsdom',
-    setupFiles: './src/setupTests.ts', // Verify if this exists, but mainly exclude is key
-    // actually let's just use defaults + exclude
-    globals: true, // if needed
-  }
 })
-- 
cgit v1.2.3