Feature/copy icon (#406)

* add copy tooltip

* transparent scrollbar

* add version to header

* localize

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/src/components/UI/Buttons/TheCopyButton.vue

@@ -0,0 +1,69 @@
+<template>
+  <v-tooltip
+    ref="copyToolTip"
+    v-model="show"
+    color="success lighten-1"
+    right
+    :open-on-hover="false"
+    :open-on-click="true"
+    close-delay="500"
+    transition="slide-y-transition"
+  >
+    <template v-slot:activator="{ on }">
+      <v-btn
+        icon
+        color="primary"
+        @click="
+          on.click;
+          textToClipboard();
+        "
+        @blur="on.blur"
+        retain-focus-on-click
+      >
+        <v-icon>mdi-content-copy</v-icon>
+      </v-btn>
+    </template>
+    <span>
+      <v-icon left dark>
+        mdi-clipboard-check
+      </v-icon>
+      {{ $t('general.coppied')}}!
+      
+    </span>
+  </v-tooltip>
+</template>
+
+<script>
+export default {
+  props: {
+    copyText: {
+      default: "Default Copy Text",
+    },
+  },
+  data() {
+    return {
+      show: false,
+    };
+  },
+
+  methods: {
+    toggleBlur() {
+      this.$refs.copyToolTip.deactivate();
+    },
+    textToClipboard() {
+      this.show = true;
+      const copyText = this.copyText;
+      navigator.clipboard.writeText(copyText).then(
+        () => console.log("Copied", copyText),
+        () => console.log("Copied Failed", copyText)
+      );
+      setTimeout(() => {
+        this.toggleBlur();
+      }, 500);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>