Fix Notebook entry hover problem (#7106)

Closes #7105
- Removed `:not(:focus)` CSS check for hover.
- New theme constant for a more subdued hover effect to differentiate
from active editing mode.

Co-authored-by: Scott Bell <scott@traclabs.com>
Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>

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}')`);
+  });
 });

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%);

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%);

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%);

src/styles/notebook.scss

@@ -295,8 +295,8 @@
                 cursor: text;
 
                 @include hover() {
-                    &:not(:focus, .locked) {
-                        background: $colorInputBg;
+                    &:not(.locked) {
+                        background: $colorInputBgHov;
                     }
                 }