From 6be2388620883c41eadeaa5525f8218d7994b91d Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Tue, 19 Jun 2018 13:59:55 -0400
Subject: [PATCH] simplify autocomplete ux

---
 src/renderer/component/common/icon.jsx    |  2 +-
 src/renderer/component/wunderbar/view.jsx | 14 ++++++++------
 src/renderer/scss/component/_search.scss  |  4 ++++
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/renderer/component/common/icon.jsx b/src/renderer/component/common/icon.jsx
index 36810b721..1a244422b 100644
--- a/src/renderer/component/common/icon.jsx
+++ b/src/renderer/component/common/icon.jsx
@@ -60,7 +60,7 @@ class IconComponent extends React.PureComponent<Props> {
     }
     const inner = <Icon size={size} className="icon" color={color} />;
 
-    return tooltip ? (
+    return tooltip && tooltipText ? (
       <Tooltip icon body={tooltipText} direction={tooltip}>
         {inner}
       </Tooltip>
diff --git a/src/renderer/component/wunderbar/view.jsx b/src/renderer/component/wunderbar/view.jsx
index 43869e917..2ee8dfb19 100644
--- a/src/renderer/component/wunderbar/view.jsx
+++ b/src/renderer/component/wunderbar/view.jsx
@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import classnames from 'classnames';
-import { normalizeURI } from 'lbry-redux';
+import { normalizeURI, SEARCH_TYPES } from 'lbry-redux';
 import Icon from 'component/common/icon';
 import { parseQueryParams } from 'util/query_params';
 import * as icons from 'constants/icons';
@@ -29,7 +29,7 @@ class WunderBar extends React.PureComponent<Props> {
   getSuggestionIcon = (type: string) => {
     switch (type) {
       case 'file':
-        return icons.COMPASS;
+        return icons.LOCAL;
       case 'channel':
         return icons.AT_SIGN;
       default:
@@ -109,7 +109,7 @@ class WunderBar extends React.PureComponent<Props> {
               placeholder="Enter LBRY URL here or search for videos, music, games and more"
             />
           )}
-          renderItem={({ value, type, shorthand }, isHighlighted) => (
+          renderItem={({ value, type }, isHighlighted) => (
             <div
               key={value}
               className={classnames('wunderbar__suggestion', {
@@ -117,11 +117,13 @@ class WunderBar extends React.PureComponent<Props> {
               })}
             >
               <Icon icon={this.getSuggestionIcon(type)} />
-              <span className="wunderbar__suggestion-label">{shorthand || value}</span>
-              {(true || isHighlighted) && (
+              <span className="wunderbar__suggestion-label">{value}</span>
+              {isHighlighted && (
                 <span className="wunderbar__suggestion-label--action">
                   {'-  '}
-                  {type === 'search' ? 'Search' : value}
+                  {type === SEARCH_TYPES.SEARCH && __('Search')}
+                  {type === SEARCH_TYPES.CHANNEL && __('View channel')}
+                  {type === SEARCH_TYPES.FILE && __('View file')}
                 </span>
               )}
             </div>
diff --git a/src/renderer/scss/component/_search.scss b/src/renderer/scss/component/_search.scss
index 29b05b12a..74e4eeca5 100644
--- a/src/renderer/scss/component/_search.scss
+++ b/src/renderer/scss/component/_search.scss
@@ -53,6 +53,7 @@
   display: flex;
   flex-direction: row;
   justify-items: flex-start;
+  align-items: center;
   font-family: 'metropolis-medium';
 
   &:not(:first-of-type) {
@@ -74,6 +75,9 @@
 .wunderbar__suggestion-label--action {
   margin-left: $spacing-vertical * 1/3;
   white-space: nowrap;
+  font-family: 'metropolis-medium';
+  font-size: 12px;
+  line-height: 0.1; // to vertically align because the font size is smaller
 }
 
 .wunderbar__active-suggestion {