refactor: move options box styles to remote helper file

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -1534,68 +1534,10 @@ function RemoteFunctions(config = {}) {
                 </span>
             </div>`;
 
-            let styles = `
-                :host {
-                  all: initial !important;
-                }
-
-                .phoenix-more-options-box {
-                    background-color: #4285F4 !important;
-                    color: white !important;
-                    border-radius: 3px !important;
-                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
-                    font-size: 12px !important;
-                    font-family: Arial, sans-serif !important;
-                    z-index: 2147483646 !important;
-                    position: absolute !important;
-                    left: -1000px;
-                    top: -1000px;
-                    box-sizing: border-box !important;
-                }
-
-                .node-options {
-                    display: flex !important;
-                    align-items: center !important;
-                }
-
-                .node-options span {
-                    padding: 4px 3.9px !important;
-                    cursor: pointer !important;
-                    display: flex !important;
-                    align-items: center !important;
-                    border-radius: 0 !important;
-                }
-
-                .node-options span:first-child {
-                    border-radius: 3px 0 0 3px !important;
-                }
-
-                .node-options span:last-child {
-                    border-radius: 0 3px 3px 0 !important;
-                }
-
-                .node-options span:hover {
-                    background-color: rgba(255, 255, 255, 0.15) !important;
-                }
-
-                .node-options span > svg {
-                    width: 16px !important;
-                    height: 16px !important;
-                    display: block !important;
-                }
-            `;
-
+            let styles = config.styles.optionsBoxStyles;
             // to highlight that in a different color, to show the selected state
             if (imageGallerySelected) {
-                styles += `
-                    .node-options span[data-action="image-gallery"] {
-                      background-color: rgba(50, 50, 220, 0.5) !important;
-                    }
-
-                    .node-options span[data-action="image-gallery"]:hover {
-                      background-color: rgba(100, 100, 230, 0.6) !important;
-                    }
-                `;
+                styles += config.styles.optionsBoxImageGallerySelectedStyles;
             }
 
             // add everything to the shadow box

src/LiveDevelopment/RemoteHelper.js

@@ -183,6 +183,73 @@ define(function (require, exports, module) {
       `
     };
 
+    const optionsBoxStyles = `
+                :host {
+                  all: initial !important;
+                }
+
+                .phoenix-more-options-box {
+                    background-color: #4285F4 !important;
+                    color: white !important;
+                    border-radius: 3px !important;
+                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
+                    font-size: 12px !important;
+                    font-family: Arial, sans-serif !important;
+                    z-index: 2147483646 !important;
+                    position: absolute !important;
+                    left: -1000px;
+                    top: -1000px;
+                    box-sizing: border-box !important;
+                }
+
+                .node-options {
+                    display: flex !important;
+                    align-items: center !important;
+                }
+
+                .node-options span {
+                    padding: 4px 3.9px !important;
+                    cursor: pointer !important;
+                    display: flex !important;
+                    align-items: center !important;
+                    border-radius: 0 !important;
+                }
+
+                .node-options span:first-child {
+                    border-radius: 3px 0 0 3px !important;
+                }
+
+                .node-options span:last-child {
+                    border-radius: 0 3px 3px 0 !important;
+                }
+
+                .node-options span:hover {
+                    background-color: rgba(255, 255, 255, 0.15) !important;
+                }
+
+                .node-options span > svg {
+                    width: 16px !important;
+                    height: 16px !important;
+                    display: block !important;
+                }
+            `;
+
+    const optionsBoxImageGallerySelectedStyles = `
+                .node-options span[data-action="image-gallery"] {
+                  background-color: rgba(50, 50, 220, 0.5) !important;
+                }
+
+                .node-options span[data-action="image-gallery"]:hover {
+                  background-color: rgba(100, 100, 230, 0.6) !important;
+                }
+            `;
+
+    const remoteStyles = {
+        optionsBoxStyles: optionsBoxStyles,
+        optionsBoxImageGallerySelectedStyles: optionsBoxImageGallerySelectedStyles
+    };
+
     exports.remoteStrings = remoteStrings;
     exports.remoteIcons = remoteIcons;
+    exports.remoteStyles = remoteStyles;
 });

src/LiveDevelopment/main.js

@@ -91,8 +91,9 @@ define(function main(require, exports, module) {
         elemHighlights: "hover", // default value, this will get updated when the extension loads
         showRulerLines: false, // default value, this will get updated when the extension loads
         imageGalleryState: _getImageGalleryState(), // image gallery selected state
-        strings: RemoteHelper.remoteStrings, // strings that remote functions need
-        icons: RemoteHelper.remoteIcons // icons used by remote functions file
+        strings: RemoteHelper.remoteStrings,
+        icons: RemoteHelper.remoteIcons,
+        styles: RemoteHelper.remoteStyles
     };
 
     // Status labels/styles are ordered: error, not connected, progress1, progress2, connected.