UX improvements

static/css/main.css

@@ -2114,4 +2114,185 @@ input[type="text"]:focus, select:focus {
         flex-direction: column;
         gap: 0.5rem;
     }
+}
+
+/* Add these styles to the existing main.css file - they use existing design patterns */
+
+/* Settings Modal Enhancements - using existing provider-item styles */
+#settings-modal .modal-section {
+    margin-bottom: 1.5rem;
+}
+
+#settings-modal .modal-section:last-child {
+    margin-bottom: 0;
+}
+
+/* Provider configuration section using existing provider-item styling */
+#provider-config-list .provider-item {
+    margin-bottom: 1rem;
+    background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
+    border: 1px solid #333;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+}
+
+#provider-config-list .provider-item:last-child {
+    margin-bottom: 0;
+}
+
+#provider-config-list .provider-item:hover {
+    border-color: #444;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+}
+
+/* Provider toggle styling - extends existing checkbox pattern */
+.provider-toggle {
+    appearance: none !important;
+    width: 16px !important;
+    height: 16px !important;
+    border: 2px solid #555 !important;
+    background: #1a1a1a !important;
+    cursor: pointer !important;
+    position: relative !important;
+    border-radius: 3px !important;
+    transition: all 0.3s ease !important;
+    margin: 0 !important;
+}
+
+.provider-toggle:checked {
+    background: #00ff41 !important;
+    border-color: #00ff41 !important;
+}
+
+.provider-toggle:checked::after {
+    content: '✓' !important;
+    position: absolute !important;
+    top: -3px !important;
+    left: 1px !important;
+    color: #1a1a1a !important;
+    font-size: 12px !important;
+    font-weight: bold !important;
+}
+
+.provider-toggle:hover {
+    border-color: #00ff41 !important;
+    box-shadow: 0 0 5px rgba(0, 255, 65, 0.3) !important;
+}
+
+/* API Key status row styling - uses existing status-row pattern */
+.api-key-status-row {
+    padding: 0.75rem;
+    border-radius: 4px;
+    border: 1px solid;
+    transition: all 0.3s ease;
+    margin-top: 0.5rem;
+}
+
+.api-key-status-row.configured {
+    background: rgba(0, 255, 65, 0.1);
+    border-color: rgba(0, 255, 65, 0.3);
+}
+
+.api-key-status-row.not-configured {
+    background: rgba(255, 153, 0, 0.1);
+    border-color: rgba(255, 153, 0, 0.3);
+}
+
+/* Settings modal button styling - uses existing button classes */
+#settings-modal .button-group {
+    padding-top: 1.5rem;
+    border-top: 1px solid #333;
+    margin-top: 1.5rem;
+}
+
+/* Clear button specific styling - extends btn-secondary */
+.clear-api-key-btn {
+    font-size: 0.8rem !important;
+    padding: 0.4rem 0.8rem !important;
+    min-width: auto !important;
+}
+
+.clear-api-key-btn:disabled {
+    opacity: 0.5 !important;
+    cursor: not-allowed !important;
+}
+
+/* Provider configuration checkbox label styling */
+#provider-config-list .status-row label {
+    color: #e0e0e0;
+    cursor: pointer;
+    transition: color 0.3s ease;
+    font-size: 0.9rem;
+    font-weight: 500;
+}
+
+#provider-config-list .status-row label:hover {
+    color: #00ff41;
+}
+
+/* Settings section count badges - uses existing merge-badge styling */
+#provider-count,
+#api-key-count {
+    background: #444;
+    color: #fff;
+    padding: 0.25rem 0.5rem;
+    border-radius: 3px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    min-width: 20px;
+    text-align: center;
+}
+
+/* API key help text styling - uses existing patterns */
+#settings-modal .apikey-help {
+    font-size: 0.8rem;
+    color: #666;
+    margin-top: 0.5rem;
+    font-style: italic;
+    line-height: 1.4;
+}
+
+/* Modal section content spacing */
+#settings-modal .modal-section-content {
+    padding: 1rem;
+}
+
+#settings-modal .modal-section-content .provider-item {
+    padding: 1rem;
+}
+
+/* Transition effects for API key clearing */
+.api-key-clearing {
+    opacity: 0.6;
+    pointer-events: none;
+    transition: all 0.3s ease;
+}
+
+.api-key-cleared {
+    opacity: 0;
+    transform: translateX(-10px);
+    transition: all 0.3s ease;
+}
+
+/* Settings modal responsiveness - extends existing responsive patterns */
+@media (max-width: 768px) {
+    #settings-modal .modal-content {
+        width: 95%;
+        margin: 5% auto;
+        max-height: 90vh;
+    }
+    
+    #provider-config-list .provider-item {
+        margin-bottom: 0.75rem;
+    }
+    
+    #settings-modal .provider-stats {
+        grid-template-columns: 1fr;
+        gap: 0.5rem;
+    }
+    
+    #settings-modal .button-group {
+        flex-direction: column;
+    }
 }