From 295380c35eaba33882f726b716bdcb82a9a1289b Mon Sep 17 00:00:00 2001
From: Dan <UnrealDanMail@gmail.com>
Date: Fri, 16 Aug 2024 02:27:16 -0700
Subject: [PATCH] colorselect interactive preview update

---
 docs/assets/js/ColorSelect.js | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/docs/assets/js/ColorSelect.js b/docs/assets/js/ColorSelect.js
index 87a9908faa..a3986c1d91 100644
--- a/docs/assets/js/ColorSelect.js
+++ b/docs/assets/js/ColorSelect.js
@@ -109,17 +109,27 @@ function showBrightnessDropdown(slot, refinedHueValue, saturationValue) {
   const brightnessDropdown = createDropdown(brightnesses, function(_, finalColor) {
     const slotElement = document.getElementById(`slot${slot}`);
 
-    // Ensure the slot is fully transitioned from an "empty" to a "filled" state
-    slotElement.style.backgroundColor = finalColor;  // Apply the selected color as the background
-    slotElement.classList.remove('empty');           // Remove the 'empty' class
-    slotElement.classList.remove('add-slot');        // Ensure it's not treated as an add-slot
-    slotElement.style.cursor = 'pointer';            // Set cursor to pointer to indicate it's interactive
+    // Apply the selected color to the slot
+    slotElement.style.backgroundColor = finalColor;
+
+    // Ensure the slot is not treated as an empty or add slot anymore
+    slotElement.classList.remove('empty');
+    slotElement.classList.remove('add-slot');
+    slotElement.innerHTML = ''; // Remove any "+" sign or other content
+
+    // Set cursor to pointer to indicate it's interactive
+    slotElement.style.cursor = 'pointer';
+
+    // Make the slot editable after being added
     slotElement.onclick = function() {
-      editColor(slot);                             // Make sure it's editable after being added
+      editColor(slot);
     };
 
-    moveAddButton(slot); // Move the add button to the next available slot
-    closeDropdown(); // Ensure dropdown closes after final selection
+    // Move the add button to the next available slot
+    moveAddButton(slot);
+
+    // Ensure dropdown closes after final selection
+    closeDropdown();
   });
 
   document.body.appendChild(brightnessDropdown);