League UI for Leaderboard and Profile Pages

[GODrums]

Motivation

Closes task 4 of #170.

Description

This PR adds UI for the league-system:

• Display league icons next to the user in the leaderboard
• Show an overview of the current league progress including a call-to-action above the leaderboard and an info modal
• Showcase a users' current league and league points on their profile page
• Button on the workspace-page to reset and recalculate all league points (should be used when deploying this to production)

Screenshots

Leagues in the Leaderboard:

League overview on homepage:

Info popout of league overview:

User profile with their league:

Testing Instructions

• run webapp and application-server
• go to the workspace/admin-page and click the "reset league points"-button (this will recalculate all league points according to your current database)
• check out displayed league-UI elements on the homepage and user pages

Checklist

General

• PR title is clear and descriptive
• PR description explains the purpose and changes
• Code follows project coding standards
• Self-review of the code has been done
• Changes have been tested locally
• Screenshots have been attached (if applicable)
• Documentation has been updated (if applicable)

Client (if applicable)

• UI changes look good on all screen sizes and browsers
• No console errors or warnings
• User experience and accessibility have been tested
• Added Storybook stories for new components
• Components follow design system guidelines (if applicable)