From 94f055716f8cfe2ad65dd87859045ebba5fab0f6 Mon Sep 17 00:00:00 2001
From: julieg18 <juliannagal18@gmail.com>
Date: Tue, 16 Aug 2022 07:58:25 -0500
Subject: [PATCH 1/3] Improve table styles * add vscode prefix to
 `--checkbox-border` * keep cell spinners and unselected circles the same bg
 color as cells

---
 webview/src/experiments/components/table/styles.module.scss | 4 ++--
 webview/src/shared/variables.scss                           | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/webview/src/experiments/components/table/styles.module.scss b/webview/src/experiments/components/table/styles.module.scss
index c97c1c6fec..fb9f0bb22f 100644
--- a/webview/src/experiments/components/table/styles.module.scss
+++ b/webview/src/experiments/components/table/styles.module.scss
@@ -126,7 +126,7 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
       height: 4px;
       vertical-align: middle;
       border: 1px solid currentColor;
-      background-color: $bg-color;
+      background-color: inherit;
     }
 
     .workspaceWithChanges.unselectedExperiment & {
@@ -145,7 +145,7 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
       border-right: 1.5px solid currentColor;
       border-top: 1.5px solid currentColor;
       animation: spin 1s cubic-bezier(0.53, 0.21, 0.29, 0.67) infinite;
-      background-color: $bg-color;
+      background-color: inherit;
     }
 
     .workspaceWithChanges.runningExperiment & {
diff --git a/webview/src/shared/variables.scss b/webview/src/shared/variables.scss
index 9781fdb36e..6622077d1a 100644
--- a/webview/src/shared/variables.scss
+++ b/webview/src/shared/variables.scss
@@ -3,7 +3,7 @@ $bg-color: var(--vscode-editor-background);
 $bullet-size: 9px;
 $watermark-color: var(--vscode-descriptionForeground);
 
-$border-color: var(--checkbox-border);
+$border-color: var(--vscode-checkbox-border);
 $metrics-color: var(--vscode-dvc-metrics);
 $params-color: var(--vscode-dvc-params);
 $deps-color: var(--vscode-dvc-deps);

From b803ab7310858f991c9816ef98f68398e9d3813f Mon Sep 17 00:00:00 2001
From: julieg18 <juliannagal18@gmail.com>
Date: Tue, 16 Aug 2022 11:01:24 -0500
Subject: [PATCH 2/3] Fix more bugs * top sticky exp column from losing opacity
 on hover * properly fix colors on spinners and bullets

---
 .../components/table/styles.module.scss       | 45 ++++++++++++++++---
 1 file changed, 39 insertions(+), 6 deletions(-)

diff --git a/webview/src/experiments/components/table/styles.module.scss b/webview/src/experiments/components/table/styles.module.scss
index fb9f0bb22f..15550878dd 100644
--- a/webview/src/experiments/components/table/styles.module.scss
+++ b/webview/src/experiments/components/table/styles.module.scss
@@ -126,7 +126,15 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
       height: 4px;
       vertical-align: middle;
       border: 1px solid currentColor;
-      background-color: inherit;
+      background-color: $bg-color;
+    }
+
+    .unselectedExperiment:hover & {
+      background-color: $row-hover-background-color;
+    }
+
+    .unselectedExperiment .experimentCell:hover & {
+      background-color: $cell-hover-background-color;
     }
 
     .workspaceWithChanges.unselectedExperiment & {
@@ -145,7 +153,19 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
       border-right: 1.5px solid currentColor;
       border-top: 1.5px solid currentColor;
       animation: spin 1s cubic-bezier(0.53, 0.21, 0.29, 0.67) infinite;
-      background-color: inherit;
+      background-color: $bg-color;
+    }
+
+    .runningExperiment:hover & {
+      background-color: $row-hover-background-color;
+      border-left-color: $row-hover-background-color;
+      border-bottom-color: $row-hover-background-color;
+    }
+
+    .runningExperiment .experimentCell:hover & {
+      background-color: $cell-hover-background-color;
+      border-left-color: $cell-hover-background-color;
+      border-bottom-color: $cell-hover-background-color;
     }
 
     .workspaceWithChanges.runningExperiment & {
@@ -254,12 +274,14 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
     position: relative;
 
     &:hover:not(.rowSelected) {
-      .td {
+      .td:not(.experimentCell),
+      .experimentCell:before {
         background-color: $row-hover-background-color;
+      }
 
-        &:hover {
-          background-color: $cell-hover-background-color;
-        }
+      .td:hover:not(.experimentCell),
+      .experimentCell:hover:before {
+        background-color: $cell-hover-background-color;
       }
     }
 
@@ -709,6 +731,17 @@ $badge-size: 0.85rem;
 }
 
 .experimentCell {
+  &:before {
+    content: '';
+    top: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    position: absolute;
+    background-color: transparent;
+  }
+
   .innerCell {
     .indicatorCount {
       display: none;

From 56c27db0937fb60b3c43bef1ac37477813392551 Mon Sep 17 00:00:00 2001
From: julieg18 <juliannagal18@gmail.com>
Date: Wed, 17 Aug 2022 09:51:26 -0500
Subject: [PATCH 3/3] Update bullet and spinner bg on selected rows

---
 .../components/table/styles.module.scss        | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/webview/src/experiments/components/table/styles.module.scss b/webview/src/experiments/components/table/styles.module.scss
index 15550878dd..3173f933f4 100644
--- a/webview/src/experiments/components/table/styles.module.scss
+++ b/webview/src/experiments/components/table/styles.module.scss
@@ -129,11 +129,11 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
       background-color: $bg-color;
     }
 
-    .unselectedExperiment:hover & {
+    .unselectedExperiment:not(.rowSelected):hover & {
       background-color: $row-hover-background-color;
     }
 
-    .unselectedExperiment .experimentCell:hover & {
+    .unselectedExperiment:not(.rowSelected) .experimentCell:hover & {
       background-color: $cell-hover-background-color;
     }
 
@@ -141,6 +141,10 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
       border: 1px solid $changed-color;
     }
 
+    .rowSelected.unselectedExperiment & {
+      background-color: $row-bg-selected-color;
+    }
+
     .queuedExperiment & {
       display: none;
     }
@@ -156,13 +160,13 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
       background-color: $bg-color;
     }
 
-    .runningExperiment:hover & {
+    .runningExperiment:not(.rowSelected):hover & {
       background-color: $row-hover-background-color;
       border-left-color: $row-hover-background-color;
       border-bottom-color: $row-hover-background-color;
     }
 
-    .runningExperiment .experimentCell:hover & {
+    .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;
@@ -172,6 +176,12 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
       border-right-color: $changed-color;
       border-top-color: $changed-color;
     }
+
+    .rowSelected.runningExperiment & {
+      background-color: $row-bg-selected-color;
+      border-left-color: $row-bg-selected-color;
+      border-bottom-color: $row-bg-selected-color;
+    }
   }
 }