Pagination component includes `.btn-primary` on all its buttons, when only the active page actually has `.btn-primary` styling

[adamstankiewicz]

All buttons in Pagination component have a .btn-primary class, despite having different style treatments depending on which page is active.

For example, in this screenshot, we're looking at the class names for the 2nd page button, which has a white background, not the typical primary button styles despite it having the .btn-primary class name:

This appears to be the result of the .page-link class.

This causes issues for consumes who may override the .btn-primary class and expect the Pagination component to still have the same look-and-feel as before, where only the active page gets the primary button styles, e.g.:

We're relying on the page-link class to override the .btn-primary class. Instead, we should use the proper button variants as necessary.

AC

• [ ] Ensure the Pagination buttons no longer use .btn-primary.
• [ ] Ensure the non-active pages of Pagination have a transparent background (they are currently white). This will help make Pagination usable on a wider array of background colors than just white.

[adamstankiewicz]

[inform] @kiram15 intends to triage within the enterprise quokkas team.

[viktorrusakov]

https://github.com/openedx/paragon/pull/1911