Refactor dialog and toast styles: rename classes for consistency and update dark theme overrides

Author: MaxITService

common-ui-elements/dark-theme.css

@@ -72,8 +72,8 @@ body.dark-theme button.danger:hover {
 /* ------------------------------------------------------------------------- */
 /* Dark Theme Overrides for Dynamic Prompt Dialogs                           */
 /* ------------------------------------------------------------------------- */
-body.dark-theme .confirmation,
-body.dark-theme .error {
+body.dark-theme .dialog-confirmation,
+body.dark-theme .dialog-error {
     background-color: #333;
     /* Dark background for dialogs */
     color: #fff;
@@ -87,8 +87,8 @@ body.dark-theme .error {
     /* Rounded corners */
 }
 
-body.dark-theme .confirmation button,
-body.dark-theme .error button {
+body.dark-theme .dialog-confirmation button,
+body.dark-theme .dialog-error button {
     background-color: #444;
     /* Dark button background */
     color: #fff;
@@ -103,8 +103,8 @@ body.dark-theme .error button {
 }
 
 /* Button hover states for dialogs */
-body.dark-theme .confirmation button:hover,
-body.dark-theme .error button:hover {
+body.dark-theme .dialog-confirmation button:hover,
+body.dark-theme .dialog-error button:hover {
     background-color: #555;
     border-color: #777;
 }
@@ -135,7 +135,8 @@ body.dark-theme #importProfile {
 }
 
 /* Dark theme toast styling */
-body.dark-theme .toast:not(.success):not(.error):not(.info) {
+/* In dark mode, apply neutral background to base .toast unless it has one of the explicit type classes */
+body.dark-theme .toast:not(.toast-success):not(.toast-error):not(.toast-info) {
     background: rgba(50, 50, 50, 0.9);
     color: #eee;
 }

popup-page-scripts/popup-page-visuals.js

@@ -18,7 +18,19 @@ const toastContainer = document.getElementById('toastContainer');
  */
 function showToast(message, type = 'info', duration = 3000) {
     const toast = document.createElement('div');
-    toast.classList.add('toast', type);
+    toast.classList.add('toast');
+
+    // Map legacy types to new, specific classes
+    const typeClassMap = {
+        success: 'toast-success',
+        error: 'toast-error',
+        info: 'toast-info'
+    };
+
+    if (type && typeClassMap[type]) {
+        toast.classList.add(typeClassMap[type]);
+    }
+
     toast.textContent = message;
 
     toastContainer.appendChild(toast);

popup-page-styles/popup-components.css

@@ -156,7 +156,7 @@ Key areas:
 /* ------------------------------------------------------------------------- */
 /* Confirmation Dialog Styling                                               */
 /* ------------------------------------------------------------------------- */
-.confirmation {
+.dialog-confirmation {
     margin-top: 16px;
     padding: 16px;
     border: 1px solid var(--primary-color);
@@ -165,13 +165,13 @@ Key areas:
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
-.confirmation p {
+.dialog-confirmation p {
     margin: 0 0 16px 0;
     color: var(--text-color);
     font-size: 14px;
 }
 
-.confirmation button {
+.dialog-confirmation button {
     margin-right: 12px;
     padding: 8px 16px;
     border: none;
@@ -182,19 +182,19 @@ Key areas:
     transition: background-color var(--transition-duration) ease, transform var(--transition-duration) ease;
 }
 
-.confirmation button:hover {
+.dialog-confirmation button:hover {
     background-color: #6a4abd;
     transform: scale(1.02);
 }
 
-.confirmation button:active {
+.dialog-confirmation button:active {
     transform: scale(0.98);
 }
 
 /* ------------------------------------------------------------------------- */
 /* Error Dialog Styling                                                      */
 /* ------------------------------------------------------------------------- */
-.error {
+.dialog-error {
     margin-top: 16px;
     padding: 16px;
     border: 1px solid var(--danger-color);
@@ -203,13 +203,13 @@ Key areas:
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
-.error p {
+.dialog-error p {
     margin: 0;
     color: var(--danger-color);
     font-size: 14px;
 }
 
-.error button {
+.dialog-error button {
     margin-right: 12px;
     padding: 8px 16px;
     border: none;
@@ -220,12 +220,12 @@ Key areas:
     transition: background-color var(--transition-duration) ease, transform var(--transition-duration) ease;
 }
 
-.error button:hover {
+.dialog-error button:hover {
     background-color: #c9302c;
     transform: scale(1.02);
 }
 
-.error button:active {
+.dialog-error button:active {
     transform: scale(0.98);
 }
 
@@ -258,15 +258,16 @@ Key areas:
     transform: translateY(0);
 }
 
-.toast.success {
+/* New toast type classes */
+.toast-success {
     background: #4BB543;
 }
 
-.toast.error {
+.toast-error {
     background: #FF3333;
 }
 
-.toast.info {
+.toast-info {
     background: #3333FF;
 }
 

popup.html

@@ -281,7 +281,7 @@ <h2>Backup &amp; Restore</h2>
           />
         </div>
         <!-- Confirmation Div -->
-        <div id="confirmationDiv" class="confirmation" style="display: none">
+        <div id="confirmationDiv" class="dialog-confirmation" style="display: none">
           <p>
             File loaded successfully, but a profile with the same name already
             exists in the system. Do you want to overwrite the existing profile?
@@ -290,7 +290,7 @@ <h2>Backup &amp; Restore</h2>
           <button id="cancelOverwrite">No</button>
         </div>
         <!-- Error Message Div -->
-        <div id="errorDiv" class="error" style="display: none">
+        <div id="errorDiv" class="dialog-error" style="display: none">
           <p>
             Error loading file. Please ensure the file is a valid JSON profile.
           </p>