diff --git a/awx/ui/client/assets/favicon.ico b/awx/ui/client/assets/favicon.ico
index 5003cda615..5508798051 100644
Binary files a/awx/ui/client/assets/favicon.ico and b/awx/ui/client/assets/favicon.ico differ
diff --git a/awx/ui/client/assets/tower-logo-header.svg b/awx/ui/client/assets/tower-logo-header.svg
index 61e1de41da..b78bfbd3c9 100644
--- a/awx/ui/client/assets/tower-logo-header.svg
+++ b/awx/ui/client/assets/tower-logo-header.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/awx/ui/client/assets/tower-logo-login.svg b/awx/ui/client/assets/tower-logo-login.svg
index 2db9414ecd..b78bfbd3c9 100644
--- a/awx/ui/client/assets/tower-logo-login.svg
+++ b/awx/ui/client/assets/tower-logo-login.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/awx/ui/client/assets/variables.less b/awx/ui/client/assets/variables.less
new file mode 100644
index 0000000000..dfcf9a073c
--- /dev/null
+++ b/awx/ui/client/assets/variables.less
@@ -0,0 +1,18 @@
+// Default styles for AWX branding
+
+// Login modal icon
+@login-max-width: 200px;
+@login-margin: -30px 20px 10px -30px;
+
+// Main nav bar logo
+@main-menu-width: 100px;
+@main-menu-margin: 20px;
+@main-menu-padding-top: 20px;
+@main-menu-max-width: inherit;
+@main-menu-max-height: inherit;
+@main-menu-height: inherit;
+
+// About modal logo
+@about-modal-float: left;
+@about-modal-width: 200px;
+@about-modal-padding-top: 13px;
diff --git a/awx/ui/client/legacy-styles/ansible-ui.less b/awx/ui/client/legacy-styles/ansible-ui.less
index 30911ba194..46957217e0 100644
--- a/awx/ui/client/legacy-styles/ansible-ui.less
+++ b/awx/ui/client/legacy-styles/ansible-ui.less
@@ -43,6 +43,7 @@
@import "text-label.less";
@import "./bootstrap-datepicker.less";
@import "./client/src/shared/branding/colors.default.less";
+@import "./client/assets/variables.less";
// Bootstrap default overrides
@import "./client/src/shared/bootstrap-settings.less";
/* Bootstrap fix that's causing a right margin to appear
diff --git a/awx/ui/client/src/about/about.block.less b/awx/ui/client/src/about/about.block.less
index 73cd7a9937..87bd710fa3 100644
--- a/awx/ui/client/src/about/about.block.less
+++ b/awx/ui/client/src/about/about.block.less
@@ -1,6 +1,6 @@
/** @define About */
@import "./client/src/shared/branding/colors.default.less";
-
+@import "./client/assets/variables.less";
.About-ansibleVersion,
.About-cowsayCode {
@@ -30,17 +30,18 @@
padding-top: 0px;
padding-bottom: 0px;
}
+
.About-brandImg {
- float: left;
- width: 112px;
- padding-top: 13px;
+ float: @about-modal-float;
+ width: @about-modal-width;
+ padding-top: @about-modal-padding-top;
}
.About-close {
- position: absolute;
- top: 15px;
- right: 15px;
- z-index: 10;
+ position: absolute;
+ top: 15px;
+ right: 15px;
+ z-index: 10;
}
.About-modalFooter {
diff --git a/awx/ui/client/src/login/loginModal/loginModal.block.less b/awx/ui/client/src/login/loginModal/loginModal.block.less
index 0f283846d6..4aae364bcc 100644
--- a/awx/ui/client/src/login/loginModal/loginModal.block.less
+++ b/awx/ui/client/src/login/loginModal/loginModal.block.less
@@ -1,4 +1,5 @@
@import "../../shared/branding/colors.default.less";
+@import "./client/assets/variables.less";
/** @define LoginModal */
.LoginModal-backDrop {
@@ -56,11 +57,16 @@
padding-right: 20px;
}
-.LoginModal-logoImage, .LoginModal-logoImage--notCustom {
+.LoginModal-logoImage {
max-width: 112px;
margin: 20px 20px 10px 20px;
}
+.LoginModal-logoImage--notCustom {
+ max-width: @login-max-width;
+ margin: @login-margin;
+}
+
.LoginModal-alert {
margin-bottom: 20px;
font-size: 16px;
diff --git a/awx/ui/client/src/main-menu/main-menu.block.less b/awx/ui/client/src/main-menu/main-menu.block.less
index 0a20ccc07e..bd9ead56be 100644
--- a/awx/ui/client/src/main-menu/main-menu.block.less
+++ b/awx/ui/client/src/main-menu/main-menu.block.less
@@ -1,4 +1,5 @@
@import "../shared/branding/colors.default.less";
+@import "./client/assets/variables.less";
/** @define MainMenu */
@@ -28,11 +29,12 @@
}
.MainMenu-logoImage {
- max-width: 147px;
- max-height: 50px;
- height: 30px;
- width: 93px;
- margin: 20px;
+ max-width: @main-menu-max-width;
+ max-height: @main-menu-max-height;
+ height: @main-menu-height;
+ width: @main-menu-width;
+ margin: @main-menu-margin;
+ padding-top: @main-menu-padding-top;
}
.MainMenu-logoImage--licenseMissing:hover{