Add status and form ui/ux improvements

* Adjust popover styling
* Form label / dropdown styling

Issue: #5615
Reference: Tower UX Improvements doc

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

@@ -404,20 +404,27 @@ textarea.allowresize {
 /* TB tooltip overrides */
   .popover-content {
       width: 100%;
+      padding: 0;
 
       .table>tbody>tr>td {
+          padding-left: 0;
           border-top: 1px solid @b7grey;
       }
   }
   h3.popover-title, .popover-content, .popover-content blockquote, .popover-content a {
       font-size: 12px;
   }
+  .flyout {
+      margin-bottom: 0;
+  }
   .flyout thead> tr> th, .flyout tbody> tr> td, .flyout tbody> tr> td> a {
       font-size: 12px;
   }
+  .flyout tbody > tr:last-child > td {
+      padding-bottom: 0;
+  }
   .popover-title {
-      padding-top: 5px;
-      padding-bottom: 5px;
+      padding: 0 0 5px 0;
       background-color: @default-interface-txt;
       color: @default-bg;
       font-weight: 600;
@@ -431,6 +438,8 @@ textarea.allowresize {
       background-color: @default-interface-txt;
       color: @default-bg; //white
       text-align: left;
+      padding: 10px;
+      font-weight: 400;
 
       code {
           color: @default-data-txt;
@@ -444,6 +453,14 @@ textarea.allowresize {
               color: @default-warning-hov;
           }
       }
+
+      p {
+          font-weight: 400;
+      }
+
+      p:last-child {
+          margin-bottom: 0;
+      }
   }
   .popover.right>.arrow:after  {
       border-right-color: @default-interface-txt;
@@ -1030,11 +1047,11 @@ input[type="checkbox"].checkbox-no-label {
 
 .table.table-condensed.flyout {
     thead>tr>th {
+        padding-left: 0;
         border: none;
     }
 }
 
-
 /* Table info rows */
 
 .loading-info {
@@ -2207,6 +2224,12 @@ a:hover {
     background-color: @default-link;
 }
 
+.select2-selection {
+    & > .select2-selection__arrow {
+        border-left: none;
+    }
+}
+
 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
     background-color: @default-err;
 }

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

@@ -337,10 +337,6 @@
     height: 28px!important;
 }
 
-.select2-selection__arrow:hover{
-    background-color:@field-button-hov !important;
-}
-
 .select2-results__option{
     color: @field-label !important;
     height: 30px!important;

awx/ui/client/src/configuration/configuration.block.less

@@ -9,7 +9,8 @@
 }
 
 .Form-resetValue {
-    float: right
+    float: right;
+    font-size: 10px;
 }
 
 .Form-resetAll {

awx/ui/client/src/inventories/inventories.block.less

@@ -1,18 +0,0 @@
-.Inventories {}
-
-.Inventories--popover-table {
-    margin-bottom: 0;
-
-    & > thead > tr > th,
-    & > tbody > tr > td {
-        padding-left: 0; 
-    }
-}
-
-.Inventories--popover-content {
-    padding: 10px;
-}
-
-.Inventories--popover-title {
-    padding: 10px 0 0 10px;
-}

awx/ui/client/src/inventories/list/inventory-list.controller.js

@@ -102,9 +102,6 @@ function InventoriesList($scope, $rootScope, $location, $log,
         elem.removeAttr('ng-click');
         $compile(elem)($scope);
         $scope.triggerPopover(event);
-
-        $('.popover-content').addClass('Inventories Inventories--popover-content');
-        $('.popover-title').addClass('Inventories Inventories--popover-title');
     } 
     if ($scope.removeHostSummaryReady) {
         $scope.removeHostSummaryReady();

awx/ui/client/src/notifications/notificationTemplates.form.js

@@ -196,6 +196,7 @@ export default ['i18n', function(i18n) {
             },
             from_number: {
                 label: i18n._('Source Phone Number'),
+                dataTitle: i18n._('Source Phone Number'),
                 type: 'text',
                 awPopOver: '<p>' + i18n._('Number associated with the "Messaging Service" in Twilio.') + '</p>'+
                             '<p>' + i18n.sprintf(i18n._('This must be of the form %s.'), '<code>+18005550199</code>') + '</p>',
@@ -209,11 +210,11 @@ export default ['i18n', function(i18n) {
             },
             to_numbers: {
                 label: i18n._('Destination SMS Number'),
+                dataTitle: i18n._('Destination SMS Number'),
                 type: 'textarea',
                 rows: 3,
                 awPopOver: '<p>' + i18n._('Type an option on each line.') + '</p>'+
                             '<p>' + i18n._('For example:') + '<br><code>+12125552368</code><br>\n<code>+19105556162</code><br>\n',
-                dataTitle: i18n._('Destination SMS Number'),
                 dataPlacement: 'right',
                 dataContainer: "body",
                 awRequiredWhen: {
@@ -293,6 +294,7 @@ export default ['i18n', function(i18n) {
             },
             color: {
                 label: i18n._('Notification Color'),
+                dataTitle: i18n._('Notification Color'),
                 type: 'text',
                 awPopOver: '<p>' + i18n.sprintf(i18n._('Color can be one of %s.'), '<code>yellow</code>, <code>green</code>, <code>red</code>, ' +
                            '<code>purple</code>, <code>gray</code>, <code>random</code>') + '\n',
@@ -324,6 +326,7 @@ export default ['i18n', function(i18n) {
             },
             headers: {
                 label: i18n._('HTTP Headers'),
+                dataTitle: i18n._('HTTP Headers'),
                 type: 'textarea',
                 name: 'headers',
                 rows: 5,

awx/ui/client/src/smart-status/smart-status.block.less

@@ -53,7 +53,6 @@
 .SmartStatus-tooltip--successful,
 .SmartStatus-tooltip--success{
     color: @default-succ;
-    padding-left: 5px;
     padding-right: 0px;
     text-shadow:
         -1px -1px 0 @default-bg,
@@ -65,7 +64,6 @@
 
 .SmartStatus-tooltip--failed{
     color: @default-err;
-    padding-left: 5px;
     padding-right: 0px;
     text-shadow:
         -1px -1px 0 @default-bg,
@@ -76,7 +74,6 @@
 
 .SmartStatus-tooltip--running{
     color: @default-data-txt;
-    padding-left: 5px;
     padding-right: 0px;
     text-shadow:
         -1px -1px 0 @default-bg,