From b090b1177f9f4dca0c05f9622a1c2ace3ca73a18 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Wed, 8 Jan 2020 10:56:23 +0100
Subject: [PATCH 01/23] Migrate the bare minimum

- follow @alina-beck PR review
---
 webapp/components/Avatar/Avatar.vue           | 28 ----------
 webapp/components/AvatarMenu/AvatarMenu.vue   |  6 +-
 webapp/components/User/User.vue               |  8 +--
 .../UserAvatar.spec.js}                       |  0
 webapp/components/UserAvatar/UserAvatar.vue   | 55 +++++++++++++++++++
 webapp/pages/profile/_id/_slug.vue            | 12 ++--
 webapp/pages/settings/blocked-users.vue       |  6 +-
 7 files changed, 73 insertions(+), 42 deletions(-)
 delete mode 100644 webapp/components/Avatar/Avatar.vue
 rename webapp/components/{Avatar/Avatar.spec.js => UserAvatar/UserAvatar.spec.js} (100%)
 create mode 100644 webapp/components/UserAvatar/UserAvatar.vue

diff --git a/webapp/components/Avatar/Avatar.vue b/webapp/components/Avatar/Avatar.vue
deleted file mode 100644
index ec2f9b28b..000000000
--- a/webapp/components/Avatar/Avatar.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <ds-avatar
-    :image="user && user.avatar | proxyApiUrl"
-    :name="userName"
-    class="avatar"
-    :size="size"
-  />
-</template>
-
-<script>
-export default {
-  name: 'HcAvatar',
-  props: {
-    user: { type: Object, default: null },
-    size: { type: String, default: 'small' },
-  },
-  computed: {
-    userName() {
-      const { name } = this.user || {}
-      // The name is used to display the initials in case
-      // the image cannot be loaded.
-      return name
-      // If the name is undefined, then our styleguide will
-      // display an icon for the anonymous user.
-    },
-  },
-}
-</script>
diff --git a/webapp/components/AvatarMenu/AvatarMenu.vue b/webapp/components/AvatarMenu/AvatarMenu.vue
index 54426852e..364a51258 100644
--- a/webapp/components/AvatarMenu/AvatarMenu.vue
+++ b/webapp/components/AvatarMenu/AvatarMenu.vue
@@ -11,7 +11,7 @@
         "
         @click.prevent="toggleMenu"
       >
-        <hc-avatar :user="user" />
+        <user-avatar :image="user && user.avatar" />
         <base-icon class="dropdown-arrow" name="angle-down" />
       </a>
     </template>
@@ -49,12 +49,12 @@
 <script>
 import { mapGetters } from 'vuex'
 import Dropdown from '~/components/Dropdown'
-import HcAvatar from '~/components/Avatar/Avatar.vue'
+import UserAvatar from '~/components/UserAvatar/UserAvatar.vue'
 
 export default {
   components: {
     Dropdown,
-    HcAvatar,
+    UserAvatar,
   },
   props: {
     placement: { type: String, default: 'top-end' },
diff --git a/webapp/components/User/User.vue b/webapp/components/User/User.vue
index 6bd084dc8..b1913712b 100644
--- a/webapp/components/User/User.vue
+++ b/webapp/components/User/User.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="user" v-if="displayAnonymous">
-    <hc-avatar v-if="showAvatar" class="avatar" />
+    <user-avatar v-if="showAvatar" class="avatar" />
     <div>
       <b class="username">{{ $t('profile.userAnonym') }}</b>
     </div>
@@ -9,7 +9,7 @@
     <template slot="default" slot-scope="{ openMenu, closeMenu, isOpen }">
       <nuxt-link :to="userLink" :class="['user', isOpen && 'active']">
         <div @mouseover="showPopover ? openMenu(true) : () => {}" @mouseleave="closeMenu(true)">
-          <hc-avatar v-if="showAvatar" class="avatar" :user="user" />
+          <user-avatar v-if="showAvatar" class="avatar" :image="user && user.avatar" />
           <div>
             <ds-text class="userinfo">
               <b>{{ userSlug }}</b>
@@ -89,7 +89,7 @@ import { mapGetters } from 'vuex'
 import HcRelativeDateTime from '~/components/RelativeDateTime'
 import HcFollowButton from '~/components/FollowButton'
 import HcBadges from '~/components/Badges'
-import HcAvatar from '~/components/Avatar/Avatar.vue'
+import UserAvatar from '~/components/UserAvatar/UserAvatar.vue'
 import Dropdown from '~/components/Dropdown'
 
 export default {
@@ -97,7 +97,7 @@ export default {
   components: {
     HcRelativeDateTime,
     HcFollowButton,
-    HcAvatar,
+    UserAvatar,
     HcBadges,
     Dropdown,
   },
diff --git a/webapp/components/Avatar/Avatar.spec.js b/webapp/components/UserAvatar/UserAvatar.spec.js
similarity index 100%
rename from webapp/components/Avatar/Avatar.spec.js
rename to webapp/components/UserAvatar/UserAvatar.spec.js
diff --git a/webapp/components/UserAvatar/UserAvatar.vue b/webapp/components/UserAvatar/UserAvatar.vue
new file mode 100644
index 000000000..874ace71c
--- /dev/null
+++ b/webapp/components/UserAvatar/UserAvatar.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="ds-avatar avatar" :class="[`ds-size-${this.size}`, online && 'is-online']">
+    <ds-flex v-if="!hasImage || error" style="height: 100%">
+      <ds-flex-item centered>
+        <template v-if="isAnonymus">
+          <ds-icon name="eye-slash" />
+        </template>
+        <template v-else>
+          {{ userInitials }}
+        </template>
+      </ds-flex-item>
+    </ds-flex>
+    <img v-if="image && !error" :src="image | proxyApiUrl" @error="onError" :size="size" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UserAvatar',
+  props: {
+    name: { type: String, default: 'Anonymus' },
+    /**
+     * The size used for the avatar.
+     * @options small|base|large
+     */
+    size: {
+      type: String,
+      default: 'base',
+      validator: value => {
+        return value.match(/(small|base|large|x-large)/)
+      },
+    },
+    image: { type: String, default: null },
+    online: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      error: false,
+    }
+  },
+  computed: {
+    isAnonymus() {
+      return !this.name || this.name.toLowerCase() === 'anonymus'
+    },
+    hasImage() {
+      return Boolean(this.image) && !this.error
+    },
+  },
+  methods: {
+    onError() {
+      this.error = true
+    },
+  },
+}
+</script>
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index f24f5dcdc..82fee4ecd 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -11,9 +11,13 @@
           style="position: relative; height: auto;"
         >
           <hc-upload v-if="myProfile" :user="user">
-            <hc-avatar :user="user" class="profile-avatar" size="x-large"></hc-avatar>
+            <user-avatar
+              :image="user && user.avatar"
+              class="profile-avatar"
+              size="x-large"
+            ></user-avatar>
           </hc-upload>
-          <hc-avatar v-else :user="user" class="profile-avatar" size="x-large" />
+          <user-avatar v-else :image="user && user.avatar" class="profile-avatar" size="x-large" />
           <!-- Menu -->
           <client-only>
             <content-menu
@@ -279,7 +283,7 @@ import HcBadges from '~/components/Badges.vue'
 import HcEmpty from '~/components/Empty/Empty'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import HcUpload from '~/components/Upload'
-import HcAvatar from '~/components/Avatar/Avatar.vue'
+import UserAvatar from '~/components/UserAvatar/UserAvatar.vue'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
 import { profilePagePosts } from '~/graphql/PostQuery'
@@ -305,7 +309,7 @@ export default {
     HcCountTo,
     HcBadges,
     HcEmpty,
-    HcAvatar,
+    UserAvatar,
     ContentMenu,
     HcUpload,
     MasonryGrid,
diff --git a/webapp/pages/settings/blocked-users.vue b/webapp/pages/settings/blocked-users.vue
index a62e850dc..d02eac037 100644
--- a/webapp/pages/settings/blocked-users.vue
+++ b/webapp/pages/settings/blocked-users.vue
@@ -33,7 +33,7 @@
               params: { id: scope.row.id, slug: scope.row.slug },
             }"
           >
-            <hc-avatar :user="scope.row" size="small" />
+            <user-avatar :image="scope.row && scope.row.avatar" size="small" />
           </nuxt-link>
         </template>
         <template slot="name" slot-scope="scope">
@@ -79,11 +79,11 @@
 
 <script>
 import { BlockedUsers, Unblock } from '~/graphql/settings/BlockedUsers'
-import HcAvatar from '~/components/Avatar/Avatar.vue'
+import UserAvatar from '~/components/UserAvatar/UserAvatar.vue'
 
 export default {
   components: {
-    HcAvatar,
+    UserAvatar,
   },
   data() {
     return {

From 068e2b4417d89a9597b23694cb44130ece4ab054 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Wed, 8 Jan 2020 11:56:32 +0100
Subject: [PATCH 02/23] Fix styling, renaming classes

---
 cypress/integration/common/post.js            |  2 +-
 .../components/AvatarMenu/AvatarMenu.spec.js  |  4 +-
 webapp/components/UserAvatar/UserAvatar.vue   | 41 +++++++++++++++++--
 webapp/pages/profile/_id/_slug.vue            |  3 +-
 4 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/cypress/integration/common/post.js b/cypress/integration/common/post.js
index a680986f4..833a70f85 100644
--- a/cypress/integration/common/post.js
+++ b/cypress/integration/common/post.js
@@ -24,7 +24,7 @@ Then("my comment should be successfully created", () => {
 Then("I should see my comment", () => {
   cy.get("div.comment p")
     .should("contain", "Human Connection rocks")
-    .get(".ds-avatar img")
+    .get(".user-avatar img")
     .should("have.attr", "src")
     .and("contain", narratorAvatar)
     .get("div p.ds-text span")
diff --git a/webapp/components/AvatarMenu/AvatarMenu.spec.js b/webapp/components/AvatarMenu/AvatarMenu.spec.js
index 519b61d00..c432a5ad8 100644
--- a/webapp/components/AvatarMenu/AvatarMenu.spec.js
+++ b/webapp/components/AvatarMenu/AvatarMenu.spec.js
@@ -42,9 +42,9 @@ describe('AvatarMenu.vue', () => {
       wrapper = Wrapper()
     })
 
-    it('renders the HcAvatar component', () => {
+    it('renders the UserAvatar component', () => {
       wrapper.find('.avatar-menu-trigger').trigger('click')
-      expect(wrapper.find('.ds-avatar').exists()).toBe(true)
+      expect(wrapper.find('.user-avatar').exists()).toBe(true)
     })
 
     describe('given a userName', () => {
diff --git a/webapp/components/UserAvatar/UserAvatar.vue b/webapp/components/UserAvatar/UserAvatar.vue
index 874ace71c..2e25c76e5 100644
--- a/webapp/components/UserAvatar/UserAvatar.vue
+++ b/webapp/components/UserAvatar/UserAvatar.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="ds-avatar avatar" :class="[`ds-size-${this.size}`, online && 'is-online']">
+  <div :class="[`size-${this.size}`, 'user-avatar']">
     <ds-flex v-if="!hasImage || error" style="height: 100%">
       <ds-flex-item centered>
         <template v-if="isAnonymus">
-          <ds-icon name="eye-slash" />
+          <base-icon name="eye-slash" />
         </template>
         <template v-else>
           {{ userInitials }}
         </template>
       </ds-flex-item>
     </ds-flex>
-    <img v-if="image && !error" :src="image | proxyApiUrl" @error="onError" :size="size" />
+    <img v-if="image && !error" :src="image | proxyApiUrl" @error="onError" />
   </div>
 </template>
 
@@ -31,7 +31,6 @@ export default {
       },
     },
     image: { type: String, default: null },
-    online: { type: Boolean, default: false },
   },
   data() {
     return {
@@ -53,3 +52,37 @@ export default {
   },
 }
 </script>
+<style lang="scss">
+.user-avatar {
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    overflow: hidden;
+    object-fit: cover;
+    object-position: center;
+  }
+
+  .base-icon {
+    margin-top: -0.1em;
+  }
+
+  &.size-small {
+    width: $size-avatar-small;
+    height: $size-avatar-small;
+  }
+  &.size-base {
+    border-width: 1px;
+    width: $size-avatar-base;
+    height: $size-avatar-base;
+  }
+  &.size-large {
+    width: $size-avatar-large;
+    height: $size-avatar-large;
+  }
+  &.size-x-large {
+    width: $size-avatar-x-large;
+    height: $size-avatar-x-large;
+  }
+}
+</style>
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 82fee4ecd..ee6d5d3f2 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -519,11 +519,10 @@ export default {
     }
   }
 }
-.profile-avatar.ds-avatar {
+.profile-avatar.user-avatar {
   display: block;
   margin: auto;
   margin-top: -60px;
-  border: #fff 5px solid;
 }
 .page-name-profile-id-slug {
   .ds-flex-item:first-child .content-menu {

From 905f34c827993d20c13b8d3b578d8dc109b8cc5f Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Wed, 8 Jan 2020 14:09:25 +0100
Subject: [PATCH 03/23] Support use of initials, add tests, move component

- if there is no user.avatar, we show a user's initials - up to 3
characters unless there is no name or the name is 'Anonymous'. This is
to support users who on the old alpha were allowed to be anonymous (do
we still want to support this?)

- Add test cases for :point_up:
- Refactor to not use any styleguide components and move UserAvatar to
generic directory
---
 webapp/components/AvatarMenu/AvatarMenu.vue   |  4 +-
 webapp/components/User/User.vue               |  4 +-
 .../components/UserAvatar/UserAvatar.spec.js  | 68 -------------
 .../generic/UserAvatar/UserAvatar.spec.js     | 98 +++++++++++++++++++
 .../generic}/UserAvatar/UserAvatar.vue        | 50 +++++++---
 webapp/pages/profile/_id/_slug.vue            | 10 +-
 webapp/pages/settings/blocked-users.vue       |  4 +-
 7 files changed, 141 insertions(+), 97 deletions(-)
 delete mode 100644 webapp/components/UserAvatar/UserAvatar.spec.js
 create mode 100644 webapp/components/_new/generic/UserAvatar/UserAvatar.spec.js
 rename webapp/components/{ => _new/generic}/UserAvatar/UserAvatar.vue (51%)

diff --git a/webapp/components/AvatarMenu/AvatarMenu.vue b/webapp/components/AvatarMenu/AvatarMenu.vue
index 364a51258..97b937a88 100644
--- a/webapp/components/AvatarMenu/AvatarMenu.vue
+++ b/webapp/components/AvatarMenu/AvatarMenu.vue
@@ -11,7 +11,7 @@
         "
         @click.prevent="toggleMenu"
       >
-        <user-avatar :image="user && user.avatar" />
+        <user-avatar :user="user" />
         <base-icon class="dropdown-arrow" name="angle-down" />
       </a>
     </template>
@@ -49,7 +49,7 @@
 <script>
 import { mapGetters } from 'vuex'
 import Dropdown from '~/components/Dropdown'
-import UserAvatar from '~/components/UserAvatar/UserAvatar.vue'
+import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
 
 export default {
   components: {
diff --git a/webapp/components/User/User.vue b/webapp/components/User/User.vue
index b1913712b..e366cd6c5 100644
--- a/webapp/components/User/User.vue
+++ b/webapp/components/User/User.vue
@@ -9,7 +9,7 @@
     <template slot="default" slot-scope="{ openMenu, closeMenu, isOpen }">
       <nuxt-link :to="userLink" :class="['user', isOpen && 'active']">
         <div @mouseover="showPopover ? openMenu(true) : () => {}" @mouseleave="closeMenu(true)">
-          <user-avatar v-if="showAvatar" class="avatar" :image="user && user.avatar" />
+          <user-avatar v-if="showAvatar" class="avatar" :user="user" />
           <div>
             <ds-text class="userinfo">
               <b>{{ userSlug }}</b>
@@ -89,7 +89,7 @@ import { mapGetters } from 'vuex'
 import HcRelativeDateTime from '~/components/RelativeDateTime'
 import HcFollowButton from '~/components/FollowButton'
 import HcBadges from '~/components/Badges'
-import UserAvatar from '~/components/UserAvatar/UserAvatar.vue'
+import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
 import Dropdown from '~/components/Dropdown'
 
 export default {
diff --git a/webapp/components/UserAvatar/UserAvatar.spec.js b/webapp/components/UserAvatar/UserAvatar.spec.js
deleted file mode 100644
index 03eaee160..000000000
--- a/webapp/components/UserAvatar/UserAvatar.spec.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import { mount } from '@vue/test-utils'
-import Avatar from './Avatar.vue'
-
-const localVue = global.localVue
-
-describe('Avatar.vue', () => {
-  let propsData = {}
-
-  const Wrapper = () => {
-    return mount(Avatar, { propsData, localVue })
-  }
-
-  it('renders no image', () => {
-    expect(
-      Wrapper()
-        .find('img')
-        .exists(),
-    ).toBe(false)
-  })
-
-  // this is testing the style guide
-  it('renders an icon', () => {
-    expect(
-      Wrapper()
-        .find('.ds-icon')
-        .exists(),
-    ).toBe(true)
-  })
-
-  describe('given a user', () => {
-    describe('with a relative avatar url', () => {
-      beforeEach(() => {
-        propsData = {
-          user: {
-            avatar: '/avatar.jpg',
-          },
-        }
-      })
-
-      it('adds a prefix to load the image from the uploads service', () => {
-        expect(
-          Wrapper()
-            .find('img')
-            .attributes('src'),
-        ).toBe('/api/avatar.jpg')
-      })
-    })
-
-    describe('with an absolute avatar url', () => {
-      beforeEach(() => {
-        propsData = {
-          user: {
-            avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/sawalazar/128.jpg',
-          },
-        }
-      })
-
-      it('keeps the avatar URL as is', () => {
-        // e.g. our seeds have absolute image URLs
-        expect(
-          Wrapper()
-            .find('img')
-            .attributes('src'),
-        ).toBe('https://s3.amazonaws.com/uifaces/faces/twitter/sawalazar/128.jpg')
-      })
-    })
-  })
-})
diff --git a/webapp/components/_new/generic/UserAvatar/UserAvatar.spec.js b/webapp/components/_new/generic/UserAvatar/UserAvatar.spec.js
new file mode 100644
index 000000000..f18bc6756
--- /dev/null
+++ b/webapp/components/_new/generic/UserAvatar/UserAvatar.spec.js
@@ -0,0 +1,98 @@
+import { mount } from '@vue/test-utils'
+import UserAvatar from './UserAvatar.vue'
+import BaseIcon from '~/components/_new/generic/BaseIcon/BaseIcon'
+
+const localVue = global.localVue
+
+describe('UserAvatar.vue', () => {
+  let propsData, wrapper
+  beforeEach(() => {
+    propsData = {}
+    wrapper = Wrapper()
+  })
+
+  const Wrapper = () => {
+    return mount(UserAvatar, { propsData, localVue })
+  }
+
+  it('renders no image', () => {
+    expect(wrapper.find('img').exists()).toBe(false)
+  })
+
+  // this is testing the style guide
+  it('renders an icon', () => {
+    expect(wrapper.find(BaseIcon).exists()).toBe(true)
+  })
+
+  describe('given a user', () => {
+    describe('with no image', () => {
+      beforeEach(() => {
+        propsData = {
+          user: {
+            name: 'Matt Rider',
+          },
+        }
+        wrapper = Wrapper()
+      })
+
+      describe('no user name', () => {
+        it('renders an icon', () => {
+          propsData = { user: { name: null } }
+          wrapper = Wrapper()
+          expect(wrapper.find(BaseIcon).exists()).toBe(true)
+        })
+      })
+
+      describe("user name is 'Anonymous'", () => {
+        it('renders an icon', () => {
+          propsData = { user: { name: 'Anonymous' } }
+          wrapper = Wrapper()
+          expect(wrapper.find(BaseIcon).exists()).toBe(true)
+        })
+      })
+
+      it('displays user initials', () => {
+        expect(wrapper.find('.no-image').text()).toEqual('MR')
+      })
+
+      it('displays no more than 3 initials', () => {
+        propsData = { user: { name: 'Ana Paula Nunes Marques' } }
+        wrapper = Wrapper()
+        expect(wrapper.find('.no-image').text()).toEqual('APN')
+      })
+    })
+
+    describe('with a relative avatar url', () => {
+      beforeEach(() => {
+        propsData = {
+          user: {
+            avatar: '/avatar.jpg',
+          },
+        }
+        wrapper = Wrapper()
+      })
+
+      it('adds a prefix to load the image from the uploads service', () => {
+        expect(wrapper.find('img').attributes('src')).toBe('/api/avatar.jpg')
+      })
+    })
+
+    describe('with an absolute avatar url', () => {
+      beforeEach(() => {
+        propsData = {
+          user: {
+            avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/sawalazar/128.jpg',
+          },
+        }
+        wrapper = Wrapper()
+      })
+
+      it('keeps the avatar URL as is', () => {
+        // e.g. our seeds have absolute image URLs
+        expect(wrapper.find('img').attributes('src')).toBe(
+          'https://s3.amazonaws.com/uifaces/faces/twitter/sawalazar/128.jpg',
+        )
+      })
+    })
+  })
+})
diff --git a/webapp/components/UserAvatar/UserAvatar.vue b/webapp/components/_new/generic/UserAvatar/UserAvatar.vue
similarity index 51%
rename from webapp/components/UserAvatar/UserAvatar.vue
rename to webapp/components/_new/generic/UserAvatar/UserAvatar.vue
index 2e25c76e5..bffc9694e 100644
--- a/webapp/components/UserAvatar/UserAvatar.vue
+++ b/webapp/components/_new/generic/UserAvatar/UserAvatar.vue
@@ -1,16 +1,16 @@
 <template>
   <div :class="[`size-${this.size}`, 'user-avatar']">
-    <ds-flex v-if="!hasImage || error" style="height: 100%">
-      <ds-flex-item centered>
-        <template v-if="isAnonymus">
+    <span v-if="!hasImage || error" class="no-image">
+      <span class="flex-item">
+        <template v-if="isAnonymous">
           <base-icon name="eye-slash" />
         </template>
         <template v-else>
           {{ userInitials }}
         </template>
-      </ds-flex-item>
-    </ds-flex>
-    <img v-if="image && !error" :src="image | proxyApiUrl" @error="onError" />
+      </span>
+    </span>
+    <img v-if="user && user.avatar && !error" :src="user.avatar | proxyApiUrl" @error="onError" />
   </div>
 </template>
 
@@ -18,11 +18,6 @@
 export default {
   name: 'UserAvatar',
   props: {
-    name: { type: String, default: 'Anonymus' },
-    /**
-     * The size used for the avatar.
-     * @options small|base|large
-     */
     size: {
       type: String,
       default: 'base',
@@ -30,7 +25,7 @@ export default {
         return value.match(/(small|base|large|x-large)/)
       },
     },
-    image: { type: String, default: null },
+    user: { type: Object, default: null },
   },
   data() {
     return {
@@ -38,11 +33,19 @@ export default {
     }
   },
   computed: {
-    isAnonymus() {
-      return !this.name || this.name.toLowerCase() === 'anonymus'
+    isAnonymous() {
+      return !this.user || !this.user.name || this.user.name.toLowerCase() === 'anonymous'
     },
     hasImage() {
-      return Boolean(this.image) && !this.error
+      return Boolean(this.user && this.user.avatar) && !this.error
+    },
+    userInitials() {
+      const { name } = this.user || 'Anonymous'
+      const namesArray = name.split(/[ -]/)
+      let initials = ''
+      for (var i = 0; i < namesArray.length; i++) initials += namesArray[i].charAt(0)
+      if (initials.length > 3 && /[A-Z]/.test(initials)) initials = initials.replace(/[a-z]+/g, '')
+      return initials.substr(0, 3).toUpperCase()
     },
   },
   methods: {
@@ -56,7 +59,6 @@ export default {
 .user-avatar {
   img {
     width: 100%;
-    height: 100%;
     border-radius: 50%;
     overflow: hidden;
     object-fit: cover;
@@ -84,5 +86,21 @@ export default {
     width: $size-avatar-x-large;
     height: $size-avatar-x-large;
   }
+  .no-image {
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    border-radius: 50%;
+    background-color: $background-color-secondary;
+    color: $text-color-primary-inverse;
+  }
+
+  .no-image .flex-item {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0 auto;
+    align-self: center;
+    display: table;
+  }
 }
 </style>
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index ee6d5d3f2..e4fc6423b 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -11,13 +11,9 @@
           style="position: relative; height: auto;"
         >
           <hc-upload v-if="myProfile" :user="user">
-            <user-avatar
-              :image="user && user.avatar"
-              class="profile-avatar"
-              size="x-large"
-            ></user-avatar>
+            <user-avatar :user="user" class="profile-avatar" size="x-large"></user-avatar>
           </hc-upload>
-          <user-avatar v-else :image="user && user.avatar" class="profile-avatar" size="x-large" />
+          <user-avatar v-else :user="user" class="profile-avatar" size="x-large" />
           <!-- Menu -->
           <client-only>
             <content-menu
@@ -283,7 +279,7 @@ import HcBadges from '~/components/Badges.vue'
 import HcEmpty from '~/components/Empty/Empty'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import HcUpload from '~/components/Upload'
-import UserAvatar from '~/components/UserAvatar/UserAvatar.vue'
+import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
 import { profilePagePosts } from '~/graphql/PostQuery'
diff --git a/webapp/pages/settings/blocked-users.vue b/webapp/pages/settings/blocked-users.vue
index d02eac037..6a82cb8d9 100644
--- a/webapp/pages/settings/blocked-users.vue
+++ b/webapp/pages/settings/blocked-users.vue
@@ -33,7 +33,7 @@
               params: { id: scope.row.id, slug: scope.row.slug },
             }"
           >
-            <user-avatar :image="scope.row && scope.row.avatar" size="small" />
+            <user-avatar :user="scope.row" size="small" />
           </nuxt-link>
         </template>
         <template slot="name" slot-scope="scope">
@@ -79,7 +79,7 @@
 
 <script>
 import { BlockedUsers, Unblock } from '~/graphql/settings/BlockedUsers'
-import UserAvatar from '~/components/UserAvatar/UserAvatar.vue'
+import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
 
 export default {
   components: {

From 27c23fa9ac7a7131b8f881b987cd5d41c1e309b3 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Thu, 9 Jan 2020 11:27:54 +0100
Subject: [PATCH 04/23] Improve styling of User.vue

- Remove avatar class
- fix competing styles
- follow rscss guidlines
---
 webapp/components/PostCard/PostCard.vue |  6 ++-
 webapp/components/User/User.vue         | 49 ++++++++++++-------------
 2 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/webapp/components/PostCard/PostCard.vue b/webapp/components/PostCard/PostCard.vue
index d54a86367..821b40216 100644
--- a/webapp/components/PostCard/PostCard.vue
+++ b/webapp/components/PostCard/PostCard.vue
@@ -27,7 +27,7 @@
     </div>
     <ds-space margin-bottom="small" />
     <!-- Post Title -->
-    <ds-heading tag="h3" no-margin class="hyphenate-text">{{ post.title }}</ds-heading>
+    <ds-heading tag="h3" class="hyphenate-text post-title">{{ post.title }}</ds-heading>
     <ds-space margin-bottom="small" />
     <!-- Post Content Excerpt -->
     <!-- eslint-disable vue/no-v-html -->
@@ -186,6 +186,10 @@ export default {
     height: 75px;
   }
 
+  .post-title {
+    margin-top: $space-large;
+  }
+
   /* workaround to avoid jumping layout when hc-user is rendered */
   .user-wrapper {
     height: 36px;
diff --git a/webapp/components/User/User.vue b/webapp/components/User/User.vue
index e366cd6c5..bf8913b54 100644
--- a/webapp/components/User/User.vue
+++ b/webapp/components/User/User.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="user" v-if="displayAnonymous">
-    <user-avatar v-if="showAvatar" class="avatar" />
+    <user-avatar v-if="showAvatar" />
     <div>
       <b class="username">{{ $t('profile.userAnonym') }}</b>
     </div>
@@ -8,15 +8,19 @@
   <dropdown v-else :class="{ 'disabled-content': user.disabled }" placement="top-start" offset="0">
     <template slot="default" slot-scope="{ openMenu, closeMenu, isOpen }">
       <nuxt-link :to="userLink" :class="['user', isOpen && 'active']">
-        <div @mouseover="showPopover ? openMenu(true) : () => {}" @mouseleave="closeMenu(true)">
-          <user-avatar v-if="showAvatar" class="avatar" :user="user" />
-          <div>
-            <ds-text class="userinfo">
-              <b>{{ userSlug }}</b>
-            </ds-text>
-          </div>
+        <user-avatar v-if="showAvatar" :user="user" />
+        <div
+          class="user-info"
+          @mouseover="showPopover ? openMenu(true) : () => {}"
+          @mouseleave="closeMenu(true)"
+        >
+          <ds-text>
+            <b>{{ userSlug }}</b>
+          </ds-text>
           <ds-text class="username" align="left" size="small" color="soft">
             {{ userName | truncate(18) }}
+          </ds-text>
+          <ds-text class="date-time" align="left" size="small" color="soft">
             <template v-if="dateTime">
               <base-icon name="clock" />
               <hc-relative-date-time :date-time="dateTime" />
@@ -148,29 +152,19 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.avatar {
-  float: left;
-  margin-right: 4px;
-  height: 100%;
-  vertical-align: middle;
+.user {
+  display: flex;
+  flex-wrap: nowrap;
 }
 
-.userinfo {
+.user-info {
   display: flex;
-  align-items: center;
+  flex-direction: column;
 
   > .ds-text {
     display: flex;
-    align-items: center;
-    margin-left: $space-xx-small;
+    margin: 0 0 $space-xxx-small $space-xx-small;
   }
-}
-
-.user {
-  white-space: nowrap;
-  position: relative;
-  display: flex;
-  align-items: center;
 
   &:hover,
   &.active {
@@ -178,7 +172,10 @@ export default {
   }
 }
 
-.user-slug {
-  margin-bottom: $space-xx-small;
+.date-time {
+  > .base-icon {
+    align-self: center;
+    margin: $space-xxx-small $space-xxx-small 0 0;
+  }
 }
 </style>

From 5c7a6ace0860354c3e771ec8d0ad251e12ca798c Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Fri, 10 Jan 2020 11:08:53 +0100
Subject: [PATCH 05/23] Refactor

- Move mouse events to nuxt-link
- use .native
- refactor deprecated slot syntax
---
 webapp/components/User/User.vue | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/webapp/components/User/User.vue b/webapp/components/User/User.vue
index bf8913b54..211984e3f 100644
--- a/webapp/components/User/User.vue
+++ b/webapp/components/User/User.vue
@@ -6,14 +6,15 @@
     </div>
   </div>
   <dropdown v-else :class="{ 'disabled-content': user.disabled }" placement="top-start" offset="0">
-    <template slot="default" slot-scope="{ openMenu, closeMenu, isOpen }">
-      <nuxt-link :to="userLink" :class="['user', isOpen && 'active']">
+    <template #default="{ openMenu, closeMenu, isOpen }">
+      <nuxt-link
+        :to="userLink"
+        :class="['user', isOpen && 'active']"
+        @mouseover.native="showPopover ? openMenu(true) : () => {}"
+        @mouseleave.native="closeMenu(true)"
+      >
         <user-avatar v-if="showAvatar" :user="user" />
-        <div
-          class="user-info"
-          @mouseover="showPopover ? openMenu(true) : () => {}"
-          @mouseleave="closeMenu(true)"
-        >
+        <div class="user-info">
           <ds-text>
             <b>{{ userSlug }}</b>
           </ds-text>
@@ -30,7 +31,7 @@
         </div>
       </nuxt-link>
     </template>
-    <template slot="popover" v-if="showPopover">
+    <template #popover v-if="showPopover">
       <div style="min-width: 250px">
         <hc-badges v-if="user.badges && user.badges.length" :badges="user.badges" />
         <ds-text

From fdf00fc0c68dc2f7eb0237160194fd7077d2e8c0 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Mon, 13 Jan 2020 17:29:15 +0100
Subject: [PATCH 06/23] Follow @alina-beck's PR review suggestions

- Update styling
- Avoid nested tags
- Rename components with two names
- Add story

- Co-authored-by: Alina Beck <alina.beck@mail.com>
---
 webapp/assets/_new/styles/tokens.scss         |  4 +-
 webapp/components/Comment/Comment.vue         |  8 +--
 .../ContributionForm/ContributionForm.vue     |  6 +-
 .../components/Notification/Notification.vue  |  6 +-
 .../NotificationsTable.story.js               |  2 +-
 .../NotificationsTable/NotificationsTable.vue |  6 +-
 webapp/components/PostCard/PostCard.story.js  |  2 +-
 webapp/components/PostCard/PostCard.vue       | 12 ++--
 .../UserTeaser.spec.js}                       |  0
 .../UserTeaser.story.js}                      | 16 ++---
 .../User.vue => UserTeaser/UserTeaser.vue}    | 61 +++++++++----------
 .../generic/UserAvatar/UserAvatar.story.js    | 57 +++++++++++++++++
 .../_new/generic/UserAvatar/UserAvatar.vue    | 44 ++++---------
 .../FiledReportsTable/FiledReportsTable.vue   |  6 +-
 .../features/ReportList/ReportList.story.js   |  2 +-
 .../features/ReportRow/ReportRow.vue          | 15 +++--
 webapp/pages/post/_id/_slug/index.vue         |  8 +--
 webapp/pages/profile/_id/_slug.vue            | 14 ++---
 18 files changed, 153 insertions(+), 116 deletions(-)
 rename webapp/components/{User/User.spec.js => UserTeaser/UserTeaser.spec.js} (100%)
 rename webapp/components/{User/User.story.js => UserTeaser/UserTeaser.story.js} (81%)
 rename webapp/components/{User/User.vue => UserTeaser/UserTeaser.vue} (84%)
 create mode 100644 webapp/components/_new/generic/UserAvatar/UserAvatar.story.js

diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss
index 71114cf21..a6f0a8a70 100644
--- a/webapp/assets/_new/styles/tokens.scss
+++ b/webapp/assets/_new/styles/tokens.scss
@@ -254,8 +254,7 @@ $size-width-paginate: 100px;
 
 $size-avatar-small: 34px;
 $size-avatar-base: 44px;
-$size-avatar-large: 64px;
-$size-avatar-x-large: 114px;
+$size-avatar-large: 114px;
 
 /**
  * @tokens Size Buttons
@@ -316,6 +315,7 @@ $z-index-dropdown: 8888;
 $z-index-page-submenu: 2500;
 $z-index-page-header: 2000;
 $z-index-page-sidebar: 1500;
+$z-index-hc-post-card-link: 5;
 $z-index-sticky: 100;
 $z-index-post-card-link: 5;
 
diff --git a/webapp/components/Comment/Comment.vue b/webapp/components/Comment/Comment.vue
index cc7f815b9..b413e03f6 100644
--- a/webapp/components/Comment/Comment.vue
+++ b/webapp/components/Comment/Comment.vue
@@ -12,13 +12,13 @@
   <div v-else :class="{ comment: true, 'disabled-content': comment.deleted || comment.disabled }">
     <ds-card :id="anchor" :class="{ 'comment--target': isTarget }">
       <ds-space margin-bottom="small" margin-top="small">
-        <hc-user :user="author" :date-time="comment.createdAt">
+        <user-teaser :user="author" :date-time="comment.createdAt">
           <template v-slot:dateTime>
             <ds-text v-if="comment.createdAt !== comment.updatedAt">
               ({{ $t('comment.edited') }})
             </ds-text>
           </template>
-        </hc-user>
+        </user-teaser>
         <client-only>
           <content-menu
             v-show="!openEditCommentMenu"
@@ -61,7 +61,7 @@
 <script>
 import { mapGetters } from 'vuex'
 import { COMMENT_MAX_UNTRUNCATED_LENGTH, COMMENT_TRUNCATE_TO_LENGTH } from '~/constants/comment'
-import HcUser from '~/components/User/User'
+import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import ContentViewer from '~/components/Editor/ContentViewer'
 import HcCommentForm from '~/components/CommentForm/CommentForm'
@@ -82,7 +82,7 @@ export default {
     }
   },
   components: {
-    HcUser,
+    UserTeaser,
     ContentMenu,
     ContentViewer,
     HcCommentForm,
diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index 80b52b61c..8cb42a85d 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -38,7 +38,7 @@
 
         <ds-space />
         <client-only>
-          <hc-user :user="currentUser" :trunc="35" />
+          <user-teaser :user="currentUser" :trunc="35" />
         </client-only>
         <ds-space />
         <ds-input
@@ -122,14 +122,14 @@ import locales from '~/locales'
 import PostMutations from '~/graphql/PostMutations.js'
 import HcCategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
 import HcTeaserImage from '~/components/TeaserImage/TeaserImage'
-import HcUser from '~/components/User/User'
+import UserTeaser from '~/components/UserTeaser/UserTeaser'
 
 export default {
   components: {
     HcEditor,
     HcCategoriesSelect,
     HcTeaserImage,
-    HcUser,
+    UserTeaser,
   },
   props: {
     contribution: { type: Object, default: () => {} },
diff --git a/webapp/components/Notification/Notification.vue b/webapp/components/Notification/Notification.vue
index 446c5321a..761c806d2 100644
--- a/webapp/components/Notification/Notification.vue
+++ b/webapp/components/Notification/Notification.vue
@@ -2,7 +2,7 @@
   <ds-space :class="{ read: notification.read, notification: true }" margin-bottom="x-small">
     <client-only>
       <ds-space margin-bottom="x-small">
-        <hc-user :user="from.author" :date-time="from.createdAt" :trunc="35" />
+        <user-teaser :user="from.author" :date-time="from.createdAt" :trunc="35" />
       </ds-space>
       <ds-text class="reason-text-for-test" color="soft">
         {{ $t(`notifications.reason.${notification.reason}`) }}
@@ -35,12 +35,12 @@
 </template>
 
 <script>
-import HcUser from '~/components/User/User'
+import UserTeaser from '~/components/UserTeaser/UserTeaser'
 
 export default {
   name: 'Notification',
   components: {
-    HcUser,
+    UserTeaser,
   },
   props: {
     notification: {
diff --git a/webapp/components/NotificationsTable/NotificationsTable.story.js b/webapp/components/NotificationsTable/NotificationsTable.story.js
index d58f4ff73..84deb31c9 100644
--- a/webapp/components/NotificationsTable/NotificationsTable.story.js
+++ b/webapp/components/NotificationsTable/NotificationsTable.story.js
@@ -4,7 +4,7 @@ import { action } from '@storybook/addon-actions'
 import NotificationsTable from '~/components/NotificationsTable/NotificationsTable'
 import helpers from '~/storybook/helpers'
 import { post } from '~/components/PostCard/PostCard.story.js'
-import { user } from '~/components/User/User.story.js'
+import { user } from '~/components/UserTeaser/UserTeaser.story.js'
 
 helpers.init()
 export const notifications = [
diff --git a/webapp/components/NotificationsTable/NotificationsTable.vue b/webapp/components/NotificationsTable/NotificationsTable.vue
index caf30d6c0..71ce674dc 100644
--- a/webapp/components/NotificationsTable/NotificationsTable.vue
+++ b/webapp/components/NotificationsTable/NotificationsTable.vue
@@ -15,7 +15,7 @@
     <template #user="scope">
       <ds-space margin-bottom="base">
         <client-only>
-          <hc-user
+          <user-teaser
             :user="scope.row.from.author"
             :date-time="scope.row.from.createdAt"
             :trunc="35"
@@ -50,12 +50,12 @@
   <hc-empty v-else icon="alert" :message="$t('notifications.empty')" />
 </template>
 <script>
-import HcUser from '~/components/User/User'
+import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import HcEmpty from '~/components/Empty/Empty'
 
 export default {
   components: {
-    HcUser,
+    UserTeaser,
     HcEmpty,
   },
   props: {
diff --git a/webapp/components/PostCard/PostCard.story.js b/webapp/components/PostCard/PostCard.story.js
index 5857167f3..4b4c3afcc 100644
--- a/webapp/components/PostCard/PostCard.story.js
+++ b/webapp/components/PostCard/PostCard.story.js
@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
-import HcPostCard from './PostCard.vue'
+import HcPostCard from './HcPostCard.vue'
 import helpers from '~/storybook/helpers'
 
 helpers.init()
diff --git a/webapp/components/PostCard/PostCard.vue b/webapp/components/PostCard/PostCard.vue
index 821b40216..04af36fcb 100644
--- a/webapp/components/PostCard/PostCard.vue
+++ b/webapp/components/PostCard/PostCard.vue
@@ -3,7 +3,7 @@
     :lang="post.language"
     :image="post.image | proxyApiUrl"
     :class="{
-      'post-card': true,
+      'hc-post-card': true,
       'disabled-content': post.disabled,
       '--pinned': isPinned,
       '--blur-image': post.imageBlurred,
@@ -20,7 +20,7 @@
     <!-- Username, Image & Date of Post -->
     <div class="user-wrapper">
       <client-only>
-        <hc-user :user="post.author" :trunc="35" :date-time="post.createdAt" />
+        <user-teaser :user="post.author" :trunc="35" :date-time="post.createdAt" />
       </client-only>
       <hc-ribbon v-if="isPinned" class="ribbon--pinned" :text="$t('post.pinned')" />
       <hc-ribbon v-else :text="$t('post.name')" />
@@ -78,7 +78,7 @@
 </template>
 
 <script>
-import HcUser from '~/components/User/User'
+import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import HcCategory from '~/components/Category'
 import HcRibbon from '~/components/Ribbon'
@@ -89,7 +89,7 @@ import { postMenuModalsData, deletePostMutation } from '~/components/utils/PostH
 export default {
   name: 'HcPostCard',
   components: {
-    HcUser,
+    UserTeaser,
     HcCategory,
     HcRibbon,
     ContentMenu,
@@ -157,7 +157,7 @@ export default {
 }
 </script>
 <style lang="scss">
-.post-card {
+.hc-post-card {
   justify-content: space-between;
   position: relative;
   z-index: 1;
@@ -190,7 +190,7 @@ export default {
     margin-top: $space-large;
   }
 
-  /* workaround to avoid jumping layout when hc-user is rendered */
+  /* workaround to avoid jumping layout when user-teaser is rendered */
   .user-wrapper {
     height: 36px;
   }
diff --git a/webapp/components/User/User.spec.js b/webapp/components/UserTeaser/UserTeaser.spec.js
similarity index 100%
rename from webapp/components/User/User.spec.js
rename to webapp/components/UserTeaser/UserTeaser.spec.js
diff --git a/webapp/components/User/User.story.js b/webapp/components/UserTeaser/UserTeaser.story.js
similarity index 81%
rename from webapp/components/User/User.story.js
rename to webapp/components/UserTeaser/UserTeaser.story.js
index 6b3ebcdc8..5f2619930 100644
--- a/webapp/components/User/User.story.js
+++ b/webapp/components/UserTeaser/UserTeaser.story.js
@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
-import User from '~/components/User/User.vue'
+import UserTeaser from '~/components/UserTeaser/UserTeaser.vue'
 import helpers from '~/storybook/helpers'
 
 helpers.init()
@@ -53,25 +53,25 @@ export const user = {
   socialMedia: [],
 }
 
-storiesOf('User', module)
+storiesOf('UserTeaser', module)
   .addDecorator(withA11y)
   .addDecorator(helpers.layout)
   .add('available', () => ({
-    components: { User },
+    components: { UserTeaser },
     store: helpers.store,
     data: () => ({
       user,
     }),
-    template: '<user :user="user" :trunc="35" :date-time="new Date()" />',
+    template: '<user-teaser :user="user" :trunc="35" :date-time="new Date()" />',
   }))
   .add('has edited something', () => ({
-    components: { User },
+    components: { UserTeaser },
     store: helpers.store,
     data: () => ({
       user,
     }),
     template: `
-    <user :user="user" :trunc="35" :date-time="new Date()">
+    <user-teaser :user="user" :trunc="35" :date-time="new Date()">
       <template v-slot:dateTime>
         - HEY! I'm edited
       </template>
@@ -79,10 +79,10 @@ storiesOf('User', module)
     `,
   }))
   .add('anonymous', () => ({
-    components: { User },
+    components: { UserTeaser },
     store: helpers.store,
     data: () => ({
       user: null,
     }),
-    template: '<user :user="user" :trunc="35" :date-time="new Date()" />',
+    template: '<user-teaser :user="user" :trunc="35" :date-time="new Date()" />',
   }))
diff --git a/webapp/components/User/User.vue b/webapp/components/UserTeaser/UserTeaser.vue
similarity index 84%
rename from webapp/components/User/User.vue
rename to webapp/components/UserTeaser/UserTeaser.vue
index 211984e3f..89c2cd547 100644
--- a/webapp/components/User/User.vue
+++ b/webapp/components/UserTeaser/UserTeaser.vue
@@ -1,26 +1,22 @@
 <template>
-  <div class="user" v-if="displayAnonymous">
+  <div class="user-teaser" v-if="displayAnonymous">
     <user-avatar v-if="showAvatar" />
-    <div>
-      <b class="username">{{ $t('profile.userAnonym') }}</b>
-    </div>
+    <span class="username">{{ $t('profile.userAnonym') }}</span>
   </div>
   <dropdown v-else :class="{ 'disabled-content': user.disabled }" placement="top-start" offset="0">
     <template #default="{ openMenu, closeMenu, isOpen }">
       <nuxt-link
         :to="userLink"
-        :class="['user', isOpen && 'active']"
+        :class="['user-teaser', isOpen && 'active']"
         @mouseover.native="showPopover ? openMenu(true) : () => {}"
         @mouseleave.native="closeMenu(true)"
       >
-        <user-avatar v-if="showAvatar" :user="user" />
+        <user-avatar v-if="showAvatar" :user="user" size="small" />
         <div class="user-info">
-          <ds-text>
-            <b>{{ userSlug }}</b>
-          </ds-text>
-          <ds-text class="username" align="left" size="small" color="soft">
-            {{ userName | truncate(18) }}
-          </ds-text>
+          <span class="user-slug">
+            {{ userSlug }}
+            <span class="username">{{ userName | truncate(18) }}</span>
+          </span>
           <ds-text class="date-time" align="left" size="small" color="soft">
             <template v-if="dateTime">
               <base-icon name="clock" />
@@ -82,7 +78,6 @@
             />
           </ds-flex-item>
         </ds-flex>
-        <!--<ds-space margin-bottom="x-small" />-->
       </div>
     </template>
   </dropdown>
@@ -98,7 +93,7 @@ import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
 import Dropdown from '~/components/Dropdown'
 
 export default {
-  name: 'HcUser',
+  name: 'UserTeaser',
   components: {
     HcRelativeDateTime,
     HcFollowButton,
@@ -152,31 +147,31 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
-.user {
+<style lang="scss">
+.user-teaser {
   display: flex;
   flex-wrap: nowrap;
-}
+  z-index: $z-index-hc-post-card-link;
+  position: relative;
 
-.user-info {
-  display: flex;
-  flex-direction: column;
-
-  > .ds-text {
+  > .user-info {
     display: flex;
-    margin: 0 0 $space-xxx-small $space-xx-small;
-  }
+    flex-direction: column;
 
-  &:hover,
-  &.active {
-    z-index: 999;
-  }
-}
+    > .ds-text {
+      display: flex;
+      margin: 0 0 $space-xxx-small $space-xx-small;
+    }
 
-.date-time {
-  > .base-icon {
-    align-self: center;
-    margin: $space-xxx-small $space-xxx-small 0 0;
+    > .user-slug {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      margin: 0 0 $space-xxx-small $space-xx-small;
+    }
+  }
+  .username {
+    color: $text-color-soft;
+    font-size: $font-size-small;
   }
 }
 </style>
diff --git a/webapp/components/_new/generic/UserAvatar/UserAvatar.story.js b/webapp/components/_new/generic/UserAvatar/UserAvatar.story.js
new file mode 100644
index 000000000..0748a6266
--- /dev/null
+++ b/webapp/components/_new/generic/UserAvatar/UserAvatar.story.js
@@ -0,0 +1,57 @@
+import { storiesOf } from '@storybook/vue'
+import { withA11y } from '@storybook/addon-a11y'
+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'
+
+helpers.init()
+const anonymousUser = {
+  ...user,
+  name: 'Anonymous',
+  avatar: null,
+}
+const userWithoutAvatar = {
+  ...user,
+  avatar: null,
+  name: 'Ana Paula Nunes Marques',
+}
+storiesOf('UserAvatar', module)
+  .addDecorator(withA11y)
+  .addDecorator(helpers.layout)
+  .addDecorator(StoryRouter())
+  .add('with image', () => ({
+    components: { UserAvatar },
+    data: () => ({
+      user,
+    }),
+    template: '<user-avatar :user="user" />',
+  }))
+  .add('without image, anonymous user', () => ({
+    components: { UserAvatar },
+    data: () => ({
+      user: anonymousUser,
+    }),
+    template: '<user-avatar :user="user" />',
+  }))
+  .add('without image, user initials', () => ({
+    components: { UserAvatar },
+    data: () => ({
+      user: userWithoutAvatar,
+    }),
+    template: '<user-avatar :user="user" />',
+  }))
+  .add('small', () => ({
+    components: { UserAvatar },
+    data: () => ({
+      user,
+    }),
+    template: '<user-avatar :user="user" size="small"/>',
+  }))
+  .add('large', () => ({
+    components: { UserAvatar },
+    data: () => ({
+      user,
+    }),
+    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 bffc9694e..69890bf66 100644
--- a/webapp/components/_new/generic/UserAvatar/UserAvatar.vue
+++ b/webapp/components/_new/generic/UserAvatar/UserAvatar.vue
@@ -1,16 +1,8 @@
 <template>
-  <div :class="[`size-${this.size}`, 'user-avatar']">
-    <span v-if="!hasImage || error" class="no-image">
-      <span class="flex-item">
-        <template v-if="isAnonymous">
-          <base-icon name="eye-slash" />
-        </template>
-        <template v-else>
-          {{ userInitials }}
-        </template>
-      </span>
-    </span>
-    <img v-if="user && user.avatar && !error" :src="user.avatar | proxyApiUrl" @error="onError" />
+  <div :class="[`--${this.size}`, 'user-avatar', { 'no-image': !hasImage || error }]">
+    <img v-if="hasImage && !error" :src="user.avatar | proxyApiUrl" @error="onError" />
+    <base-icon name="eye-slash" v-else-if="isAnonymous" />
+    <span v-else>{{ userInitials }}</span>
   </div>
 </template>
 
@@ -22,7 +14,7 @@ export default {
       type: String,
       default: 'base',
       validator: value => {
-        return value.match(/(small|base|large|x-large)/)
+        return value.match(/(small|base|large)/)
       },
     },
     user: { type: Object, default: null },
@@ -37,7 +29,7 @@ export default {
       return !this.user || !this.user.name || this.user.name.toLowerCase() === 'anonymous'
     },
     hasImage() {
-      return Boolean(this.user && this.user.avatar) && !this.error
+      return Boolean(this.user && this.user.avatar)
     },
     userInitials() {
       const { name } = this.user || 'Anonymous'
@@ -69,38 +61,28 @@ export default {
     margin-top: -0.1em;
   }
 
-  &.size-small {
+  &.--small {
     width: $size-avatar-small;
     height: $size-avatar-small;
   }
-  &.size-base {
+  &.--base {
     border-width: 1px;
     width: $size-avatar-base;
     height: $size-avatar-base;
   }
-  &.size-large {
+  &.--large {
     width: $size-avatar-large;
     height: $size-avatar-large;
+    font-size: $font-size-xx-large;
   }
-  &.size-x-large {
-    width: $size-avatar-x-large;
-    height: $size-avatar-x-large;
-  }
-  .no-image {
-    height: 100%;
+  &.no-image {
     display: flex;
     flex-wrap: wrap;
     border-radius: 50%;
+    align-items: center;
+    justify-content: center;
     background-color: $background-color-secondary;
     color: $text-color-primary-inverse;
   }
-
-  .no-image .flex-item {
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0 auto;
-    align-self: center;
-    display: table;
-  }
 }
 </style>
diff --git a/webapp/components/features/FiledReportsTable/FiledReportsTable.vue b/webapp/components/features/FiledReportsTable/FiledReportsTable.vue
index 71c7d39a5..86172edbc 100644
--- a/webapp/components/features/FiledReportsTable/FiledReportsTable.vue
+++ b/webapp/components/features/FiledReportsTable/FiledReportsTable.vue
@@ -7,7 +7,7 @@
     condensed
   >
     <template #submitter="scope">
-      <hc-user
+      <user-teaser
         :user="scope.row.submitter"
         :showAvatar="false"
         :showPopover="false"
@@ -29,12 +29,12 @@
   </ds-table>
 </template>
 <script>
-import HcUser from '~/components/User/User'
+import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import HcRelativeDateTime from '~/components/RelativeDateTime'
 
 export default {
   components: {
-    HcUser,
+    UserTeaser,
     HcRelativeDateTime,
   },
   props: {
diff --git a/webapp/components/features/ReportList/ReportList.story.js b/webapp/components/features/ReportList/ReportList.story.js
index e651c4462..33ec06120 100644
--- a/webapp/components/features/ReportList/ReportList.story.js
+++ b/webapp/components/features/ReportList/ReportList.story.js
@@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
 import { action } from '@storybook/addon-actions'
 import { post } from '~/components/PostCard/PostCard.story.js'
-import { user } from '~/components/User/User.story.js'
+import { user } from '~/components/UserTeaser/UserTeaser.story.js'
 import helpers from '~/storybook/helpers'
 import ReportList from './ReportList'
 import DropdownFilter from '~/components/DropdownFilter/DropdownFilter'
diff --git a/webapp/components/features/ReportRow/ReportRow.vue b/webapp/components/features/ReportRow/ReportRow.vue
index af9a317cd..e73b9015d 100644
--- a/webapp/components/features/ReportRow/ReportRow.vue
+++ b/webapp/components/features/ReportRow/ReportRow.vue
@@ -19,7 +19,12 @@
       <!-- Content Column -->
       <td class="ds-table-col" data-test="report-content">
         <client-only v-if="isUser">
-          <hc-user :user="report.resource" :showAvatar="false" :trunc="30" :showPopover="false" />
+          <user-teaser
+            :user="report.resource"
+            :showAvatar="false"
+            :trunc="30"
+            :showPopover="false"
+          />
         </client-only>
         <nuxt-link v-else class="title" :to="linkTarget">
           {{ linkText | truncate(50) }}
@@ -29,7 +34,7 @@
       <!-- Author Column -->
       <td class="ds-table-col" data-test="report-author">
         <client-only v-if="!isUser">
-          <hc-user
+          <user-teaser
             :user="report.resource.author"
             :showAvatar="false"
             :trunc="30"
@@ -46,7 +51,7 @@
           {{ statusText }}
         </span>
         <client-only v-if="isReviewed">
-          <hc-user
+          <user-teaser
             :user="moderatorOfLatestReview"
             :showAvatar="false"
             :trunc="30"
@@ -85,12 +90,12 @@
 
 <script>
 import FiledReportsTable from '~/components/features/FiledReportsTable/FiledReportsTable'
-import HcUser from '~/components/User/User'
+import UserTeaser from '~/components/UserTeaser/UserTeaser'
 
 export default {
   components: {
     FiledReportsTable,
-    HcUser,
+    UserTeaser,
   },
   props: {
     report: {
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index b77952756..7c524973c 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -19,11 +19,11 @@
           @click="blurred = !blurred"
         />
       </aside>
-      <hc-user :user="post.author" :date-time="post.createdAt">
+      <user-teaser :user="post.author" :date-time="post.createdAt">
         <template v-slot:dateTime>
           <ds-text v-if="post.createdAt !== post.updatedAt">({{ $t('post.edited') }})</ds-text>
         </template>
-      </hc-user>
+      </user-teaser>
       <client-only>
         <content-menu
           placement="bottom-end"
@@ -101,7 +101,7 @@ import ContentViewer from '~/components/Editor/ContentViewer'
 import HcCategory from '~/components/Category'
 import HcHashtag from '~/components/Hashtag/Hashtag'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
-import HcUser from '~/components/User/User'
+import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import HcShoutButton from '~/components/ShoutButton.vue'
 import HcCommentForm from '~/components/CommentForm/CommentForm'
 import HcCommentList from '~/components/CommentList/CommentList'
@@ -119,7 +119,7 @@ export default {
   components: {
     HcCategory,
     HcHashtag,
-    HcUser,
+    UserTeaser,
     HcShoutButton,
     ContentMenu,
     HcCommentForm,
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index e4fc6423b..b9e2effb4 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -11,9 +11,9 @@
           style="position: relative; height: auto;"
         >
           <hc-upload v-if="myProfile" :user="user">
-            <user-avatar :user="user" class="profile-avatar" size="x-large"></user-avatar>
+            <user-avatar :user="user" class="profile-avatar" size="large"></user-avatar>
           </hc-upload>
-          <user-avatar v-else :user="user" class="profile-avatar" size="x-large" />
+          <user-avatar v-else :user="user" class="profile-avatar" size="large" />
           <!-- Menu -->
           <client-only>
             <content-menu
@@ -99,7 +99,7 @@
             <ds-space v-for="follow in uniq(user.following)" :key="follow.id" margin="x-small">
               <!-- TODO: find better solution for rendering errors -->
               <client-only>
-                <user :user="follow" :trunc="15" />
+                <user-teaser :user="follow" :trunc="15" />
               </client-only>
             </ds-space>
             <ds-space v-if="user.followingCount - user.following.length" margin="small">
@@ -129,7 +129,7 @@
             <ds-space v-for="follow in uniq(user.followedBy)" :key="follow.id" margin="x-small">
               <!-- TODO: find better solution for rendering errors -->
               <client-only>
-                <user :user="follow" :trunc="15" />
+                <user-teaser :user="follow" :trunc="15" />
               </client-only>
             </ds-space>
             <ds-space v-if="user.followedByCount - user.followedBy.length" margin="small">
@@ -271,7 +271,7 @@
 
 <script>
 import uniqBy from 'lodash/uniqBy'
-import User from '~/components/User/User'
+import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import HcPostCard from '~/components/PostCard/PostCard.vue'
 import HcFollowButton from '~/components/FollowButton.vue'
 import HcCountTo from '~/components/CountTo.vue'
@@ -297,9 +297,8 @@ const tabToFilterMapping = ({ tab, id }) => {
 }
 
 export default {
-  name: 'HcUserProfile',
   components: {
-    User,
+    UserTeaser,
     HcPostCard,
     HcFollowButton,
     HcCountTo,
@@ -516,7 +515,6 @@ export default {
   }
 }
 .profile-avatar.user-avatar {
-  display: block;
   margin: auto;
   margin-top: -60px;
 }

From 2cc350936f3f9f7ed0cddb7b605221e5d9991532 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Mon, 13 Jan 2020 20:11:51 +0100
Subject: [PATCH 07/23] Update HcUser to UserTeaser

---
 .../components/generic/SearchableInput/SearchableInput.vue  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/webapp/components/generic/SearchableInput/SearchableInput.vue b/webapp/components/generic/SearchableInput/SearchableInput.vue
index a45f4104c..448c154e0 100644
--- a/webapp/components/generic/SearchableInput/SearchableInput.vue
+++ b/webapp/components/generic/SearchableInput/SearchableInput.vue
@@ -27,7 +27,7 @@
           v-if="option.__typename === 'User'"
           :class="{ 'option-with-heading': isFirstOfType(option) }"
         >
-          <hc-user :user="option" :showPopover="false" />
+          <user-teaser :user="option" :showPopover="false" />
         </p>
         <p
           v-if="option.__typename === 'Post'"
@@ -45,14 +45,14 @@
 import { isEmpty } from 'lodash'
 import SearchHeading from '~/components/generic/SearchHeading/SearchHeading.vue'
 import SearchPost from '~/components/generic/SearchPost/SearchPost.vue'
-import HcUser from '~/components/User/User.vue'
+import UserTeaser from '~/components/UserTeaser/UserTeaser.vue'
 
 export default {
   name: 'SearchableInput',
   components: {
     SearchHeading,
     SearchPost,
-    HcUser,
+    UserTeaser,
   },
   props: {
     id: { type: String },

From 77ef3b0406dc9c544e853b38099888b9fffa2937 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Mon, 13 Jan 2020 20:57:25 +0100
Subject: [PATCH 08/23] Fix failing tests

---
 cypress/integration/common/search.js            | 2 +-
 webapp/components/PostCard/PostCard.story.js    | 2 +-
 webapp/components/UserTeaser/UserTeaser.spec.js | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/cypress/integration/common/search.js b/cypress/integration/common/search.js
index 020607bf0..6320b5ff4 100644
--- a/cypress/integration/common/search.js
+++ b/cypress/integration/common/search.js
@@ -87,7 +87,7 @@ Then(
 );
 
 Then("I select a user entry", () => {
-  cy.get(".searchable-input .userinfo")
+  cy.get(".searchable-input .user-info")
     .first()
     .trigger("click");
 })
diff --git a/webapp/components/PostCard/PostCard.story.js b/webapp/components/PostCard/PostCard.story.js
index 4b4c3afcc..5857167f3 100644
--- a/webapp/components/PostCard/PostCard.story.js
+++ b/webapp/components/PostCard/PostCard.story.js
@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
-import HcPostCard from './HcPostCard.vue'
+import HcPostCard from './PostCard.vue'
 import helpers from '~/storybook/helpers'
 
 helpers.init()
diff --git a/webapp/components/UserTeaser/UserTeaser.spec.js b/webapp/components/UserTeaser/UserTeaser.spec.js
index 4a6e37df1..cc39e65e5 100644
--- a/webapp/components/UserTeaser/UserTeaser.spec.js
+++ b/webapp/components/UserTeaser/UserTeaser.spec.js
@@ -1,5 +1,5 @@
 import { mount, RouterLinkStub } from '@vue/test-utils'
-import User from './User.vue'
+import UserTeaser from './UserTeaser.vue'
 import Vuex from 'vuex'
 
 const localVue = global.localVue
@@ -7,7 +7,7 @@ const filter = jest.fn(str => str)
 
 localVue.filter('truncate', filter)
 
-describe('User', () => {
+describe('UserTeaser', () => {
   let propsData
   let mocks
   let stubs
@@ -35,7 +35,7 @@ describe('User', () => {
       const store = new Vuex.Store({
         getters,
       })
-      return mount(User, { store, propsData, mocks, stubs, localVue })
+      return mount(UserTeaser, { store, propsData, mocks, stubs, localVue })
     }
 
     it('renders anonymous user', () => {

From 177121d64d460d3216127e57e7103330f70000c1 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Tue, 14 Jan 2020 11:01:34 +0100
Subject: [PATCH 09/23] Rename class back to open separate PR

---
 cypress/integration/common/steps.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js
index 8e08be2cf..b2fdef896 100644
--- a/cypress/integration/common/steps.js
+++ b/cypress/integration/common/steps.js
@@ -271,11 +271,11 @@ Then("the post was saved successfully", () => {
 });
 
 Then(/^I should see only ([0-9]+) posts? on the landing page/, postCount => {
-  cy.get(".post-card").should("have.length", postCount);
+  cy.get(".hc-post-card").should("have.length", postCount);
 });
 
 Then("the first post on the landing page has the title:", title => {
-  cy.get(".post-card:first").should("contain", title);
+  cy.get(".hc-post-card:first").should("contain", title);
 });
 
 Then(

From b7c26f5a3e25de9742b1d14b7143ceb574cff434 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Wed, 15 Jan 2020 10:07:27 +0100
Subject: [PATCH 10/23] Revert missed class name to be renamed

- I would like to rename HcPostCard to PostCard, but I decided to do it
in another PR as it's not relevant to the issue this PR addresses
---
 cypress/integration/common/steps.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js
index b2fdef896..db3eb8d56 100644
--- a/cypress/integration/common/steps.js
+++ b/cypress/integration/common/steps.js
@@ -256,7 +256,7 @@ When("I choose {string} as the language for the post", (languageCode) => {
 
 Then("the post shows up on the landing page at position {int}", index => {
   cy.openPage("landing");
-  const selector = `.post-card:nth-child(${index}) > .ds-card-content`;
+  const selector = `.hc-post-card:nth-child(${index}) > .ds-card-content`;
   cy.get(selector).should("contain", lastPost.title);
   cy.get(selector).should("contain", lastPost.content);
 });

From 6efd2fa34521145ad2df2565b4af82901d6b34af Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Tue, 14 Jan 2020 13:15:49 +0100
Subject: [PATCH 11/23] Fix: Cypress Neo4j authentication without Docker

- It's a bit of a pain to need to run Docker just to run the cypress
tests, and while it would be nice to use the same .env, we have an issue
with relative paths, dotenv, and cypress playing nice together.
---
 cypress.env.template.json | 5 +++++
 cypress/README.md         | 6 ++++++
 2 files changed, 11 insertions(+)
 create mode 100644 cypress.env.template.json

diff --git a/cypress.env.template.json b/cypress.env.template.json
new file mode 100644
index 000000000..59cf04ab6
--- /dev/null
+++ b/cypress.env.template.json
@@ -0,0 +1,5 @@
+{
+  "NEO4J_URI": "bolt://localhost:7687",
+  "NEO4J_USERNAME": "neo4j",
+  "NEO4J_PASSWORD": "letmein"
+}
diff --git a/cypress/README.md b/cypress/README.md
index 662d0b51c..a98b6f514 100644
--- a/cypress/README.md
+++ b/cypress/README.md
@@ -16,6 +16,12 @@ First, you have to tell cypress how to connect to your local neo4j database
 among other things. You can copy our template configuration and change the new
 file according to your needs.
 
+Make sure you are at the root level of the project. Then:
+```bash
+# in the top level folder Human-Connection/
+$ cp cypress.env.template.json cypress.env.json
+```
+
 To start the services that are required for cypress testing, run:
 
 ```bash

From da1eedbac268a1f3f91c93dfd8e0abbcc0731001 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Tue, 14 Jan 2020 20:52:19 +0100
Subject: [PATCH 12/23] Remove debug for dotenv, cp cypress env for travis

---
 .travis.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.travis.yml b/.travis.yml
index 19ba3ff9d..9d96ba693 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -12,7 +12,7 @@ install:
   - yarn global add wait-on
   # Install Codecov
   - yarn install
-  - cp backend/.env.template backend/.env
+  - cp cypress.env.template.json cypress.env.json
 
 before_script:
   - docker-compose -f docker-compose.yml build --parallel

From e31b9ff0156b63704eb0ffde6c411bdde7942f9d Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Thu, 16 Jan 2020 15:11:16 +0100
Subject: [PATCH 13/23] Fix failing cypress test

- the click trigger event lives on avatar-menu-trigger
---
 cypress/integration/common/steps.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js
index db3eb8d56..94aa3a841 100644
--- a/cypress/integration/common/steps.js
+++ b/cypress/integration/common/steps.js
@@ -459,7 +459,7 @@ When(
 );
 
 When("I navigate to my {string} settings page", settingsPage => {
-  cy.get(".avatar-menu").click();
+  cy.get(".avatar-menu-trigger").click();
   cy.get(".avatar-menu-popover")
     .find("a[href]")
     .contains("Settings")

From 74a7db53884f66742f4614bf365cedc60f2897a0 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Thu, 16 Jan 2020 19:18:50 +0100
Subject: [PATCH 14/23] Convert missed ds-avatar, fix cypress test

---
 cypress/integration/common/profile.js | 2 +-
 webapp/pages/profile/_id/_slug.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/cypress/integration/common/profile.js b/cypress/integration/common/profile.js
index b1bf9e4e0..c22c20392 100644
--- a/cypress/integration/common/profile.js
+++ b/cypress/integration/common/profile.js
@@ -32,5 +32,5 @@ Then("I cannot upload a picture", () => {
   cy.get(".ds-card-content")
     .children()
     .should("not.have.id", "customdropzone")
-    .should("have.class", "ds-avatar");
+    .should("have.class", "user-avatar");
 });
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index b9e2effb4..7a11ebe17 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -157,7 +157,7 @@
               <template>
                 <ds-space v-for="link in socialMediaLinks" :key="link.username" margin="x-small">
                   <a :href="link.url" target="_blank">
-                    <ds-avatar :image="link.favicon" />
+                    <user-avatar :image="link.favicon" />
                     {{ link.username }}
                   </a>
                 </ds-space>

From 1da872ba1e9a83a6f19c33ab32c764516b17111c Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Mon, 20 Jan 2020 10:11:48 +0100
Subject: [PATCH 15/23] Update SearchableInput spec after rebase

---
 .../generic/SearchableInput/SearchableInput.spec.js           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/components/generic/SearchableInput/SearchableInput.spec.js b/webapp/components/generic/SearchableInput/SearchableInput.spec.js
index d606177a5..5594896fb 100644
--- a/webapp/components/generic/SearchableInput/SearchableInput.spec.js
+++ b/webapp/components/generic/SearchableInput/SearchableInput.spec.js
@@ -97,8 +97,8 @@ describe('SearchableInput.vue', () => {
       it("pushes to user's profile", async () => {
         select.element.value = 'Bob'
         select.trigger('input')
-        const users = wrapper.findAll('.userinfo')
-        const bob = users.filter(item => item.text() === '@bob-der-baumeister')
+        const users = wrapper.findAll('.user-slug')
+        const bob = users.filter(item => item.text().match(/@bob-der-baumeister/))
         bob.trigger('click')
         await Vue.nextTick()
         expect(mocks.$router.push).toHaveBeenCalledWith({

From 8750df1affd73708bf5d8c1228a56d9e50a2cc81 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Mon, 20 Jan 2020 10:17:21 +0100
Subject: [PATCH 16/23] Remove unrelated changes to cypress config

---
 .travis.yml               | 2 +-
 cypress.env.template.json | 5 -----
 2 files changed, 1 insertion(+), 6 deletions(-)
 delete mode 100644 cypress.env.template.json

diff --git a/.travis.yml b/.travis.yml
index 9d96ba693..19ba3ff9d 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -12,7 +12,7 @@ install:
   - yarn global add wait-on
   # Install Codecov
   - yarn install
-  - cp cypress.env.template.json cypress.env.json
+  - cp backend/.env.template backend/.env
 
 before_script:
   - docker-compose -f docker-compose.yml build --parallel
diff --git a/cypress.env.template.json b/cypress.env.template.json
deleted file mode 100644
index 59cf04ab6..000000000
--- a/cypress.env.template.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "NEO4J_URI": "bolt://localhost:7687",
-  "NEO4J_USERNAME": "neo4j",
-  "NEO4J_PASSWORD": "letmein"
-}

From 7b73c990ec62cb279d324b4c7d244d23ac0a0049 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Mon, 20 Jan 2020 10:19:39 +0100
Subject: [PATCH 17/23] Remove unintended changes to class name/comment

---
 cypress/README.md                                           | 6 ------
 cypress/integration/common/steps.js                         | 6 +++---
 webapp/components/PostCard/PostCard.vue                     | 4 ++--
 webapp/components/UserTeaser/UserTeaser.vue                 | 2 +-
 .../components/_new/generic/UserAvatar/UserAvatar.spec.js   | 1 -
 5 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/cypress/README.md b/cypress/README.md
index a98b6f514..662d0b51c 100644
--- a/cypress/README.md
+++ b/cypress/README.md
@@ -16,12 +16,6 @@ First, you have to tell cypress how to connect to your local neo4j database
 among other things. You can copy our template configuration and change the new
 file according to your needs.
 
-Make sure you are at the root level of the project. Then:
-```bash
-# in the top level folder Human-Connection/
-$ cp cypress.env.template.json cypress.env.json
-```
-
 To start the services that are required for cypress testing, run:
 
 ```bash
diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js
index 94aa3a841..9e0cc799b 100644
--- a/cypress/integration/common/steps.js
+++ b/cypress/integration/common/steps.js
@@ -256,7 +256,7 @@ When("I choose {string} as the language for the post", (languageCode) => {
 
 Then("the post shows up on the landing page at position {int}", index => {
   cy.openPage("landing");
-  const selector = `.hc-post-card:nth-child(${index}) > .ds-card-content`;
+  const selector = `.post-card:nth-child(${index}) > .ds-card-content`;
   cy.get(selector).should("contain", lastPost.title);
   cy.get(selector).should("contain", lastPost.content);
 });
@@ -271,11 +271,11 @@ Then("the post was saved successfully", () => {
 });
 
 Then(/^I should see only ([0-9]+) posts? on the landing page/, postCount => {
-  cy.get(".hc-post-card").should("have.length", postCount);
+  cy.get(".post-card").should("have.length", postCount);
 });
 
 Then("the first post on the landing page has the title:", title => {
-  cy.get(".hc-post-card:first").should("contain", title);
+  cy.get(".post-card:first").should("contain", title);
 });
 
 Then(
diff --git a/webapp/components/PostCard/PostCard.vue b/webapp/components/PostCard/PostCard.vue
index 04af36fcb..846636bb7 100644
--- a/webapp/components/PostCard/PostCard.vue
+++ b/webapp/components/PostCard/PostCard.vue
@@ -3,7 +3,7 @@
     :lang="post.language"
     :image="post.image | proxyApiUrl"
     :class="{
-      'hc-post-card': true,
+      'post-card': true,
       'disabled-content': post.disabled,
       '--pinned': isPinned,
       '--blur-image': post.imageBlurred,
@@ -157,7 +157,7 @@ export default {
 }
 </script>
 <style lang="scss">
-.hc-post-card {
+.post-card {
   justify-content: space-between;
   position: relative;
   z-index: 1;
diff --git a/webapp/components/UserTeaser/UserTeaser.vue b/webapp/components/UserTeaser/UserTeaser.vue
index 89c2cd547..0b90c11ae 100644
--- a/webapp/components/UserTeaser/UserTeaser.vue
+++ b/webapp/components/UserTeaser/UserTeaser.vue
@@ -151,7 +151,7 @@ export default {
 .user-teaser {
   display: flex;
   flex-wrap: nowrap;
-  z-index: $z-index-hc-post-card-link;
+  z-index: $z-index-post-card-link;
   position: relative;
 
   > .user-info {
diff --git a/webapp/components/_new/generic/UserAvatar/UserAvatar.spec.js b/webapp/components/_new/generic/UserAvatar/UserAvatar.spec.js
index f18bc6756..77f7909a0 100644
--- a/webapp/components/_new/generic/UserAvatar/UserAvatar.spec.js
+++ b/webapp/components/_new/generic/UserAvatar/UserAvatar.spec.js
@@ -19,7 +19,6 @@ describe('UserAvatar.vue', () => {
     expect(wrapper.find('img').exists()).toBe(false)
   })
 
-  // this is testing the style guide
   it('renders an icon', () => {
     expect(wrapper.find(BaseIcon).exists()).toBe(true)
   })

From c5af2dbfb4eeea8671bc8f22215b13a5d89e949e Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Tue, 21 Jan 2020 11:58:54 +0300
Subject: [PATCH 18/23] truncate overflowing user name

---
 webapp/assets/_new/styles/tokens.scss       |  1 -
 webapp/components/UserTeaser/UserTeaser.vue | 15 +++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss
index a6f0a8a70..90ec527ea 100644
--- a/webapp/assets/_new/styles/tokens.scss
+++ b/webapp/assets/_new/styles/tokens.scss
@@ -315,7 +315,6 @@ $z-index-dropdown: 8888;
 $z-index-page-submenu: 2500;
 $z-index-page-header: 2000;
 $z-index-page-sidebar: 1500;
-$z-index-hc-post-card-link: 5;
 $z-index-sticky: 100;
 $z-index-post-card-link: 5;
 
diff --git a/webapp/components/UserTeaser/UserTeaser.vue b/webapp/components/UserTeaser/UserTeaser.vue
index 0b90c11ae..3cab9a240 100644
--- a/webapp/components/UserTeaser/UserTeaser.vue
+++ b/webapp/components/UserTeaser/UserTeaser.vue
@@ -148,15 +148,25 @@ export default {
 </script>
 
 <style lang="scss">
+.trigger {
+  max-width: 100%;
+}
+
 .user-teaser {
   display: flex;
   flex-wrap: nowrap;
   z-index: $z-index-post-card-link;
   position: relative;
 
+  > .user-avatar {
+    flex-shrink: 0;
+  }
+
   > .user-info {
     display: flex;
     flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
 
     > .ds-text {
       display: flex;
@@ -164,9 +174,10 @@ export default {
     }
 
     > .user-slug {
-      white-space: nowrap;
-      text-overflow: ellipsis;
       margin: 0 0 $space-xxx-small $space-xx-small;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
   .username {

From d20421cb70c4bda51fdaf59f28c3a060b59bb0cd Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Tue, 21 Jan 2020 13:26:14 +0300
Subject: [PATCH 19/23] clean up UserAvatar a little

---
 .../generic/UserAvatar/UserAvatar.spec.js     | 10 +-
 .../_new/generic/UserAvatar/UserAvatar.vue    | 96 +++++++++----------
 2 files changed, 52 insertions(+), 54 deletions(-)

diff --git a/webapp/components/_new/generic/UserAvatar/UserAvatar.spec.js b/webapp/components/_new/generic/UserAvatar/UserAvatar.spec.js
index 77f7909a0..61f9977ef 100644
--- a/webapp/components/_new/generic/UserAvatar/UserAvatar.spec.js
+++ b/webapp/components/_new/generic/UserAvatar/UserAvatar.spec.js
@@ -51,13 +51,13 @@ describe('UserAvatar.vue', () => {
       })
 
       it('displays user initials', () => {
-        expect(wrapper.find('.no-image').text()).toEqual('MR')
+        expect(wrapper.find('.initials').text()).toEqual('MR')
       })
 
       it('displays no more than 3 initials', () => {
         propsData = { user: { name: 'Ana Paula Nunes Marques' } }
         wrapper = Wrapper()
-        expect(wrapper.find('.no-image').text()).toEqual('APN')
+        expect(wrapper.find('.initials').text()).toEqual('APN')
       })
     })
 
@@ -65,6 +65,7 @@ describe('UserAvatar.vue', () => {
       beforeEach(() => {
         propsData = {
           user: {
+            name: 'Not Anonymous',
             avatar: '/avatar.jpg',
           },
         }
@@ -72,7 +73,7 @@ describe('UserAvatar.vue', () => {
       })
 
       it('adds a prefix to load the image from the uploads service', () => {
-        expect(wrapper.find('img').attributes('src')).toBe('/api/avatar.jpg')
+        expect(wrapper.find('.image').attributes('src')).toBe('/api/avatar.jpg')
       })
     })
 
@@ -80,6 +81,7 @@ describe('UserAvatar.vue', () => {
       beforeEach(() => {
         propsData = {
           user: {
+            name: 'Not Anonymous',
             avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/sawalazar/128.jpg',
           },
         }
@@ -88,7 +90,7 @@ describe('UserAvatar.vue', () => {
 
       it('keeps the avatar URL as is', () => {
         // e.g. our seeds have absolute image URLs
-        expect(wrapper.find('img').attributes('src')).toBe(
+        expect(wrapper.find('.image').attributes('src')).toBe(
           'https://s3.amazonaws.com/uifaces/faces/twitter/sawalazar/128.jpg',
         )
       })
diff --git a/webapp/components/_new/generic/UserAvatar/UserAvatar.vue b/webapp/components/_new/generic/UserAvatar/UserAvatar.vue
index 69890bf66..c29f8e402 100644
--- a/webapp/components/_new/generic/UserAvatar/UserAvatar.vue
+++ b/webapp/components/_new/generic/UserAvatar/UserAvatar.vue
@@ -1,8 +1,13 @@
 <template>
-  <div :class="[`--${this.size}`, 'user-avatar', { 'no-image': !hasImage || error }]">
-    <img v-if="hasImage && !error" :src="user.avatar | proxyApiUrl" @error="onError" />
-    <base-icon name="eye-slash" v-else-if="isAnonymous" />
-    <span v-else>{{ userInitials }}</span>
+  <div :class="['user-avatar', size && `--${this.size}`]">
+    <span class="initials">{{ userInitials }}</span>
+    <base-icon v-if="isAnonymous" name="eye-slash" />
+    <img
+      v-else
+      :src="user.avatar | proxyApiUrl"
+      class="image"
+      @error="event.target.style.display = 'none'"
+    />
   </div>
 </template>
 
@@ -12,77 +17,68 @@ export default {
   props: {
     size: {
       type: String,
-      default: 'base',
+      required: false,
       validator: value => {
-        return value.match(/(small|base|large)/)
+        return value.match(/(small|large)/)
       },
     },
-    user: { type: Object, default: null },
-  },
-  data() {
-    return {
-      error: false,
-    }
+    user: {
+      type: Object,
+      default: null,
+    },
   },
   computed: {
     isAnonymous() {
       return !this.user || !this.user.name || this.user.name.toLowerCase() === 'anonymous'
     },
-    hasImage() {
-      return Boolean(this.user && this.user.avatar)
-    },
     userInitials() {
-      const { name } = this.user || 'Anonymous'
-      const namesArray = name.split(/[ -]/)
-      let initials = ''
-      for (var i = 0; i < namesArray.length; i++) initials += namesArray[i].charAt(0)
-      if (initials.length > 3 && /[A-Z]/.test(initials)) initials = initials.replace(/[a-z]+/g, '')
-      return initials.substr(0, 3).toUpperCase()
-    },
-  },
-  methods: {
-    onError() {
-      this.error = true
+      if (this.isAnonymous) return ''
+
+      return this.user.name
+        .match(/\b\w/g)
+        .join('')
+        .substring(0, 3)
+        .toUpperCase()
     },
   },
 }
 </script>
+
 <style lang="scss">
 .user-avatar {
-  img {
-    width: 100%;
-    border-radius: 50%;
-    overflow: hidden;
-    object-fit: cover;
-    object-position: center;
-  }
-
-  .base-icon {
-    margin-top: -0.1em;
-  }
+  position: relative;
+  height: $size-avatar-base;
+  width: $size-avatar-base;
+  border-radius: 50%;
+  overflow: hidden;
+  background-color: $color-primary-dark;
+  color: $text-color-primary-inverse;
 
   &.--small {
     width: $size-avatar-small;
     height: $size-avatar-small;
   }
-  &.--base {
-    border-width: 1px;
-    width: $size-avatar-base;
-    height: $size-avatar-base;
-  }
+
   &.--large {
     width: $size-avatar-large;
     height: $size-avatar-large;
     font-size: $font-size-xx-large;
   }
-  &.no-image {
-    display: flex;
-    flex-wrap: wrap;
-    border-radius: 50%;
-    align-items: center;
-    justify-content: center;
-    background-color: $background-color-secondary;
-    color: $text-color-primary-inverse;
+
+  > .initials,
+  > .base-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  > .image {
+    position: relative;
+    z-index: 5;
+    width: 100%;
+    object-fit: cover;
+    object-position: center;
   }
 }
 </style>

From e93332b17361d2c59a841e7c03e93647ec76918f Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Tue, 21 Jan 2020 17:00:20 +0300
Subject: [PATCH 20/23] display username below slug when there is no date-time

---
 .../components/UserTeaser/UserTeaser.story.js | 16 +++--
 webapp/components/UserTeaser/UserTeaser.vue   | 68 +++++++++++--------
 2 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/webapp/components/UserTeaser/UserTeaser.story.js b/webapp/components/UserTeaser/UserTeaser.story.js
index 5f2619930..62b0d37c8 100644
--- a/webapp/components/UserTeaser/UserTeaser.story.js
+++ b/webapp/components/UserTeaser/UserTeaser.story.js
@@ -56,13 +56,21 @@ export const user = {
 storiesOf('UserTeaser', module)
   .addDecorator(withA11y)
   .addDecorator(helpers.layout)
-  .add('available', () => ({
+  .add('user only', () => ({
     components: { UserTeaser },
     store: helpers.store,
     data: () => ({
       user,
     }),
-    template: '<user-teaser :user="user" :trunc="35" :date-time="new Date()" />',
+    template: '<user-teaser :user="user" />',
+  }))
+  .add('with Date', () => ({
+    components: { UserTeaser },
+    store: helpers.store,
+    data: () => ({
+      user,
+    }),
+    template: '<user-teaser :user="user" :date-time="new Date()" />',
   }))
   .add('has edited something', () => ({
     components: { UserTeaser },
@@ -71,7 +79,7 @@ storiesOf('UserTeaser', module)
       user,
     }),
     template: `
-    <user-teaser :user="user" :trunc="35" :date-time="new Date()">
+    <user-teaser :user="user" :date-time="new Date()">
       <template v-slot:dateTime>
         - HEY! I'm edited
       </template>
@@ -84,5 +92,5 @@ storiesOf('UserTeaser', module)
     data: () => ({
       user: null,
     }),
-    template: '<user-teaser :user="user" :trunc="35" :date-time="new Date()" />',
+    template: '<user-teaser :user="user" :date-time="new Date()" />',
   }))
diff --git a/webapp/components/UserTeaser/UserTeaser.vue b/webapp/components/UserTeaser/UserTeaser.vue
index 3cab9a240..9d1b22fd9 100644
--- a/webapp/components/UserTeaser/UserTeaser.vue
+++ b/webapp/components/UserTeaser/UserTeaser.vue
@@ -1,9 +1,14 @@
 <template>
   <div class="user-teaser" v-if="displayAnonymous">
     <user-avatar v-if="showAvatar" />
-    <span class="username">{{ $t('profile.userAnonym') }}</span>
+    <span class="info anonymous">{{ $t('profile.userAnonym') }}</span>
   </div>
-  <dropdown v-else :class="{ 'disabled-content': user.disabled }" placement="top-start" offset="0">
+  <dropdown
+    v-else
+    :class="[{ 'disabled-content': user.disabled }]"
+    placement="top-start"
+    offset="0"
+  >
     <template #default="{ openMenu, closeMenu, isOpen }">
       <nuxt-link
         :to="userLink"
@@ -12,18 +17,17 @@
         @mouseleave.native="closeMenu(true)"
       >
         <user-avatar v-if="showAvatar" :user="user" size="small" />
-        <div class="user-info">
-          <span class="user-slug">
-            {{ userSlug }}
-            <span class="username">{{ userName | truncate(18) }}</span>
+        <div class="info">
+          <span class="text">
+            <span class="slug">{{ userSlug }}</span>
+            <span v-if="dateTime">{{ userName }}</span>
           </span>
-          <ds-text class="date-time" align="left" size="small" color="soft">
-            <template v-if="dateTime">
-              <base-icon name="clock" />
-              <hc-relative-date-time :date-time="dateTime" />
-              <slot name="dateTime"></slot>
-            </template>
-          </ds-text>
+          <span v-if="dateTime" class="text">
+            <base-icon name="clock" />
+            <hc-relative-date-time :date-time="dateTime" />
+            <slot name="dateTime"></slot>
+          </span>
+          <span v-else class="text">{{ userName }}</span>
         </div>
       </nuxt-link>
     </template>
@@ -104,7 +108,6 @@ export default {
   props: {
     user: { type: Object, default: null },
     showAvatar: { type: Boolean, default: true },
-    trunc: { type: Number, default: 18 }, // "-1" is no trunc
     dateTime: { type: [Date, String], default: null },
     showPopover: { type: Boolean, default: true },
   },
@@ -162,27 +165,36 @@ export default {
     flex-shrink: 0;
   }
 
-  > .user-info {
+  > .info {
     display: flex;
     flex-direction: column;
     justify-content: center;
+    padding-left: $space-xx-small;
     overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
-    > .ds-text {
-      display: flex;
-      margin: 0 0 $space-xxx-small $space-xx-small;
-    }
-
-    > .user-slug {
-      margin: 0 0 $space-xxx-small $space-xx-small;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-  .username {
     color: $text-color-soft;
     font-size: $font-size-small;
+
+    &.anonymous {
+      font-size: $font-size-base;
+    }
+
+    .slug {
+      color: $color-primary;
+      font-size: $font-size-base;
+    }
+  }
+
+  .text {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    > .ds-text {
+      display: inline;
+    }
   }
 }
 </style>

From 287e9ce484a183302429a7278bec4264598c9339 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Tue, 21 Jan 2020 17:00:37 +0300
Subject: [PATCH 21/23] remove unused trunc prop

---
 webapp/components/ContributionForm/ContributionForm.vue       | 2 +-
 webapp/components/Notification/Notification.vue               | 2 +-
 webapp/components/NotificationsTable/NotificationsTable.vue   | 1 -
 webapp/components/PostCard/PostCard.vue                       | 2 +-
 .../features/FiledReportsTable/FiledReportsTable.vue          | 1 -
 webapp/components/features/ReportRow/ReportRow.vue            | 3 ---
 webapp/pages/profile/_id/_slug.vue                            | 4 ++--
 7 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index 8cb42a85d..96046f118 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -38,7 +38,7 @@
 
         <ds-space />
         <client-only>
-          <user-teaser :user="currentUser" :trunc="35" />
+          <user-teaser :user="currentUser" />
         </client-only>
         <ds-space />
         <ds-input
diff --git a/webapp/components/Notification/Notification.vue b/webapp/components/Notification/Notification.vue
index 761c806d2..2a4942716 100644
--- a/webapp/components/Notification/Notification.vue
+++ b/webapp/components/Notification/Notification.vue
@@ -2,7 +2,7 @@
   <ds-space :class="{ read: notification.read, notification: true }" margin-bottom="x-small">
     <client-only>
       <ds-space margin-bottom="x-small">
-        <user-teaser :user="from.author" :date-time="from.createdAt" :trunc="35" />
+        <user-teaser :user="from.author" :date-time="from.createdAt" />
       </ds-space>
       <ds-text class="reason-text-for-test" color="soft">
         {{ $t(`notifications.reason.${notification.reason}`) }}
diff --git a/webapp/components/NotificationsTable/NotificationsTable.vue b/webapp/components/NotificationsTable/NotificationsTable.vue
index 71ce674dc..07db4f9a2 100644
--- a/webapp/components/NotificationsTable/NotificationsTable.vue
+++ b/webapp/components/NotificationsTable/NotificationsTable.vue
@@ -18,7 +18,6 @@
           <user-teaser
             :user="scope.row.from.author"
             :date-time="scope.row.from.createdAt"
-            :trunc="35"
             :class="{ 'notification-status': scope.row.read }"
           />
         </client-only>
diff --git a/webapp/components/PostCard/PostCard.vue b/webapp/components/PostCard/PostCard.vue
index 846636bb7..b99474ebc 100644
--- a/webapp/components/PostCard/PostCard.vue
+++ b/webapp/components/PostCard/PostCard.vue
@@ -20,7 +20,7 @@
     <!-- Username, Image & Date of Post -->
     <div class="user-wrapper">
       <client-only>
-        <user-teaser :user="post.author" :trunc="35" :date-time="post.createdAt" />
+        <user-teaser :user="post.author" :date-time="post.createdAt" />
       </client-only>
       <hc-ribbon v-if="isPinned" class="ribbon--pinned" :text="$t('post.pinned')" />
       <hc-ribbon v-else :text="$t('post.name')" />
diff --git a/webapp/components/features/FiledReportsTable/FiledReportsTable.vue b/webapp/components/features/FiledReportsTable/FiledReportsTable.vue
index 86172edbc..363ab0e9e 100644
--- a/webapp/components/features/FiledReportsTable/FiledReportsTable.vue
+++ b/webapp/components/features/FiledReportsTable/FiledReportsTable.vue
@@ -11,7 +11,6 @@
         :user="scope.row.submitter"
         :showAvatar="false"
         :showPopover="false"
-        :trunc="30"
         data-test="filing-user"
       />
     </template>
diff --git a/webapp/components/features/ReportRow/ReportRow.vue b/webapp/components/features/ReportRow/ReportRow.vue
index e73b9015d..cd23d2ae2 100644
--- a/webapp/components/features/ReportRow/ReportRow.vue
+++ b/webapp/components/features/ReportRow/ReportRow.vue
@@ -22,7 +22,6 @@
           <user-teaser
             :user="report.resource"
             :showAvatar="false"
-            :trunc="30"
             :showPopover="false"
           />
         </client-only>
@@ -37,7 +36,6 @@
           <user-teaser
             :user="report.resource.author"
             :showAvatar="false"
-            :trunc="30"
             :showPopover="false"
           />
         </client-only>
@@ -54,7 +52,6 @@
           <user-teaser
             :user="moderatorOfLatestReview"
             :showAvatar="false"
-            :trunc="30"
             :date-time="report.updatedAt"
             :showPopover="false"
           />
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 7a11ebe17..0a37dbb38 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -99,7 +99,7 @@
             <ds-space v-for="follow in uniq(user.following)" :key="follow.id" margin="x-small">
               <!-- TODO: find better solution for rendering errors -->
               <client-only>
-                <user-teaser :user="follow" :trunc="15" />
+                <user-teaser :user="follow" />
               </client-only>
             </ds-space>
             <ds-space v-if="user.followingCount - user.following.length" margin="small">
@@ -129,7 +129,7 @@
             <ds-space v-for="follow in uniq(user.followedBy)" :key="follow.id" margin="x-small">
               <!-- TODO: find better solution for rendering errors -->
               <client-only>
-                <user-teaser :user="follow" :trunc="15" />
+                <user-teaser :user="follow" />
               </client-only>
             </ds-space>
             <ds-space v-if="user.followedByCount - user.followedBy.length" margin="small">

From 24898f5fe2e2c168fe78d977f28d3b11ae534252 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Tue, 21 Jan 2020 17:07:00 +0300
Subject: [PATCH 22/23] quick fix tests relying on classes of child components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

changing class names in the UserTeaser leads to tests failing for other components, like SearchableInput and NotificationsTable – I just updated the classes but long-term it would be good to find a way to not rely on implementation details of child components – maybe just test if the child component is rendered?
---
 .../NotificationsTable/NotificationsTable.spec.js    |  8 ++++----
 webapp/components/features/ReportRow/ReportRow.vue   | 12 ++----------
 .../generic/SearchableInput/SearchableInput.spec.js  |  2 +-
 3 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/webapp/components/NotificationsTable/NotificationsTable.spec.js b/webapp/components/NotificationsTable/NotificationsTable.spec.js
index 80095666f..ef4e19b01 100644
--- a/webapp/components/NotificationsTable/NotificationsTable.spec.js
+++ b/webapp/components/NotificationsTable/NotificationsTable.spec.js
@@ -89,8 +89,8 @@ describe('NotificationsTable.vue', () => {
         })
 
         it('renders the author', () => {
-          const username = firstRowNotification.find('.username')
-          expect(username.text()).toEqual(postNotification.from.author.name)
+          const userinfo = firstRowNotification.find('.user-teaser > .info')
+          expect(userinfo.text()).toContain(postNotification.from.author.name)
         })
 
         it('renders the reason for the notification', () => {
@@ -122,8 +122,8 @@ describe('NotificationsTable.vue', () => {
         })
 
         it('renders the author', () => {
-          const username = secondRowNotification.find('.username')
-          expect(username.text()).toEqual(commentNotification.from.author.name)
+          const userinfo = secondRowNotification.find('.user-teaser > .info')
+          expect(userinfo.text()).toContain(commentNotification.from.author.name)
         })
 
         it('renders the reason for the notification', () => {
diff --git a/webapp/components/features/ReportRow/ReportRow.vue b/webapp/components/features/ReportRow/ReportRow.vue
index cd23d2ae2..72fd8d24e 100644
--- a/webapp/components/features/ReportRow/ReportRow.vue
+++ b/webapp/components/features/ReportRow/ReportRow.vue
@@ -19,11 +19,7 @@
       <!-- Content Column -->
       <td class="ds-table-col" data-test="report-content">
         <client-only v-if="isUser">
-          <user-teaser
-            :user="report.resource"
-            :showAvatar="false"
-            :showPopover="false"
-          />
+          <user-teaser :user="report.resource" :showAvatar="false" :showPopover="false" />
         </client-only>
         <nuxt-link v-else class="title" :to="linkTarget">
           {{ linkText | truncate(50) }}
@@ -33,11 +29,7 @@
       <!-- Author Column -->
       <td class="ds-table-col" data-test="report-author">
         <client-only v-if="!isUser">
-          <user-teaser
-            :user="report.resource.author"
-            :showAvatar="false"
-            :showPopover="false"
-          />
+          <user-teaser :user="report.resource.author" :showAvatar="false" :showPopover="false" />
         </client-only>
         <span v-else>—</span>
       </td>
diff --git a/webapp/components/generic/SearchableInput/SearchableInput.spec.js b/webapp/components/generic/SearchableInput/SearchableInput.spec.js
index 5594896fb..c685ae3e6 100644
--- a/webapp/components/generic/SearchableInput/SearchableInput.spec.js
+++ b/webapp/components/generic/SearchableInput/SearchableInput.spec.js
@@ -97,7 +97,7 @@ describe('SearchableInput.vue', () => {
       it("pushes to user's profile", async () => {
         select.element.value = 'Bob'
         select.trigger('input')
-        const users = wrapper.findAll('.user-slug')
+        const users = wrapper.findAll('.slug')
         const bob = users.filter(item => item.text().match(/@bob-der-baumeister/))
         bob.trigger('click')
         await Vue.nextTick()

From 46343c923c9bbf53c95208a1ca5c110279f4ef35 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Tue, 21 Jan 2020 17:03:50 +0100
Subject: [PATCH 23/23] Fix cypress tests after renamed variables

---
 cypress/integration/common/post.js   | 2 +-
 cypress/integration/common/report.js | 2 +-
 cypress/integration/common/search.js | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/cypress/integration/common/post.js b/cypress/integration/common/post.js
index 833a70f85..4d1856bcc 100644
--- a/cypress/integration/common/post.js
+++ b/cypress/integration/common/post.js
@@ -27,7 +27,7 @@ Then("I should see my comment", () => {
     .get(".user-avatar img")
     .should("have.attr", "src")
     .and("contain", narratorAvatar)
-    .get("div p.ds-text span")
+    .get(".user-teaser > .info > .text")
     .should("contain", "today at");
 });
 
diff --git a/cypress/integration/common/report.js b/cypress/integration/common/report.js
index 4bfc3c240..2e11c1d0d 100644
--- a/cypress/integration/common/report.js
+++ b/cypress/integration/common/report.js
@@ -63,7 +63,7 @@ When('I click on "Report User" from the content menu in the user info box', () =
 })
 
 When('I click on the author', () => {
-  cy.get('.username')
+  cy.get('.user-teaser')
     .click()
     .url().should('include', '/profile/')
 })
diff --git a/cypress/integration/common/search.js b/cypress/integration/common/search.js
index 6320b5ff4..f6589763b 100644
--- a/cypress/integration/common/search.js
+++ b/cypress/integration/common/search.js
@@ -87,7 +87,7 @@ Then(
 );
 
 Then("I select a user entry", () => {
-  cy.get(".searchable-input .user-info")
+  cy.get(".searchable-input .user-teaser")
     .first()
     .trigger("click");
 })