UI-1017 feat: adjust styles #181

jvciq · 2025-10-29T16:44:37Z

SUMMARY

UI updates to match Quantic DS styles.

This pull request introduces the integration of the Quantic design system into the AWX UI. The main changes include adding Quantic packages as dependencies, updating Webpack and dev server config to support custom font assets, and cleaning up legacy styles and assets. These updates lay the groundwork for using Quantic components and styles throughout the application.

ISSUE TYPE

New or Enhanced Feature

COMPONENT NAME

UI

ASCENDER VERSION

awx: 25.2.1.dev6+gf000c1cb3

Copilot

Pull Request Overview

This PR migrates the UI from PatternFly React Icons to Lucide Icons through the @ctrliq/quantic-react library, implements a new design system with Quantic tokens, and updates styling throughout the application. The changes include icon replacements, CSS variable overrides, and font integration.

Key Changes

Replaced all PatternFly icon imports with Lucide icon equivalents from @ctrliq/quantic-react
Added comprehensive PatternFly CSS overrides using Quantic design tokens
Integrated Satoshi and Inter fonts and removed Background component

Reviewed Changes

Copilot reviewed 167 out of 178 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
awx/ui/src/patternfly-overrides.css	New 619-line CSS file defining Quantic design system overrides for PatternFly components
awx/ui/src/index.js	Added Quantic tokens/fonts imports and font injection logic
awx/ui/src/components/StatusIcon/icons.js	Migrated icon definitions from PatternFly to Lucide icons
awx/ui/src/screens/Login/Login.js	Updated login page styling and icon imports
Multiple component files	Replaced PatternFly icon imports with Lucide equivalents throughout

Files not reviewed (1)

awx/ui/package-lock.json: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-10-30T13:44:37Z

awx/ui/src/components/PaginatedTable/ToolbarAddButton.js

  if (linkTo) {
    return (
-      <Tooltip content={defaultLabel || t`Add`} position="top">
+      <Tooltip content={defaultLabel || t`Add`} position="top" open>


The open prop on Tooltip will cause the tooltip to always be visible. This appears to be unintentional and should be removed unless permanent visibility is required.

Copilot · 2025-10-30T13:44:38Z

awx/ui/src/screens/Project/ProjectList/ProjectListItem.js

            onClick={() => onRefreshRow(project.id)}
          >
-            <UndoIcon />
+            <LucideIconUndo_2 data-original-icon="UndoIcon" />


The icon LucideIconUndo_2 is missing the size prop that is consistently applied to other icons throughout this PR. For consistency, add size={16} or an appropriate size value.

Copilot · 2025-10-30T13:44:38Z

awx/ui/src/components/ContentEmpty/ContentEmpty.js

  return (
    <EmptyState variant="full" className={className}>
-      <EmptyStateIcon icon={icon} />
+      <EmptyStateIcon size={64} icon={icon} />


The size prop is applied to EmptyStateIcon component but icons passed to it may also need sizing. Ensure that icons passed via the icon prop properly handle the size, as earlier in the file the default icon is LucideIconBox which may need explicit sizing.

Also, the size is a hardcoded number. Should this be a token/css var?

Copilot · 2025-10-30T13:44:38Z

awx/ui/src/components/Sort/Sort.js

 import styled from 'styled-components';
 import { parseQueryString } from 'util/qs';
 import { SortColumns, QSConfig } from 'types';
+import { LucideIconArrowDown10, LucideIconArrowDownAZ } from '@ctrliq/quantic-react';


Unused imports LucideIconArrowDown10, LucideIconArrowDownAZ.

Copilot · 2025-10-30T13:44:39Z

awx/ui/src/screens/Inventory/InventoryGroup/InventoryGroup.js

  useParams,
 } from 'react-router-dom';
-import { CaretLeftIcon } from '@patternfly/react-icons';
+import { LucideIconChevronLeft } from '@ctrliq/quantic-react';


Unused import LucideIconChevronLeft.

adewergifosse-ciq

Since this a draft PR, I will not approve/reject.

This is all looking great! Thank you for doing this work.
I left a few comments around consistency mostly.

adewergifosse-ciq · 2025-10-30T18:09:54Z

awx/ui/config/webpackDevServer.config.js

+      {
+        // Serve quantic-fonts assets at /assets path
+        directory: path.resolve(__dirname, '../node_modules/@ctrliq/quantic-fonts/dist/assets'),
+        publicPath: '/assets',


question: Could this conflict with an actual public assets folder?
Should we/Could we make it a more specific path like quantic-assets?

adewergifosse-ciq · 2025-10-30T18:11:26Z

awx/ui/config/webpackDevServer.config.js

      // Paths with dots should still use the history fallback.
      // See https://github.com/facebook/create-react-app/issues/387.
-      disableDotRule: true,
+      disableDotRule: false,


question: What does this do?
the comment was not changed but the value was

adewergifosse-ciq · 2025-10-30T18:12:00Z

awx/ui/public/static/media/favicon.svg

Shame we're losing this magnificent favicon

Ya, we used to call him Rage taHdeR.

adewergifosse-ciq · 2025-10-30T18:13:04Z

awx/ui/src/components/AppContainer/BrandLogo.js

  margin: 0px 0px 0px 0px;
  max-width: initial;
-  max-height: 60px;
+  max-height: 36px;


nitpick: Should this value come from a token/css var?

adewergifosse-ciq · 2025-10-30T18:13:52Z

awx/ui/src/components/ContentEmpty/ContentEmpty.js

  return (
    <EmptyState variant="full" className={className}>
-      <EmptyStateIcon icon={icon} />
+      <EmptyStateIcon size={64} icon={icon} />


Also, the size is a hardcoded number. Should this be a token/css var?

adewergifosse-ciq · 2025-10-30T18:23:56Z

awx/ui/src/screens/Inventory/InventoryGroup/InventoryGroup.js

      name: (
        <>
-          <CaretLeftIcon aria-label={t`Back to Groups`} />
+          <ChevronLeft aria-label={t`Back to Groups`} />


Inconsisency between LucideIconChevronLeft in the import and ChevronLeft in the usage

adewergifosse-ciq · 2025-10-30T18:26:06Z

awx/ui/src/screens/Login/Login.js

              data-cy="login-form"
              className={authError ? 'pf-m-error' : ''}
-              helperText={helperText}
+              helperText={authError ? helperText : null}


question: This changes the behaviour. Is there no case wehre we need to display a helperText that is not an error?

adewergifosse-ciq · 2025-10-30T18:26:24Z

awx/ui/src/screens/Login/Login.js

                    >
                      <Tooltip content={t`Sign in with Azure AD`}>
-                        <AzureIcon size="lg" />
+                        <AzureIcon size={24} data-original-icon="AzureIcon" />


new size: 24?

adewergifosse-ciq · 2025-10-30T18:29:39Z

awx/ui/src/screens/TopologyView/Legend.js

-    color: black;
+    font-size: 10px;
+    background-color: var(--quantic-bg-tertiary);
+    line-height: 1;


nitpick: Should this be a token/css var?

adewergifosse-ciq · 2025-10-30T18:29:47Z

awx/ui/src/screens/TopologyView/Legend.js

-    background-color: white;
-    border: 1px solid #ccc;
-    color: black;
+    font-size: 10px;


nitpick: Should this be a token/css var?

jvciq added 5 commits October 21, 2025 13:40

chore: add overrides and dependencies

4ba3b66

feat: mode adjustments

84b8b10

feat: more adjustments

f3f1b64

feat: adjust login screen

53555bd

feat: add favicon

f000c1c

jvciq requested review from adewergifosse-ciq and Copilot October 30, 2025 13:40

Copilot AI reviewed Oct 30, 2025

View reviewed changes

adewergifosse-ciq reviewed Oct 30, 2025

View reviewed changes

UI-1017 feat: adjust styles #181

Are you sure you want to change the base?

UI-1017 feat: adjust styles #181

Conversation

jvciq commented Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

SUMMARY

ISSUE TYPE

COMPONENT NAME

ASCENDER VERSION

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Key Changes

Reviewed Changes

Uh oh!

Copilot AI Oct 30, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 30, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 30, 2025

Choose a reason for hiding this comment

Uh oh!

adewergifosse-ciq left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

5 participants

jvciq commented Oct 29, 2025 •

edited

Loading