change modal styling

src/modals/TextInputModal.ts

@@ -62,11 +62,16 @@ export class TextInputModal extends Modal {
       }, 0);
     }
     
-    // Change title based on whether we're editing an existing variant or creating a new one
-  const isEditing = this.variants.length > 1;
-  flexContainer.createEl('h2', {text: isEditing ? 'Edit Variants' : 'Create Variants'});
+    // Create header container with title and close button inline
+    const headerContainer = flexContainer.createDiv({
+      cls: 'variant-editor-header'
+    });
+    
+    // Add the title - always use "Manage Variants"
+    headerContainer.createEl('h2', {text: 'Manage Variants'});
     
     // Show the original text or selected variant
+    const isEditing = this.variants.length > 1;
     flexContainer.createEl('div', {
       text: isEditing ? `Selected variant: "${this.variants[this.activeVariantIndex]}"` : `Original text: "${this.originalText}"`,
       cls: 'variant-editor-original-text'
@@ -113,23 +118,11 @@ export class TextInputModal extends Modal {
     
     addVariantButton.buttonEl.addClass('variant-editor-add-button');
     
-    // Add explanation
-    flexContainer.createEl('div', {
-      text: 'Select which variant should be active with the radio buttons',
-      cls: 'variant-editor-hint'
-    });
-    
     // Add buttons container
     const buttonsContainer = flexContainer.createDiv({
       cls: 'variant-editor-buttons'
     });
     
-    // Cancel button
-    new ButtonComponent(buttonsContainer)
-      .setButtonText('Cancel')
-      .onClick(() => this.close())
-      .buttonEl.addClass('variant-editor-button');
-    
     // Commit active variant button
     new ButtonComponent(buttonsContainer)
       .setButtonText('Commit Active Variant')
@@ -283,33 +276,35 @@ export class TextInputModal extends Modal {
     
     // Create an input for each variant
     this.variants.forEach((variant, index) => {
+      // Add active class to the row if it's the active variant
+      const isActive = this.activeVariantIndex === index;
+      
       const variantRow = this.variantContainer.createDiv({
-        cls: 'variant-editor-row'
+        cls: isActive ? 'variant-editor-row variant-editor-row-active' : 'variant-editor-row'
       });
       
-      // Radio button for selecting active variant
-      const radioContainer = variantRow.createDiv({
-        cls: 'variant-editor-radio-container'
-      });
-      
-      const radioInput = radioContainer.createEl('input', {
-        cls: 'variant-editor-radio',
-        attr: {
-          type: 'radio',
-          name: 'active-variant',
-          id: `variant-${index}`,
-          checked: this.activeVariantIndex === index
-        }
-      });
-      
-      radioInput.addEventListener('change', () => {
-        if (radioInput.checked) {
+      // Make the entire row clickable to select this variant
+      variantRow.addEventListener('click', (e) => {
+        // Don't trigger when clicking on input or delete button
+        if (!(e.target instanceof HTMLInputElement) && 
+            !(e.target instanceof HTMLButtonElement)) {
+          // Set this as the active variant
           this.activeVariantIndex = index;
-          // Update the editor immediately when a radio button is clicked
+          
+          // Update all rows to reflect the new active state
+          this.renderVariantInputs();
+          
+          // Update the editor immediately when a variant is selected
           this.updateVariantsInEditor();
         }
       });
       
+      // Drag handle icon for reordering (visual only for now)
+      const dragHandle = variantRow.createDiv({
+        cls: 'variant-editor-drag-handle'
+      });
+      dragHandle.innerHTML = '≡';
+      
       // Label for the variant
       const variantLabel = variantRow.createDiv({
         cls: 'variant-editor-label',

styles.css

@@ -94,6 +94,19 @@
 }
 
 /* Modal styles */
+/* Header with title and close button inline */
+.variant-editor-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.variant-editor-header h2 {
+  margin: 0;
+  padding: 0;
+}
+
 .variant-editor-container {
   margin-bottom: 15px;
   max-height: 300px;
@@ -108,20 +121,63 @@
   padding: 6px;
   border-radius: 4px;
   background-color: var(--background-primary-alt);
-}
-
-.variant-editor-radio-container {
-  margin-right: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.variant-editor-radio {
-  width: 16px;
-  height: 16px;
   cursor: pointer;
-  accent-color: var(--interactive-accent);
+  position: relative;
+  transition: background-color 0.15s ease;
+}
+
+.variant-editor-row:hover {
+  background-color: var(--background-modifier-hover);
+}
+
+/* Rainbow border for active variant */
+.variant-editor-row-active {
+  position: relative;
+  background-color: var(--background-secondary);
+  margin-bottom: 8px;
+  border-radius: 4px;
+  /* Remove default border */
+  border: none;
+}
+
+/* Create rainbow border with pseudo-element */
+.variant-editor-row-active::before {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  background: linear-gradient(45deg, #ff5e5e, #ffdb4d, #52fa5a, #4db8ff, #c878ff);
+  border-radius: 6px;
+  z-index: -1;
+}
+
+/* Create inner background to make border appear as outline */
+.variant-editor-row-active::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--background-secondary);
+  border-radius: 4px;
+  z-index: -1;
+}
+
+/* Make sure the container doesn't clip the border */
+.variant-editor-container {
+  padding: 0;
+  overflow: visible;
+}
+
+/* Drag handle styling */
+.variant-editor-drag-handle {
+  font-size: 18px;
+  margin-right: 8px;
+  color: var(--text-muted);
+  cursor: grab;
 }
 
 .variant-editor-label {