Update search_history.py

search_history.py

@@ -182,28 +182,37 @@ def create_history_tab(history_component: SearchHistoryComponent):
     with gr.TabItem("Recommendation Search History"):
         gr.HTML("""
             <style>
-                .custom-history-btn {
-                    background: linear-gradient(135deg, #4299e1, #48bb78) !important;
+                .history-btn {
+                    font-size: 0.9em !important;
+                    padding: 8px 16px !important;
+                    border-radius: 6px !important;
                     border: none !important;
+                    font-weight: 500 !important;
+                    transition: all 0.2s ease !important;
                     color: white !important;
-                    padding: 12px 24px !important;
-                    border-radius: 8px !important;
-                    font-weight: 600 !important;
-                    transition: all 0.3s ease !important;
-                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+                    text-transform: none !important;
                 }
-                
-                .custom-history-btn:hover {
-                    transform: translateY(-2px);
-                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
+        
+                /* Clear History 按鈕樣式 */
+                .clear-btn {
+                    background: linear-gradient(135deg, rgba(244, 67, 54, 0.85), rgba(255, 152, 0, 0.85)) !important;
                 }
                 
-                #clear-btn {
-                    background: linear-gradient(135deg, #e53e3e, #ed8936) !important;
+                /* Refresh 按鈕樣式 */
+                .refresh-btn {
+                    background: linear-gradient(135deg, rgba(66, 165, 245, 0.85), rgba(38, 166, 154, 0.85)) !important;
                 }
-                
-                #refresh-btn {
-                    background: linear-gradient(135deg, #4299e1, #48bb78) !important;
+        
+                /* 懸浮效果 */
+                .history-btn:hover {
+                    transform: translateY(-1px);
+                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
+                }
+        
+                /* 點擊效果 */
+                .history-btn:active {
+                    transform: translateY(1px) scale(0.98);
+                    box-shadow: none !important;
                 }
             </style>
             
@@ -243,37 +252,22 @@ def create_history_tab(history_component: SearchHistoryComponent):
         with gr.Row():
             with gr.Column(scale=4):
                 history_display = gr.HTML()
-
-                # with gr.Row():
-                #     with gr.Column(scale=1):
-                #         clear_history_btn = gr.Button(
-                #             "🗑️ Clear History",
-                #             variant="secondary",
-                #             size="sm"
-                #         )
-                #     with gr.Column(scale=1):
-                #         refresh_btn = gr.Button(
-                #             "🔄 Refresh",
-                #             variant="secondary",
-                #             size="sm"
-                #         )
-
                 with gr.Row(equal_height=True):
                     with gr.Column(scale=1):
                         clear_history_btn = gr.Button(
                             "🗑️ Clear History",
-                            variant="primary",      # 改變按鈕變體為 primary
-                            size="lg",             # 改變大小為 lg
-                            elem_id="clear-btn",   # 添加唯一的元素ID
-                            elem_classes="custom-history-btn"  # 添加自訂類別
+                            variant="primary",      
+                            size="sm",             
+                            elem_id="clear-btn",   
+                            elem_classes="custom-history-btn"  
                         )
                     with gr.Column(scale=1):
                         refresh_btn = gr.Button(
                             "🔄 Refresh",
-                            variant="primary",      # 改變按鈕變體為 primary
-                            size="lg",             # 改變大小為 lg
-                            elem_id="refresh-btn", # 添加唯一的元素ID
-                            elem_classes="custom-history-btn"  # 添加自訂類別
+                            variant="primary",      
+                            size="sm",             
+                            elem_id="refresh-btn", 
+                            elem_classes="custom-history-btn"  
                         )
 
                 history_display.value = history_component.format_history_html()