diff options
Diffstat (limited to 'app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue')
-rw-r--r-- | app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue | 32 |
1 files changed, 14 insertions, 18 deletions
diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue b/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue index d6fcdeb9e13..1137951ccfc 100644 --- a/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue +++ b/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue @@ -1,16 +1,18 @@ <script> /* eslint-disable vue/require-default-prop, vue/no-v-html */ +import { GlButton } from '@gitlab/ui'; import highlight from '~/lib/utils/highlight'; import { truncateNamespace } from '~/lib/utils/text_utility'; import { mapVuexModuleState } from '~/lib/utils/vuex_module_mappers'; import Tracking from '~/tracking'; -import Identicon from '~/vue_shared/components/identicon.vue'; +import ProjectAvatar from '~/vue_shared/components/project_avatar.vue'; const trackingMixin = Tracking.mixin(); export default { components: { - Identicon, + GlButton, + ProjectAvatar, }, mixins: [trackingMixin], inject: ['vuexModule'], @@ -56,24 +58,18 @@ export default { <template> <li class="frequent-items-list-item-container"> - <a + <gl-button + category="tertiary" :href="webUrl" - class="clearfix dropdown-item" + class="gl-text-left gl-justify-content-start!" @click="track('click_link', { label: `${dropdownType}_dropdown_frequent_items_list_item` })" > - <div - ref="frequentItemsItemAvatarContainer" - class="frequent-items-item-avatar-container avatar-container rect-avatar s32" - > - <img v-if="avatarUrl" ref="frequentItemsItemAvatar" :src="avatarUrl" class="avatar s32" /> - <identicon - v-else - :entity-id="itemId" - :entity-name="itemName" - size-class="s32" - class="rect-avatar" - /> - </div> + <project-avatar + class="gl-float-left gl-mr-3" + :project-avatar-url="avatarUrl" + :project-name="itemName" + aria-hidden="true" + /> <div ref="frequentItemsItemMetadataContainer" class="frequent-items-item-metadata-container"> <div ref="frequentItemsItemTitle" @@ -90,6 +86,6 @@ export default { {{ truncatedNamespace }} </div> </div> - </a> + </gl-button> </li> </template> |