Give the dashboard a fresh coat of paint

[xandervedder]

The dashboard currently looks a bit outdated and could use a refresher.

The following needs to be updated:

1. Styling (need a design first).
2. Better UX:
   a. Improve UX for users with a large number of repos #144.
   b. Sort repositories by type #147
   c. Slow redirection #148 (not slow anymore, but it isn't nice visually what happens on the page).
3. Better onboarding.
   a. Display non-private repositories #149 (we could show strykers' reports as an example).

---

Ideas:

• Trends: History of mutation score.
• Discoverability: able to see different reports from the main page.
• Report summaries. Where are most mutants located?

[nicojs]

• Add statistics:
  • "x projects onboarded"
  • "Average mutation score is X"
  • "A list of top repositories"

[lex-funy]

The ability to pin certain repositories to the top of the webpage might be useful.

[JortWillemsen]

First drafts of the redesigned dashboard. Thanks to some input from @xandervedder.

• The homepage now really is a home page and follows the same philosophy as the main Stryker site
• Getting started is clearly visible and conveys to the user what dashboard actually does.
• We need some good suggestions for a tag line that clearly describes what dashboard entails.
• In the view your results section we could add some graphs, trends and reports from one of the stryker repositories to convey the result when using dashboard.

• topbar is now in line with the stryker website (should ease the transition between the websites and make it feel more first party)
• Only the repositories that use dashboard are now visible (declutters the view).
• Personal repositories are at the top
• Organisation repositories are clearly grouped
• Mutation score is clearly visible
• Enable repository button now exists at the top right. Here you can enable a repository for dashboard.
• View button redirects to the page for the report, trends and insights.

[xandervedder]

We could also add documentation for the API somewhere as a separate page (like Swagger). Not sure if it’s difficult to theme a swagger page with Stryker colors..

[JortWillemsen]

Updated designs :D

[JortWillemsen]

https://github.com/JortWillemsen/stryker-dashboard-redesign

This is the fork that we can work in.

[xandervedder]

I will close this issue, as I'm making new issues for the comparing and history functionality:

https://www.figma.com/design/yW9Q5nb7KYGv4e6JsKc6kD/Stryker-dashboard-current?node-id=64-25&node-type=canvas