Improving UI for the search popover

3 files changed, 34 insertions, 11 deletions

diff --git a/web/react/components/search_bar.jsx b/web/react/components/search_bar.jsx
index bf12ca160..7540b41a4 100644
--- a/web/react/components/search_bar.jsx
+++ b/web/react/components/search_bar.jsx
@@ -8,7 +8,7 @@ var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
 var utils = require('../utils/utils.jsx');
 var Constants = require('../utils/constants.jsx');
 var ActionTypes = Constants.ActionTypes;
-var Tooltip = ReactBootstrap.Tooltip;
+var Popover = ReactBootstrap.Popover;
 
 export default class SearchBar extends React.Component {
     constructor() {
@@ -163,7 +163,7 @@ export default class SearchBar extends React.Component {
                         onMouseUp={this.handleMouseInput}
                     />
                     {isSearching}
-                    <Tooltip
+                    <Popover
                         placement='bottom'
                         className={helpClass}
                     >
@@ -176,7 +176,7 @@ export default class SearchBar extends React.Component {
                                 <span>{'Use '}</span><b>{'from:'}</b><span>{' to find posts from specific users and '}</span><b>{'in:'}</b><span>{' to find posts in specific channels'}</span>
                             </li>
                         </ul>
-                    </Tooltip>
+                    </Popover>
                 </form>
             </div>
         );
diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss
index 3618fb07e..6b2e79933 100644
--- a/web/sass-files/sass/partials/_base.scss
+++ b/web/sass-files/sass/partials/_base.scss
@@ -40,6 +40,7 @@ img {
 }
 
 .popover {
+  @include border-radius(3px);
   color: #333;
   &.bottom, &.right, &.top, &.left {
     >.arrow:after {
diff --git a/web/sass-files/sass/partials/_popover.scss b/web/sass-files/sass/partials/_popover.scss
index c389ddf7d..72cb43481 100644
--- a/web/sass-files/sass/partials/_popover.scss
+++ b/web/sass-files/sass/partials/_popover.scss
@@ -21,21 +21,43 @@
 }
 
 .search-help-popover {
-    transition: opacity 0.3s;
+    visibility: hidden;
+    max-width: none;
+    width: 100%;
+    top: 36px;
+    @include single-transition(opacity, 0.3s, ease-in);
+    font-size: em(13px);
+
+    &.bottom > .arrow {
+        top: -18px;
+        border-width: 9px;
+        left: 30px;
+    }
+
+    .popover-content {
+        padding: 3px 13px;
+    }
 
     h4 {
-        text-align: left;
+        font-size: 1em;
     }
+
     ul {
-        padding-left: 2em;
-        text-align: left;
+        padding-left: 17px;
+        span {
+            @include opacity(0.7);
+        }
+        strong, b {
+            @include opacity(1);
+        }
     }
+
     .tooltip-inner {
         max-width: 100%;
     }
-}
 
-.search-help-popover.visible {
-    opacity: 100;
-    transition: opacity 0.3s;
+    &.visible {
+        visibility: visible;
+        @include opacity(1);
+    }
 }