refactor: image options box styling optimize

Author: abose

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -1779,9 +1779,11 @@ function RemoteFunctions(config = {}) {
                 </span>`;
             }
 
+            const selectedClass = imageGallerySelected ? 'class="selected"' : "";
+
             // if its an image element, we show the image gallery icon
             if (this.element && this.element.tagName.toLowerCase() === 'img') {
-                content += `<span data-action="image-gallery" title="${strings.imageGallery}">
+                content += `<span data-action="image-gallery" ${selectedClass} title="${strings.imageGallery}">
                     ${icons.imageGallery}
                 </span>`;
             }
@@ -1799,10 +1801,6 @@ function RemoteFunctions(config = {}) {
             </div>`;
 
             let styles = cssStyles.optionsBox;
-            // to highlight that in a different color, to show the selected state
-            if (imageGallerySelected) {
-                styles += cssStyles.optionsBoxImageGallerySelected;
-            }
 
             // add everything to the shadow box
             shadow.innerHTML = `<style>${styles}</style><div class="phoenix-more-options-box">${content}</div>`;

src/extensionsIntegrated/phoenix-pro/remote-styles.js

@@ -54,14 +54,12 @@ define(function (require, exports, module) {
                     height: 16px !important;
                     display: block !important;
                 }
-            `;
 
-    const optionsBoxImageGallerySelectedStyles = `
-                .node-options span[data-action="image-gallery"] {
+                .node-options span[data-action="image-gallery"].selected {
                   background-color: rgba(50, 50, 220, 0.5) !important;
                 }
 
-                .node-options span[data-action="image-gallery"]:hover {
+                .node-options span[data-action="image-gallery"].selected:hover {
                   background-color: rgba(100, 100, 230, 0.6) !important;
                 }
             `;
@@ -979,7 +977,6 @@ define(function (require, exports, module) {
 
     const remoteStyles = {
         optionsBox: optionsBoxStyles,
-        optionsBoxImageGallerySelected: optionsBoxImageGallerySelectedStyles,
         optionsBoxDropdown: optionsBoxDropdownStyles,
         infoBox: infoBoxStyles,
         toastMessage: toastMessageStyles,