Show different colors on pin vs unpin, fix issue with hovers not working because of custom shader

src/components/pin-networked-object-button.js

@@ -61,6 +61,8 @@ AFRAME.registerComponent("pin-networked-object-button", {
     const isPinned = this.targetEl.getAttribute("pinnable") && this.targetEl.getAttribute("pinnable").pinned;
 
     this.labelEl.setAttribute("text", "value", isPinned ? "un-pin" : "pin");
+    this.el.setAttribute("text-button", "backgroundColor", isPinned ? "#fff" : "#ff0520");
+    this.el.setAttribute("text-button", "backgroundHoverColor", isPinned ? "#aaa" : "#cc0515");
 
     this.el.parentNode.querySelectorAll(this.data.hideWhenPinnedSelector).forEach(hideEl => {
       hideEl.setAttribute("visible", !isPinned);

src/hub.html

@@ -257,8 +257,8 @@
                     haptic:#player-right-controller;
                     textHoverColor: #fff;
                     textColor: #fff;
-                    backgroundHoverColor: #ff0434;
-                    backgroundColor: #ff3464;"
+                    backgroundHoverColor: #cc0515;
+                    backgroundColor: #ff0520;"
                 slice9="
                     width: 0.45;
                     height: 0.2;

src/utils/media-utils.js

@@ -156,6 +156,7 @@ export function injectCustomShaderChunks(obj) {
     // hover/toggle state, so for now just skip these while we figure out a more correct
     // solution.
     if (object.el.classList.contains("ui")) return;
+    if (object.el.getAttribute("text-button")) return;
 
     object.material = object.material.clone();
     object.material.onBeforeCompile = shader => {