3 files changed, 26 insertions, 26 deletions
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 30c01aa5..eb665c40 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -114,6 +114,7 @@ const EmojiPicker = {
       groupsScrolledClass: 'scrolled-top',
       keepOpen: false,
       customEmojiTimeout: null,
+      hideCustomEmojiInPicker: false,
       // Lazy-load only after the first time `showing` becomes true.
       contentLoaded: false,
       groupRefs: {},
@@ -286,7 +287,7 @@ const EmojiPicker = {
       return 0
     },
     allCustomGroups () {
-      if (this.hideCustomEmoji) {
+      if (this.hideCustomEmoji || this.hideCustomEmojiInPicker) {
         return {}
       }
       const emojis = this.$store.getters.groupedCustomEmojis
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 5bcff33b..5602a16b 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 $emoji-picker-header-height: 36px;
 $emoji-picker-header-picture-width: 32px;
 $emoji-picker-header-picture-height: 32px;
@@ -10,15 +8,6 @@ $emoji-picker-emoji-size: 32px;
   max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
   display: flex;
   flex-direction: column;
-  background-color: $fallback--bg;
-  background-color: var(--popover, $fallback--bg);
-  color: $fallback--link;
-  color: var(--popoverText, $fallback--link);
-
-  --faint: var(--popoverFaintText, $fallback--faint);
-  --faintLink: var(--popoverFaintLink, $fallback--faint);
-  --lightText: var(--popoverLightText, $fallback--lightText);
-  --icon: var(--popoverIcon, $fallback--icon);
 
   &-header-image {
     display: inline-flex;
@@ -39,11 +28,16 @@ $emoji-picker-emoji-size: 32px;
   }
 
   .keep-open,
-  .too-many-emoji {
+  .too-many-emoji,
+  .hide-custom-emoji {
     padding: 7px;
     line-height: normal;
   }
 
+  .hide-custom-emoji {
+    padding-top: 0;
+  }
+
   .too-many-emoji {
     display: flex;
     flex-direction: column;
@@ -76,8 +70,7 @@ $emoji-picker-emoji-size: 32px;
   .additional-tabs {
     display: flex;
     border-left: 1px solid;
-    border-left-color: $fallback--icon;
-    border-left-color: var(--icon, $fallback--icon);
+    border-left-color: var(--border);
     padding-left: 7px;
     flex: 0 0 auto;
   }
@@ -104,13 +97,8 @@ $emoji-picker-emoji-size: 32px;
         pointer-events: none;
       }
 
-      &.active {
+      &.toggled {
         border-bottom: 4px solid;
-
-        svg {
-          color: $fallback--lightText;
-          color: var(--lightText, $fallback--lightText);
-        }
       }
     }
   }
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 0788f34c..7c36deaa 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -23,9 +23,9 @@
             v-for="group in filteredEmojiGroups"
             :ref="setGroupRef('group-header-' + group.id)"
             :key="group.id"
-            class="emoji-tabs-item"
+            class="button-unstyled emoji-tabs-item"
             :class="{
-              active: activeGroupView === group.id
+              toggled: activeGroupView === group.id
             }"
             :title="group.text"
             role="button"
@@ -52,8 +52,8 @@
           class="additional-tabs"
         >
           <span
-            class="stickers-tab-icon additional-tabs-item"
-            :class="{active: showingStickers}"
+            class="button-unstyled stickers-tab-icon additional-tabs-item"
+            :class="{toggled: showingStickers}"
             :title="$t('emoji.stickers')"
             @click.prevent="toggleStickers"
           >
@@ -77,7 +77,7 @@
               ref="search"
               v-model="keyword"
               type="text"
-              class="form-control"
+              class="input form-control"
               :placeholder="$t('emoji.search_emoji')"
               @input="$event.target.composing = false"
             >
@@ -142,6 +142,17 @@
               {{ $t('emoji.keep_open') }}
             </Checkbox>
           </div>
+          <div
+            v-if="!hideCustomEmoji"
+            class="hide-custom-emoji"
+          >
+            <Checkbox
+              v-model="hideCustomEmojiInPicker"
+              @change="onShowing"
+            >
+              {{ $t('emoji.hide_custom_emoji') }}
+            </Checkbox>
+          </div>
         </div>
         <div
           v-if="showingStickers"