Fix modal

static/css/components/modal.css

@@ -34,19 +34,20 @@
     color: var(--primary-red);
 }
 
-.modal-header.error h2 {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.modal-header.error i {
-    font-size: 1.2em;
+.modal-header:not(.error) {
+    color: #28a745;  /* Success green color */
 }
 
 .modal-header h2 {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
     margin: 0;
-    color: #333;
+    color: inherit;
+}
+
+.modal-header i {
+    font-size: 1.2em;
 }
 
 .modal-body {

static/js/app.js

@@ -35,30 +35,39 @@ document.addEventListener('DOMContentLoaded', function() {
     // Error modal functionality
     const errorModal = document.getElementById('errorModal');
     const errorModalMessage = document.getElementById('errorModalMessage');
+    const errorModalTitle = document.getElementById('errorModalTitle');
     const errorModalClose = document.getElementById('errorModalClose');
 
-    function showError(message) {
+    function showStatusModal(message, isError = true) {
         errorModalMessage.textContent = message;
+        const modalHeader = errorModal.querySelector('.modal-header');
+        if (isError) {
+            modalHeader.classList.add('error');
+            errorModalTitle.innerHTML = '<i class="fas fa-exclamation-circle"></i> Error';
+        } else {
+            modalHeader.classList.remove('error');
+            errorModalTitle.innerHTML = '<i class="fas fa-check-circle"></i> Success';
+        }
         errorModal.classList.add('show');
     }
 
-    function hideError() {
+    function hideStatusModal() {
         errorModal.classList.remove('show');
     }
 
-    errorModalClose.addEventListener('click', hideError);
+    errorModalClose.addEventListener('click', hideStatusModal);
 
     // Close error modal when clicking outside
     errorModal.addEventListener('click', (e) => {
         if (e.target === errorModal) {
-            hideError();
+            hideStatusModal();
         }
     });
 
     // Close error modal when pressing escape
     document.addEventListener('keydown', (e) => {
         if (e.key === 'Escape' && errorModal.classList.contains('show')) {
-            hideError();
+            hideStatusModal();
         }
     });
 
@@ -78,19 +87,19 @@ document.addEventListener('DOMContentLoaded', function() {
                 if (response.ok) {
                     const result = await response.json();
                     if (result.success) {
-                        showError(result.message);
+                        showStatusModal(result.message, false);
                         // TODO: Poll job status endpoint when implemented
                         // For now, just refresh the feed list after a delay
                         setTimeout(handleFeeds, 5000);
                     } else {
-                        showError('OPML import failed: ' + result.message);
+                        showStatusModal('OPML import failed: ' + result.message, true);
                     }
                 } else {
-                    showError('Failed to import OPML file. Please try again.');
+                    showStatusModal('Failed to import OPML file. Please try again.', true);
                 }
             } catch (error) {
                 console.error('OPML import failed:', error);
-                showError('Failed to import OPML file. Please try again.');
+                showStatusModal('Failed to import OPML file. Please try again.', true);
             }
         }
         // Clear the input so the same file can be selected again

templates/index.html.tera

@@ -35,11 +35,11 @@
         </article>
     </dialog>
 
-    <!-- Error Modal -->
+    <!-- Status Modal -->
     <dialog class="modal" id="errorModal">
         <article class="modal-content">
-            <header class="modal-header error">
-                <h2><i class="fas fa-exclamation-circle"></i> Error</h2>
+            <header class="modal-header">
+                <h2 id="errorModalTitle"></h2>
             </header>
             <section class="modal-body">
                 <p id="errorModalMessage"></p>