chore(*) Update bootstrap/reactstrap to version 5

[lunakv]

Resolves #1614.

This PR updates our bootstrap dependency to version 5 and reactstrap accordingly to version 9. This upgrade has breaking changes that need to be addressed before this PR can be merged.

When reviewing the changes in this PR, it's recommended to exclude deleted files, as the PR removes the bower_components directory, which produces a large diff of deleted files.

Below are two subsets of breaking changes from the Bootstrap migration guide that might impact our site. Items in the first subset definitely create issues that need resolving, while items in the second need investigation into whether they require changes.

Definitely breaking changes

• Consolidated native and custom form elements. Checkboxes, radios, selects, and other inputs that had native and custom classes in v4 have been consolidated. Now nearly all our form elements are entirely custom, most without the need for custom HTML.
  • (non-issue) .custom-check is now .form-check.
  • (non-isssue) .custom-check.custom-switch is now .form-check.form-switch.
  • .custom-select is now .form-select.
  • (non-issue) .custom-file and .form-file have been replaced by custom styles on top of .form-control.
  • (non-issue) .custom-range is now .form-range.
  • (non-issue) Dropped native .form-control-file and .form-control-range.
• Dropped .input-group-append and .input-group-prepend. You can now just add buttons and .input-group-text as direct children of the input groups.
• Dropped form-specific layout classes for our grid system. Use our grid and utilities instead of .form-group, .form-row, or .form-inline.
• Dropped all .badge-* color classes for background utilities (e.g., use .bg-primary instead of .badge-primary).
• Dropped .btn-block for utilities. Instead of using .btn-block on the .btn, wrap your buttons with .d-grid and a .gap-* utility to space them as needed. Switch to responsive classes for even more control over them. Read the docs for some examples.
• Renamed several utilities to use logical property names instead of directional names with the addition of RTL support:
  • (non-issue) Renamed .left-* and .right-* to .start-* and .end-*.
  • Renamed .float-left and .float-right to .float-start and .float-end.
  • Renamed .border-left and .border-right to .border-start and .border-end.
  • (non-issue) Renamed .rounded-left and .rounded-right to .rounded-start and .rounded-end.
  • Renamed .ml-* and .mr-* to .ms-* and .me-*.
  • Renamed .pl-* and .pr-* to .ps-* and .pe-*.
  • Renamed .text-left and .text-right to .text-start and .text-end.
• Renamed .sr-only and .sr-only-focusable to .visually-hidden and .visually-hidden-focusable

Possibly breaking changes

• Columns no longer have position: relative applied, so you may have to add .position-relative to some elements to restore that behavior.
• Nested tables do not inherit styles anymore.
• (non-issue) .text-* utilities do not add hover and focus states to links anymore. .link-* helper classes can be used instead. See #29267
• <hr> elements now use height instead of border to better support the size attribute. This also enables use of padding utilities to create thicker dividers (e.g., <hr class="py-1">).
• (non-issue) Form labels now require .form-label.
• (non-issue) Removed hover and focus styles for <a> and <button> elements.
• (non-issue) Toggle buttons, with checkboxes or radios, no longer require JavaScript and have new markup. We no longer require a wrapping element, add .btn-check to the <input>, and pair it with any .btn classes on the <label>. See #30650. The docs for this has moved from our Buttons page to the new Forms section.
• All the events for the dropdown are now triggered on the dropdown toggle button and then bubbled up to the parent element.
• Navbars now require a container within (to drastically simplify spacing requirements and CSS required).
• The default value for the fallbackPlacements on Toolbars is changed to ['top', 'right', 'bottom', 'left'] for better placement of popper elements.
• Disabled negative margins by default.
• Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use data-bs-toggle instead of data-toggle.

Major Changes

This migration resulted in a couple of bigger changes to the look of the site.

Using System Fonts

Bootstrap 5 uses system-ui as the default font, which is equivalent to the system font for displaying UI. This is supposed to make the site feel more native to the system used. You can notice in the screenshots that while the "old" use Roboto as the main typeface, the "new" instead use Fira Sans (the system font on my laptop).

Wider Viewport on Desktop

Bootstrap 5 added a new xxl breakpoint in v5, which makes the site overall wider on large screens.

Old

New

Changed Colors

Bootstrap v5 changes the color scheme a little from its predecessor, which leads to adjusted colors compared to the ones we're used to. This causes inconsistencies where some elements are colored using our override CSS classes while others are rendered using the default bootstrap classes. We should decide whether to migrate to the new color palette, override the defaults to use the old one, or somehow combine them together.

Old

New

New Close Button

Version 5 changes how a close button is rendered, using an svg drawing. This PR replaces the close icons to the new versions.

Old

New

Other

There are a few other small fixes and adjustments to the overall UI, but the ones highlighted should be the overall most impactful.

[dekkerglen]

Looks like this created a diff for bower components, which is something I'm pretty sure we're not actually using IIRC. Might also be a good opportunity to remove that folder and dependency

[lunakv]

We actually do use those. More specifically, the main view is configured so that it uses these local versions in a development environment and a CDN in a production environment. But, since we don't actually use NODE_ENV=production even in prod due to bugs, the live site also loads bootstrap from this local folder. I agree that these files don't belong in the repo, but if we want to get rid of them, we'd have to remove their usage as well. If we don't want to do that, it would still be better to just have a bower.json file and load the packages on build.

[lunakv]

Worth pointing out that with this PR we'll load Bootstrap CSS locally, but the JS is delivered from a CDN. This can be adjusted if there's a need to do so, but I don't see it as a problem.