From 582e38d93af76923a24f98014a8be161b73d77ef Mon Sep 17 00:00:00 2001
From: kyuketski <qt.ireuo@yandex.com>
Date: Sun, 31 Aug 2025 22:02:13 +0300
Subject: [PATCH] fix(ui): enable theme variable and fix select styling

- Activate CSS variable settings for theming in `Auto-Image.js`.
- Update dropdown class from `wplace-selector` to `wplace-settings-select`.
- Remove inline styles from the "Apply Settings" button.
- Delete obsolete `.wplace-selector` CSS rules from `auto-image-styles.css`.

Benefits:
- Ensures consistent theming across components.
- Simplifies styling management.
- Improves maintainability by removing inline styles.

Note:
- Update dependent components to use the new `wplace-settings-select` class.
---
 Auto-Image.js         | 43 ++++++++++++++++++++-----------------------
 auto-image-styles.css | 12 ------------
 2 files changed, 20 insertions(+), 35 deletions(-)

diff --git a/Auto-Image.js b/Auto-Image.js
index 314869b..aef4768 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -242,22 +242,22 @@
       } catch {}
     };
 
-    // setVar('--wplace-primary', theme.primary);
-    // setVar('--wplace-secondary', theme.secondary);
-    // setVar('--wplace-accent', theme.accent);
-    // setVar('--wplace-text', theme.text);
-    // setVar('--wplace-highlight', theme.highlight);
-    // setVar('--wplace-success', theme.success);
-    // setVar('--wplace-error', theme.error);
-    // setVar('--wplace-warning', theme.warning);
-    //
-    // // Typography + look
-    // setVar('--wplace-font', theme.fontFamily || "'Segoe UI', Roboto, sans-serif");
-    // setVar('--wplace-radius', '' + (theme.borderRadius || '12px'));
-    // setVar('--wplace-border-style', '' + (theme.borderStyle || 'solid'));
-    // setVar('--wplace-border-width', '' + (theme.borderWidth || '1px'));
-    // setVar('--wplace-backdrop', '' + (theme.backdropFilter || 'blur(10px)'));
-    // setVar('--wplace-border-color', 'rgba(255,255,255,0.1)');
+    setVar('--wplace-primary', theme.primary);
+    setVar('--wplace-secondary', theme.secondary);
+    setVar('--wplace-accent', theme.accent);
+    setVar('--wplace-text', theme.text);
+    setVar('--wplace-highlight', theme.highlight);
+    setVar('--wplace-success', theme.success);
+    setVar('--wplace-error', theme.error);
+    setVar('--wplace-warning', theme.warning);
+
+    // Typography + look
+    setVar('--wplace-font', theme.fontFamily || "'Segoe UI', Roboto, sans-serif");
+    setVar('--wplace-radius', '' + (theme.borderRadius || '12px'));
+    setVar('--wplace-border-style', '' + (theme.borderStyle || 'solid'));
+    setVar('--wplace-border-width', '' + (theme.borderWidth || '1px'));
+    setVar('--wplace-backdrop', '' + (theme.backdropFilter || 'blur(10px)'));
+    setVar('--wplace-border-color', 'rgba(255,255,255,0.1)');
   }
 
   const saveThemePreference = () => {
@@ -3706,7 +3706,7 @@
               <i class="fas fa-dice wplace-icon-dice"></i>
               Batch Mode
             </label>
-            <select id="batchModeSelect" class="wplace-selector">
+            <select id="batchModeSelect" class="wplace-settings-select">
               <option value="normal" class="wplace-settings-option">📦 Normal (Fixed Size)</option>
               <option value="random" class="wplace-settings-option">🎲 Random (Range)</option>
             </select>
@@ -3769,7 +3769,7 @@
               <i class="fas fa-th wplace-icon-table"></i>
               Generation Mode
             </label>
-            <select id="coordinateModeSelect" class="wplace-selector">
+            <select id="coordinateModeSelect" class="wplace-settings-select">
               <option value="rows" class="wplace-settings-option">📏 Rows (Horizontal Lines)</option>
               <option value="columns" class="wplace-settings-option">📐 Columns (Vertical Lines)</option>
               <option value="circle-out" class="wplace-settings-option">⭕ Circle Out (Center → Edges)</option>
@@ -3785,7 +3785,7 @@
               <i class="fas fa-compass wplace-icon-compass"></i>
               Starting Direction
             </label>
-            <select id="coordinateDirectionSelect" class="wplace-selector">
+            <select id="coordinateDirectionSelect" class="wplace-settings-select">
               <option value="top-left" class="wplace-settings-option">↖️ Top-Left</option>
               <option value="top-right" class="wplace-settings-option">↗️ Top-Right</option>
               <option value="bottom-left" class="wplace-settings-option">↙️ Bottom-Left</option>
@@ -3923,10 +3923,7 @@
       </div>
 
         <div class="wplace-settings-footer">
-             <button id="applySettingsBtn" class="wplace-settings-apply-btn" style="
-              width: 100%;
-                ${CONFIG.CSS_CLASSES.BUTTON_PRIMARY}
-          ">
+             <button id="applySettingsBtn" class="wplace-settings-apply-btn">
                  <i class="fas fa-check"></i> ${Utils.t('applySettings')}
           </button>
         </div>
diff --git a/auto-image-styles.css b/auto-image-styles.css
index 147a17f..896ade6 100644
--- a/auto-image-styles.css
+++ b/auto-image-styles.css
@@ -1923,15 +1923,3 @@
   color: var(--wplace-icon-palette);
   margin-right: 6px;
 }
-
-.wplace-selector {
-  width: 100%;
-  padding: 10px 12px;
-  background: var(--wplace-bg-input);
-  color: var(--wplace-text);
-  border: 1px solid var(--wplace-border-subtle);
-  border-radius: 8px;
-  font-size: 13px;
-  outline: none;
-  cursor: pointer;
-}