3 files changed, 19 insertions, 6 deletions

diff --git a/app/assets/javascripts/emoji/awards_app/index.js b/app/assets/javascripts/emoji/awards_app/index.js
index 16268910f49..1a084d37762 100644
--- a/app/assets/javascripts/emoji/awards_app/index.js
+++ b/app/assets/javascripts/emoji/awards_app/index.js
@@ -32,7 +32,7 @@ export default (el) => {
           canAwardEmoji: this.canAwardEmoji,
           currentUserId: this.currentUserId,
           defaultAwards: ['thumbsup', 'thumbsdown'],
-          selectedClass: 'gl-bg-blue-50! is-active',
+          selectedClass: 'selected',
         },
         on: {
           award: this.toggleAward,
diff --git a/app/assets/javascripts/emoji/awards_app/store/actions.js b/app/assets/javascripts/emoji/awards_app/store/actions.js
index 482acc5a3a9..f0340209248 100644
--- a/app/assets/javascripts/emoji/awards_app/store/actions.js
+++ b/app/assets/javascripts/emoji/awards_app/store/actions.js
@@ -1,6 +1,7 @@
 import * as Sentry from '@sentry/browser';
 import axios from '~/lib/utils/axios_utils';
 import { normalizeHeaders } from '~/lib/utils/common_utils';
+import { joinPaths } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
 import showToast from '~/vue_shared/plugins/global_toast';
 import {
@@ -13,8 +14,12 @@ import {
 export const setInitialData = ({ commit }, data) => commit(SET_INITIAL_DATA, data);
 
 export const fetchAwards = async ({ commit, dispatch, state }, page = '1') => {
+  if (!window.gon?.current_user_id) return;
+
   try {
-    const { data, headers } = await axios.get(state.path, { params: { per_page: 100, page } });
+    const { data, headers } = await axios.get(joinPaths(gon.relative_url_root || '', state.path), {
+      params: { per_page: 100, page },
+    });
     const normalizedHeaders = normalizeHeaders(headers);
     const nextPage = normalizedHeaders['X-NEXT-PAGE'];
 
@@ -33,13 +38,15 @@ export const toggleAward = async ({ commit, state }, name) => {
 
   try {
     if (award) {
-      await axios.delete(`${state.path}/${award.id}`);
+      await axios.delete(joinPaths(gon.relative_url_root || '', `${state.path}/${award.id}`));
 
       commit(REMOVE_AWARD, award.id);
 
       showToast(__('Award removed'));
     } else {
-      const { data } = await axios.post(state.path, { name });
+      const { data } = await axios.post(joinPaths(gon.relative_url_root || '', state.path), {
+        name,
+      });
 
       commit(ADD_NEW_AWARD, data);
 
diff --git a/app/assets/javascripts/emoji/components/picker.vue b/app/assets/javascripts/emoji/components/picker.vue
index e08d294b8c5..dc3eac0cd0c 100644
--- a/app/assets/javascripts/emoji/components/picker.vue
+++ b/app/assets/javascripts/emoji/components/picker.vue
@@ -23,6 +23,11 @@ export default {
       required: false,
       default: () => [],
     },
+    dropdownClass: {
+      type: [Array, String, Object],
+      required: false,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -78,8 +83,9 @@ export default {
       ref="dropdown"
       :toggle-class="toggleClass"
       :boundary="getBoundaryElement()"
+      :class="dropdownClass"
       menu-class="dropdown-extended-height"
-      category="tertiary"
+      category="secondary"
       no-flip
       right
       lazy
@@ -105,7 +111,7 @@ export default {
             'gl-text-body! emoji-picker-category-active': index === currentCategory,
           }"
           type="button"
-          class="gl-border-0 gl-border-b-2 gl-border-b-solid gl-flex-fill-1 gl-text-gray-300 gl-pt-3 gl-pb-3 gl-bg-transparent emoji-picker-category-tab"
+          class="gl-border-0 gl-border-b-2 gl-border-b-solid gl-flex-grow-1 gl-text-gray-300 gl-pt-3 gl-pb-3 gl-bg-transparent emoji-picker-category-tab"
           :aria-label="category.name"
           @click="scrollToCategory(category.name)"
         >