Switch header to PatternFly (#916)

stackrox · Jul 21, 2023 · 01b35d4 · 01b35d4
1 parent de67af9
commit 01b35d4
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 44 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -22,6 +22,7 @@
  "gen:src": "./scripts/generate-client.sh"
  },
  "dependencies": {
+ "@patternfly/patternfly": "^4.224.2",
  "@patternfly/react-core": "^4.276.8",
  "@patternfly/react-icons": "^4.93.6",
  "axios": "^0.21.4",

diff --git a/ui/src/app.tw.css b/ui/src/app.tw.css
@@ -6,6 +6,7 @@
 @tailwind utilities;
 
 @import '~@patternfly/react-core/dist/styles/base.css';
+@import '~@patternfly/patternfly/patternfly-addons.css';
 @import './infra.css';
 
 /* reset the unthinking hardcoded resets of Tailwind Forms in v2 plugin,

diff --git a/ui/src/components/AppHeaderLayout.tsx b/ui/src/components/AppHeaderLayout.tsx
@@ -1,4 +1,11 @@
 import React, { ReactElement, ReactNode } from 'react';
+import {
+ Masthead,
+ MastheadMain,
+ MastheadBrand,
+ MastheadContent,
+ ToolbarItem,
+} from '@patternfly/react-core';
 
 type Props = {
  logo: ReactNode;
@@ -8,12 +15,15 @@ type Props = {
 
 export default function AppHeaderLayout({ logo, main, ending }: Props): ReactElement {
  return (
- <header>
- <nav className="top-navigation flex bg-base-100">
- <div>{logo}</div>
- <div>{main}</div>
- <div className="ml-auto">{ending}</div>
- </nav>
- </header>
+ <Masthead>
+ <MastheadMain>
+ <MastheadBrand className="pf-u-mr-xl">{logo}</MastheadBrand>
+ <ToolbarItem variant="separator" />
+ {main}
+ </MastheadMain>
+ <MastheadContent className="pf-u-flex-direction-row-reverse">
+ <div>{ending}</div>
+ </MastheadContent>
+ </Masthead>
  );
 }
diff --git a/ui/src/components/RHACSLogo.tsx b/ui/src/components/RHACSLogo.tsx
@@ -0,0 +1,65 @@
+import React, { forwardRef } from 'react';
+
+const RHACSLogo = forwardRef<SVGSVGElement, never>((_, ref) => (
+ <svg
+ id="RHACS-Logo"
+ width="254px"
+ height="60px"
+ viewBox="0 0 1482.9 350"
+ xmlns="http://www.w3.org/2000/svg"
+ ref={ref}
+ >
+ <g className="rhacs-logo-text">
+ <path d="M251.53,146.74h12.79l29.75,72.8H282.21l-8.42-21.32H241.23l-8.53,21.32H221.37Zm18.72,42.43-12.69-31.93-12.69,31.93Z" />
+ <path d="M338.06,214.55a25,25,0,0,1-16.23,5.82c-15,0-26.73-12-26.73-27.35s11.76-27.25,26.94-27.25A26.92,26.92,0,0,1,338,171V146.74l10.4-2.29v75.09H338.06Zm-14.77-3.23A19.07,19.07,0,0,0,338,205V181a19.35,19.35,0,0,0-14.66-6.24c-10.19,0-18,7.8-18,18.2S313.1,211.32,323.29,211.32Z" />
+ <path d="M354.8,166.6h11.44l16.54,39.63,16.53-39.63h11.13l-22.88,52.94h-9.88Z" />
+ <path d="M414.18,204.35c0-10,8.11-16.12,21.43-16.12a37.22,37.22,0,0,1,14.45,2.92v-5.62c0-7.49-4.47-11.23-12.89-11.23-4.89,0-9.88,1.35-16.44,4.47l-3.84-7.8c7.9-3.75,14.76-5.41,21.73-5.41,13.73,0,21.64,6.76,21.64,18.93v35h-10.2V215a25.07,25.07,0,0,1-16.43,5.51C422.09,220.47,414.18,213.92,414.18,204.35ZM436,212.78a20.38,20.38,0,0,0,14-5v-9.16a27.51,27.51,0,0,0-13.62-3.22c-7.59,0-12.27,3.43-12.27,8.74C424.17,209.24,429,212.78,436,212.78Z" />
+ <path d="M472.21,166.6h10.41v5.3a21.78,21.78,0,0,1,15.91-6.34c12.17,0,20.69,8.42,20.69,20.7v33.28h-10.4V188c0-8.32-5.09-13.42-13.1-13.42a15,15,0,0,0-13.1,6.86v38.07H472.21Z" />
+ <path d="M570.7,204.87l6.24,6.76a29.25,29.25,0,0,1-20.9,8.84,27.46,27.46,0,0,1,0-54.91,30,30,0,0,1,21.32,8.84l-6.55,7.07a19.68,19.68,0,0,0-14.56-6.65c-9.68,0-17.16,8-17.16,18.2,0,10.4,7.59,18.3,17.36,18.3C561.76,211.32,566.44,209.24,570.7,204.87Z" />
+ <path d="M608.66,220.47c-15.6,0-27.77-12-27.77-27.45,0-15.29,11.65-27.25,26.52-27.25,14.56,0,25.59,12.06,25.59,27.66v3H591.19a17.86,17.86,0,0,0,17.89,15.18A20.56,20.56,0,0,0,622.5,207l6.65,6.56A31.57,31.57,0,0,1,608.66,220.47Zm-17.37-31.82H622.7c-1.56-8.11-7.8-14.15-15.49-14.15C599.2,174.5,592.85,180.23,591.29,188.65Z" />
+ <path d="M683.65,214.55a25,25,0,0,1-16.23,5.82c-15,0-26.73-12-26.73-27.35s11.76-27.25,26.94-27.25a27,27,0,0,1,15.91,5.2V146.74l10.4-2.29v75.09H683.65Zm-14.77-3.23A19.07,19.07,0,0,0,683.54,205V181a19.35,19.35,0,0,0-14.66-6.24c-10.19,0-18,7.8-18,18.2S658.69,211.32,668.88,211.32Z" />
+ <path d="M786.19,200.82l7.18,7.28a40.08,40.08,0,0,1-29.12,12.58c-21.53,0-38.17-16.53-38.17-37.54s16.64-37.55,38.17-37.55c11.44,0,22.46,4.79,29.33,12.59l-7.29,7.48a28.94,28.94,0,0,0-22-10c-15.4,0-27,11.86-27,27.46s11.76,27.45,27.36,27.45A28.24,28.24,0,0,0,786.19,200.82Z" />
+ <path d="M813.23,219.54h-10.4v-72.8l10.4-2.29Z" />
+ <path d="M835.69,198c0,8.32,5.1,13.52,13.1,13.52a14.87,14.87,0,0,0,13-7v-38H872.2v52.94H861.79v-5.31a21.63,21.63,0,0,1-15.91,6.35c-12.17,0-20.59-8.53-20.59-20.8V166.6h10.4Z" />
+ <path d="M885.09,205.81c5.51,4.37,11.33,6.66,17.26,6.66,7.49,0,12.69-3.23,12.69-7.91,0-3.74-2.7-5.93-8.53-6.76L897,196.45c-10.51-1.56-15.81-6.45-15.81-14.66,0-9.57,8.32-16,20.69-16a36.26,36.26,0,0,1,21.32,6.76l-5.3,6.86c-5.82-3.85-11.13-5.51-16.74-5.51-6.35,0-10.61,2.91-10.61,7.18,0,3.85,2.49,5.72,8.73,6.65l9.57,1.36c10.51,1.56,16,6.55,16,14.76,0,9.47-9.57,16.64-22.16,16.64-9.15,0-17.36-2.7-23.19-7.8Z" />
+ <path d="M938.65,175.34H927.42V166.6h11.23V153.08l10.3-2.5v16h15.6v8.74H949V204c0,5.41,2.18,7.39,7.8,7.39a20.55,20.55,0,0,0,7.59-1.25v8.73a34.32,34.32,0,0,1-9.88,1.56c-10.3,0-15.81-4.88-15.81-14Z" />
+ <path d="M996.47,220.47c-15.6,0-27.77-12-27.77-27.45,0-15.29,11.65-27.25,26.53-27.25,14.56,0,25.58,12.06,25.58,27.66v3H979a17.86,17.86,0,0,0,17.89,15.18,20.56,20.56,0,0,0,13.42-4.68l6.65,6.56A31.57,31.57,0,0,1,996.47,220.47Zm-17.36-31.82h31.4c-1.56-8.11-7.8-14.15-15.49-14.15C987,174.5,980.67,180.23,979.11,188.65Z" />
+ <path d="M1030.69,166.6h10.4v6.76a16.55,16.55,0,0,1,14.56-7.9,13.09,13.09,0,0,1,5.3.83v9.36a17.71,17.71,0,0,0-6.13-1.15c-6.14,0-11,3.33-13.73,9.68v35.36h-10.4Z" />
+ <path d="M1092.36,199.78c7.9,7.69,16,11.44,25.06,11.44,10.51,0,17.69-5,17.69-12.17,0-6.45-4.16-9.67-14.77-11.44l-12.17-2c-13.31-2.18-19.87-8.42-19.87-18.93,0-12.68,10.61-20.9,26.84-20.9a48.83,48.83,0,0,1,29.32,9.88l-6,8.32c-7.9-6-15.7-8.94-23.81-8.94-9.47,0-15.81,4.36-15.81,10.81,0,5.93,3.64,8.74,13,10.3l11.75,1.87c15.39,2.5,22.36,8.84,22.36,20.18,0,13.41-11.65,22.36-29,22.36a43.85,43.85,0,0,1-31.2-13.11Z" />
+ <path d="M1181.18,220.47c-15.61,0-27.77-12-27.77-27.45,0-15.29,11.64-27.25,26.52-27.25,14.56,0,25.58,12.06,25.58,27.66v3H1163.7a17.86,17.86,0,0,0,17.89,15.18A20.56,20.56,0,0,0,1195,207l6.65,6.56A31.56,31.56,0,0,1,1181.18,220.47Zm-17.37-31.82h31.41c-1.56-8.11-7.8-14.15-15.5-14.15C1171.71,174.5,1165.37,180.23,1163.81,188.65Z" />
+ <path d="M1255.12,204.87l6.24,6.76a29.26,29.26,0,0,1-20.91,8.84,27.46,27.46,0,0,1,0-54.91,30.07,30.07,0,0,1,21.33,8.84l-6.56,7.07a19.65,19.65,0,0,0-14.56-6.65c-9.67,0-17.16,8-17.16,18.2,0,10.4,7.59,18.3,17.37,18.3C1246.17,211.32,1250.85,209.24,1255.12,204.87Z" />
+ <path d="M1280,198c0,8.32,5.1,13.52,13.11,13.52a14.88,14.88,0,0,0,13-7v-38h10.4v52.94h-10.4v-5.31a21.64,21.64,0,0,1-15.91,6.35c-12.17,0-20.6-8.53-20.6-20.8V166.6H1280Z" />
+ <path d="M1328.75,166.6h10.4v6.76a16.55,16.55,0,0,1,14.56-7.9,13.09,13.09,0,0,1,5.3.83v9.36a17.71,17.71,0,0,0-6.13-1.15c-6.14,0-11,3.33-13.73,9.68v35.36h-10.4Z" />
+ <path d="M1366.19,151.62a6.38,6.38,0,0,1,6.34-6.44,6.45,6.45,0,1,1,0,12.89A6.39,6.39,0,0,1,1366.19,151.62Zm11.54,67.92h-10.4V166.6h10.4Z" />
+ <path d="M1396.87,175.34h-11.24V166.6h11.24V153.08l10.29-2.5v16h15.6v8.74h-15.6V204c0,5.41,2.19,7.39,7.8,7.39a20.55,20.55,0,0,0,7.59-1.25v8.73a34.26,34.26,0,0,1-9.88,1.56c-10.29,0-15.8-4.88-15.8-14Z" />
+ <path d="M1446.78,219.75l-21.11-53.15h11.44l15.5,40.46,17.05-40.46h11.24l-25.59,59.28c-4.89,11.34-10.5,15.81-20.28,15.81a20.36,20.36,0,0,1-5.51-.62v-9.15a20.71,20.71,0,0,0,4.68.41c4.78,0,8.22-2.5,10.5-7.8Z" />
+ <path d="M235.3,275.43v-9.88c0-10.19,5.73-15.81,16.13-15.81a20.12,20.12,0,0,1,7,.94v6.86a20.09,20.09,0,0,0-6.44-1c-6.14,0-9,2.92-9,9.26v9.67h15.49V282H242.9v45.56h-7.6V282H223v-6.55Z" />
+ <path d="M288.24,274.39c14.77,0,26.52,11.86,26.52,27S303,328.58,288.24,328.58s-26.62-11.86-26.62-27.15S273.37,274.39,288.24,274.39Zm18.93,27c0-11.33-8.32-20.17-18.93-20.17s-19,8.84-19,20.17,8.32,20.28,19,20.28S307.17,312.77,307.17,301.43Z" />
+ <path d="M325.47,275.43h7.7v7.39a16.25,16.25,0,0,1,14.56-8.53,14.25,14.25,0,0,1,4.89.73v7.07a16.75,16.75,0,0,0-5.41-.94c-6.45,0-11.34,3.75-14,10.72v35.67h-7.7Z" />
+ <path d="M385.27,254.74h8v34.53l37.65-34.53h10.5l-39.52,35.67,40.36,37.13H431l-37.75-35v35h-8Z" />
+ <path d="M452.66,306.84c0,9.26,5.62,15,14.56,15a16.09,16.09,0,0,0,14.36-8.11V275.43h7.69v52.11h-7.69v-6c-4.06,4.68-9.57,7.07-16.33,7.07-12,0-20.18-8.22-20.18-20.18v-33h7.59Z" />
+ <path d="M526.71,328.37a26.43,26.43,0,0,1-16.74-6v5.2h-7.6v-72.8l7.7-1.77v28a23.78,23.78,0,0,1,16.75-6.34c14.76,0,26.21,11.75,26.21,26.83S541.58,328.37,526.71,328.37Zm-16.64-39.73v25.79a20.58,20.58,0,0,0,16,7.18c11,0,19.34-8.63,19.34-20.07s-8.42-20.18-19.34-20.18A20.2,20.2,0,0,0,510.07,288.64Z" />
+ <path d="M588.28,328.47a26.55,26.55,0,0,1-26.83-27c0-15,11.33-26.83,25.68-26.83,13.84,0,24.65,11.86,24.65,26.83v2.4H569c1.14,10.29,9.25,17.88,19.55,17.88,5.41,0,10.82-1.76,14.35-4.78l4.79,5.1A30.89,30.89,0,0,1,588.28,328.47Zm-19-30.78h34.84c-1.35-9.26-8.53-16.33-17.16-16.33C577.88,281.36,570.7,288.12,569.25,297.69Z" />
+ <path d="M622.49,275.43h7.7v7.39a16.26,16.26,0,0,1,14.56-8.53,14.21,14.21,0,0,1,4.89.73v7.07a16.75,16.75,0,0,0-5.41-.94c-6.45,0-11.34,3.75-14,10.72v35.67h-7.7Z" />
+ <path d="M658.48,275.43h7.69v6.14c4.06-4.79,9.68-7.18,16.44-7.18,11.85,0,20.07,8.22,20.07,20.18v33h-7.59V296.13c0-9.26-5.62-15-14.56-15a16.2,16.2,0,0,0-14.36,8v38.38h-7.69Z" />
+ <path d="M740,328.47a26.55,26.55,0,0,1-26.83-27c0-15,11.34-26.83,25.69-26.83,13.83,0,24.65,11.86,24.65,26.83v2.4H720.77c1.15,10.29,9.26,17.88,19.56,17.88,5.4,0,10.81-1.76,14.35-4.78l4.78,5.1A30.87,30.87,0,0,1,740,328.47Zm-19-30.78h34.84c-1.35-9.26-8.53-16.33-17.16-16.33C729.61,281.36,722.44,288.12,721,297.69Z" />
+ <path d="M778.6,282H767.37v-6.55H778.6V262.22l7.59-2v15.18h15.7V282h-15.7v31.93c0,5.62,2.29,7.8,8,7.8a18.57,18.57,0,0,0,7.59-1.35v6.76a29.42,29.42,0,0,1-9.15,1.35c-9,0-14-4.36-14-12.58Z" />
+ <path d="M832.89,328.47a26.55,26.55,0,0,1-26.84-27c0-15,11.34-26.83,25.69-26.83,13.83,0,24.65,11.86,24.65,26.83v2.4H813.64c1.15,10.29,9.26,17.88,19.56,17.88,5.41,0,10.81-1.76,14.35-4.78l4.78,5.1A30.87,30.87,0,0,1,832.89,328.47Zm-19-30.78h34.84c-1.35-9.26-8.52-16.33-17.16-16.33C822.49,281.36,815.31,288.12,813.85,297.69Z" />
+ <path d="M867,315.37a24.94,24.94,0,0,0,17,7c8.32,0,14.14-3.85,14.14-9.36,0-4.47-3-7-9.67-7.91l-9-1.24c-10.4-1.56-15.39-6.14-15.39-14,0-8.74,8.11-15.19,19.55-15.19A33.32,33.32,0,0,1,904,281.46L900,286.67c-5.82-4-11.12-5.83-16.84-5.83-7.18,0-12.07,3.54-12.07,8.63,0,4.48,2.81,6.66,9.67,7.7l9,1.25c10.4,1.45,15.6,6.13,15.6,14.14,0,9.05-9.15,15.91-21.11,15.91-8.63,0-16.43-2.91-21.94-8.11Z" />
+ </g>
+ <path
+ className="rhacs-logo-hat"
+ d="M129,85c12.51,0,30.61-2.58,30.61-17.46a14,14,0,0,0-.31-3.42l-7.45-32.36c-1.72-7.12-3.23-10.35-15.73-16.6C126.39,10.19,105.26,2,99,2c-5.82,0-7.55,7.54-14.45,7.54-6.68,0-11.64-5.6-17.89-5.6-6,0-9.91,4.09-12.93,12.5,0,0-8.41,23.72-9.49,27.16A6.43,6.43,0,0,0,44,45.54C44,54.76,80.33,85,129,85m32.55-11.42c1.73,8.19,1.73,9.05,1.73,10.13,0,14-15.74,21.77-36.43,21.77C80,105.47,39.08,78.1,39.08,60a18.45,18.45,0,0,1,1.51-7.33C23.77,53.52,2,56.54,2,75.72,2,107.2,76.59,146,135.65,146c45.28,0,56.7-20.48,56.7-36.65,0-12.72-11-27.16-30.83-35.78"
+ />
+ <path
+ className="rhacs-logo-hat-band"
+ d="M161.52,73.57c1.73,8.19,1.73,9.05,1.73,10.13,0,14-15.74,21.77-36.43,21.77C80,105.47,39.08,78.1,39.08,60a18.45,18.45,0,0,1,1.51-7.33l3.66-9.06A6.43,6.43,0,0,0,44,45.54C44,54.76,80.33,85,129,85c12.51,0,30.61-2.58,30.61-17.46a14,14,0,0,0-.31-3.42Z"
+ />
+ <path
+ className="rhacs-logo-text"
+ d="M581.24,94.3c0,11.89,7.15,17.67,20.19,17.67a52.11,52.11,0,0,0,11.89-1.68V96.51a24.84,24.84,0,0,1-7.68,1.16c-5.37,0-7.36-1.68-7.36-6.73V69.8h15.56V55.6H598.28v-18l-17,3.68V55.6H570V69.8h11.25Zm-53,.32c0-3.68,3.69-5.47,9.26-5.47a43.12,43.12,0,0,1,10.1,1.26v7.15A21.51,21.51,0,0,1,537,100.19c-5.46,0-8.73-2.1-8.73-5.57m5.2,17.56c6,0,10.84-1.26,15.36-4.31v3.37h16.82V75.58c0-13.56-9.14-21-24.39-21-8.52,0-16.94,2-26,6.1l6.1,12.52c6.52-2.74,12-4.42,16.83-4.42,7,0,10.62,2.73,10.62,8.31v2.73a49.53,49.53,0,0,0-12.62-1.58c-14.31,0-22.93,6-22.93,16.73,0,9.78,7.78,17.24,20.19,17.24m-92.44-.94h18.09V82.42h30.29v28.82h18.09V37.62H489.43V65.91H459.14V37.62H441.05ZM372.12,83.37c0-8,6.31-14.1,14.62-14.1a17.22,17.22,0,0,1,11.78,4.32V93a16.36,16.36,0,0,1-11.78,4.42c-8.2,0-14.62-6.1-14.62-14.09m26.61,27.87h16.83V33.94l-17,3.68V58.55a28.3,28.3,0,0,0-14.2-3.68c-16.19,0-28.92,12.51-28.92,28.5A28.25,28.25,0,0,0,383.8,112a25.12,25.12,0,0,0,14.93-4.83Zm-77.19-42.7c5.36,0,9.88,3.47,11.67,8.83H310c1.68-5.57,5.89-8.83,11.57-8.83M292.83,83.47c0,16.2,13.25,28.82,30.28,28.82,9.36,0,16.2-2.53,23.25-8.42l-11.26-10c-2.63,2.74-6.52,4.21-11.14,4.21a14.39,14.39,0,0,1-13.68-8.83h39.65V85.05c0-17.67-11.88-30.39-28.08-30.39a28.57,28.57,0,0,0-29,28.81M263.49,53.08c6,0,9.36,3.78,9.36,8.31s-3.37,8.31-9.36,8.31H245.61V53.08Zm-36,58.16h18.09V84.42h13.77l13.89,26.82h20.19l-16.2-29.45a22.27,22.27,0,0,0,13.88-20.72c0-13.25-10.41-23.45-26-23.45H227.52Z"
+ />
+ </svg>
+));
+
+export default RHACSLogo;
diff --git a/ui/src/components/StackRoxLogo.tsx b/ui/src/components/StackRoxLogo.tsx
diff --git a/ui/src/containers/AppHeader/ProductLogoTile.tsx b/ui/src/containers/AppHeader/ProductLogoTile.tsx
@@ -1,19 +1,24 @@
 import React, { ReactElement } from 'react';
 import { Link } from 'react-router-dom';
+import { Flex, FlexItem } from '@patternfly/react-core';
 
-import StackRoxLogo from 'components//StackRoxLogo';
+import RHACSLogo from 'components/RHACSLogo';
 import Version from './Version';
 
 export default function ProductLogoTile(): ReactElement {
  return (
- <div className="flex flex-col items-center pb-1 px-4 border-r border-base-400">
- <Link to="/" className="flex items-center">
- <StackRoxLogo />
- <div className="pl-1 pt-1 text-sm tracking-wide font-600 font-condensed uppercase">
+ <Flex alignItems={{ default: 'alignItemsCenter' }}>
+ <FlexItem>
+ <Link to="/">
+ <RHACSLogo />
+ </Link>
+ </FlexItem>
+ <FlexItem>
+ <span className="pf-u-font-family-redhatVF-heading-sans-serif pf-u-font-size-lg">
  Infra
- </div>
- </Link>
- <Version />
- </div>
+ </span>
+  <Version />
+ </FlexItem>
+ </Flex>
  );
 }
diff --git a/ui/src/containers/AppHeader/Version.tsx b/ui/src/containers/AppHeader/Version.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react';
 import { AxiosPromise } from 'axios';
 import { Info, AlertCircle } from 'react-feather';
-import { ClipLoader } from 'react-spinners';
+import { Flex, FlexItem, Spinner } from '@patternfly/react-core';
 
 import { VersionServiceApi, V1Version } from 'generated/client';
 import configuration from 'client/configuration';
@@ -14,10 +14,10 @@ const fetchVersion = (): AxiosPromise<V1Version> => versionService.getVersion();
 function VersionContent(props: { icon: ReactElement; text: string }): ReactElement {
  const { icon, text } = props;
  return (
- <div className="flex items-center">
- {icon}
- <span className="ml-1 text-2xs whitespace-nowrap">{text}</span>
- </div>
+ <Flex alignItems={{ default: 'alignItemsFlexStart' }}>
+ <FlexItem spacer={{ default: 'spacerSm' }}>{icon}</FlexItem>
+ <FlexItem>{text}</FlexItem>
+ </Flex>
  );
 }
 
@@ -27,7 +27,7 @@ export default function Version(): ReactElement {
  if (loading)
  return (
  <VersionContent
- icon={<ClipLoader loading size={16} color="currentColor" />}
+ icon={<Spinner isSVG size="md" aria-label="Loading version information" />}
  text="Loading..."
  />
  );

diff --git a/ui/src/infra.css b/ui/src/infra.css
@@ -49,3 +49,15 @@
 .pf-c-form__label-text {
  text-transform: capitalize;
 }
+
+.rhacs-logo-hat {
+ fill: #ee0000;
+}
+
+.rhacs-logo-hat-band {
+ fill: #000000;
+}
+
+.rhacs-logo-text {
+ fill: #ffffff;
+}
diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -1668,6 +1668,11 @@
  dependencies:
  mkdirp "^1.0.4"
 
+"@patternfly/patternfly@^4.224.2":
+ version "4.224.2"
+ resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-4.224.2.tgz#9d1b000c3c43457ae47c3556a334412d164fad90"
+ integrity sha512-HGNV26uyHSIECuhjPg/WGn0mXbAotcs6ODfhAOkfYjIgGylddgiwElxUe1rpEHV5mQJJ2rMn4OdeJIIpzRX61g==
+
 "@patternfly/react-core@^4.276.8":
  version "4.276.8"
  resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-4.276.8.tgz#7ef52830dcdda954bd5bec40132da6eef49aba6f"