Refactor dialog styles: unify dialog class names and enhance confirmation/error dialog styling

Author: MaxITService

common-ui-elements/dark-theme.css

@@ -72,8 +72,7 @@ body.dark-theme button.danger:hover {
 /* ------------------------------------------------------------------------- */
 /* Dark Theme Overrides for Dynamic Prompt Dialogs                           */
 /* ------------------------------------------------------------------------- */
-body.dark-theme .dialog-confirmation,
-body.dark-theme .dialog-error {
+body.dark-theme .dialog {
     background-color: #333;
     /* Dark background for dialogs */
     color: #fff;
@@ -87,8 +86,7 @@ body.dark-theme .dialog-error {
     /* Rounded corners */
 }
 
-body.dark-theme .dialog-confirmation button,
-body.dark-theme .dialog-error button {
+body.dark-theme .dialog button {
     background-color: #444;
     /* Dark button background */
     color: #fff;
@@ -103,8 +101,7 @@ body.dark-theme .dialog-error button {
 }
 
 /* Button hover states for dialogs */
-body.dark-theme .dialog-confirmation button:hover,
-body.dark-theme .dialog-error button:hover {
+body.dark-theme .dialog button:hover {
     background-color: #555;
     border-color: #777;
 }

popup-page-styles/popup-components.css

@@ -135,79 +135,79 @@ Key areas:
    to inherit the base button styles from popup-buttons.css */
 
 /* ------------------------------------------------------------------------- */
-/* Confirmation Dialog Styling                                               */
+/* Dialog Base Styling                                                       */
 /* ------------------------------------------------------------------------- */
-.dialog-confirmation {
+.dialog {
     margin-top: 16px;
     padding: 16px;
-    border: 1px solid var(--primary-color);
     border-radius: 6px;
-    background-color: #f0f8ff;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    border-width: 1px;
+    border-style: solid;
 }
 
-.dialog-confirmation p {
-    margin: 0 0 16px 0;
-    color: var(--text-color);
+.dialog p {
     font-size: 14px;
 }
 
-.dialog-confirmation button {
+.dialog button {
     margin-right: 12px;
     padding: 8px 16px;
     border: none;
     border-radius: 4px;
-    background-color: var(--primary-color);
     color: #ffffff;
     cursor: pointer;
     transition: background-color var(--transition-duration) ease, transform var(--transition-duration) ease;
 }
 
-.dialog-confirmation button:hover {
-    background-color: #6a4abd;
+.dialog button:hover {
     transform: scale(1.02);
 }
 
-.dialog-confirmation button:active {
+.dialog button:active {
     transform: scale(0.98);
 }
 
+/* ------------------------------------------------------------------------- */
+/* Confirmation Dialog Styling                                               */
+/* ------------------------------------------------------------------------- */
+.dialog-confirmation {
+    border-color: var(--primary-color);
+    background-color: #f0f8ff;
+}
+
+.dialog-confirmation p {
+    margin: 0 0 16px 0;
+    color: var(--text-color);
+}
+
+.dialog-confirmation button {
+    background-color: var(--primary-color);
+}
+
+.dialog-confirmation button:hover {
+    background-color: #6a4abd;
+}
+
 /* ------------------------------------------------------------------------- */
 /* Error Dialog Styling                                                      */
 /* ------------------------------------------------------------------------- */
 .dialog-error {
-    margin-top: 16px;
-    padding: 16px;
-    border: 1px solid var(--danger-color);
-    border-radius: 6px;
+    border-color: var(--danger-color);
     background-color: #ffe6e6;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
 .dialog-error p {
     margin: 0;
     color: var(--danger-color);
-    font-size: 14px;
 }
 
 .dialog-error button {
-    margin-right: 12px;
-    padding: 8px 16px;
-    border: none;
-    border-radius: 4px;
     background-color: var(--danger-color);
-    color: #ffffff;
-    cursor: pointer;
-    transition: background-color var(--transition-duration) ease, transform var(--transition-duration) ease;
 }
 
 .dialog-error button:hover {
     background-color: #c9302c;
-    transform: scale(1.02);
-}
-
-.dialog-error button:active {
-    transform: scale(0.98);
 }
 
 /* ------------------------------------------------------------------------- */

popup.html

@@ -281,7 +281,7 @@ <h2>Backup &amp; Restore</h2>
           />
         </div>
         <!-- Confirmation Div -->
-        <div id="confirmationDiv" class="dialog-confirmation" style="display: none">
+        <div id="confirmationDiv" class="dialog 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="dialog-error" style="display: none">
+        <div id="errorDiv" class="dialog dialog-error" style="display: none">
           <p>
             Error loading file. Please ensure the file is a valid JSON profile.
           </p>