Improve table styles (#2289)

* add tooltips to row actions
* take off first cell right border when cell is sticky
* increase workspace row height
* take off right border on last header children
* update column resizer hover background color

Author: julieg18

webview/src/experiments/components/table/CellRowActions.tsx

@@ -6,6 +6,9 @@ import styles from './styles.module.scss'
 import { clickAndEnterProps } from '../../../util/props'
 import { StarFull, StarEmpty } from '../../../shared/components/icons'
 import { pluralize } from '../../../util/strings'
+import Tooltip, {
+  CELL_TOOLTIP_DELAY
+} from '../../../shared/components/tooltip/Tooltip'
 
 export type CellRowActionsProps = {
   isRowSelected: boolean
@@ -27,6 +30,7 @@ export type CellRowActionProps = {
   children: React.ReactElement
   hidden?: boolean
   testId?: string
+  tooltipContent: string
 }
 
 export const CellRowAction: React.FC<CellRowActionProps> = ({
@@ -35,25 +39,32 @@ export const CellRowAction: React.FC<CellRowActionProps> = ({
   actionAppliedLabel,
   children,
   hidden,
-  testId
+  testId,
+  tooltipContent
 }) => {
   const count = (showSubRowStates && subRowsAffected) || 0
 
   return (
-    <div
-      className={cx(styles.rowActions, hidden && styles.hidden)}
-      data-testid={testId}
+    <Tooltip
+      content={tooltipContent}
+      placement="bottom-end"
+      delay={[CELL_TOOLTIP_DELAY, 0]}
     >
-      <Indicator
-        count={count}
-        tooltipContent={
-          count &&
-          `${count} ${pluralize('sub-row', count)} ${actionAppliedLabel}.`
-        }
+      <div
+        className={cx(styles.rowActions, hidden && styles.hidden)}
+        data-testid={testId}
       >
-        {children}
-      </Indicator>
-    </div>
+        <Indicator
+          count={count}
+          tooltipContent={
+            count &&
+            `${count} ${pluralize('sub-row', count)} ${actionAppliedLabel}.`
+          }
+        >
+          {children}
+        </Indicator>
+      </div>
+    </Tooltip>
   )
 }
 
@@ -72,6 +83,7 @@ export const CellRowActions: React.FC<CellRowActionsProps> = ({
         subRowsAffected={selections}
         actionAppliedLabel={'selected'}
         testId={'row-action-checkbox'}
+        tooltipContent={isRowSelected ? 'Unselect' : 'Select'}
       >
         <VSCodeCheckbox
           {...clickAndEnterProps(toggleRowSelection)}
@@ -83,6 +95,7 @@ export const CellRowActions: React.FC<CellRowActionsProps> = ({
         subRowsAffected={stars}
         actionAppliedLabel={'starred'}
         testId={'row-action-star'}
+        tooltipContent={starred ? 'Remove Star' : 'Add Star'}
       >
         <div
           className={styles.starSwitch}

webview/src/experiments/components/table/styles.module.scss

@@ -339,8 +339,16 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
   }
 
   .table.withExpColumnShadow {
-    .tr > *:first-child:after {
-      box-shadow: 3px 0px 3px $shadow;
+    .tr > *:first-child {
+      border-right-width: 0;
+
+      &:after {
+        box-shadow: 3px 0px 3px $shadow;
+      }
+
+      &:hover:before {
+        border-right-width: 0;
+      }
     }
   }
 
@@ -375,10 +383,6 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
       background-color: $header-bg-color;
     }
 
-    & > *:first-child:after {
-      right: -1px;
-    }
-
     &:last-child,
     .firstLevelHeader {
       .paramHeaderCell,
@@ -430,6 +434,10 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
       box-shadow: 0 5px 8px -2px $shadow;
     }
 
+    .td {
+      line-height: 3rem;
+    }
+
     .innerCell {
       .rowActions {
         visibility: hidden;
@@ -541,6 +549,10 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
   .placeholderHeaderCell {
     background-color: $header-bg-color;
     border-right: 1px solid $header-border-color;
+
+    &:last-child {
+      border-right: none;
+    }
   }
 
   .headerCell {
@@ -615,8 +627,7 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
     left: 50%;
     width: 2px;
     height: 100%;
-    background-color: $header-fg-color;
-    opacity: 0.5;
+    background-color: $header-resizer-color;
   }
 }
 

webview/src/shared/variables.scss

@@ -18,6 +18,7 @@ $row-border-selected-color: var(--vscode-list-focusOutline);
 $header-bg-color: $bg-color;
 $header-border-color: $border-color;
 $meta-cell-color: var(--vscode-descriptionForeground);
+$header-resizer-color: var(--vscode-sash-hoverBorder);
 
 $hover-background-color: var(--vscode-list-hoverBackground);
 $row-hover-background-color: var(--vscode-list-hoverBackground);