Table style tweaks (#1340)

Summary: Makes table headers a bit more visible and consistent.
<img width="590" alt="image"
src="https://github.com/pixie-io/pixie/assets/314133/4da8998c-c2ad-47ae-ac1d-b25da60c46ad">

Type of change: /kind bugfix

Test Plan: Look at live data tables. Header row should be more visible
and distinguishable from body rows. Gear icon should be a bit smaller
too, and the row/column borders are now the same color.

Signed-off-by: Nick Lanam <nlanam@pixielabs.ai>

Author: NickLanam

src/ui/src/components/data-table/data-table.tsx

@@ -72,17 +72,17 @@ const useDataTableStyles = makeStyles((theme: Theme) => createStyles({
     display: 'flex',
     maxHeight: '100%',
     width: '100%',
-    backgroundColor: theme.palette.background.four,
-    borderBottom: `1px ${theme.palette.background.two} solid`,
-    color: theme.palette.foreground.three,
+    backgroundColor: theme.palette.background.three,
+    borderBottom: `1px ${theme.palette.background.six} solid`,
+    color: theme.palette.foreground.one,
     textTransform: 'uppercase',
   },
   headerCell: {
     position: 'relative', // In case anything inside positions absolutely
     fontSize: theme.typography.pxToRem(14),
     padding: theme.spacing(1),
     alignSelf: 'baseline',
-    borderRight: `1px ${theme.palette.background.two} dashed`,
+    borderRight: `1px ${theme.palette.background.six} dashed`,
     '&:last-child': {
       borderRightWidth: 0,
     },
@@ -137,7 +137,7 @@ const useDataTableStyles = makeStyles((theme: Theme) => createStyles({
     alignItems: 'center',
     padding: `0 ${theme.spacing(1)}`,
     height: `${ROW_HEIGHT_PX}px`, // Ensures the border stretches. See cellContents for the rest.
-    borderRight: `1px solid ${theme.palette.background.two}`,
+    borderRight: `1px solid ${theme.palette.background.six}`,
     '&:last-of-type': {
       borderRightWidth: 0,
     },
@@ -163,7 +163,7 @@ const useDataTableStyles = makeStyles((theme: Theme) => createStyles({
   center: { textAlign: 'center' },
   fill: { textAlign: 'center' },
   sortButton: {
-    opacity: 0.2,
+    opacity: 0.5,
     width: theme.spacing(3),
     paddingLeft: theme.spacing(1),
   },
@@ -205,6 +205,11 @@ const useDataTableStyles = makeStyles((theme: Theme) => createStyles({
   columnMenuFew: { // Logic to expand columns first, then overflow into rows, is not possible in pure CSS :(
     gridTemplateColumns: '1fr',
   },
+  gearButton: {
+    marginRight: theme.spacing(-1),
+    fontSize: theme.spacing(2.25),
+    '& > svg': { fontSize: 'inherit' },
+  },
 }), { name: 'DataTable' });
 
 export interface DataTableProps {
@@ -261,7 +266,7 @@ const ColumnSelector = React.memo(() => {
         ))}
       </Menu>
       {/* eslint-disable-next-line react-memo/require-usememo */}
-      <IconButton onClick={toggleOpen} ref={anchorEl} size='small' sx={{ mr: -1 }}>
+      <IconButton onClick={toggleOpen} ref={anchorEl} size='small' className={classes.gearButton}>
         <GearIcon />
       </IconButton>
     </>