Navbar - miscellaneous fixes

components/Dropdown/Dropdown.jsx

@@ -1,6 +1,6 @@
 require('./Dropdown.scss')
 
-import React, { Component } from 'react'
+import React, { Component, PropTypes } from 'react'
 
 class Dropdown extends Component {
   constructor(props) {
@@ -25,7 +25,7 @@ class Dropdown extends Component {
 
       currNode = currNode.parentNode
 
-      if(!currNode.tagName)
+      if(!currNode)
         break
     } while(currNode.tagName)
 
@@ -86,15 +86,15 @@ class Dropdown extends Component {
       <div className="dropdown-wrap" onClick={ this.onClick } ref="Dropdown">
         {
           this.props.children.map((child) => {
-            if(child.props.className.indexOf('dropdown-menu-header') > -1)
+            if(child.props.className === 'dropdown-menu-header')
               return child
           })
         }
 
         <div className = {ndClasses}>
           {
             this.props.children.map((child) => {
-              if(child.props.className.indexOf('dropdown-menu-list') > -1)
+              if(child.props.className === 'dropdown-menu-list')
                 return child
             })
           }
@@ -104,4 +104,8 @@ class Dropdown extends Component {
   }
 }
 
+Dropdown.propTypes = {
+  children: PropTypes.array.isRequired
+}
+
 export default Dropdown

components/Navbar/Navbar.scss

@@ -69,6 +69,7 @@ $super-wide: 1376px;
         width: 25px;
         background-color: $placeholder-bg;
         margin: auto;
+        cursor: pointer;
       }
     }
 

components/SearchBar/SearchBar.jsx

@@ -55,7 +55,7 @@ class SearchBar extends Component {
         isPartial = popularList[i].toLowerCase().indexOf(searchValue.toLowerCase()) === 0
 
         if(!typeaheadText && isPartial) {
-          typeaheadText = popularList[i]
+          typeaheadText = searchValue + popularList[i].substring(searchValue.length)
         }
 
         if(isPartial) {

components/SearchBar/SearchBar.scss

@@ -77,6 +77,7 @@ $active-icon-wrap-bg: #888894;
 
   .search-bar__text,
   .search-typeahead-text {
+    font-family: "Roboto", Arial, Helvetica, sans-serif;
     outline: 0px;
     border: 0px none;
     font-size: 17px;
@@ -95,8 +96,7 @@ $active-icon-wrap-bg: #888894;
     color: $accent-gray;
     display: none;
     z-index: 10;
-    left: 17.5px;
-    letter-spacing: 0.05em;
+    left: 16.5px;
   }
 
   .search-bar__clear {

components/SearchSuggestions/SearchSuggestions.scss

@@ -79,6 +79,10 @@
 				color: $accent-gray-dark;
 				font-size: 16px;
 				line-height: 30px;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				width: 95%;
+				overflow-x: hidden;
 			}
 		}
 
@@ -100,6 +104,9 @@
 			bottom: 0;
 			border: 0px none;
 			outline: 0px none;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow-x: hidden;
 		}
 
 		.footer-link:hover, .footer-link:active {

components/StandardListItem/StandardListItem.jsx

@@ -13,7 +13,7 @@ class StandardListItem extends Component {
     super(props)
   }
   render() {
-    const classes = 'StandardListItem ' + this.props.placeIcon
+    const classes = 'StandardListItem transition ' + this.props.placeIcon
     let label
     let icon
 
@@ -33,7 +33,7 @@ StandardListItem.propTypes = {
   showIcon : PropTypes.bool,
   showLabel : PropTypes.bool,
   imgSrc : PropTypes.string,
-  labelText : PropTypes.string,
+  labelText : PropTypes.node,
   placeIcon : PropTypes.string
 }
 

components/UserDropdownMenu/UserDropdownMenu.jsx

@@ -37,7 +37,7 @@ class UserDropdownMenu extends Component {
             <img className="dropdown-arrow" src={ require('./arrow-small-down.svg') } />
           </div>
 
-          <div className="dropdown-menu-list user-menu-items-list">
+          <div className="dropdown-menu-list">
             {
               userDropdownLists.map((list, i) => {
                 return ( <ul key={ i }>