fix(images): add favicon and brand image (backport #280) (#290)

* fix(images): add favicon and brand image (#280)

* fix(images): add favicon and brand image

* fix(license): don't expect license in images

* Update assets

* Use logo variant

* Update logo and use horizontal variant in masthead

* Remove unused asset

(cherry picked from commit 4f42251)

# Conflicts:
#	src/app/AppLayout/AppLayout.tsx

* fixup

Co-authored-by: Andrew Azores <aazores@redhat.com>

license-config.json

@@ -9,5 +9,5 @@
 			}
 		}
 	},
-	"ignore": [".git", "tags", "coverage", "stories", "__mocks__","**/.*", "README.md", "**/*.js", "yarn.lock", ".github/**/*"]
+	"ignore": [".git", "tags", "coverage", "stories", "__mocks__","**/.*", "README.md", "**/*.js", "yarn.lock", ".github/**/*", "src/app/assets/*"]
 }

src/app/AppLayout/AppLayout.tsx

@@ -41,7 +41,7 @@ import { ServiceContext } from '@app/Shared/Services/Services';
 import { NotificationCenter } from '@app/Notifications/NotificationCenter';
 import { IAppRoute, routes } from '@app/routes';
 import { AboutModal, Alert, AlertGroup, AlertVariant, AlertActionCloseButton,
-  Button, Nav, NavItem, NavList, NotificationBadge, Page, PageHeader,
+  Brand, Button, Nav, NavItem, NavList, NotificationBadge, Page, PageHeader,
   PageHeaderTools, PageHeaderToolsGroup, PageHeaderToolsItem, PageSidebar,
   SkipToContent, Text, TextContent, TextList, TextListItem, TextVariants
 } from '@patternfly/react-core';
@@ -51,13 +51,14 @@ import { matchPath, NavLink, useHistory, useLocation } from 'react-router-dom';
 import { Notification, NotificationsContext } from '../Notifications/Notifications';
 import { AuthModal } from './AuthModal';
 import { SslErrorModal } from './SslErrorModal';
+import cryostatLogoHorizontal from '@app/assets/logo-cryostat-3-horizontal.svg';
+import cryostatLogoWhite from '@app/assets/logo-cryostat-3.svg';
 
 interface IAppLayout {
   children: React.ReactNode;
 }
 
 const AppLayout: React.FunctionComponent<IAppLayout> = ({children}) => {
-  const context = React.useContext(ServiceContext);
   const serviceContext = React.useContext(ServiceContext);
   const notificationsContext = React.useContext(NotificationsContext);
   const routerHistory = useHistory();
@@ -194,7 +195,7 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({children}) => {
   </>);
   const Header = (<>
     <PageHeader
-      logo="Cryostat"
+      logo={<Brand alt="Cryostat" src={cryostatLogoHorizontal} className="cryostat-logo" />}
       logoProps={logoProps}
       showNavToggle
       isNavOpen={isNavOpen}
@@ -205,9 +206,8 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({children}) => {
       isOpen={aboutModalOpen}
       onClose={handleAboutModalToggle}
       trademark='Copyright The Cryostat Authors, The Universal Permissive License (UPL), Version 1.0'
-      brandImageSrc='' // TODO
+      brandImageSrc={cryostatLogoWhite}
       brandImageAlt='Cryostat Logo'
-      productName='Cryostat'
     >
       <TextContent>
         <TextList component="dl">

src/app/app.css

@@ -38,3 +38,11 @@ SOFTWARE.
 html, body, #root {
   height: 100%;
 }
+
+.pf-c-about-modal-box__brand-image {
+  height: 8em;
+}
+
+.cryostat-logo {
+  height: 2em;
+}

src/index.html

@@ -43,7 +43,6 @@
   <title>Cryostat</title>
   <meta id="appName" name="application-name" content="Cryostat">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="icon" type="image/png" href="https://www.patternfly.org/components/patternfly/dist/img/favicon.ico">
   <base href="/">
 </head>
 

webpack.common.js

@@ -13,7 +13,8 @@ module.exports = {
   plugins: [
     new ForkTsCheckerPlugin(),
     new HtmlWebpackPlugin({
-      template: path.resolve(__dirname, 'src', 'index.html')
+      template: path.resolve(__dirname, 'src', 'index.html'),
+      favicon: './src/app/assets/cryostat-3-icon-16px.png',
     }),
   ],
   // https://medium.com/hackernoon/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758
@@ -108,13 +109,16 @@ module.exports = {
           (input.indexOf('background-filter') === -1) &&
           (input.indexOf('pficon') === -1)
         ),
+        exclude: [
+          path.resolve(__dirname, 'src/app/assets')
+        ],
         use: {
           loader: 'raw-loader',
           options: {}
         }
       },
       {
-        test: /\.(jpg|jpeg|png|gif)$/i,
+        test: /\.(jpg|jpeg|png|gif|svg)$/i,
         include: [
           path.resolve(__dirname, 'src'),
           path.resolve(__dirname, 'node_modules/patternfly'),