From 14164cc8b39facadd458d879aa160ef6c139cd83 Mon Sep 17 00:00:00 2001
From: Simon Howe <footless@gmail.com>
Date: Wed, 19 Oct 2016 14:30:22 +0200
Subject: [PATCH] Review feedback on addition of search to help-panel

---
 client/app/scripts/components/help-panel.js | 22 ++++++++++++++++-----
 client/app/scripts/components/search.js     |  6 +++---
 client/app/styles/main.less                 | 11 +++++------
 3 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/client/app/scripts/components/help-panel.js b/client/app/scripts/components/help-panel.js
index 07672b944..b7147aaa6 100644
--- a/client/app/scripts/components/help-panel.js
+++ b/client/app/scripts/components/help-panel.js
@@ -51,19 +51,31 @@ function renderShortcutPanel() {
 
 const BASIC_SEARCHES = [
   {term: 'foo', label: 'All fields for foo'},
-  {term: 'pid: 12345', label: 'Any field matching pid for the value 12345'},
+  {
+    term: 'pid: 12345',
+    label: <span>Any field matching <b>pid</b> for the value 12345</span>
+  },
 ];
 
 
 const REGEX_SEARCHES = [
-  {term: 'foo|bar', label: 'All fields for foo or bar'},
-  {term: 'command: foo(bar|baz)', label: 'Command field for foobar or foobaz'},
+  {
+    term: 'foo|bar',
+    label: 'All fields for foo or bar'
+  },
+  {
+    term: 'command: foo(bar|baz)',
+    label: <span><b>command</b> field for foobar or foobaz</span>
+  },
 ];
 
 
 const METRIC_SEARCHES = [
-  {term: 'cpu > 4%', label: 'CPU greater than 4%'},
-  {term: 'memory < 10mb', label: 'memory less than 4mb'},
+  {term: 'cpu > 4%', label: <span><b>CPU</b> greater than 4%</span>},
+  {
+    term: 'memory < 10mb',
+    label: <span><b>Memory</b> less than 10 megabytes</span>
+  },
 ];
 
 
diff --git a/client/app/scripts/components/search.js b/client/app/scripts/components/search.js
index 4d64762c9..70fd88839 100644
--- a/client/app/scripts/components/search.js
+++ b/client/app/scripts/components/search.js
@@ -133,9 +133,9 @@ class Search extends React.Component {
             </label>
           </div>
           {!showPinnedSearches && <div className="search-hint">
-            {getHint(nodes)} <span className="search-help-link" onClick={onClickHelp}>
-              Help!
-            </span>
+            {getHint(nodes)} <span
+              className="search-help-link fa fa-question-circle"
+              onClick={onClickHelp} />
           </div>}
         </div>
       </div>
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index 31d4bec21..975a04914 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -1340,13 +1340,9 @@ h2 {
   }
 
   &-help-link {
+    .btn-opacity;
     cursor: pointer;
-    font-weight: bold;
-    text-transform: uppercase;
-
-    &:hover {
-      text-decoration: underline;
-    }
+    font-size: 150%;
   }
 
   &-label {
@@ -1611,6 +1607,9 @@ h2 {
 
       &-term-label {
         flex: 1;
+        b {
+          color: #5b5b88;
+        }
       }
     }
   }