From af8ac3cde2c455936967d3145cdfb818836ae001 Mon Sep 17 00:00:00 2001
From: mmelko <mmelko@redhat.com>
Date: Thu, 24 Oct 2024 22:21:07 +0200
Subject: [PATCH] fix(AboutModal): Add backgroung image to aboutModal closes
 #1031

---
 app/public/hawtconfig.json                   |  1 +
 app/public/img/background-inverted.svg       | 15 +++++++++++++++
 app/public/pf-background.svg                 |  8 ++++++++
 packages/hawtio/src/core/config-manager.ts   |  1 +
 packages/hawtio/src/ui/about/HawtioAbout.tsx |  3 ++-
 5 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 app/public/img/background-inverted.svg
 create mode 100644 app/public/pf-background.svg

diff --git a/app/public/hawtconfig.json b/app/public/hawtconfig.json
index 8ca4561a..a408e0df 100644
--- 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
new file mode 100644
index 00000000..93c27994
--- /dev/null
+++ b/app/public/img/background-inverted.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1250px" height="1000px" viewBox="100 0 1200 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <title>BG</title>
+  <desc>Created with Sketch.</desc>
+  <g id="Background-Downstream" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="Login-Regular---Full-Feature">
+      <g id="BG">
+        <rect id="Rectangle" fill="#030303" x="0" y="0" width="1500" height="850"></rect>
+        <g id="Red-Hat-Hat-RGB-grey" transform="translate(300.000000, 100.000000) scale(0.8)" fill="#1A1A1A" fill-rule="nonzero">
+          <path d="M774.813452,506.645833 C851.074619,506.645833 961.500788,490.775 961.500788,399.822917 C961.500788,393.108333 960.890699,385.783333 959.67052,379.06875 L914.52391,181.29375 C904.152391,137.954167 895.001051,117.810417 818.739884,79.9645833 C759.561219,49.44375 630.83237,0 592.396742,0 C556.401471,-1.08431782e-14 546.029953,45.78125 503.933789,45.78125 C463.057803,45.78125 433.163426,11.5979167 394.727798,11.5979167 C358.122438,11.5979167 334.328954,36.625 316.026274,87.9 C316.026274,87.9 264.77877,232.56875 258.067788,253.933333 C256.847609,257.595833 256.847609,261.86875 256.847609,265.53125 C256.23752,321.689583 477.699947,506.035417 774.813452,506.645833 M973.092486,437.058333 C983.464004,487.1125 983.464004,492.60625 983.464004,498.710417 C983.464004,584.16875 887.679979,631.78125 761.391487,631.78125 C475.869679,631.78125 226.343142,464.527083 226.343142,354.041667 C226.343142,338.78125 229.393589,323.520833 235.494482,309.48125 C132.999475,314.364583 0,332.677083 0,449.877083 C0,642.158333 455.126642,879 815.079348,879 C1091.44982,879 1161,753.864583 1161,654.977083 C1161,577.454167 1093.89017,489.554167 973.092486,437.058333" id="Shape"></path>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/app/public/pf-background.svg b/app/public/pf-background.svg
new file mode 100644
index 00000000..c4b5b991
--- /dev/null
+++ b/app/public/pf-background.svg
@@ -0,0 +1,8 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.27 105.77">
+  <defs>
+    <style>.cls-1{fill:#26292d;}</style>
+  </defs>
+  <polygon class="cls-1" points="110.27 87.87 97.53 105.77 99.28 105.77 110.27 90.32 110.27 87.87"/>
+  <path class="cls-1"
+        d="M23.22,105.77H25L1.86,73.05,67.4,9,27,58.44,40.58,77l-4.37,9.93L49.6,105.77h1.75l-13.51-19,3.71-8.43,20.06,27.35-.32.08h2.49L74.21,4.22l.23-.54.23.53L85.1,105.77h2.49l-.32-.08,20.06-27.35L110.27,85V81.47l-2-4.46,2-2.68V71.92l-2.63,3.59L76.8,5.52l33.47,40.92V44.19L81.49,9l28.78,28.14v-2L74.61.28V.15l-.06.08,0,0,0-.21-.12.11L74.32,0l0,.21,0,0L74.26.15V.28L0,72.88Zm83.44-28.94-19.82,27L76.7,8.8ZM62,103.87l-19.83-27,30-68ZM41.24,75.51l-12.47-17,43.31-53Z"/>
+</svg>
diff --git a/packages/hawtio/src/core/config-manager.ts b/packages/hawtio/src/core/config-manager.ts
index 1d2393c8..f609097a 100644
--- 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
index f6dfca28..c2f57151 100644
--- 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}
     >