Update app.py

app.py

@@ -246,22 +246,20 @@ def display_bookmarks():
         summary = bookmark.get('summary', '')
         category = bookmark.get('category', 'Uncategorized')
 
-        # Apply inline styles for dead links
+        # Assign CSS classes based on bookmark status
         if bookmark.get('dead_link'):
-            card_style = "border: 2px solid #D32F2F;"
-            text_style = "color: #D32F2F;"
+            card_classes = "card dead-link"
         else:
-            card_style = "border: 2px solid #4CAF50;"
-            text_style = "color: #000000;"
+            card_classes = "card active-link"
 
         card_html = f'''
-        <div class="card" style="{card_style}; padding: 10px; margin: 10px; border-radius: 5px;">
+        <div class="{card_classes}" style="padding: 10px; margin: 10px; border-radius: 5px;">
             <div class="card-content">
-                <h3 style="{text_style}">{index}. {title} {status}</h3>
-                <p style="{text_style}"><strong>Category:</strong> {category}</p>
-                <p style="{text_style}"><strong>URL:</strong> <a href="{url}" target="_blank" style="{text_style}">{url}</a></p>
-                <p style="{text_style}"><strong>ETag:</strong> {etag}</p>
-                <p style="{text_style}"><strong>Summary:</strong> {summary}</p>
+                <h3>{index}. {title} {status}</h3>
+                <p><strong>Category:</strong> {category}</p>
+                <p><strong>URL:</strong> <a href="{url}" target="_blank">{url}</a></p>
+                <p><strong>ETag:</strong> {etag}</p>
+                <p><strong>Summary:</strong> {summary}</p>
             </div>
         </div>
         '''
@@ -453,15 +451,7 @@ Please identify the most relevant bookmarks that match the user's query. Provide
 def build_app():
     try:
         logger.info("Building Gradio app")
-        with gr.Blocks(theme=gr.themes.Default(), css="""
-        .card {
-            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
-            transition: 0.3s;
-        }
-        .card:hover {
-            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
-        }
-        """) as demo:
+        with gr.Blocks(theme=gr.themes.Default(), css="app.css") as demo:
             # General Overview
             gr.Markdown("""
             # 📚 SmartMarks - AI Browser Bookmarks Manager