Upgrade to react-bootstrap V2 with Bootstrap V5

[Antonio-Maranhao]

Overview

Replaces the unsupported version of react-bootstrap with the latest v2, which also required upgrading to Bootstrap v5.

A series of enhancements were done as part of the upgrade to Bootstrap 5. Most of these did not affect Fauxton design, although some changes were intentionally done to improve UX consistency and accessibility of the application.

Highlights:

• Bootstrap is now installed as an npm package. The old bootstrap folder and its .less files were removed.
• Bootstrap V5 required migrating from Less to Sass to compile the CSS
• All CSS was updated to use variables instead of color literals, leading to all colors values being defined in _variables.scss.
• As part of consolidating the use of colors, similar colors were removed in order to improve consistency across pages and components.
• Some background and text colors were modified to improve accessibility. The goal was to achieve a minimum of 5:1 color contrast, which satisfies WCAG level AA.

Quick acknowledgement: Many thanks to @fryjordan who helped me put this together.

Testing recommendations

• Run dev server and visually inspect the pages
• There were no changes in behavior, so the current unit and e2e tests are enough to prove the application still works.

GitHub issue number

n/a

Related Pull Requests

n/a

Checklist

• [x] Code is written and works correctly;
• [x] Changes are covered by tests;
• [ ] Documentation reflects the changes;
• [ ] Update rebar.config.script with the correct tag once a new Fauxton release is made