• Status: Final

Motivation

This proposal is to update the Keycloak Account Console to the latest version of the PatternFly design system (release 2021.15) and to follow the latest PatternFly design guidelines. This also brings the account console into visual / design alignment with the latest updates to the admin console.

Implementation details

The most obvious visual changes applied to all pages are:

• Page content areas use a white background rather than white cards on a grey background (except for landing page)
• Left aligning content
• Updating font to Red Hat Text (body copy) and Red Hat Display (headings)
• Using sentence case for all text

Global code changes include:

• @patternfly/react libraries updated to latest versions
• Fixes for breaking changes from the library updates
• Layout and styling updates to accommodate designs

Landing page

• Updated to PatternFly’s card view layout

Personal info

• Defaulting to stacked labels and inputs for forms rather than a horizontal layout
• Removed examples from subheading text to allow for more flexibility

Signing in

• Button label change from “Update” to “Change password”
• Improved spacing for easier parsing of the page sections

Device activity

• Changed icon and row heading to focus on the device rather than the browser
• Used a PatternFly description list to improve readability within each row
• Added “Refresh” label to refresh icon

Linked accounts

• Updated to latest PatternFly label style

Applications

• Improved alignment in data list and expansion
• Added subheading for consistency with other pages

Resources

• Updated to latest PatternFly tabs and filter components