update

src/css/style.css

@@ -267,25 +267,19 @@ button:not(.icon-button):focus {
 }
 
 /* Notifications */
+/* Base styling without a forced display */
 #errorContainer,
 #successContainer {
   border-radius: 0.5rem;
   padding: 1rem;
   margin-bottom: 1rem;
+  align-items: center; /* Keep the rest of your styling */
+}
+
+/* When not hidden, display as flex */
+#errorContainer:not(.hidden),
+#successContainer:not(.hidden) {
   display: flex;
-  align-items: center;
-}
-
-#errorContainer {
-  background-color: rgb(220 38 38 / 0.1);
-  color: #fecaca;
-  border: 1px solid rgb(220 38 38 / 0.2);
-}
-
-#successContainer {
-  background-color: rgb(34 197 94 / 0.1);
-  color: #bbf7d0;
-  border: 1px solid rgb(34 197 94 / 0.2);
 }
 
 /* Responsive Design */

src/index.html

@@ -91,12 +91,10 @@
         </div>
       </header>
 
-      <!-- (Removed old loginSection) -->
-
       <!-- Error Container -->
       <div
         id="errorContainer"
-        class="hidden bg-red-100 text-red-800 p-4 rounded-md mb-4"
+        class="hidden bg-red-100 text-red-900 p-4 rounded-md mb-4"
       >
         <!-- Error messages will appear here -->
       </div>
@@ -104,7 +102,7 @@
       <!-- Success Container -->
       <div
         id="successContainer"
-        class="hidden bg-green-100 text-green-800 p-4 rounded-md mb-4"
+        class="hidden bg-green-100 text-green-900 p-4 rounded-md mb-4"
       >
         <!-- Success messages will appear here -->
       </div>

src/js/app.js

@@ -1336,31 +1336,38 @@ class bitvidApp {
   }
 
   showError(msg) {
-    console.error(msg);
-    if (this.errorContainer) {
-      this.errorContainer.textContent = msg;
-      this.errorContainer.classList.remove("hidden");
-      setTimeout(() => {
-        this.errorContainer.classList.add("hidden");
-        this.errorContainer.textContent = "";
-      }, 5000);
-    } else {
-      alert(msg);
+    if (!msg) {
+      // Remove any content, then hide
+      this.errorContainer.textContent = "";
+      this.errorContainer.classList.add("hidden");
+      return;
     }
+
+    // If there's a message, show it
+    this.errorContainer.textContent = msg;
+    this.errorContainer.classList.remove("hidden");
+
+    // Optional auto-hide after 5 seconds
+    setTimeout(() => {
+      this.errorContainer.textContent = "";
+      this.errorContainer.classList.add("hidden");
+    }, 5000);
   }
 
   showSuccess(msg) {
-    console.log(msg);
-    if (this.successContainer) {
-      this.successContainer.textContent = msg;
-      this.successContainer.classList.remove("hidden");
-      setTimeout(() => {
-        this.successContainer.classList.add("hidden");
-        this.successContainer.textContent = "";
-      }, 5000);
-    } else {
-      alert(msg);
+    if (!msg) {
+      this.successContainer.textContent = "";
+      this.successContainer.classList.add("hidden");
+      return;
     }
+
+    this.successContainer.textContent = msg;
+    this.successContainer.classList.remove("hidden");
+
+    setTimeout(() => {
+      this.successContainer.textContent = "";
+      this.successContainer.classList.add("hidden");
+    }, 5000);
   }
 
   log(msg) {