{ speechBubble }
diff --git a/src/components/BrandLogo/BrandLogo.jsx b/src/components/BrandLogo/BrandLogo.jsx
new file mode 100644
index 0000000000..08bdc8c5a3
--- /dev/null
+++ b/src/components/BrandLogo/BrandLogo.jsx
@@ -0,0 +1,386 @@
+import React, { Component } from 'react';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+
+import styled from 'styled-components';
+
+const ST0 = styled.g`
+ display:none;
+`;
+
+const ST1 = styled.path`
+ display:inline;
+ fill:#ED1C24;
+`;
+
+const ST2 = styled.path`
+ fill:#42210B;
+`;
+
+const ST3 = styled.path`
+ fill:#FFFFFF;
+`;
+
+const ST4 = styled.path`
+ fill:#C69C6D;
+ stroke:#8C6239;
+ stroke-width:5;
+ stroke-miterlimit:10;
+`;
+
+const ST5 = styled.path`
+ fill:#FFFFFF;
+ stroke:#42210B;
+ stroke-width:3;
+ stroke-miterlimit:10;
+`;
+
+const ST6 = styled.ellipse`
+ fill:#ED1C24;
+ stroke:#8C6239;
+ stroke-width:5;
+ stroke-miterlimit:10;
+`;
+
+const ST7 = styled.path`
+ fill:#A67C52;
+`;
+
+const ST8 = styled.path`
+ fill: #ED1C24;
+`;
+
+const ST9 = styled.ellipse`
+ fill:#42210B;
+`;
+
+class BrandLogo extends Component {
+ render () {
+ const { i18n } = this.props;
+ return (
+
+ );
+ }
+}
+
+export default withI18n()(BrandLogo);
diff --git a/src/components/BrandLogo/index.js b/src/components/BrandLogo/index.js
new file mode 100644
index 0000000000..d81125fb7f
--- /dev/null
+++ b/src/components/BrandLogo/index.js
@@ -0,0 +1,3 @@
+import BrandLogo from './BrandLogo';
+
+export default BrandLogo;
diff --git a/src/components/TowerLogo/TowerLogo.jsx b/src/components/TowerLogo/TowerLogo.jsx
deleted file mode 100644
index 10444f462b..0000000000
--- a/src/components/TowerLogo/TowerLogo.jsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React, { Component } from 'react';
-import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
-
-class TowerLogo extends Component {
- render () {
- const { i18n } = this.props;
- return (
-
- );
- }
-}
-
-export default withI18n()(TowerLogo);
diff --git a/src/components/TowerLogo/index.js b/src/components/TowerLogo/index.js
deleted file mode 100644
index b1ed1985d8..0000000000
--- a/src/components/TowerLogo/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import TowerLogo from './TowerLogo';
-
-export default TowerLogo;
diff --git a/src/index.jsx b/src/index.jsx
index 4c31cb10b5..b0640ea67e 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -15,6 +15,8 @@ import './app.scss';
import { Config } from './contexts/Config';
+import { BrandName } from './variables';
+
import Background from './components/Background';
import NotifyAndRedirect from './components/NotifyAndRedirect';
@@ -48,6 +50,7 @@ import Users from './pages/Users';
// eslint-disable-next-line import/prefer-default-export
export function main (render) {
const el = document.getElementById('app');
+ document.title = `Ansible ${BrandName}`;
return render(
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index b2c5f0bc57..39a12c1969 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -2,16 +2,24 @@ import React, { Component } from 'react';
import { Redirect, withRouter } from 'react-router-dom';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
+import styled from 'styled-components';
import {
LoginForm,
- LoginPage,
+ LoginPage as PFLoginPage,
} from '@patternfly/react-core';
import { withRootDialog } from '../contexts/RootDialog';
import { withNetwork } from '../contexts/Network';
import { RootAPI } from '../api';
+import { BrandName } from '../variables';
-import towerLogo from '../../images/tower-logo-header.svg';
+import logoImg from '../../images/brand-logo.svg';
+
+const LoginPage = styled(PFLoginPage)`
+ & .pf-c-brand {
+ max-height: 285px;
+ }
+`;
class AWXLogin extends Component {
constructor (props) {
@@ -64,7 +72,11 @@ class AWXLogin extends Component {
render () {
const { username, password, isInputValid, isAuthenticated } = this.state;
const { alt, loginInfo, logo, bodyText: errorMessage, i18n } = this.props;
- const logoSrc = logo ? `data:image/jpeg;${logo}` : towerLogo;
+ const logoSrc = logo ? `data:image/jpeg;${logo}` : logoImg;
+ // Setting BrandName to a variable here is necessary to get the jest tests
+ // passing. Attempting to use BrandName in the template literal results
+ // in failing tests.
+ const brandName = BrandName;
if (isAuthenticated) {
return ();
@@ -73,8 +85,8 @@ class AWXLogin extends Component {
return (