using .less variables for replacing styles

and other feedback from PR

awx/ui/client/assets/awx_branding.block.less

@@ -1,19 +0,0 @@
-// Styling for login modal logo
-.LoginModal-logoImage, .LoginModal-logoImage--notCustom {
-    width: 200px;
-    margin: -30px 20px 10px -30px;
-}
-
-// Styling for home button on left-hand side of the nav bar
-.MainMenu-logoImage {
-    width: 100px;
-    margin: 20px;
-    padding-top: 20px;
-}
-
-// Styling for the about modal
-.About-brandImg {
-    float: left;
-    width: 200px;
-		padding-top: 13px;
-}

awx/ui/client/assets/tower_branding.block.less

@@ -1,21 +0,0 @@
-// Styling for login modal logo
-.LoginModal-logoImage, .LoginModal-logoImage--notCustom {
-    max-width: 112px;
-    margin: 20px 20px 10px 20px;
-}
-
-// Styling for home button on left-hand side of the nav bar
-.MainMenu-logoImage {
-    max-width: 147px;
-    max-height: 50px;
-    height: 30px;
-    width: 93px;
-    margin: 20px;
-}
-
-// Styling for the about modal
-.About-brandImg {
-    float: left;
-    width: 112px;
-		padding-top: 13px;
-}

awx/ui/client/legacy-styles/ansible-ui.less

@@ -43,8 +43,7 @@
 @import "text-label.less";
 @import "./bootstrap-datepicker.less";
 @import "./client/src/shared/branding/colors.default.less";
-// @import "./client/assets/tower_branding.block.less";
+@import "./client/assets/variables.less";
-@import "./client/assets/awx_branding.block.less";
 // Bootstrap default overrides
 @import "./client/src/shared/bootstrap-settings.less";
 /* Bootstrap fix that's causing a right margin to appear

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 {
@@ -31,11 +31,17 @@
 		padding-bottom: 0px;
 }
 
+.About-brandImg {
+	float: @about-modal-float;
+	width: @about-modal-width;
+	padding-top: @about-modal-padding-top;
+}
+
 .About-close {
-		position: absolute;
+	position: absolute;
-		top: 15px;
+	top: 15px;
-		right: 15px;
+	right: 15px;
-	  z-index: 10;
+	z-index: 10;
 }
 
 .About-modalFooter {

awx/ui/client/src/about/about.partial.html

@@ -21,7 +21,7 @@
 </pre>
                 </div>
                 <div class="About-modalFooter">
-                    <img class="About-brandImg img-responsive" src="/static/assets/awx-logo-small.png" />
+                    <img class="About-brandImg img-responsive" src="/static/assets/default-logo-large.png" />
                     <!-- <img class="About-brandImg img-responsive" src="/static/assets/tower-logo-login.svg" /> -->
                     <p class="About-footerText">
                       <span class="About-ansibleVersion">

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,6 +57,15 @@
     padding-right: 20px;
 }
 
+.LoginModal-logoImage {
+    max-width: 112px;
+    margin: 20px 20px 10px 20px;
+}
+
+.LoginModal-logoImage--notCustom {
+    max-width: @login-max-width;
+    margin: @login-magin;
+}
 
 .LoginModal-alert {
     margin-bottom: 20px;

awx/ui/client/src/login/loginModal/loginModal.controller.js

@@ -98,8 +98,7 @@ export default ['$log', '$cookies', '$compile', '$rootScope',
             scope.customLogo = $rootScope.custom_logo;
             scope.customLogoPresent = true;
         } else {
-            // scope.customLogo = "tower-logo-login.svg";
+            scope.customLogo = "default-logo-large.png";
-            scope.customLogo = "awx-logo-small.png";
             scope.customLogoPresent = false;
         }
         scope.customLoginInfo = $AnsibleConfig.custom_login_info;

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 */
 
@@ -27,6 +28,15 @@
     background-color: @menu-link-bg;
 }
 
+.MainMenu-logoImage {
+    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{
     cursor:default;
     background-color: @default-bg!important;

awx/ui/client/src/main-menu/main-menu.partial.html

@@ -6,9 +6,8 @@
         ng-class="{'is-loggedOut' : !current_user || !current_user.username, 'MainMenu-logoImage--licenseMissing': licenseMissing}">
         <img class="MainMenu-logoImage"
             ng-class="{'MainMenu-logoImage--licenseMissing': licenseMissing}"
-            ng-src="/static/assets/awx-logo-small.png">
+            ng-src="/static/assets/default-logo-small.png">
             <!-- ng-src="/static/assets/tower-logo-header.svg"> -->
-
     </a>
 
     <!-- Mobile menu items -->