From 0951cbfe1bd355d39461957593f5ca18d5240260 Mon Sep 17 00:00:00 2001
From: Kyle Knight <kyle@kolide.co>
Date: Fri, 24 Feb 2017 13:11:33 -0600
Subject: [PATCH] Update Target Select UI (#1297)

---
 .../TargetOption/TargetIcon.jsx               |  7 ++++-
 .../TargetOption/TargetOption.jsx             | 10 ++++---
 .../TargetOption/_styles.scss                 | 26 ++++++++++++++-----
 .../fields/SelectTargetsDropdown/_styles.scss |  8 +++++-
 4 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetIcon.jsx b/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetIcon.jsx
index 3cc3a13c68..d8c2cebb22 100644
--- a/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetIcon.jsx
+++ b/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 };
diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetOption.jsx b/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetOption.jsx
index 55a84142cf..c59d749660 100644
--- a/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetOption.jsx
+++ b/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>
     );
   }
diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/_styles.scss b/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/_styles.scss
index 506b90a037..c9930b0395 100644
--- a/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/_styles.scss
+++ b/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 {
diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss b/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss
index 283e99577c..f73a700ea1 100644
--- a/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss
+++ b/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 {