collateral fixes for user-card: use still-image, styles for custom emoji

2 files changed, 12 insertions, 2 deletions

diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index b8eb28e3..e674627a 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -1,4 +1,5 @@
 import UserCardContent from '../user_card_content/user_card_content.vue'
+import StillImage from '../still-image/still-image.vue'
 
 const UserCard = {
   props: [
@@ -12,7 +13,8 @@ const UserCard = {
     }
   },
   components: {
-    UserCardContent
+    UserCardContent,
+    StillImage
   },
   computed: {
     currentUser () { return this.$store.state.users.currentUser }
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index eb0d7576..a16960cd 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="card">
     <a href="#">
-      <img @click.prevent="toggleUserExpanded" class="avatar" :src="user.profile_image_url">
+      <StillImage @click.prevent="toggleUserExpanded" class="avatar" :src="user.profile_image_url"/>
     </a>
     <div class="usercard" v-if="userExpanded">
       <user-card-content :user="user" :switcher="false"></user-card-content>
@@ -40,6 +40,14 @@
   margin-top:0.0em;
   text-align: left;
   width: 100%;
+  .user-name {
+    img {
+      object-fit: contain;
+      height: 16px;
+      width: 16px;
+      vertical-align: middle;
+    }
+  }
 }
 
 .follows-you {