Refactor UI styles for share dialog, prompt type selection, and acces…

…sibility improvements
TMHSDigital · Dec 23, 2024 · 71fb0e5 · 71fb0e5
1 parent 58083a3
commit 71fb0e5
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -936,7 +936,7 @@ footer {
     font-size: 0.9375rem;
     font-weight: 500;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: all 0.2s ease, opacity 0.15s ease;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
@@ -982,9 +982,11 @@ footer {
     color: white;
     font-size: 0.875rem;
     border-radius: 0.5rem;
-    white-space: nowrap;
-    z-index: 10;
+    white-space: pre-wrap;
+    max-width: 300px;
+    z-index: 1000;
     pointer-events: none;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .form-select option[title]:hover::after {
@@ -998,9 +1000,11 @@ footer {
     color: white;
     font-size: 0.875rem;
     border-radius: 0.5rem;
-    white-space: nowrap;
-    z-index: 10;
+    white-space: pre-wrap;
+    max-width: 300px;
+    z-index: 1000;
     pointer-events: none;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 /* Dark mode tooltip adjustments */

diff --git a/js/main.js b/js/main.js
@@ -45,13 +45,21 @@ class PromptUI {
     }
 
     updatePromptTypes(medium) {
+        // Show loading state
+        this.elements.promptType.disabled = true;
+        this.elements.promptType.style.opacity = '0.7';
+
         const types = mediumTypes[medium]?.types || {};
         this.elements.promptType.innerHTML = Object.entries(types)
             .map(([value, type]) => `
                 <option value="${value}" title="${type.description}">
                     ${type.name}
                 </option>
             `).join('');
+
+        // Remove loading state
+        this.elements.promptType.disabled = false;
+        this.elements.promptType.style.opacity = '1';
     }
 
     initializeFeatures() {