Rework person badges for consistency

[heyhippari]

Changed

• Changed the user badges on the book details tab to properly aligned and have a background when no cover is set for the person
• Changed the user badge on the person details page to be consistent with the look of the book details tab and remove the use of the pixelated image

Fixed

• Fixed the images of the user badges not being clickable

---

First part of the UI/UX changes I'm looking at doing. There's still the errorImage to take care of, but I'm thinking we should leave that as-is and maybe replace it with an SVG or something to avoid the pixelation (Along with making sure images still have the new background to ensure that error image would have it).

Otherwise, if it's possible to somehow catch the error and set HasCoverImage to false, we can just remove it completely and fallback to the icon.

As an aside, I think it'd be beneficial in the long run to look at having an icon component that ensures the icon is square and all icons have readable names when relevant (For WCAG and all that). Maybe something like this? It's not for this PR anyway, but it would make consistency easier (and probably some code cleaner) across the UI, I think.

[majora2007]

For reference, we are using FontAwesome in the project. I'm am tight on time atm, but I will try to review this before I'm off for the year.

[majora2007]

Looks fine. Can you take out so many of the inline styles and create a class for it instead?

[majora2007]

Please ping me once you've done this, so I can merge into the PR Flush branch and push to the nightly branch. I'm waiting on this PR.

[heyhippari]

@majora2007 Done!

I added an objectFit attribute to the image component, too, since I noticed it was at least used on the badges in the series details page, and I figured it was better to add it to that component instead of using CSS to define that everywhere (And for consistency, I used it on the person details page too).

The property defaults to "fill", which is the default in CSS, and has type info for valid settings.

[majora2007]

Last I saw on the image component, this wont take effect due to the view encapsulation. Can you validate for me?

[heyhippari]

Seems to be working for me on the dev server: