Restyle the user item count widgets

Austin Regneryrequested to merge
aregnery/homepage-user-count-cards-tweaks into master

What does this MR do and why?

The new card-based design improves scannability and reduces cognitive load by creating clearer visual hierarchy and shorter, more focused text. Changes include:

Visual Layout Changes:

  • Updated the widget design with new styling, rounded corners, and better spacing
  • Removed the underlines from interactive states
  • Reorganized the layout to show the item type (like "Merge requests" or "Issues") as a header with an icon
  • Made the count number and description more prominent in a separate section

Text Simplification:

  • Shortened the link text by splitting it into two parts: a card title and a shorter action description
  • Changed "Merge requests waiting for your review" to just "Waiting for your review" (with "Merge requests" as the card title)
  • Changed "Issues assigned to you" to just "Assigned to you" (with "Issues" as the card title)

Loading State Improvements:

  • Added skeleton loader for timestamp display during loading states

Timestamp Display:

  • Now always shows a timestamp, displaying "Just now" when no specific time is available, instead of hiding the timestamp completely

References

N/A

Screenshots or screen recordings

Before After
CleanShot_2025-10-24_at_11.37.16 CleanShot_2025-10-24_at_11.33.55
CleanShot_2025-10-24_at_11.36.43 CleanShot_2025-10-24_at_11.34.37

How to set up and validate locally

  1. Visit the new homepage and interact with the cards with stats

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Austin Regnery

Merge request reports