Update cell hover styles (#2198)

* add horizontal borders instead of changing cell bg color
iterative · Aug 19, 2022 · dde6e88 · dde6e88
1 parent 7b6d699
commit dde6e88
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 18 deletions.
diff --git a/webview/src/experiments/components/table/styles.module.scss b/webview/src/experiments/components/table/styles.module.scss
@@ -130,19 +130,23 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
     }
 
     .unselectedExperiment:not(.rowSelected):hover & {
-      background-color: $row-hover-background-color;
-    }
-
-    .unselectedExperiment:not(.rowSelected) .experimentCell:hover & {
-      background-color: $cell-hover-background-color;
+      background-image: linear-gradient(
+          $row-hover-background-color,
+          $row-hover-background-color
+        ),
+        linear-gradient($bg-color, $bg-color);
     }
 
     .workspaceWithChanges.unselectedExperiment & {
       border: 1px solid $changed-color;
     }
 
     .rowSelected.unselectedExperiment & {
-      background-color: $row-bg-selected-color;
+      background-image: linear-gradient(
+          $row-bg-selected-color,
+          $row-bg-selected-color
+        ),
+        linear-gradient($bg-color, $bg-color);
     }
 
     .queuedExperiment & {
@@ -161,24 +165,26 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
     }
 
     .runningExperiment:not(.rowSelected):hover & {
-      background-color: $row-hover-background-color;
+      background-image: linear-gradient(
+          $row-hover-background-color,
+          $row-hover-background-color
+        ),
+        linear-gradient($bg-color, $bg-color);
       border-left-color: $row-hover-background-color;
       border-bottom-color: $row-hover-background-color;
     }
 
-    .runningExperiment:not(.rowSelected) .experimentCell:hover & {
-      background-color: $cell-hover-background-color;
-      border-left-color: $cell-hover-background-color;
-      border-bottom-color: $cell-hover-background-color;
-    }
-
     .workspaceWithChanges.runningExperiment & {
       border-right-color: $changed-color;
       border-top-color: $changed-color;
     }
 
     .rowSelected.runningExperiment & {
-      background-color: $row-bg-selected-color;
+      background-image: linear-gradient(
+          $row-bg-selected-color,
+          $row-bg-selected-color
+        ),
+        linear-gradient($bg-color, $bg-color);
       border-left-color: $row-bg-selected-color;
       border-bottom-color: $row-bg-selected-color;
     }
@@ -289,9 +295,17 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
         background-color: $row-hover-background-color;
       }
 
-      .td:hover:not(.experimentCell),
-      .experimentCell:hover:before {
-        background-color: $cell-hover-background-color;
+      .td:hover {
+        border-right-color: $border-color;
+        border-left-color: $border-color;
+
+        &:first-child:before {
+          border-right-color: $border-color;
+        }
+
+        &:last-child {
+          border-right-color: transparent;
+        }
       }
     }
 
@@ -444,6 +458,8 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
     font-size: 0.8rem;
     line-height: 2rem;
     align-items: center;
+    border-right: 1px solid transparent;
+    border-left: 1px solid transparent;
 
     &:first-child {
       .innerCell {
@@ -461,6 +477,12 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
     display: flex;
     flex-flow: row nowrap;
     text-align: left;
+    border-right: none;
+    border-left: none;
+
+    &:before {
+      border-right: 1px solid transparent;
+    }
 
     .innerCell {
       justify-content: flex-start;

diff --git a/webview/src/shared/variables.scss b/webview/src/shared/variables.scss
@@ -21,7 +21,6 @@ $meta-cell-color: var(--vscode-descriptionForeground);
 
 $hover-background-color: var(--vscode-list-hoverBackground);
 $row-hover-background-color: var(--vscode-list-hoverBackground);
-$cell-hover-background-color: var(--vscode-dropdown-background);
 
 $accent-color: var(--button-primary-background);