[system_tracking] Adjust headings and add table row hover

awx/ui/static/js/system-tracking/fact-data-table-heading.block.less

@@ -3,19 +3,16 @@
 .FactDataTableHeading {
     display: flex;
     flex-wrap: wrap;
-    font-size: 1.25em;
+    font-size: 1em;
-    align-items: center;
+    align-items: flex-end;
+    font-weight: bold;
 
     &-host {
-        font-size: 0.8em;
         margin-bottom: 3px; // just some breathing room
 
         &:after {
-            font-style: italic;
             content: " scanned on";
-            font-family: merriweather;
             font-weight: 200;
-            font-size: 0.75em;
         }
     }
     &-date {

awx/ui/static/js/system-tracking/fact-data-table.block.less

@@ -1,10 +1,28 @@
 /** @define FactDataTable */
 
 .FactDataTable {
-    &-row {
+    &-row, &-headingRow {
         display: flex;
     }
+
+    &-row {
+      margin-bottom: 0.5em;
+      align-items: center;
+      transition: background-color 100ms, border-color 100ms;
+      border: solid 1px transparent;
+      &:hover {
+        background-color: #ebebeb;
+        border-color: #adadad;
+      }
+    }
+
+    &-headingRow {
+      border-bottom: 1px solid #adadad;
+      margin-bottom: 1.5em;
+    }
+
     &-column {
+        padding: 0.5em 0;
         flex: 1;
         &--offsetLeft {
             margin-left: 33%;

awx/ui/static/js/system-tracking/system-tracking.partial.html

@@ -41,9 +41,11 @@
         </p>
     </section>
     <section class="FactDataTable SystemTrackingContainer-main" ng-if="!error">
-        <div class="FactDataTable-row">
+        <div class="FactDataTable-headingRow">
             <h3 class="FactDataTable-column FactDataTableHeading">
-              Comparing facts collected from:
+              <span class="FactDataTableHeading-label">
+                Comparing facts collected from:
+              </span>
             </h3>
             <h3 class="FactDataTable-column FactDataTableHeading">
               <span class="FactDataTableHeading-host">{{leftHostname}}</span>
@@ -56,9 +58,9 @@
         </div>
         <div ng-if="!isNestedDisplay">
             <div class="FactDataTable-row" ng-repeat="group in factData | orderBy: 'displayKeyPath'">
-                <p class="FactDataTable-column">{{group.facts.keyName}}</p>
+                <span class="FactDataTable-column">{{group.facts.keyName}}</span>
-                <p class="FactDataTable-column">{{group.facts.value1}}</p>
+                <span class="FactDataTable-column">{{group.facts.value1}}</span>
-                <p class="FactDataTable-column">{{group.facts.value2}}</p>
+                <span class="FactDataTable-column">{{group.facts.value2}}</span>
             </div>
         </div>
         <div ng-if="isNestedDisplay">