bfg-common 1.4.413 → 1.4.414

package/assets/localization/local_be.json

@@ -2831,6 +2831,9 @@
   },
   "feedback": {
     "additionalDetailsHelp": "Даведка па дадатковых звестках",
-    "additionalDetailsTooltip": "Каб атрымаць дадатковую інфармацыю, вы можаце альбо зрабіць скрыншот экрана, альбо загрузіць выяву ў фармаце .png або .jpeg."
+    "additionalDetailsTooltip": "Каб атрымаць дадатковую інфармацыю, вы можаце альбо зрабіць скрыншот экрана, альбо загрузіць выяву ў фармаце .png або .jpeg.",
+    "annotate": "Анатаваць",
+    "annotateScreenshot": "Анатаваць скрыншот",
+    "annotateImage": "Анатаваць малюнак"
   }
 }

package/assets/localization/local_en.json

@@ -2835,6 +2835,9 @@
   },
   "feedback": {
     "additionalDetailsHelp": "Additional Details Help",
-    "additionalDetailsTooltip": "For additional details, you can either take a screenshot of your screen or upload an image in .png or .jpeg format."
+    "additionalDetailsTooltip": "For additional details, you can either take a screenshot of your screen or upload an image in .png or .jpeg format.",
+    "annotate": "Annotate",
+    "annotateScreenshot": "Annotate Screenshot",
+    "annotateImage": "Annotate Image"
   }
 }

package/assets/localization/local_hy.json

@@ -2835,6 +2835,9 @@
   },
   "feedback": {
     "additionalDetailsHelp": "Լրացուցիչ մանրամասներ Օգնություն",
-    "additionalDetailsTooltip": "Լրացուցիչ մանրամասների համար կարող եք կամ լուսանկարել ձեր էկրանը կամ վերբեռնել պատկեր .png կամ .jpeg ձևաչափով:"
+    "additionalDetailsTooltip": "Լրացուցիչ մանրամասների համար կարող եք կամ լուսանկարել ձեր էկրանը կամ վերբեռնել պատկեր .png կամ .jpeg ձևաչափով:",
+    "annotate": "Նշում",
+    "annotateScreenshot": "Նշել սքրինշոթը",
+    "annotateImage": "Նշել պատկերը"
   }
 }

package/assets/localization/local_kk.json

@@ -2834,6 +2834,9 @@
   },
   "feedback": {
     "additionalDetailsHelp": "Қосымша мәліметтер анықтамасы",
-    "additionalDetailsTooltip": "Қосымша мәліметтер алу үшін экранның скриншотын түсіруге немесе суретті .png немесе .jpeg пішімінде жүктеп салуға болады."
+    "additionalDetailsTooltip": "Қосымша мәліметтер алу үшін экранның скриншотын түсіруге немесе суретті .png немесе .jpeg пішімінде жүктеп салуға болады.",
+    "annotate": "Аннотация жазу",
+    "annotateScreenshot": "Скриншотқа түсініктеме жазу",
+    "annotateImage": "Суретке түсініктеме жазу"
   }
 }

package/assets/localization/local_ru.json

@@ -2836,6 +2836,9 @@
   },
   "feedback": {
     "additionalDetailsHelp": "Дополнительная информация Помощь",
-    "additionalDetailsTooltip": "Для получения дополнительной информации вы можете сделать снимок экрана или загрузить изображение в формате .png или .jpeg."
+    "additionalDetailsTooltip": "Для получения дополнительной информации вы можете сделать снимок экрана или загрузить изображение в формате .png или .jpeg.",
+    "annotate": "Аннотировать",
+    "annotateScreenshot": "Аннотировать снимок экрана",
+    "annotateImage": "Аннотировать изображение"
   }
 }

package/assets/localization/local_zh.json

@@ -2833,6 +2833,9 @@
   },
   "feedback": {
     "additionalDetailsHelp": "其他详细信息帮助",
-    "additionalDetailsTooltip": "有关更多详细信息，您可以截取屏幕截图或上传 .png 或 .jpeg 格式的图像。"
+    "additionalDetailsTooltip": "有关更多详细信息，您可以截取屏幕截图或上传 .png 或 .jpeg 格式的图像。",
+    "annotate": "注释",
+    "annotateScreenshot": "注释屏幕截图",
+    "annotateImage": "注释图像"
   }
 }

package/components/common/layout/theHeader/feedback/lib/config/sendFeedback.ts

@@ -1,4 +1,5 @@
 import type { UI_I_FeedbackForm } from '~/components/common/feedback/lib/models/interfaces'
+// import type { UI_I_FeedbackCanvasOptions } from '~/components/common/layout/theHeader/feedback/new/lib/models/interfaces'
 export const feedbackDefaultFormFunc = (): UI_I_FeedbackForm => {
   return {
     description: '',
@@ -7,3 +8,10 @@ export const feedbackDefaultFormFunc = (): UI_I_FeedbackForm => {
     image: '', // base64
   }
 }
+
+// export const feedbackCanvasDefaultOptions = (): UI_I_FeedbackCanvasOptions => {
+//   return {
+//     isAnnotateImage: false,
+//     hasTakeScreenshot: false,
+//   }
+// }

package/components/common/layout/theHeader/feedback/new/New.vue

@@ -2,40 +2,46 @@
   <Teleport to="body">
     <ui-modal
       show
-      width="560px"
+      :width="!options.isAnnotateImage ? '560px' : '880px'"
       test-id="feedback-modal"
-      :title="localization.common.sendFeedback"
+      :title="title"
       class="feedback"
       @hide="onHideModal"
     >
       <template #content>
         <ui-modal-block-standard>
-          <common-layout-the-header-feedback-new-subtitle />
+          <template v-if="!options.isAnnotateImage">
+            <common-layout-the-header-feedback-new-subtitle />
 
-          <common-layout-the-header-feedback-new-tabs
-            v-model="selectedTab"
-            class="metrics-tabs"
-          />
-
-          <div
-            v-if="selectedTab === 'light-bulb'"
-            class="feedback__visit-portal"
-          >
-            {{ localization.common.useOurExternalIdeasPortal }}
-          </div>
-
-          <template v-else>
-            <common-layout-the-header-feedback-new-description
-              v-model="feedbackForm.description"
-              v-model:is-valid="isValidForm"
-              :selected-tab="selectedTab"
+            <common-layout-the-header-feedback-new-tabs
+              v-model="selectedTab"
+              class="metrics-tabs"
             />
 
-            <common-layout-the-header-feedback-new-email
-              v-model="feedbackForm.email"
-            />
+            <div
+              v-if="selectedTab === 'light-bulb'"
+              class="feedback__visit-portal"
+            >
+              {{ localization.common.useOurExternalIdeasPortal }}
+            </div>
+          </template>
 
-            <common-layout-the-header-feedback-new-additional-details />
+          <template v-if="selectedTab !== 'light-bulb'">
+            <template v-if="!options.isAnnotateImage">
+              <common-layout-the-header-feedback-new-description
+                v-model="feedbackForm.description"
+                v-model:is-valid="isValidForm"
+                :selected-tab="selectedTab"
+              />
+
+              <common-layout-the-header-feedback-new-email
+                v-model="feedbackForm.email"
+              />
+            </template>
+
+            <common-layout-the-header-feedback-new-additional-details
+              v-model="options"
+            />
           </template>
         </ui-modal-block-standard>
       </template>
@@ -57,7 +63,7 @@
           <ui-button
             test-id="feedback-modal-submit-btn"
             size="md"
-            :disabled="!selectedTab"
+            :disabled="isDisabledButton"
             min-width="96px"
             @click="onSubmit"
           >
@@ -80,6 +86,7 @@
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_FeedbackForm } from '~/components/common/feedback/lib/models/interfaces'
 import type { UI_T_FeedbackTab } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/types'
+import type { UI_I_FeedbackCanvasOptions } from '~/components/common/layout/theHeader/feedback/new/lib/models/interfaces'
 
 const feedbackForm = defineModel<UI_I_FeedbackForm>({ required: true })
 const emits = defineEmits<{
@@ -89,17 +96,40 @@ const emits = defineEmits<{
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const isValidForm = ref<boolean>(true)
 const selectedTab = ref<UI_T_FeedbackTab>()
+const isValidForm = ref<boolean>(true)
+const options = ref<UI_I_FeedbackCanvasOptions>({
+  isAnnotateImage: false,
+  hasTakeScreenshot: false,
+})
+
+const title = computed<string>(() => {
+  const { common, feedback } = localization.value
+
+  return !options.value.isAnnotateImage
+    ? common.sendFeedback
+    : options.value.hasTakeScreenshot
+    ? feedback.annotateScreenshot
+    : feedback.annotateImage
+})
+const modalFooterButtonNames = computed<string>(() => {
+  const { visitIdeasPortal, send, save } = localization.value.common
+
+  return options.value.isAnnotateImage
+    ? save
+    : selectedTab.value === 'light-bulb'
+    ? visitIdeasPortal
+    : send
+})
 
-const modalFooterButtonNames = computed(() => {
-  return selectedTab.value === 'light-bulb'
-    ? localization.value.common.visitIdeasPortal
-    : localization.value.common.send
+const isDisabledButton = computed<boolean>(() => {
+  return !options.value.isAnnotateImage && !selectedTab.value
 })
 
 const onHideModal = (): void => {
-  emits('hide')
+  !options.value.isAnnotateImage
+    ? emits('hide')
+    : (options.value.isAnnotateImage = false)
 }
 const onSubmit = (): void => {
   if (selectedTab.value === 'light-bulb') {
@@ -115,20 +145,10 @@ const onSubmit = (): void => {
 }
 </script>
 
-<style lang="scss">
-:root {
-  --description-color: #414b57;
-  --link-visited-color: #5659b8;
-}
-
-:root.dark-theme {
-  --description-color: #adbbc4;
-  --link-visited-color: #49afd9;
-}
-
+<style lang="scss" scoped>
 .feedback {
   &__visit-portal {
-    color: #4d5d69;
+    color: var(--feedback-text-color);
     font-size: 13px;
     font-weight: 400;
     line-height: 15.73px;
@@ -139,3 +159,13 @@ const onSubmit = (): void => {
   }
 }
 </style>
+<style lang="scss">
+:root {
+  --feedback-text-color: #4d5d69;
+  --feedback-tooltip-close-color: #213444;
+}
+:root.dark-theme {
+  --feedback-text-color: #e9eaec;
+  --feedback-tooltip-close-color: #e9eaec;
+}
+</style>

package/components/common/layout/theHeader/feedback/new/additionalDetails/AdditionalDetails.vue

@@ -1,14 +1,29 @@
 <template>
   <div class="additional-details">
-    <common-layout-the-header-feedback-new-additional-details-headline />
+    <template v-if="!optionsModel.isAnnotateImage">
+      <common-layout-the-header-feedback-new-additional-details-headline />
 
-    <div class="flex gap-4 button-container">
+      <ui-alert
+        v-if="optionsModel.hasTakeScreenshot"
+        test-id="additional-details-info-alert"
+        :messages="[localization.common.screenshotQualityMayVary]"
+        type="info"
+        class="additional-details__alert"
+      ></ui-alert>
+    </template>
+
+    <div
+      v-if="!optionsModel.hasTakeScreenshot"
+      class="flex gap-4 button-container"
+    >
       <ui-button
         test-id="feedback-take-screenshot-btn"
         size="md"
-        type="grey"
+        type="default"
+        variant="outline"
         min-width="96px"
         class="take-screenshot"
+        @click="onTakeScreenshot"
       >
         <ui-icon
           name="take-screenshot"
@@ -22,7 +37,8 @@
       <ui-button
         test-id="feedback-upload-file-btn"
         size="md"
-        type="grey"
+        type="default"
+        variant="outline"
         min-width="96px"
         class="upload-image"
       >
@@ -41,30 +57,393 @@
           type="file"
           accept=".png, .jpeg"
           data-id="feedback-file-load-input"
+          @change="onUploadFile"
+        />
+      </ui-button>
+    </div>
+
+    <div v-if="optionsModel.isAnnotateImage" class="drawer-btn-container">
+      <div>
+        <ui-button
+          test-id="feedback-use-red-marker-button"
+          size="sm"
+          type="default"
+          variant="outline"
+          class="btn marker"
+          @click="onUseRedMarker"
+        >
+          <ui-icon
+            name="marker"
+            width="16"
+            height="16"
+            class="feedback__btn-icon"
+          />
+          {{ localization.common.useRedMarker }}
+        </ui-button>
+
+        <ui-button
+          test-id="feedback-use-grey-marker-button"
+          size="sm"
+          type="default"
+          variant="outline"
+          class="btn eraser"
+          @click="onUseGrayEraser"
+        >
+          <ui-icon
+            name="grey-eraser"
+            width="16"
+            height="16"
+            class="feedback__btn-icon"
+          />
+          {{ localization.common.useGrayEraser }}
+        </ui-button>
+        <ui-button
+          test-id="feedback-undo-button"
+          size="sm"
+          type="default"
+          variant="outline"
+          class="btn undo"
+          @click="onUndoLast"
+        >
+          <ui-icon
+            name="reset"
+            width="16"
+            height="16"
+            class="feedback__btn-icon"
+          />
+          {{ localization.common.undo }}
+        </ui-button>
+      </div>
+
+      <ui-button
+        test-id="feedback-clear-all-button"
+        size="sm"
+        type="default"
+        variant="outline"
+        class="btn clear-all"
+        @click="clearAll"
+      >
+        <ui-icon
+          name="delete"
+          width="16"
+          height="16"
+          class="feedback__btn-icon"
         />
+        {{ localization.common.clearAll }}
       </ui-button>
     </div>
+
+    <div
+      id="feedbackImgWrap"
+      ref="feedbackImgWrap"
+      class="preview-container"
+      :class="{
+        disabled: !optionsModel.hasTakeScreenshot,
+        annotate: optionsModel.isAnnotateImage,
+      }"
+    >
+      <div class="preview-container__backdrop">
+        <div>
+          <ui-button
+            test-id="feedback-image-annotate-btn"
+            size="md"
+            type="default"
+            variant="outline"
+            class=""
+            @click="onAnnotateImage"
+          >
+            <ui-icon
+              name="annotate-icon"
+              width="16"
+              height="16"
+              class="feedback__btn-icon"
+            />
+            {{ localization.feedback.annotate }}
+          </ui-button>
+
+          <ui-button
+            test-id="feedback-image-remove-btn"
+            size="md"
+            type="default"
+            variant="outline"
+            class=""
+            @click="onRemoveScreenshot"
+          >
+            <ui-icon
+              name="delete"
+              width="16"
+              height="16"
+              class="feedback__btn-icon"
+            />
+            {{ localization.common.remove }}
+          </ui-button>
+        </div>
+      </div>
+      <canvas
+        id="feedbackImg"
+        ref="feedbackImg"
+        class="preview-container__image"
+      ></canvas>
+      <canvas id="feedbackImgBlank" style="display: none"></canvas>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import html2canvas from 'html2canvas'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_FeedbackCanvasOptions } from '~/components/common/layout/theHeader/feedback/new/lib/models/interfaces'
+
+const optionsModel = defineModel<UI_I_FeedbackCanvasOptions>({ required: true })
+const emits = defineEmits<{
+  (event: 'screen-shot', value: any): void
+}>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isFileLoad = ref(null)
+const feedbackImgWrap = ref()
+const feedbackImg = ref()
+const memoryParentModalDialog = ref<string>('')
+const memoryParentMain = ref<string>('')
+
+const drawingArray: any = []
+// const indexArray = 0 // index of feedbackImg itself
+const indexArray = ref<number>(0) // index of feedbackImg itself
+let isDrawing = false
+let startDrawingX: number | null = null
+let startDrawingY: number | null = null
+let drawColor = ''
+let drawWidth = ''
+
+const onTakeScreenshot = (): void => {
+  optionsModel.value.hasTakeScreenshot = true
+  const value = {
+    width: window.outerWidth + 'px',
+  }
+
+  emits('screen-shot', value)
+  const parentMain = document.getElementById('feedbackId')
+  const parentModalDialog = document.getElementById('feedback-modal-dialog-Id')
+  if (!parentMain || !parentModalDialog) return
+
+  const display = parentMain.style.display
+  memoryParentMain.value = parentMain.style.display
+  parentMain.style.display = 'none'
+  html2canvas(document.body).then(function (thisCanvas) {
+    parentMain.style.display = display
+    memoryParentMain.value = parentMain.style.width
+    memoryParentModalDialog.value = parentModalDialog.style.width
+    parentMain.style.width = window.outerWidth + 'px'
+    parentModalDialog.style.width = window.outerWidth + 'px'
+    parentModalDialog.style.margin = '20px'
+    const context = feedbackImg.value.getContext('2d')
+    feedbackImg.value.width = thisCanvas.width
+    feedbackImg.value.height = thisCanvas.height
+    context.drawImage(
+      thisCanvas,
+      0,
+      0,
+      feedbackImg.value.width,
+      feedbackImg.value.height
+    )
+    drawingArray.length = 0
+    indexArray.value = 0
+    drawingArray.push(
+      context.getImageData(
+        0,
+        0,
+        feedbackImg.value.width,
+        feedbackImg.value.height
+      )
+    )
+  })
+}
+const onUploadFile = (): void => {
+  optionsModel.value.hasTakeScreenshot = true
+  if (!isFileLoad.value) return
+
+  const isFileRead = new FileReader()
+  if (!isFileRead) return
+
+  isFileRead.readAsDataURL(isFileLoad.value.files[0])
+  isFileRead.onload = (): void => {
+    const img = new Image()
+    if (!feedbackImg.value) return
+
+    const context = feedbackImg.value.getContext('2d')
+    img.onload = (): void => {
+      feedbackImg.value.width = img.width
+      feedbackImg.value.height = img.height
+      context.drawImage(img, 0, 0, img.width, img.height)
+      drawingArray.length = 0
+      indexArray.value = 0
+      drawingArray.push(
+        context.getImageData(
+          0,
+          0,
+          feedbackImg.value.width,
+          feedbackImg.value.height
+        )
+      )
+      const value = {
+        width: window.outerWidth + 'px',
+      }
+      emits('screen-shot', value)
+      const parentMain = document.getElementById('feedbackId')
+      const parentModalDialog = document.getElementById(
+        'feedback-modal-dialog-Id'
+      )
+      if (!parentMain || !parentModalDialog) return
+
+      parentMain.style.width = window.outerWidth + 'px'
+      parentModalDialog.style.width = window.outerWidth + 'px'
+      parentModalDialog.style.margin = '20px'
+    }
+    img.src = isFileRead.result
+  }
+}
+
+const start = (event: MouseEvent): void => {
+  if (!drawColor) return
+  const context = feedbackImg.value.getContext('2d')
+  const canvasCoordinates = feedbackImg.value.getBoundingClientRect()
+  startDrawingX = event.pageX - canvasCoordinates.left
+  startDrawingY = event.pageY - canvasCoordinates.top
+  isDrawing = true
+  context.beginPath()
+  context.moveTo(
+    event.pageX - canvasCoordinates.left,
+    event.pageY - canvasCoordinates.top
+  )
+  event.preventDefault()
+}
+const draw = (event: MouseEvent): void => {
+  if (!drawColor) return
+  const context = feedbackImg.value.getContext('2d')
+  const canvasCoordinates = feedbackImg.value.getBoundingClientRect()
+  if (!isDrawing) return
+  context.lineTo(
+    event.pageX - canvasCoordinates.left,
+    event.pageY - canvasCoordinates.top
+  )
+  context.strokeStyle = drawColor
+  context.lineWidth = drawWidth
+  context.lineCap = 'round'
+  context.lineJoin = 'round'
+  context.stroke()
+  event.preventDefault()
+}
+
+const stop = (event: MouseEvent): void => {
+  if (!drawColor) return
+
+  const context = feedbackImg.value.getContext('2d')
+  const canvasCoordinates = feedbackImg.value.getBoundingClientRect()
+  if (!isDrawing) return
+
+  context.stroke()
+  context.closePath()
+  isDrawing = false
+  event.preventDefault()
+  if (
+    startDrawingX !== event.pageX - canvasCoordinates.left &&
+    startDrawingY !== event.pageY - canvasCoordinates.top
+  ) {
+    drawingArray.push(
+      context.getImageData(
+        0,
+        0,
+        feedbackImg.value.width,
+        feedbackImg.value.height
+      )
+    )
+    indexArray.value += 1
+  }
+}
+const onRemoveScreenshot = (): void => {
+  optionsModel.value.hasTakeScreenshot = false
+  const parentMain = document.getElementById('feedbackId')
+  const parentModalDialog = document.getElementById('feedback-modal-dialog-Id')
+  if (!parentMain || !parentModalDialog) return
+
+  parentMain.style.width = memoryParentMain.value
+  parentModalDialog.style.width = memoryParentModalDialog.value
+  const context = feedbackImg.value.getContext('2d')
+  context.fillStyle = 'green'
+  context.fillRect(0, 0, feedbackImg.value.width, feedbackImg.value.height)
+  feedbackImg.value.width = 0
+  feedbackImg.value.height = 0
+  feedbackImgWrap.value.style.width = 0 + 'px'
+  feedbackImgWrap.value.style.height = 0 + 'px'
+  const value = {
+    width: memoryParentModalDialog.value,
+  }
+  emits('screen-shot', value)
+  clearAll()
+}
+
+const clearAll = (): void => {
+  const context = feedbackImg.value.getContext('2d')
+  // drawColor = ''
+  // drawWidth = ''
+  if (indexArray.value <= 0) return
+  while (indexArray.value > 0) {
+    drawingArray.pop()
+    indexArray.value -= 1
+    context.putImageData(drawingArray[indexArray.value], 0, 0)
+  }
+}
+
+const onUseRedMarker = (): void => {
+  drawColor = '#f76945'
+  drawWidth = '5'
+}
+const onUseGrayEraser = (): void => {
+  drawColor = 'lightgray'
+  drawWidth = '14'
+}
+
+const onUndoLast = (): void => {
+  drawColor = ''
+  drawWidth = ''
+  const context = feedbackImg.value.getContext('2d')
+  if (indexArray.value > 0) {
+    indexArray.value -= 1
+    drawingArray.pop()
+    context.putImageData(drawingArray[indexArray.value], 0, 0)
+  }
+}
+
+onMounted(() => {
+  feedbackImg.value.addEventListener('touchstart', start, false)
+  feedbackImg.value.addEventListener('touchmove', draw, false)
+  feedbackImg.value.addEventListener('mousedown', start, false)
+  feedbackImg.value.addEventListener('mousemove', draw, false)
+  feedbackImg.value.addEventListener('touchend', stop, false)
+  feedbackImg.value.addEventListener('mouseup', stop, false)
+  feedbackImg.value.addEventListener('mouseout', stop, false)
+})
+
+onBeforeUnmount(() => {
+  onRemoveScreenshot()
+  feedbackImg.value.removeEventListener('touchstart', start, false)
+  feedbackImg.value.removeEventListener('touchmove', draw, false)
+  feedbackImg.value.removeEventListener('mousedown', start, false)
+  feedbackImg.value.removeEventListener('mousemove', draw, false)
+  feedbackImg.value.removeEventListener('touchend', stop, false)
+  feedbackImg.value.removeEventListener('mouseup', stop, false)
+  feedbackImg.value.removeEventListener('mouseout', stop, false)
+})
+const onAnnotateImage = (): void => {
+  optionsModel.value.isAnnotateImage = true
+}
 </script>
 
 <style lang="scss" scoped>
 @import 'assets/scss/common/mixins.scss';
 .additional-details {
   .button-container {
-    margin-top: 16px;
-    .upload-image,
-    .take-screenshot {
-      color: #4d5d69;
-      gap: 8px;
-      border: 1px solid #e9ebed;
-    }
-
     .upload-image {
       label {
         @include flex($align: center, $just: center);
@@ -80,5 +459,84 @@ const localization = computed<UI_I_Localization>(() => useLocal())
       }
     }
   }
+  .drawer-btn-container {
+    margin-bottom: 12px;
+    & > div {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 15px;
+    }
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .ui-btn {
+      width: initial;
+
+      &.clear-all {
+        color: #ea3223;
+      }
+    }
+  }
+
+  &__alert {
+    margin-bottom: 16px;
+  }
+}
+.preview-container {
+  width: 500px;
+  height: 280px;
+  position: relative;
+  &.annotate {
+    width: 100%;
+    height: 460px;
+  }
+  &.disabled {
+    display: none;
+  }
+
+  &__backdrop {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(27, 42, 55, 0.32);
+    backdrop-filter: blur(1.5px);
+    border-radius: 8px;
+    transition: opacity 0.3s ease;
+    opacity: 0;
+
+    & > div {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      .ui-btn {
+        width: initial;
+
+        &:last-child {
+          color: #ea3223;
+        }
+      }
+    }
+  }
+
+  &__image {
+    width: inherit;
+    height: inherit;
+    border-radius: 8px;
+    .disabled & {
+      display: none;
+    }
+  }
+
+  &:hover:not(&.annotate) &__backdrop {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 1;
+  }
 }
 </style>

package/components/common/layout/theHeader/feedback/new/additionalDetails/Headline.vue

@@ -18,7 +18,7 @@
       :elem-id="'feedback-additional-details-info-icon'"
     >
       <div class="common-widget-info">
-        <div class="headline justify-between flex-align-center">
+        <div class="justify-between flex-align-center">
           <div class="flex-align-center">
             <ui-icon-icon3 name="info-2" width="16px" height="16px" />
             <span class="title">
@@ -54,31 +54,34 @@ const isShowInfo = ref<boolean>(false)
 @import 'assets/scss/common/mixins.scss';
 .headline {
   @include flex($align: center);
-  margin-top: 16px;
+  margin: 32px 0 16px;
   &__label {
-    line-height: 38px;
+    line-height: 19.36px;
     font-size: 16px;
     font-weight: 500;
-    color: #4d5d69;
+    color: var(--feedback-text-color);
     margin-right: 8px;
   }
   .common-widget-info {
     padding: 16px;
-
     .title {
       font-size: 14px;
       font-weight: 500;
       line-height: 16.94px;
-      color: var(--zabbix-text-color);
+      color: var(--feedback-text-color);
       margin-left: 8px;
     }
 
     .common-widget-info-description {
       font-size: 13px;
       line-height: 15.73px;
-      color: var(--zabbix-text-color);
+      color: var(--feedback-text-color);
       margin-top: 12px;
     }
+
+    svg {
+      color: var(--feedback-tooltip-close-color);
+    }
   }
 }
 </style>

package/components/common/layout/theHeader/feedback/new/description/Description.vue

@@ -44,11 +44,11 @@ const descriptionErrorText = computed<boolean>(() => {
 .description {
   margin-top: 32px;
   &__title {
-    line-height: 38px;
+    line-height: 19.36px;
     margin-bottom: 16px;
     font-size: 16px;
     font-weight: 500;
-    color: #4d5d69;
+    color: var(--feedback-text-color);
   }
   :deep(.ui-main-textarea) {
     resize: none;

package/components/common/layout/theHeader/feedback/new/email/Email.vue

@@ -33,11 +33,11 @@ const emailErrorText = computed<string>(() => {
 .email {
   margin-top: 32px;
   &__title {
-    line-height: 38px;
+    line-height: 19.36px;
     margin-bottom: 16px;
     font-size: 16px;
     font-weight: 500;
-    color: #4d5d69;
+    color: var(--feedback-text-color);
   }
 }
 </style>

package/components/common/layout/theHeader/feedback/new/lib/models/interfaces.ts

@@ -0,0 +1,4 @@
+export interface UI_I_FeedbackCanvasOptions {
+  isAnnotateImage: boolean
+  hasTakeScreenshot: boolean
+}

package/components/common/layout/theHeader/feedback/new/subtitle/Subtitle.vue

@@ -63,21 +63,24 @@ const isShowInfo = ref<boolean>(false)
   }
   .common-widget-info {
     padding: 16px;
-
     .title {
       font-size: 14px;
       font-weight: 500;
       line-height: 16.94px;
-      color: var(--zabbix-text-color);
+      color: var(--feedback-text-color);
       margin-left: 8px;
     }
 
     .common-widget-info-description {
       font-size: 13px;
       line-height: 15.73px;
-      color: var(--zabbix-text-color);
+      color: var(--feedback-text-color);
       margin-top: 12px;
     }
+
+    svg {
+      color: var(--feedback-tooltip-close-color);
+    }
   }
 }
 </style>

package/components/common/layout/theHeader/feedback/new/tabs/Tabs.vue

@@ -20,13 +20,12 @@
 
 <script setup lang="ts">
 import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { T_FeedbackTab } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/types'
-// import type { I_Metric } from '~/components/layout/new/tabs/lib/models/interfaces'
+import type { UI_T_FeedbackTab } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/types'
 import { tabsFunc } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/config/tabs'
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const selectedTab = defineModel<T_FeedbackTab>({ required: true })
+const selectedTab = defineModel<UI_T_FeedbackTab>({ required: true })
 const tabs = computed<any[]>(() =>
   tabsFunc(localization.value, selectedTab.value)
 )
@@ -40,7 +39,7 @@ const tabs = computed<any[]>(() =>
     margin-bottom: 16px;
     font-size: 16px;
     font-weight: 500;
-    color: #4d5d69;
+    color: var(--feedback-text-color);
   }
   &__container {
     display: flex;
@@ -50,17 +49,21 @@ const tabs = computed<any[]>(() =>
   :deep(.block) {
     width: max-content;
     padding: 10px 12px;
-    color: #4d5d69;
+    color: var(--feedback-text-color);
+    background: var(--feedback-tab-bg-color);
+    border: 1px solid var(--feedback-tab-border-color);
+    box-shadow: none;
     cursor: pointer;
   }
+
   :deep(.block.selected) {
-    border: 1.5px solid #008fd6;
-    color: #008fd6;
+    border: 1.5px solid var(--feedback-tab-active-text-color);
+    color: var(--feedback-tab-active-text-color);
     cursor: default;
 
     .main-info,
     .main-info-label {
-      color: #008fd6;
+      color: var(--feedback-tab-active-text-color);
     }
   }
 
@@ -77,3 +80,16 @@ const tabs = computed<any[]>(() =>
   }
 }
 </style>
+<style lang="scss">
+:root {
+  --feedback-tab-bg-color: #ffffff;
+  --feedback-tab-border-color: #e9ebed;
+  --feedback-tab-active-text-color: #008fd6;
+}
+
+:root.dark-theme {
+  --feedback-tab-bg-color: #1b2a373d;
+  --feedback-tab-border-color: #e9ebed1f;
+  --feedback-tab-active-text-color: #2ba2de;
+}
+</style>

package/components/common/layout/theHeader/feedback/new/tabs/lib/config/tabs.ts

@@ -1,9 +1,9 @@
 import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { T_FeedbackTab } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/types'
+import type { UI_T_FeedbackTab } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/types'
 
 export const tabsFunc = (
   localization: UI_I_Localization,
-  selectedTab: T_FeedbackTab
+  selectedTab: UI_T_FeedbackTab
 ): any[] => {
   return [
     {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.4.413",
+  "version": "1.4.414",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",