Update the reload property button next to property controls

webapp/src/components/labThingsComponents/inputFromSchema.vue

@@ -11,9 +11,7 @@
           @focusout="focusOut"
           @keydown="keyDown"
         />
-        <a class="button-next-to-input" @click="requestUpdate">
-          <span class="material-symbols-outlined">refresh</span>
-        </a>
+        <sync-property-button @click="requestUpdate" />
       </div>
     </label>
     <div v-if="dataType == 'boolean'" class="input-and-buttons-container">
@@ -27,9 +25,7 @@
         />
         {{ label }}
       </label>
-      <a class="button-next-to-input" @click="requestUpdate">
-        <span class="material-symbols-outlined">refresh</span>
-      </a>
+      <sync-property-button @click="requestUpdate" />
     </div>
     <label v-if="dataType == 'number_array'" class="uk-form-label"
       >{{ label }}
@@ -44,9 +40,7 @@
           @focusout="focusOut"
           @keydown="keyDown"
         />
-        <a class="button-next-to-input" @click="requestUpdate">
-          <span class="material-symbols-outlined">refresh</span>
-        </a>
+        <sync-property-button @click="requestUpdate" />
       </div>
     </label>
     <label v-if="dataType == 'number_object'" class="uk-form-label"
@@ -62,9 +56,7 @@
             @focusout="focusOut"
             @keydown="keyDown"
           />
-          <a class="button-next-to-input" @click="requestUpdate">
-            <span class="material-symbols-outlined">refresh</span>
-          </a>
+          <sync-property-button @click="requestUpdate" />
         </div>
       </div>
     </label>
@@ -83,9 +75,15 @@
 </template>
 
 <script>
+import syncPropertyButton from "./syncPropertyButton.vue";
+
 export default {
   name: "InputFromSchema",
 
+  components: {
+    syncPropertyButton
+  },
+
   props: {
     dataSchema: {
       type: Object
@@ -217,11 +215,4 @@ export default {
   margin-right: 5px;
   width: 6em;
 }
-.button-next-to-input {
-  flex-grow: 0;
-  padding-left: 5px;
-  padding-right: 5px;
-  vertical-align: middle;
-  cursor: pointer;
-}
 </style>

webapp/src/components/labThingsComponents/syncPropertyButton.vue

@@ -0,0 +1,35 @@
+<template>
+  <a class="sync-button">
+    <span class="material-symbols-outlined sync-icon" title="Reload from microscope">
+      sync
+    </span>
+  </a>
+</template>
+
+<script>
+export default {
+  name: "syncPropertyButton"
+};
+</script>
+
+<style scoped>
+.sync-button {
+  flex-grow: 0;
+  padding-left: 5px;
+  padding-right: 5px;
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+.material-symbols-outlined.sync-icon{
+  color: #888;
+  transition: transform 0.3s ease, color 0.3s ease;
+}
+
+.material-symbols-outlined.sync-icon:hover{
+  transform: rotate(-90deg);
+  color: #c5247f;
+}
+
+
+</style>

webapp/src/components/tabContentComponents/controlComponents/paneControl.vue

@@ -85,9 +85,7 @@
                   type="number"
                   @keyup.enter="startMoveTask"
                 />
-                <a class="button-next-to-input" @click="updatePosition">
-                  <span class="material-symbols-outlined">refresh</span>
-                </a>
+                <sync-property-button @click="updatePosition" />
               </div>
               <p>
                 <action-button
@@ -177,13 +175,15 @@
 <script>
 import axios from "axios";
 import ActionButton from "../../labThingsComponents/actionButton.vue";
+import syncPropertyButton from "../../labThingsComponents/syncPropertyButton.vue";
 
 // Export main app
 export default {
   name: "PaneControl",
 
   components: {
-    ActionButton
+    ActionButton,
+    syncPropertyButton
   },
 
   data: function() {
@@ -375,11 +375,4 @@ export default {
   -webkit-appearance: none;
   margin: 0;
 }
-.button-next-to-input {
-  flex-grow: 0;
-  padding-left: 5px;
-  padding-right: 5px;
-  vertical-align: middle;
-  cursor: pointer;
-}
 </style>