Stylign and copy

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

@@ -19,11 +19,11 @@ AFRAME.registerComponent("pin-networked-object-button", {
 
       if (!pinned) {
         this.el.parentNode.setAttribute("clickable", "");
-        this.labelEl.setAttribute("text", { value: "pinned" });
+        this.labelEl.setAttribute("text", { value: "un-pin" });
         this.scene.emit("object_pinned", { el: this.targetEl });
       } else {
         this.el.parentNode.removeAttribute("clickable");
-        this.labelEl.setAttribute("text", { value: "unpinned" });
+        this.labelEl.setAttribute("text", { value: "pin" });
         this.scene.emit("object_unpinned", { el: this.targetEl });
       }
 

src/hub.html

@@ -104,7 +104,7 @@
                           <a-entity personal-space-invader="radius: 0.2; useMaterial: true;" bone-visibility>
                             <a-entity billboard>
                               <a-entity mixin="rounded-text-button" block-button visible-while-frozen ui-class-while-frozen position="0 0 .35"> </a-entity>
-                              <a-entity visible-while-frozen text="value:Block; width:2.5; align:center;" position="0 0 0.36"></a-entity>
+                              <a-entity visible-while-frozen text="value:block; width:2.5; align:center;" position="0 0 0.36"></a-entity>
                             </a-entity>
                           </a-entity>
                         </template>
@@ -153,8 +153,8 @@
                     pinnable
                 >
                     <a-entity class="action-buttons" visible-while-frozen>
-                        <a-entity mixin="rounded-text-button" pin-networked-object-button="labelSelector:.pin-button-label; hideWhenPinnedSelector:.hide-when-pinned" position="0 0.125 0.01"> </a-entity>
-                        <a-entity class="pin-button-label" text=" value:unpinned; width:1.75; align:center;" text-raycast-hack position="0 0.125 0.02"></a-entity>
+                        <a-entity mixin="rounded-text-action-button" pin-networked-object-button="labelSelector:.pin-button-label; hideWhenPinnedSelector:.hide-when-pinned" position="0 0.125 0.01"> </a-entity>
+                        <a-entity class="pin-button-label" text=" value:pin; width:1.75; align:center;" text-raycast-hack position="0 0.125 0.02"></a-entity>
                         <a-entity mixin="rounded-text-button" class="hide-when-pinned" remove-networked-object-button position="0 -0.125 0.01"> </a-entity>
                         <a-entity text=" value:remove; width:1.75; align:center;" class="hide-when-pinned" text-raycast-hack position="0 -0.125 0.02"></a-entity>
                     </a-entity>
@@ -234,7 +234,7 @@
                     haptic:#player-right-controller;
                     textHoverColor: #fff;
                     textColor: #fff;
-                    backgroundHoverColor: #ff3464;
+                    backgroundHoverColor: #aaa;
                     backgroundColor: #fff;"
                 slice9="
                     width: 0.45;
@@ -247,6 +247,24 @@
                     src: #action-button"
             ></a-mixin>
 
+            <a-mixin id="rounded-text-action-button"
+                text-button="
+                    haptic:#player-right-controller;
+                    textHoverColor: #fff;
+                    textColor: #fff;
+                    backgroundHoverColor: #ff0434;
+                    backgroundColor: #ff3464;"
+                slice9="
+                    width: 0.45;
+                    height: 0.2;
+                    left: 64;
+                    top: 64;
+                    right: 66;
+                    bottom: 66;
+                    opacity: 1.0;
+                    src: #action-button"
+            ></a-mixin>
+
             <a-mixin id="controller-super-hands"
                      super-hands="
                          colliderEvent: collisions;