More usage of typography to improve consistent text styling

[cmdcolin]

In jbrowse/react-linear-genome-view, if there are bare "divs with text", then the font used might be something like "Times new roman" instead of a nice font

This tries to use typographies more thoroughly to make the font's a bit better

[cmdcolin]

Note that usages of SVG would not use typography elements, so labels on svg tracks may remain in Times-new-roman in embedded views

[cmdcolin]

This adds yet more typographies carefully thru the codebase...it even in some cases uses typography with a special prop component=() => <div/> to avoid nesting divs inside of the default p that typography provides

It is a little difficult to have to be so careful about being this thorough about using typography, and if one is missed it goes to times new roman, but this does help some cases

[codecov]

Codecov Report

Merging #2094 (e33cde2) into main (c91e207) will increase coverage by 0.02%.
The diff coverage is 78.57%.

❗ Current head e33cde2 differs from pull request most recent head 63d3484. Consider uploading reports for the commit 63d3484 to get more accurate results

@@            Coverage Diff             @@
##             main    #2094      +/-   ##
==========================================
+ Coverage   61.95%   61.98%   +0.02%     
==========================================
  Files         476      476              
  Lines       22791    22791              
  Branches     5349     5349              
==========================================
+ Hits        14121    14127       +6     
+ Misses       8388     8381       -7     
- Partials      282      283       +1     

Impacted Files	Coverage Δ
...otplot-view/src/ServerSideRenderedBlockContent.tsx	68.00% <0.00%> (ø)
...GenomeView/components/ReturnToImportFormDialog.tsx	7.14% <ø> (ø)
...play/components/ServerSideRenderedBlockContent.tsx	92.85% <60.00%> (ø)
...c/LinearGenomeView/components/OverviewScaleBar.tsx	91.89% <66.66%> (ø)
...kages/core/BaseFeatureWidget/BaseFeatureDetail.tsx	76.59% <92.30%> (-0.71%)	⬇️
...lignmentsFeatureDetail/AlignmentsFeatureDetail.tsx	42.64% <100.00%> (+0.85%)	⬆️
packages/core/util/analytics.ts	90.69% <0.00%> (-2.33%)	⬇️
...BrowseLinearGenomeView/JBrowseLinearGenomeView.tsx	91.66% <0.00%> (-0.65%)	⬇️
packages/core/util/index.ts	78.30% <0.00%> (ø)
...e-view/src/JBrowseLinearGenomeView/ModalWidget.tsx	33.33% <0.00%> (ø)
... and 3 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c91e207...63d3484. Read the comment docs.

[cmdcolin]

This is a random review of some concepts related to this PR

a) The usage of all:'initial' CSS block in jbrowse-react-linear-genome-view is a contributor to the instances of Times New Roman font e.g. default font showing up for divs for example
b) We could remove all:'initial' or perhaps make it optional, but it opens the doors to "CSS leaks" e.g. outside styles affecting the layout of jbrowse components
c) One sort-of-related factor is that you can add a <CssBaseline /> in JBrowseReactLinearGenomeView.tsx (https://material-ui.com/components/css-baseline/) and it makes it so that e.g. the divs in the dialog boxes get better fonts without using typography elements, but that is only because dialog's are instantiated outside of the div that has all:initial applied to it

So I guess to summarize

• adding typgoraphies everywhere is the safest way to make sure the right fonts are used
• cssbaseline can help in some cases
• we could decide on whether using all:initial is really a good default...

[cmdcolin]

went ahead and merged :) the update to use scopedcssbaseline (#2104) made it so we don't strictly require that everything is wrapped in a typography but these changes still seemed worthwhile.

Note: the session.DialogComponent can still get unstyled in some cases but we could look into this separately