[DataGrid] Column header design updates

[kenanyusuf]

This PR includes a few small design updates to the column headers.

Preview: https://deploy-preview-14293--material-ui-x.netlify.app/x/react-data-grid/#mit-license-free-forever

1. Aggregation label type and layout updates

• The layout of the column header title and aggregation label have been updated so that the two are vertically centered together, rather than the label floating underneath.
• See https://github.com/mui/mui-x/pull/13950 for more specific details on the type changes.
• Fixes https://github.com/mui/mui-x/issues/5530 and https://github.com/mui/mui-x/issues/9104

Before	After

2. Column separator updates

• Separator visibility logic has been updated to:
  • Always be visible by default, not just on hover of column headers
  • Hidden when a cell is focused or bordered until the edge is hovered
• New separator icon that in its default state is 1px width, the same thickness as borders, growing to 3px on hover
• Updated separator icon hover/resize color from black to primary
• Fixes https://github.com/mui/mui-x/issues/7268

Before	After

3. Fixed overlapping of column menu button and resize handle

• Reduced the resize handle hit area from 24px to 10px and repositioned the column menu buttons to avoid overlapping of the two actions.
• Also made column menu icon size consistent with the sort icon by switching the size prop from small to inherit.

Before	After

• [x] I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Deploy preview: https://deploy-preview-14293--material-ui-x.netlify.app/

Generated by :no_entry_sign: dangerJS against 8051e7ca5d430872fa4a18790503d8ae664a1e32

[oliviertassinari]

#5274, #9162, #9776 might be related to this PR.