fix(AboutModal): Add backgroung image to aboutModal

closes hawtio#1031 (cherry picked from commit af8ac3c)
mmelko · Oct 25, 2024 · 2de27d3 · 2de27d3
1 parent 8e5f3b7
commit 2de27d3
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 1 deletion.
diff --git a/app/public/hawtconfig.json b/app/public/hawtconfig.json
@@ -19,6 +19,7 @@
     "title": "Hawtio Management Console",
     "description": "A Hawtio reimplementation based on TypeScript + React.",
     "imgSrc": "hawtio-logo.svg",
+    "backgroundImgSrc": "pf-background.svg",
     "productInfo": [
       { "name": "ABC", "value": "1.2.3" },
       { "name": "XYZ", "value": "7.8.9" }

diff --git a/app/public/img/background-inverted.svg b/app/public/img/background-inverted.svg
diff --git a/app/public/pf-background.svg b/app/public/pf-background.svg
diff --git a/packages/hawtio/src/core/config-manager.ts b/packages/hawtio/src/core/config-manager.ts
@@ -76,6 +76,7 @@ export type AboutConfig = {
   title?: string
   description?: string
   imgSrc?: string
+  backgroundImgSrc?: string
   productInfo?: AboutProductInfo[]
   copyright?: string
 }

diff --git a/packages/hawtio/src/ui/about/HawtioAbout.tsx b/packages/hawtio/src/ui/about/HawtioAbout.tsx
@@ -19,6 +19,7 @@ export const HawtioAbout: React.FunctionComponent<HawtioAboutProps> = props => {
   }
 
   const imgSrc = about.imgSrc || imgLogo
+  const backgroundImgSrc = about.backgroundImgSrc
   const title = about.title || 'Hawtio Management Console'
   const copyright = about.copyright || '© Hawtio project'
 
@@ -36,7 +37,6 @@ export const HawtioAbout: React.FunctionComponent<HawtioAboutProps> = props => {
   const productInfo = about.productInfo || []
   productInfo.sort((a, b) => stringSorter(a.name, b.name))
   log.debug('Product info:', productInfo)
-
   const AboutProductInfo = () => (
     <TextContent id='hawtio-about-product-info'>
       <Text component='h3'>Component versions</Text>
@@ -57,6 +57,7 @@ export const HawtioAbout: React.FunctionComponent<HawtioAboutProps> = props => {
       onClose={props.onClose}
       productName={title}
       brandImageSrc={imgSrc}
+      backgroundImageSrc={backgroundImgSrc}
       brandImageAlt={title}
       trademark={copyright}
     >