From ef87d3590180db16da0e9211e2d016c472f675c2 Mon Sep 17 00:00:00 2001
From: John Mitchell <jlmitch5@ncsu.edu>
Date: Mon, 6 Mar 2017 12:26:20 -0500
Subject: [PATCH] SUIT-ify less and fix bottom padding for about modal

---
 awx/ui/client/src/about/about.block.less   | 74 +++++++++++-----------
 awx/ui/client/src/about/about.partial.html | 16 ++---
 2 files changed, 46 insertions(+), 44 deletions(-)

diff --git a/awx/ui/client/src/about/about.block.less b/awx/ui/client/src/about/about.block.less
index fe1860d2cb..73cd7a9937 100644
--- a/awx/ui/client/src/about/about.block.less
+++ b/awx/ui/client/src/about/about.block.less
@@ -3,56 +3,58 @@
 
 
 .About-ansibleVersion,
-.About-cowsay--code {
+.About-cowsayCode {
 		font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
 }
 
-.About-ansibleVersion {
-	color: @default-data-txt;
+.About-cowsayContainer {
+		width: 340px;
+		margin: 0 auto;
+}
+.About-cowsayCode {
+		background-color: @default-bg;
+		padding-left: 30px;
+		border-style: none;
+		max-width: 340px;
+		padding-left: 30px;
+}
+.About-modalHeader {
+		border: none;
+		padding-bottom: 0px;
+}
+.About-modalDialog {
+		max-width: 500px;
 }
 
-.About-cowsay--container{
-	width: 340px;
-	margin: 0 auto;
+.About-modalBody {
+		padding-top: 0px;
+		padding-bottom: 0px;
 }
-.About-cowsay--code{
-	background-color: @default-bg;
-	padding-left: 30px;
-	border-style: none;
-	max-width: 340px;
-	padding-left: 30px;
-}
-.About .modal-header{
-	border: none;
-	padding-bottom: 0px;
-}
-.About .modal-dialog{
-	max-width: 500px;
-}
-.About .modal-body{
-	padding-top: 0px;
-}
-.About-brand--redhat{
+.About-brandImg {
     float: left;
     width: 112px;
 		padding-top: 13px;
 }
-.About-brand--ansible{
-	max-width: 120px;
-	margin: 0 auto;
+
+.About-close {
+		position: absolute;
+		top: 15px;
+		right: 15px;
+	  z-index: 10;
 }
-.About-close{
-	position: absolute;
-	top: 15px;
-	right: 15px;
-    z-index: 10;
+
+.About-modalFooter {
+    clear: both;
 }
-.About p{
-	color: @default-interface-txt;
+
+.About-footerText {
+		text-align: right;
+		color: @default-interface-txt;
     margin: 0;
     font-size: 12px;
     padding-top: 10px;
 }
-.About-modal--footer {
-    clear: both;
+
+.About-ansibleVersion {
+		color: @default-data-txt;
 }
diff --git a/awx/ui/client/src/about/about.partial.html b/awx/ui/client/src/about/about.partial.html
index 9625e3f800..5874221a54 100644
--- a/awx/ui/client/src/about/about.partial.html
+++ b/awx/ui/client/src/about/about.partial.html
@@ -1,15 +1,15 @@
 <div class="About modal fade" id="about-modal">
-    <div class="modal-dialog">
+    <div class="modal-dialog About-modalDialog">
         <div class="modal-content">
-            <div class="modal-header">
+            <div class="modal-header About-modalHeader">
                 <button data-dismiss="modal" type="button" class="close About-close">
                     <span class="fa fa-times-circle"></span>
                 </button>
             </div>
-            <div class="modal-body">
-                <div class="About-cowsay--container">
+            <div class="modal-body About-modalBody">
+                <div class="About-cowsayContainer">
 <!-- Don't indent this properly, you'll break the cow -->
-<pre class="About-cowsay--code">
+<pre class="About-cowsayCode">
  _______________
 <  Tower {{version}}  >
  ---------------
@@ -20,9 +20,9 @@
                 ||     ||
 </pre>
                 </div>
-                <div class="About-modal--footer">
-                    <img class="About-brand--redhat img-responsive" src="/static/assets/tower-logo-login.svg" />
-                    <p class="text-right">
+                <div class="About-modalFooter">
+                    <img class="About-brandImg img-responsive" src="/static/assets/tower-logo-login.svg" />
+                    <p class="About-footerText">
                       <span class="About-ansibleVersion">
                           Ansible {{ ansible_version }}
                       </span> <br>