Change background color of avatar image to white

- Refactor the user avatar storybook.

webapp/components/_new/generic/UserAvatar/UserAvatar.story.js

@@ -4,6 +4,7 @@ import StoryRouter from 'storybook-vue-router'
 import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
 import helpers from '~/storybook/helpers'
 import { user } from '~/components/UserTeaser/UserTeaser.story.js'
+import imageFile from './storybook/critical-avatar-white-background.png'
 
 helpers.init()
 const anonymousUser = {
@@ -13,34 +14,46 @@ const anonymousUser = {
 }
 const userWithoutAvatar = {
   ...user,
-  avatar: null,
   name: 'Ana Paula Nunes Marques',
+  avatar: null,
+}
+const userWithAvatar = {
+  ...user,
+  name: 'Jochen Image',
+  avatar: { url: imageFile },
 }
 storiesOf('UserAvatar', module)
   .addDecorator(withA11y)
   .addDecorator(helpers.layout)
   .addDecorator(StoryRouter())
-  .add('with image', () => ({
+  .add('normal, with image', () => ({
     components: { UserAvatar },
     data: () => ({
-      user,
+      user: userWithAvatar,
     }),
     template: '<user-avatar :user="user" />',
   }))
-  .add('without image, anonymous user', () => ({
+  .add('normal without image, anonymous user', () => ({
     components: { UserAvatar },
     data: () => ({
       user: anonymousUser,
     }),
     template: '<user-avatar :user="user" />',
   }))
-  .add('without image, user initials', () => ({
+  .add('normal without image, user initials', () => ({
     components: { UserAvatar },
     data: () => ({
       user: userWithoutAvatar,
     }),
     template: '<user-avatar :user="user" />',
   }))
+  .add('small, with image', () => ({
+    components: { UserAvatar },
+    data: () => ({
+      user: userWithAvatar,
+    }),
+    template: '<user-avatar :user="user" size="small"/>',
+  }))
   .add('small', () => ({
     components: { UserAvatar },
     data: () => ({
@@ -48,6 +61,13 @@ storiesOf('UserAvatar', module)
     }),
     template: '<user-avatar :user="user" size="small"/>',
   }))
+  .add('large, with image', () => ({
+    components: { UserAvatar },
+    data: () => ({
+      user: userWithAvatar,
+    }),
+    template: '<user-avatar :user="user" size="large"/>',
+  }))
   .add('large', () => ({
     components: { UserAvatar },
     data: () => ({

webapp/components/_new/generic/UserAvatar/UserAvatar.vue

@@ -77,6 +77,7 @@ export default {
     height: 100%;
     object-fit: cover;
     object-position: center;
+    background-color: $background-color-base;
   }
 }
 </style>