From 9f5000bef1f2df0d4d6d210f5867c7e3e52bbf70 Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Mon, 19 Jan 2026 10:14:28 +0200
Subject: [PATCH 1/4] fix: add cursor pointer

---
 custom/VisionTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/custom/VisionTable.vue b/custom/VisionTable.vue
index 81afb18..4d7444a 100644
--- a/custom/VisionTable.vue
+++ b/custom/VisionTable.vue
@@ -63,7 +63,7 @@
               </template>
             </Tooltip>
             <Tooltip>
-              <IconRefreshOutline class="my-2 w-5 h-5 hover:text-blue-500" :class="{ 'opacity-50 cursor-not-allowed hover': shouldDisableRegenerateFieldIcon(item, n) }" @click="regerenerateFieldIconClick(item, n)"/>
+              <IconRefreshOutline class="my-2 w-5 h-5 hover:text-blue-500 cursor-pointer" :class="{ 'opacity-50 cursor-not-allowed hover': shouldDisableRegenerateFieldIcon(item, n) }" @click="regerenerateFieldIconClick(item, n)"/>
               <template #tooltip> 
                 {{ shouldDisableRegenerateFieldIcon(item, n) ? $t("Can't analyze image without source image") : $t('Regenerate') }}
               </template>

From 1c11a2ffac3b790311374db49a46a18ba1621a98 Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Wed, 28 Jan 2026 16:47:29 +0200
Subject: [PATCH 2/4] fix: enhance styling for image comparison component with
 dark mode support

---
 custom/ImageCompare.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/custom/ImageCompare.vue b/custom/ImageCompare.vue
index 0989bd9..59bea8a 100644
--- a/custom/ImageCompare.vue
+++ b/custom/ImageCompare.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- Popup Overlay -->
   <div class="fixed inset-0 z-40 flex items-center justify-center bg-black/50" @click.self="closePopup">
-    <div class="image-compare-container max-w-4xl max-h-[90vh] overflow-y-auto rounded-lg">
+    <div class="image-compare-container border-white dark:border-black max-w-4xl max-h-[90vh] overflow-y-auto rounded-lg bg-white dark:bg-gray-800">
       <!-- Close Button -->
       <div class="flex justify-end mb-4">
         <button type="button" 
@@ -14,8 +14,8 @@
         </button>
       </div>
       <div class="flex gap-4 items-start justify-between">
-        <h3 class="text-sm font-medium text-gray-700 mb-2">{{ $t('Old Image') }}</h3>
-        <h3 class="text-sm font-medium text-gray-700 mb-2">{{ $t('New Image') }}</h3>
+        <h3 class="text-sm font-medium text-gray-700 dark:text-white mb-2">{{ $t('Old Image') }}</h3>
+        <h3 class="text-sm font-medium text-gray-700 dark:text-white mb-2">{{ $t('New Image') }}</h3>
       </div>
       <div class="flex gap-4 items-center">
         <!-- Old Image -->
@@ -36,8 +36,8 @@
 
         <!-- Comparison Arrow -->
         <div class="flex items-center justify-center">
-          <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
-            <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center dark:bg-gray-500">
+            <svg class="w-4 h-4 text-blue-600 dark:text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
             </svg>
           </div>
@@ -181,9 +181,9 @@ body.medium-zoom--opened aside {
 <style scoped>
 .image-compare-container {
   padding: 1rem;
-  background-color: white;
+  /* background-color: white; */
   box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  border: 1px solid #e5e7eb;
+  /* border: 1px solid #e5e7eb; */
 }
 
 .fade-enter-active, .fade-leave-active {

From 574a2bd05dd0a69887fa82f49be93167addcb17f Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Thu, 29 Jan 2026 14:37:05 +0200
Subject: [PATCH 3/4] delete visionTable change

---
 custom/VisionTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/custom/VisionTable.vue b/custom/VisionTable.vue
index 4d7444a..81afb18 100644
--- a/custom/VisionTable.vue
+++ b/custom/VisionTable.vue
@@ -63,7 +63,7 @@
               </template>
             </Tooltip>
             <Tooltip>
-              <IconRefreshOutline class="my-2 w-5 h-5 hover:text-blue-500 cursor-pointer" :class="{ 'opacity-50 cursor-not-allowed hover': shouldDisableRegenerateFieldIcon(item, n) }" @click="regerenerateFieldIconClick(item, n)"/>
+              <IconRefreshOutline class="my-2 w-5 h-5 hover:text-blue-500" :class="{ 'opacity-50 cursor-not-allowed hover': shouldDisableRegenerateFieldIcon(item, n) }" @click="regerenerateFieldIconClick(item, n)"/>
               <template #tooltip> 
                 {{ shouldDisableRegenerateFieldIcon(item, n) ? $t("Can't analyze image without source image") : $t('Regenerate') }}
               </template>

From 6df3824f42f60209c124b5eb3d0139ab56862d40 Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Thu, 29 Jan 2026 14:56:58 +0200
Subject: [PATCH 4/4] fix: enhance image comparison container with shadow and
 padding

---
 custom/ImageCompare.vue | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/custom/ImageCompare.vue b/custom/ImageCompare.vue
index 59bea8a..c344a38 100644
--- a/custom/ImageCompare.vue
+++ b/custom/ImageCompare.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- Popup Overlay -->
   <div class="fixed inset-0 z-40 flex items-center justify-center bg-black/50" @click.self="closePopup">
-    <div class="image-compare-container border-white dark:border-black max-w-4xl max-h-[90vh] overflow-y-auto rounded-lg bg-white dark:bg-gray-800">
+    <div class="image-compare-container shadow-sm p-4 border-white dark:border-black max-w-4xl max-h-[90vh] overflow-y-auto rounded-lg bg-white dark:bg-gray-800">
       <!-- Close Button -->
       <div class="flex justify-end mb-4">
         <button type="button" 
@@ -176,20 +176,9 @@ html.dark .medium-zoom-overlay {
 body.medium-zoom--opened aside {
   filter: grayscale(1);
 }
-</style>
-
-<style scoped>
-.image-compare-container {
-  padding: 1rem;
-  /* background-color: white; */
-  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  /* border: 1px solid #e5e7eb; */
-}
-
 .fade-enter-active, .fade-leave-active {
   transition: opacity 0.3s ease;
 }
-
 .fade-enter-from, .fade-leave-to {
   opacity: 0;
 }