Update app.py

app.py

@@ -412,12 +412,18 @@ table {
     text-decoration: none;
 }
 
-.header-table .sort-links a {
-    color: black;
-    font-weight: normal;
-    font-size: 14pt;
-    margin-left: 15px;
+.header-table .sort-buttons button {
+    background: none;
+    border: none;
+    color: #0000ff;
     cursor: pointer;
+    font-size: 14pt;
+    text-decoration: underline;
+    padding: 0 10px;
+}
+
+.header-table .sort-buttons button:hover {
+    color: #551A8B;
 }
 
 .itemlist .athing {
@@ -457,9 +463,9 @@ table {
         font-size: 12pt;
     }
 
-    .sort-links a {
+    .sort-buttons button {
         font-size: 12pt;
-        margin-left: 10px;
+        padding: 0 5px;
     }
 
     .storylink {
@@ -494,8 +500,12 @@ table {
         color: black;
     }
 
-    .header-table .sort-links a {
-        color: black;
+    .header-table .sort-buttons button {
+        color: #add8e6;
+    }
+
+    .header-table .sort-buttons button:hover {
+        color: #9370db;
     }
 
     .itemlist .athing {
@@ -537,32 +547,25 @@ with demo:
             """)
         # Hacker News-like Header with "Hot" and "New" sort options
         with gr.Row():
-            gr.HTML("""
-            <table border="0" cellpadding="0" cellspacing="0" class="header-table">
-                <tr>
-                    <td>
-                        <span class="pagetop">
-                            <b class="hnname"><a href="#">Daily Papers</a></b>
-                        </span>
-                    </td>
-                    <td align="right" class="sort-links">
-                        <a href="#" onclick="HotSort()">Hot</a> | 
-                        <a href="#" onclick="NewSort()">New</a>
-                    </td>
-                </tr>
-            </table>
-            <script>
-                function HotSort() {
-                    gradioApp().getElementById('hot_sort_button').click();
-                }
-                function NewSort() {
-                    gradioApp().getElementById('new_sort_button').click();
-                }
-            </script>
-            """)
+            # Left side: Site title
+            gr.Markdown("""
+                <table border="0" cellpadding="0" cellspacing="0" class="header-table">
+                    <tr>
+                        <td>
+                            <span class="pagetop">
+                                <b class="hnname"><a href="#">Daily Papers</a></b>
+                            </span>
+                        </td>
+                        <td align="right" class="sort-buttons">
+                            <button onclick="gradioApp().getElementById('hot_sort').click()">Hot</button> | 
+                            <button onclick="gradioApp().getElementById('new_sort').click()">New</button>
+                        </td>
+                    </tr>
+                </table>
+            """, show_label=False)
         # Hidden buttons to trigger sort methods
-        hot_sort = gr.Button("Hot Sort", visible=False, elem_id="hot_sort_button")
-        new_sort = gr.Button("New Sort", visible=False, elem_id="new_sort_button")
+        hot_sort = gr.Button("Hot Sort", visible=False, elem_id="hot_sort")
+        new_sort = gr.Button("New Sort", visible=False, elem_id="new_sort")
         # Paper list
         paper_list = gr.HTML()
         # Navigation Buttons