Add a mini menu, make sync button a generic button, and allow reseting properties

webapp/src/components/genericComponents/iconButton.vue

@@ -0,0 +1,64 @@
+<template>
+  <a class="sync-button" @click.prevent="$emit('click')">
+    <span class="material-symbols-outlined sync-icon">
+      {{ icon }}
+    </span>
+    <span v-if="showLabel" class="icon-label ofm-hidden-link">
+      {{ label }}
+    </span>
+  </a>
+</template>
+
+<script>
+export default {
+  name: "IconButton",
+
+  props: {
+    icon: {
+      type: String,
+      default: "sync",
+    },
+    showLabel: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: "",
+    },
+  },
+
+  emits: ["click"],
+};
+</script>
+
+<style scoped>
+.sync-button {
+  display: inline-flex;
+  flex-grow: 0;
+  padding-left: 5px;
+  padding-right: 5px;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  text-decoration: none !important;
+}
+
+.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;
+  text-decoration: none !important;
+}
+
+.icon-label {
+  padding-left: 10px;
+  padding-top: 3px;
+}
+</style>