chore(ui): add custom styles to column menu items (#3152)

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsCustomColumnMenu.tsx

@@ -3,6 +3,7 @@
  * as we implement our own UI outside the grid for this. We still want the "Hide column" item,
  * which is inconveniently tied to the "Manage columns" item in `columnMenuColumnsItem`.
  */
+import {createTheme, ThemeProvider} from '@mui/material/styles';
 import {
   GridColumnMenu,
   GridColumnMenuHideItem,
@@ -12,11 +13,27 @@ import React from 'react';
 
 type Slots = Record<string, React.JSXElementConstructor<any> | null>;
 
-// See: https://mui.com/x/react-data-grid/column-menu/#customize-column-menu-items
+const columnMenuTheme = createTheme({
+  components: {
+    MuiTypography: {
+      styleOverrides: {
+        root: {
+          fontSize: '14px',
+          fontFamily: 'Source Sans Pro',
+          fontWeight: 400,
+        },
+      },
+    },
+  },
+});
 export const CallsCustomColumnMenu = (props: GridColumnMenuProps) => {
   const slots: Slots = {columnMenuColumnsItem: null};
   if (props.colDef.hideable ?? true) {
     slots.columnMenuUserItem = GridColumnMenuHideItem;
   }
-  return <GridColumnMenu {...props} slots={slots} />;
+  return (
+    <ThemeProvider theme={columnMenuTheme}>
+      <GridColumnMenu {...props} slots={slots} />
+    </ThemeProvider>
+  );
 };