From 4bf68d5f03ec60378a68213fd16dc5810d661a44 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Mon, 2 Oct 2023 17:29:16 -0700
Subject: [PATCH 1/2] Closes #7105 - Removed `:not(:focus)` CSS check for
 hover. - New theme constant for a more subdued hover effect to differentiate
 from active editing mode.

---
 src/styles/_constants-espresso.scss  | 1 +
 src/styles/_constants-maelstrom.scss | 1 +
 src/styles/_constants-snow.scss      | 1 +
 src/styles/notebook.scss             | 4 ++--
 4 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/styles/_constants-espresso.scss b/src/styles/_constants-espresso.scss
index 05db2d6b258..177414624f3 100644
--- a/src/styles/_constants-espresso.scss
+++ b/src/styles/_constants-espresso.scss
@@ -300,6 +300,7 @@ $colorFormLines: rgba(#000, 0.2);
 $colorFormSectionHeaderBg: rgba(#000, 0.1);
 $colorFormSectionHeaderFg: rgba($colorBodyFg, 0.8);
 $colorInputBg: rgba(black, 0.2);
+$colorInputBgHov: rgba(black, 0.1);
 $colorInputFg: $colorBodyFg;
 $colorFormText: pushBack($colorBodyFg, 10%);
 $colorInputIcon: pushBack($colorBodyFg, 25%);
diff --git a/src/styles/_constants-maelstrom.scss b/src/styles/_constants-maelstrom.scss
index 27bcad333d7..fe197cb3eb9 100644
--- a/src/styles/_constants-maelstrom.scss
+++ b/src/styles/_constants-maelstrom.scss
@@ -303,6 +303,7 @@ $colorFormLines: rgba(#000, 0.1);
 $colorFormSectionHeaderBg: rgba(#000, 0.1);
 $colorFormSectionHeaderFg: rgba($colorBodyFg, 0.8);
 $colorInputBg: rgba(black, 0.2);
+$colorInputBgHov: rgba(black, 0.1);
 $colorInputFg: $colorBodyFg;
 $colorFormText: pushBack($colorBodyFg, 10%);
 $colorInputIcon: pushBack($colorBodyFg, 25%);
diff --git a/src/styles/_constants-snow.scss b/src/styles/_constants-snow.scss
index b468c0a1b24..42af522e9b1 100644
--- a/src/styles/_constants-snow.scss
+++ b/src/styles/_constants-snow.scss
@@ -300,6 +300,7 @@ $colorFormLines: rgba(#000, 0.2);
 $colorFormSectionHeaderBg: rgba(#000, 0.05);
 $colorFormSectionHeaderFg: rgba($colorBodyFg, 0.5);
 $colorInputBg: $colorGenBg;
+$colorInputBgHov: rgba($colorGenBg, 0.7);
 $colorInputFg: $colorBodyFg;
 $colorFormText: pushBack($colorBodyFg, 10%);
 $colorInputIcon: pushBack($colorBodyFg, 25%);
diff --git a/src/styles/notebook.scss b/src/styles/notebook.scss
index edaddd1124e..5ca573e6baa 100644
--- a/src/styles/notebook.scss
+++ b/src/styles/notebook.scss
@@ -295,8 +295,8 @@
                 cursor: text;
 
                 @include hover() {
-                    &:not(:focus, .locked) {
-                        background: $colorInputBg;
+                    &:not(.locked) {
+                        background: $colorInputBgHov;
                     }
                 }
 

From c5959264653e2d0ccefbcff7898d75eaca8e142e Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Tue, 7 Nov 2023 14:55:57 -0800
Subject: [PATCH 2/2] Closes #7105 - Added new visual test for Notebook entry
 selected, hover and editing states.

---
 e2e/tests/visual/notebook.visual.spec.js | 29 ++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/e2e/tests/visual/notebook.visual.spec.js b/e2e/tests/visual/notebook.visual.spec.js
index 70dc388fc6c..f3eb99ddd00 100644
--- a/e2e/tests/visual/notebook.visual.spec.js
+++ b/e2e/tests/visual/notebook.visual.spec.js
@@ -97,4 +97,33 @@ test.describe('Visual - Notebook', () => {
     // Take snapshot of the notebook with the AutoComplete field hidden and with the "Add Tag" button visible
     await percySnapshot(page, `Notebook Annotation de-select blur (theme: '${theme}')`);
   });
+  test('Visual check of entry hover and selection', async ({ page, theme }) => {
+    // Make two entries so we can test an unselected entry
+    await enterTextEntry(page, 'Entry 0');
+    await enterTextEntry(page, 'Entry 1');
+
+    // Hover the first entry
+    await page.getByText('Entry 0').hover();
+
+    // Take a snapshot
+    await percySnapshot(page, `Notebook Non-selected Entry Hover (theme: '${theme}')`);
+
+    // Click the first entry
+    await page.getByText('Entry 0').click();
+
+    // Take a snapshot
+    await percySnapshot(page, `Notebook Selected Entry Hover (theme: '${theme}')`);
+
+    // Hover the text entry area
+    await page.getByText('Entry 0').hover();
+
+    // Take a snapshot
+    await percySnapshot(page, `Notebook Selected Entry Text Area Hover (theme: '${theme}')`);
+
+    // Click the text entry area
+    await page.getByText('Entry 0').click();
+
+    // Take a snapshot
+    await percySnapshot(page, `Notebook Selected Entry Text Area Active (theme: '${theme}')`);
+  });
 });