diff --git a/web/react/components/search_autocomplete.jsx b/web/react/components/search_autocomplete.jsx
index 284b475c1c..0229b07fdd 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 (
{channel.name}
@@ -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 (
+

{user.username}
);
@@ -126,7 +136,7 @@ export default class SearchAutocomplete extends React.Component {
return (
{suggestions}
diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss
index 2f15a445f1..d7287295b5 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);
+ }
+}