diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-07-09 06:09:01 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-07-09 06:09:01 +0300 |
commit | 0a9efe02885d9ad4dbdaf61746ae81daea0f575b (patch) | |
tree | ccd02a93eaaadb1c547c5f6e1d239d9276908bc6 /app/assets/javascripts/vue_shared/components/user_popover | |
parent | f44bf01f69a491d4dfca8d631b390371bd0eec7a (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/user_popover')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue | 40 |
1 files changed, 19 insertions, 21 deletions
diff --git a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue index f9e0c232d7e..19c9c70ecf1 100644 --- a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue +++ b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue @@ -50,11 +50,11 @@ export default { <template> <!-- 200ms delay so not every mouseover triggers Popover --> <gl-popover :target="target" :delay="200" boundary="viewport" triggers="hover" placement="top"> - <div class="user-popover d-flex"> - <div class="p-1 flex-shrink-1"> - <user-avatar-image :img-src="user.avatarUrl" :size="60" css-classes="mr-2" /> + <div class="gl-p-3 gl-line-height-normal gl-display-flex" data-testid="user-popover"> + <div class="gl-p-2 flex-shrink-1"> + <user-avatar-image :img-src="user.avatarUrl" :size="60" css-classes="gl-mr-3!" /> </div> - <div class="p-1 w-100"> + <div class="gl-p-2 gl-w-full"> <template v-if="userIsLoading"> <!-- `gl-skeleton-loading` does not support equal length lines --> <!-- This can be migrated to `gl-skeleton-loader` when https://gitlab.com/gitlab-org/gitlab-ui/-/issues/872 is completed --> @@ -62,33 +62,31 @@ export default { v-for="n in $options.maxSkeletonLines" :key="n" :lines="1" - class="animation-container-small mb-1" + class="animation-container-small gl-mb-2" /> </template> <template v-else> - <div class="mb-2"> - <h5 class="m-0"> + <div class="gl-mb-3"> + <h5 class="gl-m-0"> {{ user.name }} </h5> - <span class="text-secondary">@{{ user.username }}</span> + <span class="gl-text-gray-700">@{{ user.username }}</span> </div> - <div class="text-secondary"> - <div v-if="user.bio" class="d-flex mb-1"> - <icon name="profile" class="category-icon flex-shrink-0" /> - <span ref="bio" class="ml-1">{{ user.bio }}</span> + <div class="gl-text-gray-700"> + <div v-if="user.bio" class="gl-display-flex gl-mb-2"> + <icon name="profile" class="gl-text-gray-600 gl-flex-shrink-0" /> + <span ref="bio" class="gl-ml-2">{{ user.bio }}</span> </div> - <div v-if="user.workInformation" class="d-flex mb-1"> - <icon name="work" class="category-icon flex-shrink-0" /> - <span ref="workInformation" class="ml-1">{{ user.workInformation }}</span> + <div v-if="user.workInformation" class="gl-display-flex gl-mb-2"> + <icon name="work" class="gl-text-gray-600 gl-flex-shrink-0" /> + <span ref="workInformation" class="gl-ml-2">{{ user.workInformation }}</span> </div> </div> - <div class="js-location text-secondary d-flex"> - <div v-if="user.location"> - <icon name="location" class="category-icon flex-shrink-0" /> - <span class="ml-1">{{ user.location }}</span> - </div> + <div v-if="user.location" class="js-location gl-text-gray-700 gl-display-flex"> + <icon name="location" class="gl-text-gray-600 flex-shrink-0" /> + <span class="gl-ml-2">{{ user.location }}</span> </div> - <div v-if="statusHtml" class="js-user-status mt-2"> + <div v-if="statusHtml" class="js-user-status gl-mt-3"> <span v-html="statusHtml"></span> </div> </template> |