From fbc1c4159449b4057a03d1cf22195e2727edd311 Mon Sep 17 00:00:00 2001
From: Donald Labaj <donald.labaj@gmail.com>
Date: Fri, 19 Jul 2024 02:27:48 -0400
Subject: [PATCH] Fixed build issue.

---
 .../src/components/SerialConsole/XTerm.tsx    |  2 +-
 .../src/components/VncConsole/VncConsole.tsx  | 21 +++++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/packages/module/src/components/SerialConsole/XTerm.tsx b/packages/module/src/components/SerialConsole/XTerm.tsx
index 39ba015..85df4e7 100644
--- a/packages/module/src/components/SerialConsole/XTerm.tsx
+++ b/packages/module/src/components/SerialConsole/XTerm.tsx
@@ -134,6 +134,6 @@ export const XTerm: React.FunctionComponent<XTermProps> = ({
 
   // ensure react never reuses this div by keying it with the terminal widget
   // Workaround for xtermjs/xterm.js#3172
-  return <div ref={ref} className={clsx(styles.xterm)} role="list" onFocus={onFocusIn} onBlur={onFocusOut} />;
+  return <div ref={ref} className={clsx(styles['.xterm'])} role="list" onFocus={onFocusIn} onBlur={onFocusOut} />;
 };
 XTerm.displayName = 'XTerm';
diff --git a/packages/module/src/components/VncConsole/VncConsole.tsx b/packages/module/src/components/VncConsole/VncConsole.tsx
index a1b8373..8624465 100644
--- a/packages/module/src/components/VncConsole/VncConsole.tsx
+++ b/packages/module/src/components/VncConsole/VncConsole.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { css } from '@patternfly/react-styles';
 import { Button, EmptyState, Spinner, EmptyStateFooter } from '@patternfly/react-core';
 
 import { initLogging } from '@novnc/novnc/core/util/logging';
@@ -10,11 +9,24 @@ import RFB from '@novnc/novnc/core/rfb';
 import { VncActions } from './VncActions';
 import { constants } from '../common/constants';
 
-import styles from '@patternfly/react-styles/css/components/Consoles/VncConsole';
-import '@patternfly/react-styles/css/components/Consoles/VncConsole.css';
+import clsx from 'clsx';
+import { createUseStyles } from 'react-jss';
 
 const { CONNECTED, CONNECTING, DISCONNECTED } = constants;
 
+const useStyles = createUseStyles({
+  consoleVnc: {
+    gridArea: 'main'
+  },
+  consoleActionsVnc: {
+    gridArea: 'actions-extra',
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-end',
+    columnGap: 'var(--pf-v6-global--spacer--sm)'
+  }
+});
+
 export interface VncConsoleProps extends React.HTMLProps<HTMLDivElement> {
   /** Children nodes */
   children?: React.ReactNode;
@@ -100,6 +112,7 @@ export const VncConsole: React.FunctionComponent<VncConsoleProps> = ({
 }) => {
   const rfb = React.useRef<any>();
 
+  const styles = useStyles();
   const novncElem = React.useRef<HTMLDivElement>(null);
   const [status, setStatus] = React.useState(CONNECTING);
 
@@ -235,7 +248,7 @@ export const VncConsole: React.FunctionComponent<VncConsoleProps> = ({
   return (
     <>
       {rightContent}
-      <div className={css(styles.consoleVnc)}>
+      <div className={clsx(styles.consoleVnc)}>
         {children}
         <React.Fragment>
           <div>