Various emoji-picker fixes after recent refactoring

- Fix choosing of a categoy
- Make the highlight color darker (more visible)

sass/_emoji.scss

@@ -85,13 +85,13 @@
                         height: 30px;
                         width: 32px;
                         &.selected a {
-                            background-color: var(--highlight-color);
+                            background-color: var(--highlight-color-darker);
                         }
                         a {
                             padding: 3px;
                             font-size: var(--font-size-huge);
                             &:hover {
-                                background-color: var(--highlight-color);
+                                background-color: var(--highlight-color-darker);
                             }
                         }
                     }
@@ -122,7 +122,7 @@
                             border-bottom: none;
                         }
                         &.selected a, &:hover a {
-                            background-color: var(--highlight-color);
+                            background-color: var(--highlight-color-darker);
                         }
                         a {
                             padding: 0.25em;

sass/_variables.scss

@@ -62,6 +62,7 @@ $mobile_portrait_length: 480px !default;
     --chat-info-display: block;
 
     --highlight-color: #DCF9F6;
+    --highlight-color-darker: #B0E8E2;
 
     --primary-color: var(--light-blue);
     --primary-color-dark:  #397491;

src/converse-emoji-views.js

@@ -169,6 +169,10 @@ converse.plugins.add('converse-emoji-views', {
                 );
             },
 
+            afterRender () {
+                this.setScrollPosition();
+            },
+
             onSearchInputFocus (ev) {
                 this.chatview.emitBlurred(ev);
                 this.disableArrowNavigation();
@@ -180,11 +184,6 @@ converse.plugins.add('converse-emoji-views', {
                 View.prototype.remove.call(this);
             },
 
-            afterRender () {
-                this.initIntersectionObserver();
-                this.initArrowNavigation();
-            },
-
             initArrowNavigation () {
                 if (!this.navigator) {
                     const default_selector = 'li:not(.hidden):not(.emoji-skintone), .emoji-search';
@@ -388,12 +387,11 @@ converse.plugins.add('converse-emoji-views', {
                 this.setCategoryForElement(el);
                 this.navigator.select(el);
                 !this.navigator.enabled && this.navigator.enable();
-                this.setScrollPosition();
             },
 
             setScrollPosition () {
                 const category = this.model.get('current_category');
-                const el = this.el.querySelector('.emoji-picker__lists');
+                const el = this.el.querySelector('.emoji-lists__container--browse');
                 const heading = this.el.querySelector(`#emoji-picker-${category}`);
                 if (heading) {
                     // +4 due to 2px padding on list elements

src/templates/emoji_picker.js

@@ -13,7 +13,7 @@ const emoji_category = (o) => {
     const category_emoji = xss.filterXSS(o.transformCategory(o.emoji_categories[o.category]), {'whitelist': {'img': []}});
     return html`
         <li data-category="${o.category}"
-            class="emoji-category ${o.current_category} ${o.category} ${(o.current_category === o.category) ? 'picked' : ''}"
+            class="emoji-category ${o.category} ${(o.current_category === o.category) ? 'picked' : ''}"
             title="${__(o._converse.emoji_category_labels[o.category])}">
 
             <a class="pick-category"
@@ -79,7 +79,7 @@ const skintone_emoji = (o) => {
 
 
 const all_emojis = (o) => html`
-    <span ?hidden=${o.query} class="emoji-lists__container">
+    <span ?hidden=${o.query} class="emoji-lists__container emoji-lists__container--browse">
         ${Object.keys(o.emoji_categories).map(category => (o.emoji_categories[category] ? emojis_for_category(Object.assign({category}, o)) : ''))}
     </span>
 `;