Uploaded image for project: 'Red Hat Internal Developer Platform'
  1. Red Hat Internal Developer Platform
  2. RHIDP-7262

Align RHDH custom MUI theme (a bit) with PatternFly 6

XMLWordPrintable

    • Align RHDH theme (a bit) with PatternFly 6
    • S
    • False
    • Hide

      None

      Show
      None
    • False
    • In Progress
    • RHIDP-6911 - Align RHDH theme (a bit) with PatternFly 6
    • QE Needed, Docs Needed, TE Needed, Customer Facing, PX Needed
    • 0% To Do, 0% In Progress, 100% Done
    • Hide
      = Improved look and feel of {product-short}

      With this update, the look and feel of {product-short} has been updated to better match the visual style of PatternFly 6 and improve alignment with the {company} product portfolio.
      Show
      = Improved look and feel of {product-short} With this update, the look and feel of {product-short} has been updated to better match the visual style of PatternFly 6 and improve alignment with the {company} product portfolio.
    • Feature
    • Done
    • Moderate

      Epic Goal

      The GUI experience is more consistent across key features in RHDH.

      Background

      As a user of different Red Hat products, I want have a aligned UI/UX. For that reason we've implemented a custom Backstage/RHDH theme that looks like the "old" PatternFly 5. Other products like OpenShift Console already adopted PatternFly 6.

      Some new designs and plugins, like the AI Home page, adopted these changes now so that we want do a small step forward to look more like PatternFly 6.

      Anyway, this is not a priority and we should focus on quick wins and drop stories that are complicated or has a risk that plugins doesn't work well with this changes.

      ACs

      1. Card border radius should be aligned with PF 6 (see PF 6 Card component)
        • The AI Homepage cards should use the same border radius or should be aligned (we can ask the RHPAI team to test that)
      2. Stretch goal: Tabs should be more aligned with PF 6 tabs
      3. Stretch goal: Buttons (esp. border radius) should be aligned with PF 6
      4. Stretch goal: The RHDH Sidebar (main navigation) should use the PF 6 design
      5. Stretch goal: Align global-header colors with PF 6

      In general: Verify changes with UX/Shiran and cc PMs Ben and Christophe

              rh-ee-jaclee Jackson Lee
              cjerolim Christoph Jerolimov
              Shiran Hirshberg
              RHIDP - Frontend Plugins & UI
              Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

                Created:
                Updated:
                Resolved: