🏗️ Migrate to Bootstrap 5

This PR upgrades the website from Bootstrap 4 to Bootstrap 5, resulting in a minor but much-needed UI refresh. This has also allowed us to remove a lot of our custom CSS. I've also done some general housekeeping, and added some extra goodies.

Major Changes

• Lots of UI polish and pruning of custom CSS wherever possible.
  • Switched to a beautiful new off-canvas nav menu for mobile devices. ✨
  • Added localization to search results count and pack view counts.
  • Several tweaks to top-level layout to ensure the site looks great on mobile devices with "exotic" viewports, especially in standalone mode.
• Reduce reliance on external CDNs for dependencies; we now only need to connect to signalstickers.org and signal.org.
  • Bootstrap is now in-bundle via NPM.
  • Fonts are now in-bundle via the lovely folks at fontsource.org instead of Google Fonts. This better aligns with our stance on privacy as Google does track end users when their fonts are downloaded. This also gives us version locking and a slight performance boost.
• Dropped react-switch; Bootstrap 5 has a native component for this.
• We now use the prefers-color-scheme selector to set the initial value for dark/light mode.
• Removed the Back button from sticker pack detail pages.
  • It did not reliably return the user to their previous scroll position in search results, which could be quite frustrating.
  • It's not necessary when using a browser, the back button (or related keyboard shortcut) works fine.
  • In standalone/PWA mode, devices have swipe gestures to navigate forwards/backwards that functionally act the same as a back button, correctly restoring scroll position.

Notable Changes in Bootstrap 5

For a full list of changes in version 5, check out the migration guide. Some noteworthy updates are:

• Several utility classes have been renamed to use logical property names instead of directional names with the addition of RTL support. This means left and right are now start and end respectively. (read more)
• .form-row and .form-group have been dropped in favor of using grid classes for layout. This change allowed us to remove two layers of nested elements on each form control on our forms.
• Bootstrap 5 no longer requires jQuery, so this dependency has been dropped. 🧹

Other Refactoring

• Improved Search
  • By taking advantage of some advanced Fuse.js features, we now only need to create a single Fuse.js instance rather than one for each attribute we want to search on.
  • Fixed an issue where it was previously not possible to search for falsy values on boolean attributes like original, animated, and editorschoice.
  • Sorting search results by Relevance uses their Fuse.js result score.
  • Search results may now be sorted by Latest, Trending, and Most Viewed.
  • Search result count is now computed after NSFW packs are filtered (or not).
  • Fixed Search is unexpectedly verbatim #916
• Form submit handlers are now async, removing the need to explicitly call setSubmitting.
• We now use Formik's status to track when to show field errors and to store API errors.
• Sort order and NSFW settings are now persisted to Local Storage.
• Resolved several security vulnerabilities by upgrading dependencies. This branch now passes npm audit with 0 vulnerabilities. 🔒
• Fix Fix spelling error of personnal #856

🌎 A preview of these changes is available here.