Comment user avatar Image, Changed Fixtures, added new shadow color

Needed to reorder css variables

Neede to reorder vars again

Added Changelog

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue

@@ -67,6 +67,7 @@ export default {
     // In both cases we should render the defaultAvatarUrl
     sanitizedSource() {
       let baseSrc = this.imgSrc === '' || this.imgSrc === null ? defaultAvatarUrl : this.imgSrc;
+      // Only adds the width to the URL if its not a base64 data image
       if (!baseSrc.startsWith('data:') && !baseSrc.includes('?')) baseSrc += `?width=${this.size}`;
       return baseSrc;
     },

app/assets/stylesheets/framework/variables.scss

@@ -32,6 +32,15 @@ $gray-dark: darken($gray-light, $darken-dark-factor);
 $gray-darker: #eee;
 $gray-darkest: #c4c4c4;
 
+$black: #000;
+$black-transparent: rgba(0, 0, 0, 0.3);
+$almost-black: #242424;
+
+$t-gray-a-02: rgba($black, 0.02);
+$t-gray-a-04: rgba($black, 0.04);
+$t-gray-a-06: rgba($black, 0.06);
+$t-gray-a-08: rgba($black, 0.08);
+
 $gl-gray-100: #dddddd;
 $gl-gray-200: #cccccc;
 $gl-gray-350: #aaaaaa;
@@ -170,11 +179,6 @@ $theme-light-red-500: #c24b38;
 $theme-light-red-600: #b03927;
 $theme-light-red-700: #a62e21;
 
-$black: #000;
-$black-transparent: rgba(0, 0, 0, 0.3);
-$shadow-color: rgba($black, 0.1);
-$almost-black: #242424;
-
 $border-white-light: darken($white-light, $darken-border-factor);
 $border-white-normal: darken($white-normal, $darken-border-factor);
 
@@ -187,6 +191,7 @@ $border-gray-dark: darken($white-normal, $darken-border-factor);
  * UI elements
  */
 $border-color: #e5e5e5;
+$shadow-color: $t-gray-a-08;
 $well-expand-item: #e8f2f7;
 $well-inner-border: #eef0f2;
 $well-light-border: #f1f1f1;

changelogs/unreleased/tz-user-popover-follow-up.yml

+title: Changed Userpopover Fixtures and shadow color
+merge_request: 23768
+author:
+type: other

spec/javascripts/user_popovers_spec.js

@@ -2,6 +2,9 @@ import initUserPopovers from '~/user_popovers';
 import UsersCache from '~/lib/utils/users_cache';
 
 describe('User Popovers', () => {
+  const fixtureTemplate = 'merge_requests/diff_comment.html.raw';
+  preloadFixtures(fixtureTemplate);
+
   const selector = '.js-user-link';
 
   const dummyUser = { name: 'root' };
@@ -15,11 +18,7 @@ describe('User Popovers', () => {
   };
 
   beforeEach(() => {
-    setFixtures(`
-      <a href="/root" data-user-id="1" class="js-user-link" data-username="root" data-original-title="" title="">
-        Root
-      </a>
-    `);
+    loadFixtures(fixtureTemplate);
 
     const usersCacheSpy = () => Promise.resolve(dummyUser);
     spyOn(UsersCache, 'retrieveById').and.callFake(userId => usersCacheSpy(userId));
@@ -39,7 +38,7 @@ describe('User Popovers', () => {
       expect(shownPopover).not.toBeNull();
 
       expect(shownPopover.innerHTML).toContain(dummyUser.name);
-      expect(UsersCache.retrieveById).toHaveBeenCalledWith('1');
+      expect(UsersCache.retrieveById).toHaveBeenCalledWith('58');
 
       triggerEvent('mouseleave', document.querySelector(selector));
 

spec/javascripts/vue_shared/components/user_popover/user_popover_spec.js

@@ -17,14 +17,13 @@ const DEFAULT_PROPS = {
 const UserPopover = Vue.extend(userPopover);
 
 describe('User Popover Component', () => {
+  const fixtureTemplate = 'merge_requests/diff_comment.html.raw';
+  preloadFixtures(fixtureTemplate);
+
   let vm;
 
   beforeEach(() => {
-    setFixtures(`
-      <a href="/root" data-user-id="1" class="js-user-link" title="testuser">
-        Root
-      </a>
-    `);
+    loadFixtures(fixtureTemplate);
   });
 
   afterEach(() => {