Update table indicators and chevrons/stars styles (#2367)

* update indicator, matching style to VSCode * update chevrons and stars, updating icon colors to match VSCode trees
iterative · Sep 11, 2022 · 8d9574e · 8d9574e
1 parent 37191b7
commit 8d9574e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 31 deletions.
diff --git a/webview/src/experiments/components/table/styles.module.scss b/webview/src/experiments/components/table/styles.module.scss
@@ -17,8 +17,7 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
   left: 0;
   display: inline-block;
   position: absolute;
-  border: 2px solid $watermark-color;
-  opacity: 0.5;
+  border: 2px solid $row-action-icon-color;
   border-top: unset;
   border-left: unset;
   transition: transform 0.2s, right 0.2s, bottom 0.2s;
@@ -338,10 +337,6 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
         background-color: $row-hover-background-color;
       }
 
-      .indicatorCount {
-        border-color: $row-hover-background-color;
-      }
-
       .td:hover,
       .td:hover + .td {
         border-left-color: $border-color;
@@ -379,19 +374,9 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
         }
       }
 
-      .indicatorCount {
-        background-color: $indicator-selected-badge-background;
-        color: $indicator-selected-badge-foreground;
-        border: 1px solid $indicator-selected-badge-border;
-      }
-
-      .starSwitch:not([aria-checked='true']) svg {
-        fill: $star-switch-selection-fill-color;
-      }
-
       .expandedRowArrow,
       .contractedRowArrow {
-        border-color: $star-switch-selection-fill-color;
+        border-color: $row-action-selected-icon-color;
       }
     }
   }
@@ -571,7 +556,6 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
           align-items: center;
           justify-content: center;
           width: 14px;
-          opacity: 0.4;
           cursor: pointer;
 
           &[aria-checked='true'] {
@@ -621,6 +605,14 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
   }
 }
 
+.experimentCell .rowActions .starSwitch svg {
+  fill: $row-action-icon-color;
+
+  .rowSelected & {
+    fill: $row-action-selected-icon-color;
+  }
+}
+
 .webviewHeader {
   display: flex;
   justify-content: space-between;
@@ -820,17 +812,13 @@ $badge-size: 0.85rem;
   font-weight: bold;
   background-color: $indicator-badge-background;
   color: $indicator-badge-foreground;
-  border: 1px solid $indicator-badge-border;
   border-radius: 100%;
   width: $badge-size;
   height: $badge-size;
   line-height: $badge-size;
   text-align: center;
   vertical-align: middle;
   font-size: 0.5rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
 }
 
 .cellTooltip {
@@ -859,7 +847,7 @@ $badge-size: 0.85rem;
     .indicatorCount {
       display: none;
       .experimentGroup & {
-        display: flex;
+        display: block;
         &[aria-label='0'] {
           display: none;
         }

diff --git a/webview/src/shared/variables.scss b/webview/src/shared/variables.scss
@@ -27,14 +27,14 @@ $row-hover-background-color: var(--vscode-list-hoverBackground);
 
 $accent-color: var(--button-primary-background);
 
-$indicator-badge-background: var(--vscode-badge-background);
-$indicator-badge-foreground: var(--vscode-badge-foreground);
-$indicator-badge-border: $row-bg-color;
-$indicator-selected-badge-border: $row-bg-selected-color;
-$indicator-selected-badge-background: $accent-color;
-$indicator-selected-badge-foreground: var(--button-primary-foreground);
-
-$star-switch-selection-fill-color: var(--vscode-list-focusHighlightForeground);
+$indicator-badge-background: var(--vscode-activityBarBadge-background);
+$indicator-badge-foreground: var(--vscode-activityBarBadge-foreground);
+
+$row-action-icon-color: var(--vscode-icon-foreground);
+$row-action-selected-icon-color: var(
+  --vscode-list-activeSelectionIconForeground,
+  var(--vscode-icon-foreground)
+);
 
 $shadow: var(--vscode-widget-shadow);