Epic: UI refresh (24.12)

[carcruz]

Epic: UI refresh (24.12)

Description:

UI refresh work to be done in the 24.12 release. This work consists of two significant improvements: updating the web application color pallets and updating the Homepage About section. Additionally, there are smaller tasks, such as updating the widgets table, updating the widgets <SectionItem> and <SectionSummary>, and reviewing the layout transitions (loading, page load, page change).

Acceptance Criteria:

• A refreshed version of the UI without impacting the current styling technology, focusing mainly on UI design decisions
• Colors:
  • Util shared across platform and packages
  • Link color adjustments (e.g., Target -> Mouse phenotype)
  • Sequential palette (associations on the fly and prioritisation)
  • Categorical palette adjustments (e.g., Bibliography)
  • Intent colors for various states, such as the Target page, in the Downloads Error state on the:
  • Default, call-to-action (primary), success, warning, and danger
• Home page:
  • Replace the "About" section with a "Tool History" section, covering
  • The problem
  • How we approach the problem
  • Our results
• Components:
  • Table
  • New table on client and server-side widgets
  • Column control (nice-to-have)
  • Column-specific filters (nice-to-have)
  • SectionItem and SectionSummary
  • View switch
  • Redefine Loading state
  • Review child component modularity and lazy-load

Features:

1. A new table component
2. Improved color accessibility across the web app
3. Improved layout shifting

Tickets:

• 3575

• 3576

• 3577

• 3578