UI-1017 feat: adjust styles

awx/ui/.npmrc

@@ -1 +1,7 @@
 engine-strict = true
+@ctrliq:registry=https://npm.pkg.github.com
+# - generate a new GitHub token (classic) with the read:packages scope (https://github.com/settings/tokens/new)
+# - copy the token and set it as an environment variable in your shell
+# export NPM_TOKEN=ghp_your_token_here
+# (you can also add it to your ~/.bashrc, ~/.zshrc, etc. if you want it to be persistent)
+//npm.pkg.github.com/:_authToken=${NPM_TOKEN}

awx/ui/config/webpack.config.js

@@ -222,12 +222,13 @@ module.exports = function (webpackEnv) {
       publicPath: paths.publicUrlOrPath,
       // Point sourcemap entries to original disk location (format as URL on Windows)
       devtoolModuleFilenameTemplate: isEnvProduction
-        ? info =>
+        ? (info) =>
             path
               .relative(paths.appSrc, info.absoluteResourcePath)
               .replace(/\\/g, '/')
         : isEnvDevelopment &&
-          (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
+          ((info) =>
+            path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
     },
     cache: {
       type: 'filesystem',
@@ -237,7 +238,7 @@ module.exports = function (webpackEnv) {
       buildDependencies: {
         defaultWebpack: ['webpack/lib/'],
         config: [__filename],
-        tsconfig: [paths.appTsConfig, paths.appJsConfig].filter(f =>
+        tsconfig: [paths.appTsConfig, paths.appJsConfig].filter((f) =>
           fs.existsSync(f)
         ),
       },
@@ -307,8 +308,8 @@ module.exports = function (webpackEnv) {
       // `web` extension prefixes have been added for better support
       // for React Native Web.
       extensions: paths.moduleFileExtensions
-        .map(ext => `.${ext}`)
-        .filter(ext => useTypeScript || !ext.includes('ts')),
+        .map((ext) => `.${ext}`)
+        .filter((ext) => useTypeScript || !ext.includes('ts')),
       alias: {
         // Support React Native Web
         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
@@ -419,7 +420,7 @@ module.exports = function (webpackEnv) {
                     },
                   ],
                 ],
-                
+
                 plugins: [
                   isEnvDevelopment &&
                     shouldUseReactRefresh &&
@@ -453,7 +454,7 @@ module.exports = function (webpackEnv) {
                 cacheDirectory: true,
                 // See #6846 for context on why cacheCompression is disabled
                 cacheCompression: false,
-                
+
                 // Babel sourcemaps are needed for debugging into node_modules
                 // code.  Without the options below, debuggers like VSCode
                 // show incorrect code and set breakpoints on the wrong lines.
@@ -543,6 +544,10 @@ module.exports = function (webpackEnv) {
                 'sass-loader'
               ),
             },
+            {
+              test: /\.(woff|woff2|eot|ttf|otf)$/i,
+              type: 'asset/resource',
+            },
             // "file" loader makes sure those assets get served by WebpackDevServer.
             // When you `import` an asset, you get its (virtual) filename.
             // In production, they would get copied to the `build` folder.
@@ -566,7 +571,7 @@ module.exports = function (webpackEnv) {
       {
         message: /source-map-loader/,
         module: /node_modules\/rrule/,
-      }
+      },
     ],
     plugins: [
       // Generates an `index.html` file with the <script> injected.
@@ -649,7 +654,7 @@ module.exports = function (webpackEnv) {
             return manifest;
           }, seed);
           const entrypointFiles = entrypoints.main.filter(
-            fileName => !fileName.endsWith('.map')
+            (fileName) => !fileName.endsWith('.map')
           );
 
           return {

awx/ui/config/webpackDevServer.config.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const fs = require('fs');
+const path = require('path');
 const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
 const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
 const ignoredFiles = require('react-dev-utils/ignoredFiles');
@@ -43,32 +44,39 @@ module.exports = function (proxy, allowedHost) {
     },
     // Enable gzip compression of generated files.
     compress: true,
-    static: {
-      // By default WebpackDevServer serves physical files from current directory
-      // in addition to all the virtual build products that it serves from memory.
-      // This is confusing because those files won’t automatically be available in
-      // production build folder unless we copy them. However, copying the whole
-      // project directory is dangerous because we may expose sensitive files.
-      // Instead, we establish a convention that only files in `public` directory
-      // get served. Our build script will copy `public` into the `build` folder.
-      // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
-      // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
-      // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
-      // Note that we only recommend to use `public` folder as an escape hatch
-      // for files like `favicon.ico`, `manifest.json`, and libraries that are
-      // for some reason broken when imported through webpack. If you just want to
-      // use an image, put it in `src` and `import` it from JavaScript instead.
-      directory: paths.appPublic,
-      publicPath: [paths.publicUrlOrPath],
-      // By default files from `contentBase` will not trigger a page reload.
-      watch: {
-        // Reportedly, this avoids CPU overload on some systems.
-        // https://github.com/facebook/create-react-app/issues/293
-        // src/node_modules is not ignored to support absolute imports
-        // https://github.com/facebook/create-react-app/issues/1065
-        ignored: ignoredFiles(paths.appSrc),
+    static: [
+      {
+        // By default WebpackDevServer serves physical files from current directory
+        // in addition to all the virtual build products that it serves from memory.
+        // This is confusing because those files won't automatically be available in
+        // production build folder unless we copy them. However, copying the whole
+        // project directory is dangerous because we may expose sensitive files.
+        // Instead, we establish a convention that only files in `public` directory
+        // get served. Our build script will copy `public` into the `build` folder.
+        // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
+        // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
+        // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
+        // Note that we only recommend to use `public` folder as an escape hatch
+        // for files like `favicon.ico`, `manifest.json`, and libraries that are
+        // for some reason broken when imported through webpack. If you just want to
+        // use an image, put it in `src` and `import` it from JavaScript instead.
+        directory: paths.appPublic,
+        publicPath: [paths.publicUrlOrPath],
+        // By default files from `contentBase` will not trigger a page reload.
+        watch: {
+          // Reportedly, this avoids CPU overload on some systems.
+          // https://github.com/facebook/create-react-app/issues/293
+          // src/node_modules is not ignored to support absolute imports
+          // https://github.com/facebook/create-react-app/issues/1065
+          ignored: ignoredFiles(paths.appSrc),
+        },
       },
-    },
+      {
+        // Serve quantic-fonts assets at /assets path
+        directory: path.resolve(__dirname, '../node_modules/@ctrliq/quantic-fonts/dist/assets'),
+        publicPath: '/assets',
+      },
+    ],
     client: {
       webSocketURL: {
         // Enable custom sockjs pathname for websocket connection to hot reloading server.
@@ -92,14 +100,19 @@ module.exports = function (proxy, allowedHost) {
     },
     server: {
       type: 'https', // Specify the server type as 'https'
-      ...getHttpsConfig()
+      ...getHttpsConfig(),
     },
     host,
     historyApiFallback: {
       // Paths with dots should still use the history fallback.
       // See https://github.com/facebook/create-react-app/issues/387.
-      disableDotRule: true,
+      disableDotRule: false,
       index: paths.publicUrlOrPath,
+      rewrites: [
+        // Exclude static assets from fallback to allow webpack to serve them
+        { from: /\.(woff|woff2|ttf|eot|otf)$/, to: (context) => context.parsedUrl.pathname },
+        { from: /\.(css|js|json|ico|png|jpg|jpeg|gif|svg)$/, to: (context) => context.parsedUrl.pathname },
+      ],
     },
     // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
     proxy,
@@ -114,6 +127,13 @@ module.exports = function (proxy, allowedHost) {
         require(paths.proxySetup)(devServer.app);
       }
 
+      devServer.app.use((req, res, next) => {
+        if (/\.(woff2)(\?|$)/i.test(req.url)) {
+          res.setHeader('Content-Type', 'font/woff2');
+        }
+        next();
+      });
+
       // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
       devServer.app.use(redirectServedPath(paths.publicUrlOrPath));
 

awx/ui/package.json

@@ -6,6 +6,10 @@
     "node": ">=20.18.2"
   },
   "dependencies": {
+    "@ctrliq/quantic-css": "^1.5.5",
+    "@ctrliq/quantic-fonts": "^1.18.5",
+    "@ctrliq/quantic-react": "^1.18.5",
+    "@ctrliq/quantic-tokens": "^1.18.5",
     "@lingui/react": "^5.4.0",
     "@patternfly/patternfly": "4.224.5",
     "@patternfly/react-core": "4.278.1",