Update search_history.py

search_history.py

@@ -182,37 +182,57 @@ def create_history_tab(history_component: SearchHistoryComponent):
     with gr.TabItem("Recommendation Search History"):
         gr.HTML("""
             <style>
-                .history-btn {
-                    font-size: 0.9em !important;
-                    padding: 8px 16px !important;
-                    border-radius: 6px !important;
+                .custom-btn {
+                    padding: 10px 20px !important;
+                    border-radius: 8px !important;
                     border: none !important;
                     font-weight: 500 !important;
                     transition: all 0.2s ease !important;
                     color: white !important;
-                    text-transform: none !important;
+                    font-size: 1em !important;
+                    cursor: pointer !important;
+                    width: 100% !important;
+                    min-height: 45px !important;
                 }
         
-                /* Clear History 按鈕樣式 */
+                /* Clear History 按鈕 - 紅色漸層 */
                 .clear-btn {
-                    background: linear-gradient(135deg, rgba(244, 67, 54, 0.85), rgba(255, 152, 0, 0.85)) !important;
+                    background: linear-gradient(135deg, #FF6B6B, #FF8E72) !important;
+                    box-shadow: 0 2px 4px rgba(255, 107, 107, 0.2) !important;
                 }
                 
-                /* Refresh 按鈕樣式 */
-                .refresh-btn {
-                    background: linear-gradient(135deg, rgba(66, 165, 245, 0.85), rgba(38, 166, 154, 0.85)) !important;
+                /* Clear History 按鈕懸浮效果 */
+                .clear-btn:hover {
+                    background: linear-gradient(135deg, #FF5252, #FF7B69) !important;
+                    transform: translateY(-1px);
+                    box-shadow: 0 4px 8px rgba(255, 107, 107, 0.3) !important;
+                }
+        
+                /* Clear History 按鈕點擊效果 */
+                .clear-btn:active {
+                    transform: translateY(1px) scale(0.98);
+                    background: linear-gradient(135deg, #FF4242, #FF6B59) !important;
+                    box-shadow: 0 1px 2px rgba(255, 107, 107, 0.2) !important;
                 }
         
-                /* 懸浮效果 */
-                .history-btn:hover {
+                /* Refresh 按鈕 - 藍綠色漸層 */
+                .refresh-btn {
+                    background: linear-gradient(135deg, #4FACFE, #00F2FE) !important;
+                    box-shadow: 0 2px 4px rgba(79, 172, 254, 0.2) !important;
+                }
+                
+                /* Refresh 按鈕懸浮效果 */
+                .refresh-btn:hover {
+                    background: linear-gradient(135deg, #4295EA, #00E1FE) !important;
                     transform: translateY(-1px);
-                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
+                    box-shadow: 0 4px 8px rgba(79, 172, 254, 0.3) !important;
                 }
         
-                /* 點擊效果 */
-                .history-btn:active {
+                /* Refresh 按鈕點擊效果 */
+                .refresh-btn:active {
                     transform: translateY(1px) scale(0.98);
-                    box-shadow: none !important;
+                    background: linear-gradient(135deg, #3285DA, #00D1EE) !important;
+                    box-shadow: 0 1px 2px rgba(79, 172, 254, 0.2) !important;
                 }
             </style>
             
@@ -256,18 +276,14 @@ def create_history_tab(history_component: SearchHistoryComponent):
                     with gr.Column(scale=1):
                         clear_history_btn = gr.Button(
                             "🗑️ Clear History",
-                            variant="primary",      
-                            size="sm",             
-                            elem_id="clear-btn",   
-                            elem_classes="custom-history-btn"  
+                            variant="primary",        
+                            elem_classes="custom-btn clear-btn"
                         )
                     with gr.Column(scale=1):
                         refresh_btn = gr.Button(
                             "🔄 Refresh",
                             variant="primary",      
-                            size="sm",             
-                            elem_id="refresh-btn", 
-                            elem_classes="custom-history-btn"  
+                            elem_classes="custom-btn refresh-btn"
                         )
 
                 history_display.value = history_component.format_history_html()