Add styling for header rows

Author: robertbrignull

extensions/ql-vscode/src/view/common/DataGrid.tsx

@@ -54,21 +54,28 @@ const StyledDataGridCell = styled.div<{
   ${({ $gridRow }) => ($gridRow ? `grid-row: ${$gridRow};` : "")}
   ${({ $gridColumn }) => ($gridColumn ? `grid-column: ${$gridColumn};` : "")}
   padding: 4px 12px;
+
+  &.header {
+    font-weight: 600;
+  }
 `;
 
 interface DataGridCellProps {
+  rowType?: "default" | "header";
   gridRow?: string | number;
   gridColumn?: string | number;
   className?: string;
   children: React.ReactNode;
 }
 
 export function DataGridCell({
+  rowType = "default",
   gridRow,
   gridColumn,
   className,
   children,
 }: DataGridCellProps) {
+  className = `${className || ""} ${rowType}`;
   return (
     <StyledDataGridCell
       $gridRow={gridRow}

extensions/ql-vscode/src/view/model-editor/ModeledMethodDataGrid.tsx

@@ -71,13 +71,13 @@ export const ModeledMethodDataGrid = ({
     <DataGrid gridTemplateColumns={gridTemplateColumns}>
       {someMethodsAreVisible && (
         <>
-          <DataGridCell>API or method</DataGridCell>
-          <DataGridCell>Model type</DataGridCell>
-          <DataGridCell>Input</DataGridCell>
-          <DataGridCell>Output</DataGridCell>
-          <DataGridCell>Kind</DataGridCell>
+          <DataGridCell rowType="header">API or method</DataGridCell>
+          <DataGridCell rowType="header">Model type</DataGridCell>
+          <DataGridCell rowType="header">Input</DataGridCell>
+          <DataGridCell rowType="header">Output</DataGridCell>
+          <DataGridCell rowType="header">Kind</DataGridCell>
           {viewState.showMultipleModels && (
-            <DataGridCell>
+            <DataGridCell rowType="header">
               <ScreenReaderOnly>Add or remove models</ScreenReaderOnly>
             </DataGridCell>
           )}