Add Generic infoBox help sign, convert valuePair to script setup

src/components/general/InfoBox.vue

@@ -0,0 +1,14 @@
+<template>
+  <div :title="hint">
+    <InfoIcon :size="18" />
+  </div>
+</template>
+
+<script setup>
+import InfoIcon from 'vue-material-design-icons/InformationOutline.vue';
+defineProps({
+  hint: { type: String, required: true },
+});
+</script>
+
+<style lang="scss" scoped></style>

src/components/general/ValuePair.vue

@@ -1,31 +1,23 @@
 <template>
-  <div class="row">
+  <div class="d-flex">
-    <label :class="classLabel">{{ description }}</label>
+    <div class="d-flex justify-content-between me-2" :class="classLabel">
+      <label>{{ description }}</label>
+      <InfoBox v-if="help" :hint="help" />
+    </div>
     <div :class="classValue">
       <slot></slot>
     </div>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from 'vue';
+import InfoBox from '@/components/general/InfoBox.vue';
 
-export default defineComponent({
+defineProps({
-  name: 'ValuePair',
+  description: { type: String, required: true },
-  props: {
+  help: { type: String, default: '', required: false },
-    description: {
+  classLabel: { type: String, default: 'col-4 fw-bold mb-0' },
-      type: String,
+  classValue: { type: String, default: 'col-8' },
-      required: true,
-    },
-    classLabel: {
-      type: String,
-      default: 'col-4 fw-bold mb-0',
-    },
-    classValue: {
-      type: String,
-      default: 'col-8',
-    },
-  },
 });
 </script>