Update Target Select UI (#1297)

frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetIcon.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import classnames from 'classnames';
 
 import Icon from 'components/icons/Icon';
 import targetInterface from 'interfaces/target';
@@ -16,7 +17,11 @@ const TargetIcon = ({ target }) => {
     return platform === 'darwin' ? 'apple' : platform;
   };
 
-  return <Icon name={iconName()} className={`${baseClass}__icon`} />;
+  const { status } = target;
+
+  const targetClasses = classnames(`${baseClass}__icon`, `${baseClass}__icon--${status}`);
+
+  return <Icon name={iconName()} className={targetClasses} />;
 };
 
 TargetIcon.propTypes = { target: targetInterface.isRequired };

frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetOption.jsx

@@ -29,6 +29,10 @@ class TargetOption extends Component {
     } = target;
 
     if (targetType === 'hosts') {
+      if (!hostIpAddress) {
+        return false;
+      }
+
       return (
         <span>
           <span className={`${baseClass}__delimeter`}>&bull;</span>
@@ -54,14 +58,14 @@ class TargetOption extends Component {
 
     return (
       <div className={wrapperClassName}>
-        <button className={`button button--unstyled ${baseClass}__add-btn`} onClick={handleSelect}>
-          <Icon name="add-button" />
-        </button>
         <button className={`button button--unstyled ${baseClass}__target-content`} onClick={onMoreInfoClick(target)}>
           <TargetIcon target={target} />
           <span className={`${baseClass}__label-label`}>{displayText}</span>
           {renderTargetDetail()}
         </button>
+        <button className={`button button--unstyled ${baseClass}__add-btn`} onClick={handleSelect}>
+          <Icon name="add-button" />
+        </button>
       </div>
     );
   }

frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/_styles.scss

@@ -7,12 +7,6 @@
     font-size: 15px;
   }
 
-  &__add-btn {
-    color: $accent-medium;
-    font-size: $medium;
-    padding: 0 $pad-half;
-  }
-
   &__wrapper {
     @include display(flex);
     @include align-items(stretch);
@@ -26,12 +20,18 @@
     font-size: $small;
     font-weight: $normal;
     text-transform: none;
+    padding: 0 $pad-half;
+  }
+
+  &__add-btn {
+    @include transition(color 0ms);
+    color: $success;
+    font-size: $base;
   }
 
   &__target-content {
     @include flex-grow(1);
     text-align: left;
-    padding-right: $pad-half;
   }
 
   &__count {
@@ -53,6 +53,18 @@
   &__icon {
     color: $text-medium;
     font-size: $small;
+
+    &--online {
+      color: $success;
+    }
+
+    &--offline {
+       color: $alert;
+    }
+
+    &--mia {
+      color: $text-dark;
+    }
   }
 
   &__ip {

frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss

@@ -39,6 +39,12 @@
       border-width: 8px 8px 2.5px;
     }
 
+    &.is-open {
+      .Select-arrow {
+        border-width: 2.5px 8px 8px;
+      }
+    }
+
     .Select-input {
       height: 46px;
       margin: 0 0 0 $pad-base;
@@ -80,7 +86,7 @@
             }
 
             .target-option__add-btn {
-              color: $brand-ultralight;
+              color: $white;
             }
 
             .target-option__count {