Visual tweaks to the new TodosWidget

The new TodosWidget on the homepage still needs some UX enhancements to improve its visual appeal and usability. Since it shares the TodoItem component with the Todos Dashboard, changes need to be carefully considered to maintain consistency where appropriate.

Proposed changes:

  • Reduce width of timestamps (of due todos): !195809 (merged)
  • Increase avatar size to create a "media object" style layout
  • Add gl-bg-subtle background color to:
    • Make the widget more prominent
    • Create a focal point on the homepage
    • Improve overall page structure
  • Adjust hover styles accordingly.
  • Replace temporary reload button with a better solution (that works for the entire homepage. This might become its own issue)

Additional improvements may be implemented based on initial user feedback.

Note: Any modifications need to be evaluated for their impact on both the homepage and Todos Dashboard to ensure changes benefit both contexts appropriately. If needed, we can use the same personal_homepage feature flag to make certain visual changes only available (on the todos dashboard) to alpha testers of the homepage. This would be a simple way to get some feedback.

Edited by Thomas Hutterer