Fixes per feedback on user avatar components.

3 files changed, 14 insertions, 23 deletions

diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue
index 4891e7f927c..b8db6afda12 100644
--- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue
@@ -16,12 +16,11 @@
 */
 
 import defaultAvatarUrl from 'images/no_avatar.png';
-import UserAvatarSizeMixin from './user_avatar_size_mixin';
 import TooltipMixin from '../../mixins/tooltip';
 
 export default {
   name: 'UserAvatarImage',
-  mixins: [UserAvatarSizeMixin, TooltipMixin],
+  mixins: [TooltipMixin],
   props: {
     imgSrc: {
       type: String,
@@ -58,8 +57,8 @@ export default {
     tooltipContainer() {
       return this.tooltipText ? 'body' : null;
     },
-    imgCssClasses() {
-      return `avatar ${this.avatarSizeClass} ${this.cssClasses}`;
+    avatarSizeClass() {
+      return `s${this.size}`;
     },
   },
 };
@@ -67,9 +66,11 @@ export default {
 
 <template>
   <img
-    :class="imgCssClasses"
+    class="avatar"
+    :class="[avatarSizeClass, cssClasses]"
     :src="imgSrc"
-    :style="avatarSizeStylesMap"
+    :width="size"
+    :height="size"
     :alt="imgAlt"
     :data-container="tooltipContainer"
     :data-placement="tooltipPlacement"
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_size_mixin.js b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_size_mixin.js
deleted file mode 100644
index b6155ffd28e..00000000000
--- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_size_mixin.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export default {
-  computed: {
-    avatarSizeStylesMap() {
-      return {
-        width: `${this.size}px`,
-        height: `${this.size}px`,
-      };
-    },
-    avatarSizeClass() {
-      return `s${this.size}`;
-    },
-  },
-};
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue
index 39b4d37c91e..d2ff2ac006e 100644
--- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue
@@ -14,10 +14,7 @@
 
 */
 
-import UserAvatarSizeMixin from './user_avatar_size_mixin';
-
 export default {
-  mixins: [UserAvatarSizeMixin],
   props: {
     svg: {
       type: String,
@@ -29,13 +26,19 @@ export default {
       default: 20,
     },
   },
+  computed: {
+    avatarSizeClass() {
+      return `s${this.size}`;
+    },
+  },
 };
 </script>
 
 <template>
   <svg
     :class="avatarSizeClass"
-    :style="avatarSizeStylesMap"
+    :height="size"
+    :width="size"
     v-html="svg">
   </svg>
 </template>