Update app.py

app.py

@@ -126,20 +126,28 @@ def search_spaces(search_text, category):
     
     # Format the results as HTML with clickable links and stats
     html_content = f"""
-    <div style='margin-bottom: 20px; padding: 10px; background-color: #f5f5f5; border-radius: 5px;'>
-        <h3>Statistics:</h3>
-        <p>Total Spaces: {total_spaces}</p>
-        <p>Total Likes: {total_likes:,}</p>
+    <div style='margin-bottom: 20px; padding: 10px; background-color: var(--color-background-primary); border: 1px solid var(--color-border-primary); border-radius: 5px;'>
+        <h3 style='color: var(--color-text-primary);'>Statistics:</h3>
+        <p style='color: var(--color-text-primary);'>Total Spaces: {total_spaces}</p>
+        <p style='color: var(--color-text-primary);'>Total Likes: {total_likes:,}</p>
     </div>
     <div style='max-height: 500px; overflow-y: auto;'>
     """
     
     for _, row in spaces.iterrows():
         html_content += f"""
-        <div style='margin: 10px; padding: 15px; border: 1px solid #ddd; border-radius: 5px; background-color: white;'>
-            <h3><a href='{row['url']}' target='_blank' style='color: #2196F3; text-decoration: none;'>{row['title']}</a></h3>
-            <p>Category: {row['category']}</p>
-            <p>❤️ {row['likes']:,} likes</p>
+        <div style='margin: 10px; padding: 15px; border: 1px solid var(--color-border-primary); 
+                    border-radius: 5px; background-color: var(--color-background-primary);'>
+            <h3><a href='{row['url']}' target='_blank' 
+                   style='color: #2196F3; text-decoration: none; 
+                   font-weight: bold;'>{row['title']}</a></h3>
+            <p style='color: var(--color-text-primary); margin: 8px 0;'>
+                <span style='background-color: var(--color-accent-soft); 
+                           padding: 2px 8px; border-radius: 12px;'>
+                    {row['category']}
+                </span>
+            </p>
+            <p style='color: var(--color-text-primary);'>❤️ {row['likes']:,} likes</p>
         </div>
         """
     html_content += "</div>"
@@ -147,7 +155,13 @@ def search_spaces(search_text, category):
 
 # Create the Gradio interface
 def create_app():
-    with gr.Blocks(title="Hugging Face Spaces Explorer", theme=gr.themes.Soft()) as app:
+    with gr.Blocks(
+        title="Hugging Face Spaces Explorer",
+        theme=gr.themes.Soft(
+            primary_hue="blue",
+            secondary_hue="blue",
+        )
+    ) as app:
         gr.Markdown("""
         # 🤗 Hugging Face Spaces Explorer
         Explore and discover popular Hugging Face Spaces by category