fix news feed

app/components/news.py

@@ -7,7 +7,7 @@ import html as html_module
 
 
 def display_news_card(news_item: dict):
-    """Display a compact news card with professional styling using Streamlit components."""
+    """Display a single news card with professional styling using Streamlit components."""
 
     # Calculate time ago
     time_diff = datetime.now() - news_item['timestamp']
@@ -15,29 +15,53 @@ def display_news_card(news_item: dict):
         time_ago = f"{time_diff.seconds}s ago"
     elif time_diff.seconds < 3600:
         time_ago = f"{time_diff.seconds // 60}m ago"
-    elif time_diff.days == 0:
-        time_ago = f"{time_diff.seconds // 3600}h ago"
     else:
-        time_ago = f"{time_diff.days}d ago"
+        time_ago = f"{time_diff.seconds // 3600}h ago"
 
-    # Create compact container
+    # Create container with custom styling
     with st.container():
-        # Compact header row with all info in one line
-        col1, col2 = st.columns([4, 1])
+        # Add custom CSS for this card
+        st.markdown("""
+        <style>
+        .news-card {
+            background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
+            border: 1px solid #374151;
+            border-radius: 12px;
+            padding: 20px;
+            margin-bottom: 16px;
+        }
+        </style>
+        """, unsafe_allow_html=True)
+
+        # Header row with source and badges
+        col1, col2 = st.columns([3, 1])
 
         with col1:
-            # Source, impact, sentiment, and category in compact format
-            impact_badge = "🔴" if news_item['impact'] == 'high' else "🟡" if news_item['impact'] == 'medium' else "🟢"
-            sentiment_emoji = {'positive': '📈', 'negative': '📉', 'neutral': '➡️'}
-            sentiment_icon = sentiment_emoji.get(news_item['sentiment'], '➡️')
-
-            st.caption(f"**{news_item['source']}** • {impact_badge} {news_item['impact'].upper()} • {sentiment_icon} {news_item['sentiment'].title()} • #{news_item['category']} • {time_ago}")
+            # Source and badges in one line
+            badge_cols = st.columns([2, 1, 1, 1])
+            with badge_cols[0]:
+                st.markdown(f"**:blue[{news_item['source']}]**")
+            with badge_cols[1]:
+                if news_item['impact'] == 'high':
+                    st.markdown("🔴 **HIGH**")
+                elif news_item['impact'] == 'medium':
+                    st.markdown("🟡 **MED**")
+                else:
+                    st.markdown("🟢 **LOW**")
+            with badge_cols[2]:
+                sentiment_emoji = {'positive': '📈', 'negative': '📉', 'neutral': '➡️'}
+                st.markdown(f"{sentiment_emoji.get(news_item['sentiment'], '➡️')} {news_item['sentiment'].title()}")
+            with badge_cols[3]:
+                st.markdown(f"**#{news_item['category']}**")
 
         with col2:
-            st.markdown(f"[Read →]({news_item['url']})")
+            st.markdown(f"[**Read More →**]({news_item['url']})")
+
+        # Title/Summary
+        st.markdown(f"### {news_item.get('summary', '').strip()}")
 
-        # Compact title/summary
-        st.markdown(f"**{news_item.get('summary', '').strip()}**")
+        # Meta information
+        st.caption(f"🕐 {time_ago}")
 
         st.markdown("---")