New design theme#351
Merged
Merged
Conversation
cigamit
added
enhancement
Contributor
There was a problem hiding this comment.
Pull request overview
This PR is the start of a new UI design theme for the AWX UI, updating global PatternFly styling tokens/overrides and refreshing branding assets (logos/favicons), along with a set of targeted layout and visual tweaks across common screens/components.
Changes:
- Introduce extensive global PatternFly token overrides and component-specific CSS adjustments for the new dark theme.
- Update branding assets and references (logos/favicons) and remove the legacy background-image wrapper.
- Apply assorted UI polish changes (dashboard colors, table action icon styling, select sizing/positioning, code editor theme, login layout adjustments).
Reviewed changes
Copilot reviewed 23 out of 51 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| awx/ui/src/screens/Login/Login.js | Updates login page styling and layout to match the new theme and new logo asset. |
| awx/ui/src/screens/Dashboard/shared/LineChart.js | Updates chart palette and styling to fit the new theme. |
| awx/ui/src/screens/Dashboard/shared/Count.js | Updates count-card typography and status colors. |
| awx/ui/src/screens/Credential/shared/CredentialForm.js | Changes cancel button styling to better match the new button system. |
| awx/ui/src/screens/ActivityStream/ActivityStream.js | Adjusts select dropdown positioning/sizing for the new layout. |
| awx/ui/src/components/Search/AdvancedSearch.js | Tweaks responsive spacing. |
| awx/ui/src/components/PaginatedTable/ActionsTd.js | Changes icon presentation/hover behavior in action columns. |
| awx/ui/src/components/FormLayout/FormLayout.js | Adjusts form sub-layout padding/radius and checkbox alignment styling. |
| awx/ui/src/components/DetailList/DetailList.js | Changes DetailList grid behavior/spacing for the new design. |
| awx/ui/src/components/DetailList/Detail.js | Groups detail label/value rendering to support the new layout (but currently introduces a layout regression). |
| awx/ui/src/components/ContentEmpty/ContentEmpty.js | Adjusts empty-state icon sizing. |
| awx/ui/src/components/CodeEditor/CodeEditor.js | Switches editor theme to monokai. |
| awx/ui/src/components/Background/index.js | Removes Background component export. |
| awx/ui/src/components/Background/Background.test.js | Removes Background component test. |
| awx/ui/src/components/Background/Background.js | Removes Background component implementation. |
| awx/ui/src/components/AppContainer/PageHeaderToolbar.js | Minor styling change to show username consistently in the toolbar toggle. |
| awx/ui/src/components/AppContainer/BrandLogo.js | Updates header logo asset and sizing. |
| awx/ui/src/components/About/About.js | Updates about modal branding image and removes background image. |
| awx/ui/src/ascender.css | Adds a large set of Quantic/PatternFly token overrides and component-level theme tweaks. |
| awx/ui/src/App.js | Removes Background wrapper usage around the app shell. |
| awx/ui/public/static/media/logo-login.svg | Removes legacy logo asset. |
| awx/ui/public/static/media/logo-header.svg | Removes legacy logo asset. |
| awx/ui/public/static/media/favicon.svg | Replaces favicon SVG with new design (currently structured oddly). |
| awx/ui/public/static/media/brand-logo.svg | Removes legacy brand logo asset. |
| awx/ui/public/static/media/Ascender_logo.svg | Adds new Ascender logo SVG asset used across login/header/about. |
| awx/ui/public/installing.html | Updates favicon reference to the new favicon.ico. |
| awx/ui/public/index.html | Updates favicon reference to the new favicon.ico for dev/prod templating. |
| awx/templates/rest_framework/api.html | Updates DRF API page favicon reference to the new favicon.ico. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Make login screen always dark mode (add login.css) Reload the screen when swapping to ensure all assets are loaded Touch up playbook output colors
TheWitness
approved these changes
May 21, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Start of new design to match our other products. Much cleaner. Still need to either implement light mode or drop it completely.