Rename Component from 'UserAvatar' as 'user-avatar' to 'ProfileAvatar' as 'profile-avatar'

cypress/integration/UserProfile.Avatar/I_cannot_upload_a_picture.js

@@ -4,5 +4,5 @@ Then("I cannot upload a picture", () => {
   cy.get(".base-card")
     .children()
     .should("not.have.id", "customdropzone")
-    .should("have.class", "user-avatar");
+    .should("have.class", "profile-avatar");
 });

webapp/components/AvatarMenu/AvatarMenu.spec.js

@@ -42,7 +42,7 @@ describe('AvatarMenu.vue', () => {
       wrapper = Wrapper()
     })
 
-    it('renders the UserAvatar component', () => {
+    it('renders the ProfileAvatar component', () => {
       wrapper.find('.avatar-menu-trigger').trigger('click')
       expect(wrapper.find('.profile-avatar').exists()).toBe(true)
     })

webapp/components/AvatarMenu/AvatarMenu.vue

@@ -11,7 +11,7 @@
         "
         @click.prevent="toggleMenu"
       >
-        <user-avatar :user="user" size="small" />
+        <profile-avatar :user="user" size="small" />
         <base-icon class="dropdown-arrow" name="angle-down" />
       </a>
     </template>
@@ -50,12 +50,12 @@
 <script>
 import { mapGetters } from 'vuex'
 import Dropdown from '~/components/Dropdown'
-import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
+import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
 
 export default {
   components: {
     Dropdown,
-    UserAvatar,
+    ProfileAvatar,
   },
   props: {
     placement: { type: String, default: 'top-end' },

webapp/components/UserTeaser/UserTeaser.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="user-teaser" v-if="displayAnonymous">
-    <user-avatar v-if="showAvatar" size="small" />
+    <profile-avatar v-if="showAvatar" size="small" />
     <span class="info anonymous">{{ $t('profile.userAnonym') }}</span>
   </div>
   <div v-else :class="[{ 'disabled-content': user.disabled }]" placement="top-start">
     <nuxt-link :to="userLink" :class="['user-teaser']">
-      <user-avatar v-if="showAvatar" :user="user" size="small" />
+      <profile-avatar v-if="showAvatar" :user="user" size="small" />
       <div class="info">
         <span class="text">
           <span class="slug">{{ userSlug }}</span>
@@ -26,13 +26,13 @@
 import { mapGetters } from 'vuex'
 
 import HcRelativeDateTime from '~/components/RelativeDateTime'
-import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
+import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
 
 export default {
   name: 'UserTeaser',
   components: {
     HcRelativeDateTime,
-    UserAvatar,
+    ProfileAvatar,
   },
   props: {
     user: { type: Object, default: null },

webapp/components/_new/generic/ProfileAvatar/ProfileAvatar.spec.js

@@ -1,10 +1,10 @@
 import { mount } from '@vue/test-utils'
-import UserAvatar from './UserAvatar'
+import ProfileAvatar from './ProfileAvatar'
 import BaseIcon from '~/components/_new/generic/BaseIcon/BaseIcon'
 
 const localVue = global.localVue
 
-describe('UserAvatar', () => {
+describe('ProfileAvatar', () => {
   let propsData, wrapper
   beforeEach(() => {
     propsData = {}
@@ -12,7 +12,7 @@ describe('UserAvatar', () => {
   })
 
   const Wrapper = () => {
-    return mount(UserAvatar, { propsData, localVue })
+    return mount(ProfileAvatar, { propsData, localVue })
   }
 
   it('renders no image', () => {

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

@@ -1,7 +1,7 @@
 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 ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
 import helpers from '~/storybook/helpers'
 import { user } from '~/components/UserTeaser/UserTeaser.story.js'
 import imageFile from './storybook/critical-avatar-white-background.png'
@@ -22,56 +22,56 @@ const userWithAvatar = {
   name: 'Jochen Image',
   avatar: { url: imageFile },
 }
-storiesOf('UserAvatar', module)
+storiesOf('ProfileAvatar', module)
   .addDecorator(withA11y)
   .addDecorator(helpers.layout)
   .addDecorator(StoryRouter())
   .add('normal, with image', () => ({
-    components: { UserAvatar },
+    components: { ProfileAvatar },
     data: () => ({
       user: userWithAvatar,
     }),
-    template: '<user-avatar :user="user" />',
+    template: '<profile-avatar :user="user" />',
   }))
   .add('normal without image, anonymous user', () => ({
-    components: { UserAvatar },
+    components: { ProfileAvatar },
     data: () => ({
       user: anonymousUser,
     }),
-    template: '<user-avatar :user="user" />',
+    template: '<profile-avatar :user="user" />',
   }))
   .add('normal without image, user initials', () => ({
-    components: { UserAvatar },
+    components: { ProfileAvatar },
     data: () => ({
       user: userWithoutAvatar,
     }),
-    template: '<user-avatar :user="user" />',
+    template: '<profile-avatar :user="user" />',
   }))
   .add('small, with image', () => ({
-    components: { UserAvatar },
+    components: { ProfileAvatar },
     data: () => ({
       user: userWithAvatar,
     }),
-    template: '<user-avatar :user="user" size="small"/>',
+    template: '<profile-avatar :user="user" size="small"/>',
   }))
   .add('small', () => ({
-    components: { UserAvatar },
+    components: { ProfileAvatar },
     data: () => ({
       user: userWithoutAvatar,
     }),
-    template: '<user-avatar :user="user" size="small"/>',
+    template: '<profile-avatar :user="user" size="small"/>',
   }))
   .add('large, with image', () => ({
-    components: { UserAvatar },
+    components: { ProfileAvatar },
     data: () => ({
       user: userWithAvatar,
     }),
-    template: '<user-avatar :user="user" size="large"/>',
+    template: '<profile-avatar :user="user" size="large"/>',
   }))
   .add('large', () => ({
-    components: { UserAvatar },
+    components: { ProfileAvatar },
     data: () => ({
       user: userWithoutAvatar,
     }),
-    template: '<user-avatar :user="user" size="large"/>',
+    template: '<profile-avatar :user="user" size="large"/>',
   }))

webapp/components/_new/generic/ProfileAvatar/ProfileAvatar.vue

@@ -16,7 +16,7 @@
 
 <script>
 export default {
-  name: 'UserAvatar',
+  name: 'ProfileAvatar',
   props: {
     size: {
       type: String,

webapp/pages/group/_id/_slug.vue

@@ -8,9 +8,9 @@
           style="position: relative; height: auto; overflow: visible"
         >
           <avatar-uploader v-if="isMyGroup" :profile="group">
-            <!-- Wolle: <user-avatar :user="user" class="profile-page-avatar" size="large"></user-avatar> -->
+            <!-- Wolle: <profile-avatar :user="user" class="profile-page-avatar" size="large"></profile-avatar> -->
           </avatar-uploader>
-          <!-- Wolle: <user-avatar v-else :user="user" class="profile-page-avatar" size="large" /> -->
+          <!-- Wolle: <profile-avatar v-else :user="user" class="profile-page-avatar" size="large" /> -->
           <!-- Menu -->
           <!-- Wolle: <client-only>
             <content-menu
@@ -181,7 +181,7 @@ import FollowList from '~/components/features/FollowList/FollowList'
 import HcEmpty from '~/components/Empty/Empty'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import AvatarUploader from '~/components/Uploader/AvatarUploader'
-import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
+import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
 import TabNavigation from '~/components/_new/generic/TabNavigation/TabNavigation'
@@ -209,7 +209,7 @@ export default {
     HcCountTo,
     HcBadges,
     HcEmpty,
-    UserAvatar,
+    ProfileAvatar,
     ContentMenu,
     AvatarUploader,
     MasonryGrid,

webapp/pages/profile/_id/_slug.vue

@@ -8,9 +8,9 @@
           style="position: relative; height: auto; overflow: visible"
         >
           <avatar-uploader v-if="myProfile" :profile="user">
-            <user-avatar :user="user" class="profile-page-avatar" size="large"></user-avatar>
+            <profile-avatar :user="user" class="profile-page-avatar" size="large"></profile-avatar>
           </avatar-uploader>
-          <user-avatar v-else :user="user" class="profile-page-avatar" size="large" />
+          <profile-avatar v-else :user="user" class="profile-page-avatar" size="large" />
           <!-- Menu -->
           <client-only>
             <content-menu
@@ -179,7 +179,7 @@ import FollowList from '~/components/features/FollowList/FollowList'
 import HcEmpty from '~/components/Empty/Empty'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import AvatarUploader from '~/components/Uploader/AvatarUploader'
-import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
+import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
 import TabNavigation from '~/components/_new/generic/TabNavigation/TabNavigation'
@@ -206,7 +206,7 @@ export default {
     HcCountTo,
     HcBadges,
     HcEmpty,
-    UserAvatar,
+    ProfileAvatar,
     ContentMenu,
     AvatarUploader,
     MasonryGrid,

webapp/pages/settings/blocked-users.vue

@@ -28,7 +28,7 @@
               params: { id: scope.row.id, slug: scope.row.slug },
             }"
           >
-            <user-avatar :user="scope.row" size="small" />
+            <profile-avatar :user="scope.row" size="small" />
           </nuxt-link>
         </template>
         <template #name="scope">
@@ -74,11 +74,11 @@
 
 <script>
 import { blockedUsers, unblockUser } from '~/graphql/settings/BlockedUsers'
-import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
+import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
 
 export default {
   components: {
-    UserAvatar,
+    ProfileAvatar,
   },
   data() {
     return {

webapp/pages/settings/muted-users.vue

@@ -25,7 +25,7 @@
               params: { id: scope.row.id, slug: scope.row.slug },
             }"
           >
-            <user-avatar :user="scope.row" size="small" />
+            <profile-avatar :user="scope.row" size="small" />
           </nuxt-link>
         </template>
         <template #name="scope">
@@ -71,11 +71,11 @@
 
 <script>
 import { mutedUsers, unmuteUser } from '~/graphql/settings/MutedUsers'
-import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
+import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
 
 export default {
   components: {
-    UserAvatar,
+    ProfileAvatar,
   },
   data() {
     return {