Hovercards: Implement a component-scoped CSS reset

[wellyshen]

This PR implements a (robust) component-scoped CSS reset to prevent the hovercard's styles from being overridden by the themes of the website (e.g., WordPress sites)

• Related to Hovercards: Create a component scoped CSS reset #197
• Related to Hovercards: Styles are override by themes gravatar-enhanced#55

Proposed Changes

• Implement the component-scoped CSS reset
• Remove redundant and unnecessary CSS props due to the newly added CSS reset
• Use full class names to make parsing easier for the code editor
• Improve the styles a little bit

Testing Instructions

• Check out this PR
• Run cd web/packages/hovercards && npm run build
• Open a new terminal, and run npm start
• Check the hovercards it still works the same:

• Check the error state, it still works the same:

• Check the loading state, it still works the same:

[github-actions]

Size Change: 0 B

Total Size: 64 kB

ℹ️ View Unchanged

Filename	Size
dist/index.esm.js	9.38 kB
dist/index.js	9.52 kB
dist/index.mjs	9.38 kB
dist/index.react.js	11.6 kB
dist/index.react.mjs	11.6 kB
dist/index.react.umd.js	6.76 kB
dist/index.umd.js	5.79 kB

_{compressed-size-action}

[wellyshen]

This was for the version before portrait mode and is no longer necessary.

[aaronfc]

Looks good works well! 🚀