Modify Hipchat input field to behave like a dropdown

* Fixed UX issues

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

@@ -63,17 +63,16 @@
 .Form-title--is_ldap_user,
 .Form-title--is_external_account,
 .Form-title--roleType {
-    height:15px;
-    color: @default-interface-txt;
     background-color: @default-list-header-bg;
     border-radius: 5px;
+    color: @default-interface-txt;
     font-size: 10px;
-    padding-left: 10px;
-    padding-right: 10px;
-    margin-left: 10px;
-    text-transform: uppercase;
     font-weight: 100;
+    height:15px;
+    margin-left: 10px;
     margin-top: 2.25px;
+    padding: 0 10px;
+    text-transform: uppercase;
 }
 
 .Form-exitHolder {
@@ -523,11 +522,6 @@ input[type='radio']:checked:before {
 
 .Form-mixedInputGroup {
     width: 100%;
-
-    .Form-lookupButton {
-        border-right:1px solid @field-border;
-
-    }
 }
 
 .FormToggle {}

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

@@ -555,10 +555,9 @@ table, tbody {
 .InventoryManage-container {
     .List-actionHolder {
         justify-content: flex-end;
-        margin-top: -52px;
     }
-    .List-action button {
+    .List-actions {
-        margin-left: 12px;
+        margin: 0 0 -34px 0;
     }
     .SmartSearch-searchTermContainer {
         width: 100%;

awx/ui/client/src/access/add-rbac.block.less

@@ -44,6 +44,10 @@
     padding: 0px 20px;
 }
 
+.AddPermissions-body .List-well {
+    margin-top: 0;
+}
+
 .AddPermissions-footer {
     display: flex;
     flex-wrap: wrap-reverse;

awx/ui/client/src/notifications/add/add.controller.js

@@ -7,12 +7,12 @@
 export default ['Rest', 'Wait', 'NotificationsFormObject',
     'ProcessErrors', 'GetBasePath', 'Alert',
     'GenerateForm', '$scope', '$state', 'CreateSelect2', 'GetChoices',
-    'NotificationsTypeChange', 'ParseTypeChange',
+    'NotificationsTypeChange', 'ParseTypeChange', 'i18n',
     function(
         Rest, Wait, NotificationsFormObject,
         ProcessErrors, GetBasePath, Alert,
         GenerateForm, $scope, $state, CreateSelect2, GetChoices,
-        NotificationsTypeChange, ParseTypeChange
+        NotificationsTypeChange, ParseTypeChange, i18n
     ) {
 
         var generator = GenerateForm,
@@ -74,6 +74,12 @@ export default ['Rest', 'Wait', 'NotificationsFormObject',
                 element: '#notification_template_notification_type',
                 multiple: false
             });
+
+            $scope.hipchatColors = [i18n._('Gray'), i18n._('Green'), i18n._('Purple'), i18n._('Red'), i18n._('Yellow'), i18n._('Random')];
+            CreateSelect2({
+                element: '#notification_template_color',
+                multiple: false
+            });
         });
 
         $scope.$watch('headers', function validate_headers(str) {

awx/ui/client/src/notifications/edit/edit.controller.js

@@ -9,14 +9,14 @@ export default ['Rest', 'Wait',
     'GenerateForm',
     'notification_template',
     '$scope', '$state', 'GetChoices', 'CreateSelect2', 'Empty',
-    'NotificationsTypeChange', 'ParseTypeChange',
+    'NotificationsTypeChange', 'ParseTypeChange', 'i18n',
     function(
         Rest, Wait,
         NotificationsFormObject, ProcessErrors, GetBasePath,
         GenerateForm,
         notification_template,
         $scope, $state, GetChoices, CreateSelect2, Empty,
-        NotificationsTypeChange, ParseTypeChange
+        NotificationsTypeChange, ParseTypeChange, i18n
     ) {
         var generator = GenerateForm,
             id = notification_template.id,
@@ -121,6 +121,12 @@ export default ['Rest', 'Wait',
                         element: '#notification_template_notification_type',
                         multiple: false
                     });
+
+                    $scope.hipchatColors = [i18n._('Gray'), i18n._('Green'), i18n._('Purple'), i18n._('Red'), i18n._('Yellow'), i18n._('Random')];
+                    CreateSelect2({
+                        element: '#notification_template_color',
+                        multiple: false
+                    });
                     NotificationsTypeChange.getDetailFields($scope.notification_type.value).forEach(function(field) {
                         $scope[field[0]] = field[1];
                     });

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

@@ -295,7 +295,8 @@ export default ['i18n', function(i18n) {
             color: {
                 label: i18n._('Notification Color'),
                 dataTitle: i18n._('Notification Color'),
-                type: 'text',
+                type: 'select',
+                ngOptions: 'color for color in hipchatColors track by color',
                 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',
                 awRequiredWhen: {

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

@@ -38,10 +38,14 @@
     .alert {
         margin: 0;
     }
+    .alert span:first-of-type {
+            margin-right: 10px;
+    }
+
     .close {
         position: absolute;
-        right: 5px;
+        right: 10px;
-        top: 0px;
+        top: 5px;
         color: white;
         opacity: 1;
         text-shadow: none;

awx/ui/client/src/organizations/orgcards.block.less

@@ -65,6 +65,10 @@
     overflow: hidden;
     text-overflow: ellipsis;
     align-items: baseline;
+
+    &:hover {
+        color: @default-link-hov;
+    }
 }
 
 .OrgCards-actionItems {

awx/ui/client/src/shared/smart-search/smart-search.block.less

@@ -224,6 +224,7 @@
 
 .SmartSearch-examples {
     display: flex;
+    flex-wrap: wrap;
 }
 
 .SmartSearch-examples--title {

awx/ui/client/src/templates/templates.list.js

@@ -17,7 +17,6 @@ export default ['i18n', function(i18n) {
         selectInstructions: i18n.sprintf(i18n._("Click on a row to select it, and click Finished when done. Use the %s button to create a new job template."), "<i class=\"icon-plus\"></i> "),
         index: false,
         hover: true,
-        searchBarFullWidth: true,
 
         fields: {
             name: {