Remove rounded corners and accessibility highlights on reporting column headers

clients/admin-ui/src/features/common/table/v2/FidesCell.tsx

@@ -54,6 +54,10 @@ export const FidesCell = <T,>({
         article: {
           borderTopWidth: "2x",
           borderTopColor: "red",
+          ...getTableTHandTDStyles(cell.column.id),
+          // Fancy CSS memoization magic https://tanstack.com/table/v8/docs/framework/react/examples/column-resizing-performant
+          maxWidth: `calc(var(--header-${cell.column.id}-size) * 1px)`,
+          minWidth: `calc(var(--header-${cell.column.id}-size) * 1px)`,
         },
       }}
       _first={{
@@ -67,12 +71,6 @@ export const FidesCell = <T,>({
         borderLeftColor: "gray.200",
       }}
       height="inherit"
-      style={{
-        ...getTableTHandTDStyles(cell.column.id),
-        // Fancy CSS memoization magic https://tanstack.com/table/v8/docs/examples/react/column-resizing-performant
-        maxWidth: `calc(var(--header-${cell.column.id}-size) * 1px)`,
-        minWidth: `calc(var(--header-${cell.column.id}-size) * 1px)`,
-      }}
       onClick={
         cell.column.columnDef.id !== "enable" && onRowClick
           ? () => {

clients/admin-ui/src/features/common/table/v2/FidesTable.tsx

@@ -26,7 +26,8 @@ import React, { ReactNode, useMemo, useState } from "react";
 
 import { DisplayAllIcon, GroupedIcon } from "~/features/common/Icon";
 import { FidesRow } from "~/features/common/table/v2/FidesRow";
-import { getTableTHandTDStyles } from "~/features/common/table/v2/util";
+
+import { getTableTHandTDStyles } from "./util";
 
 /*
   This was throwing a false positive for unused parameters.
@@ -60,7 +61,10 @@ const HeaderContent = <T,>({
     return (
       <Box
         data-testid={`${header.id}-header`}
-        style={{ ...getTableTHandTDStyles(header.column.id) }}
+        sx={{ ...getTableTHandTDStyles(header.column.id) }}
+        fontSize="xs"
+        lineHeight={9} // same as table header height
+        fontWeight="medium"
       >
         {flexRender(header.column.columnDef.header, header.getContext())}
       </Box>
@@ -73,10 +77,15 @@ const HeaderContent = <T,>({
         as={Button}
         rightIcon={<ChevronDownIcon />}
         variant="ghost"
+        size="sm"
+        height={9} // same as table header height
         width="100%"
-        pr={1}
+        sx={{ ...getTableTHandTDStyles(header.column.id) }}
         textAlign="start"
         data-testid={`${header.id}-header-menu`}
+        _focus={{
+          backgroundColor: "gray.100",
+        }}
       >
         {flexRender(header.column.columnDef.header, header.getContext())}
       </MenuButton>

clients/admin-ui/src/features/common/table/v2/cells.tsx

@@ -1,6 +1,4 @@
 import {
-  ArrowDownIcon,
-  ArrowUpIcon,
   Badge,
   Box,
   Checkbox,
@@ -13,7 +11,7 @@ import {
   WarningIcon,
 } from "@fidesui/react";
 import { HeaderContext } from "@tanstack/react-table";
-import { ChangeEvent, FC, ReactNode } from "react";
+import { ChangeEvent, FC } from "react";
 
 import { getErrorMessage, isErrorResult } from "~/features/common/helpers";
 import ConfirmationModal from "~/features/common/modals/ConfirmationModal";
@@ -132,35 +130,14 @@ type DefaultHeaderCellProps<T, V> = {
 
 export const DefaultHeaderCell = <T,>({
   value,
-  column,
 }: DefaultHeaderCellProps<
   T,
   string | number | string[] | undefined | boolean
->) => {
-  let sortIcon: ReactNode = null;
-  if (column.getIsSorted()) {
-    sortIcon =
-      column.getAutoSortDir() === "desc" ? (
-        <ArrowDownIcon color="gray.500" />
-      ) : (
-        <ArrowUpIcon color="gray.500" />
-      );
-  }
-
-  return (
-    <Text
-      _hover={{ backgroundColor: "gray.100" }}
-      fontSize="xs"
-      lineHeight={4}
-      fontWeight="medium"
-      pr={sortIcon ? 0 : 3.5}
-      onClick={column.getToggleSortingHandler()}
-    >
-      {value}
-      {sortIcon}
-    </Text>
-  );
-};
+>) => (
+  <Text fontSize="xs" lineHeight={9} fontWeight="medium">
+    {value}
+  </Text>
+);
 
 type EnableCellProps = {
   value: boolean;

clients/admin-ui/src/features/common/table/v2/util.ts

@@ -1,9 +1,12 @@
+import { theme } from "@fidesui/react";
+
 export const getTableTHandTDStyles = (cellId: string) =>
   cellId === "select"
     ? { padding: "0px" }
     : {
-        paddingLeft: "16px",
-        paddingRight: "8px",
+        paddingLeft: theme.space[3],
+        paddingRight: `calc(${theme.space[3]} - 5px)`, // 5px is the width of the resizer
         paddingTop: "0px",
         paddingBottom: "0px",
+        borderRadius: "0px",
       };