From f176fa5c3bb023654175c6803926075aa4c9d4fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 30 Mar 2021 17:33:24 +0200
Subject: [PATCH] Refine and remove the last very small rest of the unwanted
 boarder

---
 .../_new/generic/UserAvatar/UserAvatar.story.js   |  4 ++--
 .../_new/generic/UserAvatar/UserAvatar.vue        | 15 ++++++++++++---
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/webapp/components/_new/generic/UserAvatar/UserAvatar.story.js b/webapp/components/_new/generic/UserAvatar/UserAvatar.story.js
index f68a4f2ec..d4830f09a 100644
--- a/webapp/components/_new/generic/UserAvatar/UserAvatar.story.js
+++ b/webapp/components/_new/generic/UserAvatar/UserAvatar.story.js
@@ -57,7 +57,7 @@ storiesOf('UserAvatar', module)
   .add('small', () => ({
     components: { UserAvatar },
     data: () => ({
-      user,
+      user: userWithoutAvatar,
     }),
     template: '<user-avatar :user="user" size="small"/>',
   }))
@@ -71,7 +71,7 @@ storiesOf('UserAvatar', module)
   .add('large', () => ({
     components: { UserAvatar },
     data: () => ({
-      user,
+      user: userWithoutAvatar,
     }),
     template: '<user-avatar :user="user" size="large"/>',
   }))
diff --git a/webapp/components/_new/generic/UserAvatar/UserAvatar.vue b/webapp/components/_new/generic/UserAvatar/UserAvatar.vue
index 456c0572b..08ace07c0 100644
--- a/webapp/components/_new/generic/UserAvatar/UserAvatar.vue
+++ b/webapp/components/_new/generic/UserAvatar/UserAvatar.vue
@@ -1,9 +1,10 @@
 <template>
-  <div :class="['user-avatar', size && `--${this.size}`]">
+  <div :class="['user-avatar', size && `--${this.size}`, !isAvatar && '--no-image']">
+    <!-- '--no-image' is neccessary, because otherwise we still have a little unwanted boarder araund the image for images with white backgrounds -->
     <span class="initials">{{ userInitials }}</span>
     <base-icon v-if="isAnonymous" name="eye-slash" />
     <img
-      v-if="user && user.avatar"
+      v-if="isAvatar"
       :src="user.avatar | proxyApiUrl"
       class="image"
       :alt="user.name"
@@ -33,6 +34,10 @@ export default {
     isAnonymous() {
       return !this.user || !this.user.name || this.user.name.toLowerCase() === 'anonymous'
     },
+    isAvatar() {
+      // TODO may we could test as well if the image is reachable? otherwise the background gets white and the initails can not be read
+      return this.user && this.user.avatar
+    },
     userInitials() {
       if (this.isAnonymous) return ''
 
@@ -49,7 +54,7 @@ export default {
   width: $size-avatar-base;
   border-radius: 50%;
   overflow: hidden;
-  background-color: $color-primary-dark;
+  background-color: $background-color-base;
   color: $text-color-primary-inverse;
 
   &.--small {
@@ -63,6 +68,10 @@ export default {
     font-size: $font-size-xx-large;
   }
 
+  &.--no-image {
+    background-color: $color-primary-dark;
+  }
+
   > .initials,
   > .base-icon {
     position: absolute;