Added styling to search autocomplete

2 files changed, 41 insertions, 1 deletions

diff --git a/web/react/components/search_autocomplete.jsx b/web/react/components/search_autocomplete.jsx
index 284b475c1..0229b07fd 100644
--- a/web/react/components/search_autocomplete.jsx
+++ b/web/react/components/search_autocomplete.jsx
@@ -90,11 +90,14 @@ export default class SearchAutocomplete extends React.Component {
                 channels = channels.filter((channel) => channel.name.startsWith(this.state.filter));
             }
 
+            channels.sort((a, b) => a.name.localeCompare(b.name));
+
             suggestions = channels.map((channel) => {
                 return (
                     <div
                         key={channel.id}
                         onClick={this.handleClick.bind(this, channel.name)}
+                        className='search-autocomplete__channel'
                     >
                         {channel.name}
                     </div>
@@ -107,12 +110,19 @@ export default class SearchAutocomplete extends React.Component {
                 users = users.filter((user) => user.username.startsWith(this.state.filter));
             }
 
+            users.sort((a, b) => a.username.localeCompare(b.username));
+
             suggestions = users.map((user) => {
                 return (
                     <div
                         key={user.id}
                         onClick={this.handleClick.bind(this, user.username)}
+                        className='search-autocomplete__user'
                     >
+                        <img
+                            className='profile-img'
+                            src={'/api/v1/users/' + user.id + '/image?time=' + user.update_at}
+                        />
                         {user.username}
                     </div>
                 );
@@ -126,7 +136,7 @@ export default class SearchAutocomplete extends React.Component {
         return (
             <div
                 ref='container'
-                style={{overflow: 'visible', position: 'absolute', zIndex: '100', background: 'yellow'}}
+                className='search-autocomplete'
             >
                 {suggestions}
             </div>
diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss
index 2f15a445f..d7287295b 100644
--- a/web/sass-files/sass/partials/_search.scss
+++ b/web/sass-files/sass/partials/_search.scss
@@ -109,3 +109,33 @@
 .search-highlight {
 	background-color: #FFF2BB;
 }
+
+.search-autocomplete {
+    background-color: #fff;
+    border: $border-gray;
+    line-height: 36px;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    position: absolute;
+    text-align: left;
+    width: 100%;
+    z-index: 100;
+    @extend %popover-box-shadow;
+}
+
+.search-autocomplete__channel {
+    height: 36px;
+    padding: 0px 6px;
+}
+
+.search-autocomplete__user {
+    height: 36px;
+    padding: 0px;
+
+    .profile-img {
+        height: 32px;
+        margin-right: 6px;
+        width: 32px;
+        @include border-radius(16px);
+    }
+}