Improve reusability of UserAvatar component

2 files changed, 14 insertions, 7 deletions

diff --git a/src/components/user_avatar/user_avatar.js b/src/components/user_avatar/user_avatar.js
index 407ce1a6..8afb46c2 100644
--- a/src/components/user_avatar/user_avatar.js
+++ b/src/components/user_avatar/user_avatar.js
@@ -3,7 +3,9 @@ import avatarPlaceholderImage from '../../assets/avatar-placeholder.png'
 
 const UserAvatar = {
   props: [
-    'src'
+    'src',
+    'betterShadow',
+    'compact'
   ],
   data () {
     return {
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
index bbc99f96..3ec25b21 100644
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@@ -1,5 +1,5 @@
 <template>
-  <StillImage class="avatar" :src="imgSrc" :imageLoadError="imageLoadError"/>
+  <StillImage class="avatar" :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }" :src="imgSrc" :imageLoadError="imageLoadError"/>
 </template>
 
 <script src="./user_avatar.js"></script>
@@ -12,8 +12,11 @@
   box-shadow: var(--avatarStatusShadow);
   border-radius: $fallback--avatarRadius;
   border-radius: var(--avatarRadius, $fallback--avatarRadius);
-  overflow: hidden;
-  position: relative;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
 
   &.better-shadow {
     box-shadow: var(--avatarStatusShadowInset);
@@ -24,9 +27,11 @@
     display: none;
   }
 
-  img {
-    width: 100%;
-    height: 100%;
+  &.avatar-compact {
+    width: 32px;
+    height: 32px;
+    border-radius: $fallback--avatarAltRadius;
+    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
   }
 }
 </style>