Use new table icons in Workbench column headers

[sharadsw]

Fixes #2864

Checklist

• Self-review the PR after opening it to make sure the changes look good
  and self-explanatory (or properly documented)
• Add automated tests
• Add relevant issue to release milestone

Testing instructions

• Create a workbench dataset
• Verify new icons are being used in the column headers
• Verify icons work fine for new geo tables (eg: CollectionObjectType)

[maxpatiiuk]

looks good!

somewhat related:
since you refactored the workbench, could you double-check if some of these legacy icons can now be removed?

specify7/specifyweb/frontend/js_src/lib/components/Atoms/Icons.tsx

Lines 28 to 31 in 32d3301

	arrowsExpand: `<svg class="${iconClassName}" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 4a1 1 0 011-1h4a1 1 0 010 2H6.414l2.293 2.293a1 1 0 11-1.414 1.414L5 6.414V8a1 1 0 01-2 0V4zm9 1a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V6.414l-2.293 2.293a1 1 0 11-1.414-1.414L13.586 5H12zm-9 7a1 1 0 012 0v1.586l2.293-2.293a1 1 0 111.414 1.414L6.414 15H8a1 1 0 010 2H4a1 1 0 01-1-1v-4zm13-1a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 010-2h1.586l-2.293-2.293a1 1 0 111.414-1.414L15 13.586V12a1 1 0 011-1z" clip-rule="evenodd"></path></svg>`,
	ban: `<svg class="${iconClassName}" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clip-rule="evenodd" /></svg>`,
	link: `<svg class="${iconClassName}" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" /><path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" /></svg>`,
	printer: `<svg class="${iconClassName}" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 4v3H4a2 2 0 00-2 2v3a2 2 0 002 2h1v2a2 2 0 002 2h6a2 2 0 002-2v-2h1a2 2 0 002-2V9a2 2 0 00-2-2h-1V4a2 2 0 00-2-2H7a2 2 0 00-2 2zm8 0H7v3h6V4zm0 8H7v4h6v-4z" clip-rule="evenodd" /></svg>`,

[sharadsw]

Removed the ban legacy icon

[sharadsw]

The svg text does not vertically align without this for column headers. The baselineShift is a magic number but it perfectly aligns the text. Without it, the vertically alignment is juuust so slightly to the top. (this is so silly)

Without alignmentBaseline and baselineShift:

With both:

Without baselineShift:

[maxpatiiuk]

I am ok with this fix, but I would like you to double check one thing:
The svg icons work fine everywhere else, but break in this one place.
I suspect thus the issue is not with the SVG icons, but with the interference with the handsontable styling.
could you verify if some style from handsontable is interfering with our icons? (use the styles panel in the dev tools for that)

then, if you find the cause, you can add the fixup CSS into this file:
https://github.com/specify/specify7/blob/production/specifyweb/frontend/js_src/css/workbench.css

I leave it up to you to pick which solution you prefer more

[maxpatiiuk]

The current solution is good, but we need to test it:

• does the text looks ok in other places (i.e workbench mapper and the data entry table list?)
• if you change the font size and other UI settings, do icons still display fine, or not?