Update nc vue components to v7

Signed-off-by: Carl Schwan <carl@carlschwan.eu>

15 files changed, 167 insertions, 159 deletions

diff --git a/src/App.vue b/src/App.vue
index b9f4a5b3..cd876fde 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,14 +1,14 @@
 <template>
-	<Content v-if="!serverData.setup" app-name="social" :class="{public: serverData.public}">
-		<AppNavigation v-if="!serverData.public">
-			<AppNavigationItem v-for="item in menu.items" :key="item.key" :to="item.to"
+	<NcContent v-if="!serverData.setup" app-name="social" :class="{public: serverData.public}">
+		<NcAppNavigation v-if="!serverData.public">
+			<NcAppNavigationItem v-for="item in menu.items" :key="item.key" :to="item.to"
 				:title="item.title" :exact="true">
 				<template #icon>
 					<component :is="item.icon" />
 				</template>
-			</AppNavigationItem>
-		</AppNavigation>
-		<AppContent>
+			</NcAppNavigationItem>
+		</NcAppNavigation>
+		<NcAppContent>
 			<div v-if="serverData.isAdmin && !serverData.checks.success" class="setup social__wrapper">
 				<h3 v-if="!serverData.checks.checks.wellknown">
 					{{ t('social', '.well-known/webfinger isn\'t properly set up!') }}
@@ -24,10 +24,10 @@
 			</div>
 			<Search v-if="searchTerm !== ''" :term="searchTerm" />
 			<router-view v-if="searchTerm === ''" :key="$route.fullPath" />
-		</AppContent>
-	</Content>
-	<Content v-else app-name="social">
-		<AppContent v-if="serverData.isAdmin" class="setup">
+		</NcAppContent>
+	</NcContent>
+	<NcContent v-else app-name="social">
+		<NcAppContent v-if="serverData.isAdmin" class="setup">
 			<h2>{{ t('social', 'Social app setup') }}</h2>
 			<p>{{ t('social', 'ActivityPub requires a fixed URL to make entries unique. Note that this cannot be changed later without resetting the Social app.') }}</p>
 			<form @submit.prevent="setCloudAddress">
@@ -55,47 +55,18 @@
 					</p>
 				</template>
 			</form>
-		</AppContent>
-		<AppContent v-else class="setup">
+		</NcAppContent>
+		<NcAppContent v-else class="setup">
 			<p>{{ t('social', 'The Social app needs to be set up by the server administrator.') }}</p>
-		</AppContent>
-	</Content>
+		</NcAppContent>
+	</NcContent>
 </template>
 
-<style scoped>
-	#app-content-vue .social__wrapper {
-		padding: 15px;
-		max-width: 630px;
-		margin: auto;
-	}
-
-	.setup {
-		margin: 0 auto !important;
-		padding: 15px;
-		max-width: 630px;
-	}
-
-	.setup input[type=url] {
-		width: 300px;
-		max-width: 100%;
-	}
-
-	#social-spacer a:hover,
-	#social-spacer a:focus {
-		border: none !important;
-	}
-
-	a.external_link {
-		text-decoration: underline;
-	}
-
-</style>
-
 <script>
-import Content from '@nextcloud/vue/dist/Components/Content'
-import AppContent from '@nextcloud/vue/dist/Components/AppContent'
-import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
+import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
+import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
+import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
+import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
 
 import Home from 'vue-material-design-icons/Home.vue'
 import CommentAccount from 'vue-material-design-icons/CommentAccount.vue'
@@ -107,17 +78,17 @@ import Earth from 'vue-material-design-icons/Earth.vue'
 
 import axios from '@nextcloud/axios'
 import Search from './components/Search.vue'
-import currentuserMixin from './mixins/currentUserMixin'
+import currentuserMixin from './mixins/currentUserMixin.js'
 import { loadState } from '@nextcloud/initial-state'
 import { generateUrl } from '@nextcloud/router'
 
 export default {
 	name: 'App',
 	components: {
-		Content,
-		AppContent,
-		AppNavigation,
-		AppNavigationItem,
+		NcContent,
+		NcAppContent,
+		NcAppNavigation,
+		NcAppNavigationItem,
 		Search,
 	},
 	mixins: [currentuserMixin],
@@ -258,3 +229,32 @@ export default {
 	}
 }
 </script>
+
+<style scoped>
+	#app-content-vue .social__wrapper {
+		padding: 15px;
+		max-width: 630px;
+		margin: auto;
+	}
+
+	.setup {
+		margin: 0 auto !important;
+		padding: 15px;
+		max-width: 630px;
+	}
+
+	.setup input[type=url] {
+		width: 300px;
+		max-width: 100%;
+	}
+
+	#social-spacer a:hover,
+	#social-spacer a:focus {
+		border: none !important;
+	}
+
+	a.external_link {
+		text-decoration: underline;
+	}
+
+</style>
diff --git a/src/components/ActorAvatar.vue b/src/components/ActorAvatar.vue
index 769265b3..641bd105 100644
--- a/src/components/ActorAvatar.vue
+++ b/src/components/ActorAvatar.vue
@@ -21,20 +21,20 @@
   -->
 
 <template>
-	<avatar v-if="actor.local" :size="size" :user="actor.preferredUsername"
+	<NcAvatar v-if="actor.local" :size="size" :user="actor.preferredUsername"
 		:display-name="actor.account" :disable-tooltip="true" />
-	<avatar v-else :size="size" :url="avatarUrl"
+	<NcAvatar v-else :size="size" :url="avatarUrl"
 		:disable-tooltip="true" />
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import { generateUrl } from '@nextcloud/router'
 
 export default {
 	name: 'ActorAvatar',
 	components: {
-		Avatar
+		NcAvatar
 	},
 	props: {
 		actor: { type: Object, default: () => {} },
diff --git a/src/components/Composer/Composer.vue b/src/components/Composer/Composer.vue
index 7d5685b3..db07a13e 100644
--- a/src/components/Composer/Composer.vue
+++ b/src/components/Composer/Composer.vue
@@ -32,7 +32,7 @@
 			aria-hidden="true"
 			class="hidden-visually">
 		<div class="new-post-author">
-			<avatar :user="currentUser.uid" :display-name="currentUser.displayName" :disable-tooltip="true"
+			<NcAvatar :user="currentUser.uid" :display-name="currentUser.displayName" :disable-tooltip="true"
 				:size="32" />
 			<div class="post-author">
 				<span class="post-author-name">
@@ -65,14 +65,14 @@
 			<PreviewGrid :uploading="false" :uploadProgress="0.4" :miniatures="previewUrls" />
 
 			<div class="options">
-				<Button type="tertiary"
+				<NcButton type="tertiary"
 					@click.prevent="clickImportInput"
 					:aria-label="t('social', 'Add attachment')"
 					v-tooltip="t('social', 'Add attachment')">
 					<template #icon>
 						<FileUpload :size="22" decorative title="" />
 					</template>
-				</Button>
+				</NcButton>
 
 				<div class="new-post-form__emoji-picker">
 					<EmojiPicker ref="emojiPicker" :search="search" :close-on-select="false"
@@ -100,13 +100,13 @@
 				</div>
 
 				<div class="emptySpace" />
-				<Button :value="currentVisibilityPostLabel" :disabled="!canPost" type="primary"
+				<NcButton :value="currentVisibilityPostLabel" :disabled="!canPost" type="primary"
 					@click.prevent="createPost">
 					<template #icon>
 						<Send title="" :size="22" decorative />
 					</template>
 					<template>{{ postTo }}</template>
-				</button>
+				</NcButton>
 			</div>
 		</form>
 	</div>
@@ -114,33 +114,33 @@
 
 <script>
 
-import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline'
-import Send from 'vue-material-design-icons/Send'
-import FileUpload from 'vue-material-design-icons/FileUpload'
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
-import Button from '@nextcloud/vue/dist/Components/Button'
-import PopoverMenu from '@nextcloud/vue/dist/Components/PopoverMenu'
-import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker'
+import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue'
+import Send from 'vue-material-design-icons/Send.vue'
+import FileUpload from 'vue-material-design-icons/FileUpload.vue'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcPopoverMenu from '@nextcloud/vue/dist/Components/NcPopoverMenu.js'
+import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js'
 import VueTribute from 'vue-tribute'
 import he from 'he'
-import CurrentUserMixin from '../../mixins/currentUserMixin'
-import FocusOnCreate from '../../directives/focusOnCreate'
+import CurrentUserMixin from '../../mixins/currentUserMixin.js'
+import FocusOnCreate from '../../directives/focusOnCreate.js'
 import axios from '@nextcloud/axios'
 import ActorAvatar from '../ActorAvatar.vue'
 import { generateUrl } from '@nextcloud/router'
-import PreviewGrid from './PreviewGrid'
+import PreviewGrid from './PreviewGrid.vue'
 
 export default {
 	name: 'Composer',
 	components: {
-		PopoverMenu,
-		Avatar,
+		NcPopoverMenu,
+		NcAvatar,
+		NcActorAvatar,
+		NcEmojiPicker,
+		NcButton,
 		FileUpload,
-		ActorAvatar,
-		EmojiPicker,
 		VueTribute,
 		EmoticonOutline,
-		Button,
 		Send,
 		PreviewGrid,
 	},
diff --git a/src/components/Composer/PreviewGridItem.vue b/src/components/Composer/PreviewGridItem.vue
index 94233059..72c21e2d 100644
--- a/src/components/Composer/PreviewGridItem.vue
+++ b/src/components/Composer/PreviewGridItem.vue
@@ -2,51 +2,51 @@
 	<div class="preview-item-wrapper">
 		<div class="preview-item" :style="backgroundStyle">
 			<div class="preview-item__actions">
-				<Button type="tertiary-no-background" @click="$emit('delete', index)">
+				<NcButton type="tertiary-no-background" @click="$emit('delete', index)">
 					<template #icon>
 						<Close :size="16" fillColor="white" />
 					</template>
 					<span>{{ t('social', 'Delete') }}</span>
-				</Button>
-				<Button type="tertiary-no-background" @click="showModal">
+				</NcButton>
+				<NcButton type="tertiary-no-background" @click="showModal">
 					<template #icon>
 						<Edit :size="16" fillColor="white" />
 					</template>
 					<span>{{ t('social', 'Edit') }}</span>
-				</Button>
+				</NcButton>
 			</div>
 
 			<div class="description-warning" v-if="preview.description.length === 0">
 				{{ t('social', 'No description added') }}
 			</div>
 
-			<Modal v-if="modal" @close="closeModal" size="small">
+			<NcModal v-if="modal" @close="closeModal" size="small">
 				<div class="modal__content">
 					<label :for="`image-description-${index}`">
 						{{ t('social', 'Describe for the visually impaired') }}
 					</label>
 					<textarea :id="`image-description-${index}`" v-model="preview.description">
 					</textarea>
-					<Button type="primary" @click="closeModal">{{ t('social', 'Close') }}</Button>
+					<NcButton type="primary" @click="closeModal">{{ t('social', 'Close') }}</NcButton>
 				</div>
-			</Modal>
+			</NcModal>
 		</div>
 	</div>
 </template>
 
 <script>
-import Close from 'vue-material-design-icons/Close'
-import Edit from 'vue-material-design-icons/Pencil'
-import Button from '@nextcloud/vue/dist/Components/Button'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
+import Close from 'vue-material-design-icons/Close.vue'
+import Edit from 'vue-material-design-icons/Pencil.vue'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 
 export default {
 	name: 'PreviewGridItem',
 	components: {
 		Close,
 		Edit,
-		Button,
-		Modal,
+		NcButton,
+		NcModal,
 	},
 	data() {
 		return {
diff --git a/src/components/FollowButton.vue b/src/components/FollowButton.vue
index 73f6704c..4e513a4c 100644
--- a/src/components/FollowButton.vue
+++ b/src/components/FollowButton.vue
@@ -36,8 +36,8 @@
 </template>
 
 <script>
-import accountMixins from '../mixins/accountMixins'
-import currentUser from '../mixins/currentUserMixin'
+import accountMixins from '../mixins/accountMixins.js'
+import currentUser from '../mixins/currentUserMixin.js'
 
 export default {
 	name: 'FollowButton',
diff --git a/src/components/PostAttachment.vue b/src/components/PostAttachment.vue
index 67210b3e..c53e8053 100644
--- a/src/components/PostAttachment.vue
+++ b/src/components/PostAttachment.vue
@@ -3,26 +3,26 @@
 		<div v-for="(item, index) in attachments" :key="index">
 			<img :src="imageUrl(item)" @click="showModal(index)">
 		</div>
-		<modal v-show="modal" :has-previous="current > 0" :has-next="current < (attachments.length - 1)"
+		<NcModal v-show="modal" :has-previous="current > 0" :has-next="current < (attachments.length - 1)"
 			size="full" @close="closeModal" @previous="showPrevious"
 			@next="showNext">
 			<div class="modal__content">
 				<canvas ref="modalCanvas" />
 			</div>
-		</modal>
+		</NcModal>
 	</masonry>
 </template>
 
 <script>
 
-import serverData from '../mixins/serverData'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
+import serverData from '../mixins/serverData.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import { generateUrl } from '@nextcloud/router'
 
 export default {
 	name: 'PostAttachment',
 	components: {
-		Modal
+		NcModal
 	},
 	mixins: [
 		serverData
diff --git a/src/components/ProfileInfo.vue b/src/components/ProfileInfo.vue
index 39f7d707..88faf81f 100644
--- a/src/components/ProfileInfo.vue
+++ b/src/components/ProfileInfo.vue
@@ -22,9 +22,9 @@
 
 <template>
 	<div v-if="profileAccount && accountInfo" class="user-profile">
-		<avatar v-if="accountInfo.local" :user="localUid" :disable-tooltip="true"
+		<NcAvatar v-if="accountInfo.local" :user="localUid" :disable-tooltip="true"
 			:size="128" />
-		<avatar v-else :url="avatarUrl" :disable-tooltip="true"
+		<NcAvatar v-else :url="avatarUrl" :disable-tooltip="true"
 			:size="128" />
 		<h2>{{ displayName }}</h2>
 		<!-- TODO: we have no details, timeline and follower list for non-local accounts for now -->
@@ -52,16 +52,17 @@
 			</a>
 		</p>
 		<follow-button :account="accountInfo.account" :uid="uid" />
-		<button v-if="serverData.public" class="primary" @click="followRemote">
+		<NcButton v-if="serverData.public" class="primary" @click="followRemote">
 			{{ t('social', 'Follow') }}
-		</button>
+		</NcButton>
 	</div>
 </template>
+
 <style scoped>
 	.user-profile {
 		display: flex;
 		flex-wrap: wrap;
-    flex-direction: column;
+		flex-direction: column;
 		justify-content: space-between;
 		width: 100%;
 		text-align: center;
@@ -94,11 +95,12 @@
 	}
 </style>
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
-import accountMixins from '../mixins/accountMixins'
-import serverData from '../mixins/serverData'
-import currentUser from '../mixins/currentUserMixin'
-import follow from '../mixins/follow'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import accountMixins from '../mixins/accountMixins.js'
+import serverData from '../mixins/serverData.js'
+import currentUser from '../mixins/currentUserMixin.js'
+import follow from '../mixins/follow.js'
 import FollowButton from './FollowButton.vue'
 import { generateUrl } from '@nextcloud/router'
 
@@ -106,7 +108,8 @@ export default {
 	name: 'ProfileInfo',
 	components: {
 		FollowButton,
-		Avatar
+		NcAvatar,
+		NcButton,
 	},
 	mixins: [
 		accountMixins,
diff --git a/src/components/TimelineAvatar.vue b/src/components/TimelineAvatar.vue
index 70938266..0df4a43c 100644
--- a/src/components/TimelineAvatar.vue
+++ b/src/components/TimelineAvatar.vue
@@ -1,25 +1,25 @@
 <template>
 	<div v-if="item.actor_info" class="post-avatar">
-		<Avatar v-if="item.local"
+		<NcAvatar v-if="item.local"
 			class="messages__avatar__icon"
 			:show-user-status="false"
 			menu-position="left"
 			:user="userTest"
 			:display-name="item.actor_info.account"
 			:disable-tooltip="true" />
-		<Avatar v-else
+		<NcAvatar v-else
 			:url="avatarUrl"
 			:disable-tooltip="true" />
 	</div>
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 
 export default {
 	name: 'TimelineAvatar',
 	components: {
-		Avatar,
+		NcAvatar,
 	},
 	props: {
 		item: {
diff --git a/src/components/TimelineList.vue b/src/components/TimelineList.vue
index f2cd5483..4f0b3db4 100644
--- a/src/components/TimelineList.vue
+++ b/src/components/TimelineList.vue
@@ -58,7 +58,7 @@
 <script>
 import InfiniteLoading from 'vue-infinite-loading'
 import TimelineEntry from './TimelineEntry.vue'
-import CurrentUserMixin from './../mixins/currentUserMixin'
+import CurrentUserMixin from './../mixins/currentUserMixin.js'
 import EmptyContent from './EmptyContent.vue'
 import Logger from '../logger.js'
 
@@ -73,7 +73,7 @@ export default {
 	props: {
 		type: { type: String, default: () => 'home' }
 	},
-	data: function() {
+	data() {
 		return {
 			infoHidden: false,
 			state: [],
diff --git a/src/components/TimelinePost.vue b/src/components/TimelinePost.vue
index 764e8c02..9aa7c3c5 100644
--- a/src/components/TimelinePost.vue
+++ b/src/components/TimelinePost.vue
@@ -33,43 +33,43 @@
 			<post-attachment :attachments="item.attachment" />
 		</div>
 		<div v-if="this.$route.params.type !== 'notifications' && !serverData.public" class="post-actions">
-			<Button type="tertiary-no-background"
+			<NcButton type="tertiary-no-background"
 				v-tooltip="t('social', 'Reply')"
 				@click="reply">
 				<template #icon>
 					<Reply :size="20" />
 				</template>
-			</Button>
-			<Button type="tertiary-no-background"
+			</NcButton>
+			<NcButton type="tertiary-no-background"
 				v-tooltip="t('social', 'Boost')"
 				@click="boost">
 				<template #icon>
 					<Repeat :size="20" :fill-color="isBoosted ? 'blue' : 'black'" />
 				</template>
-			</Button>
-			<Button v-if="!isLiked"
+			</NcButton>
+			<NcButton v-if="!isLiked"
 				type="tertiary-no-background"
 				v-tooltip="t('social', 'Like')"
 				@click="like">
 				<template #icon>
 					<HeartOutline :size="20" />
 				</template>
-			</Button>
-			<Button v-if="isLiked"
+			</NcButton>
+			<NcButton v-if="isLiked"
 				type="tertiary-no-background"
 				v-tooltip="t('social', 'Undo Like')"
 				@click="like">
 				<template #icon>
 					<Heart :size="20" :fill-color="'var(--color-error)'" />
 				</template>
-			</Button>
-			<Actions>
-				<ActionButton v-if="item.actor_info.account === cloudId"
+			</NcButton>
+			<NcActions>
+				<NcActionButton v-if="item.actor_info.account === cloudId"
 					@click="remove()"
 					icon="icon-delete">
 					{{ t('social', 'Delete') }}
-				</ActionButton>
-			</Actions>
+				</NcActionButton>
+			</NcActions>
 		</div>
 	</div>
 </template>
@@ -80,9 +80,9 @@ import pluginMention from 'linkifyjs/plugins/mention'
 import 'linkifyjs/string'
 import currentUser from './../mixins/currentUserMixin'
 import PostAttachment from './PostAttachment.vue'
-import Button from '@nextcloud/vue/dist/Components/Button'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import Repeat from 'vue-material-design-icons/Repeat.vue'
 import Reply from 'vue-material-design-icons/Reply.vue'
 import Heart from 'vue-material-design-icons/Heart.vue'
diff --git a/src/components/UserEntry.vue b/src/components/UserEntry.vue
index a6feec6c..1342fb41 100644
--- a/src/components/UserEntry.vue
+++ b/src/components/UserEntry.vue
@@ -24,9 +24,9 @@
 	<div v-if="item" class="user-entry">
 		<div class="entry-content">
 			<div class="user-avatar">
-				<avatar v-if="item.local" :size="32" :user="item.preferredUsername"
+				<NcAvatar v-if="item.local" :size="32" :user="item.preferredUsername"
 					:disable-tooltip="true" />
-				<avatar v-else :url="avatarUrl" />
+				<NcAvatar v-else :url="avatarUrl" />
 			</div>
 			<div class="user-details">
 				<router-link v-if="!serverData.public" :to="{ name: 'profile', params: { account: item.local ? item.preferredUsername : item.account }}">
@@ -55,9 +55,9 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
-import follow from '../mixins/follow'
-import currentUser from '../mixins/currentUserMixin'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import follow from '../mixins/follow.js'
+import currentUser from '../mixins/currentUserMixin.js'
 import FollowButton from './FollowButton.vue'
 import { generateUrl } from '@nextcloud/router'
 
@@ -65,7 +65,7 @@ export default {
 	name: 'UserEntry',
 	components: {
 		FollowButton,
-		Avatar
+		NcAvatar,
 	},
 	mixins: [
 		follow,
diff --git a/src/views/OStatus.vue b/src/views/OStatus.vue
index 2ce96cff..28836bb1 100644
--- a/src/views/OStatus.vue
+++ b/src/views/OStatus.vue
@@ -7,7 +7,7 @@
 				{{ t('social', 'Please confirm that you want to follow this account:') }}
 			</p>
 
-			<avatar :url="avatarUrl" :disable-tooltip="true" :size="128" />
+			<NcAvatar :url="avatarUrl" :disable-tooltip="true" :size="128" />
 			<h2>{{ displayName }}</h2>
 			<form v-if="!isFollowing" @submit.prevent="follow">
 				<input type="submit" class="primary" value="Follow">
@@ -18,15 +18,15 @@
 			</p>
 
 			<div v-if="isFollowing">
-				<button @click="close">
+				<NcButton @click="close">
 					{{ t('social', 'Close') }}
-				</button>
+				</NcButton>
 			</div>
 		</div>
 		<!-- Some unauthenticated user wants to follow a local account -->
 		<div v-if="serverData.local">
 			<p>{{ t('social', 'You are going to follow:') }}</p>
-			<avatar :user="serverData.local" :disable-tooltip="true" :size="128" />
+			<NcAvatar :user="serverData.local" :disable-tooltip="true" :size="128" />
 			<h2>{{ displayName }}</h2>
 			<form @submit.prevent="followRemote">
 				<input v-model="remote" type="text" :placeholder="t('social', 'name@domain of your federation account')">
@@ -61,17 +61,17 @@
 </style>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import axios from '@nextcloud/axios'
-import accountMixins from '../mixins/accountMixins'
-import currentuserMixin from '../mixins/currentUserMixin'
+import accountMixins from '../mixins/accountMixins.js'
+import currentuserMixin from '../mixins/currentUserMixin.js'
 import { loadState } from '@nextcloud/initial-state'
 import { generateUrl } from '@nextcloud/router'
 
 export default {
 	name: 'App',
 	components: {
-		Avatar
+		NcAvatar,
 	},
 	mixins: [
 		accountMixins,
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index cbabbf93..5cedd80f 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -25,7 +25,15 @@
 		<profile-info v-if="accountLoaded && accountInfo" :uid="uid" />
 		<!-- TODO: we have no details, timeline and follower list for non-local accounts for now -->
 		<router-view v-if="accountLoaded && accountInfo && accountInfo.local" name="details" />
-		<empty-content v-if="accountLoaded && !accountInfo" :item="emptyContentData" />
+		<NcEmptyContent v-if="accountLoaded && !accountInfo"
+			:title="t('social', 'User not found')"
+			:description="t('social', 'Sorry, we could not find the account of {userId}', { userId: this.uid })">
+			<template #icon>
+				<img :src="emptyContentImage"
+					class="icon-illustration"
+					alt="">
+			</template>
+		</NcEmptyContent>
 	</div>
 </template>
 
@@ -39,14 +47,15 @@
 
 <script>
 import ProfileInfo from './../components/ProfileInfo.vue'
-import EmptyContent from '../components/EmptyContent.vue'
-import accountMixins from '../mixins/accountMixins'
-import serverData from '../mixins/serverData'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import accountMixins from '../mixins/accountMixins.js'
+import serverData from '../mixins/serverData.js'
+import { generateFilePath } from '@nextcloud/router'
 
 export default {
 	name: 'Profile',
 	components: {
-		EmptyContent,
+		NcEmptyContent,
 		ProfileInfo
 	},
 	mixins: [
@@ -63,13 +72,9 @@ export default {
 		timeline: function() {
 			return this.$store.getters.getTimeline
 		},
-		emptyContentData() {
-			return {
-				image: 'img/undraw/profile.svg',
-				title: t('social', 'User not found'),
-				description: t('social', 'Sorry, we could not find the account of {userId}', { userId: this.uid })
-			}
-		}
+		emptyContentImage() {
+			return generateFilePath('social', 'img', 'undraw/profile.svg')
+		},
 	},
 	// Start fetching account information before mounting the component
 	beforeMount() {
diff --git a/src/views/Timeline.vue b/src/views/Timeline.vue
index d06599fb..95828b63 100644
--- a/src/views/Timeline.vue
+++ b/src/views/Timeline.vue
@@ -93,8 +93,8 @@
 
 <script>
 import Composer from './../components/Composer/Composer.vue'
-import CurrentUserMixin from './../mixins/currentUserMixin'
-import follow from './../mixins/follow'
+import CurrentUserMixin from './../mixins/currentUserMixin.js'
+import follow from './../mixins/follow.js'
 import TimelineList from './../components/TimelineList.vue'
 
 export default {
diff --git a/src/views/TimelineSinglePost.vue b/src/views/TimelineSinglePost.vue
index c62fad09..f2b2c383 100644
--- a/src/views/TimelineSinglePost.vue
+++ b/src/views/TimelineSinglePost.vue
@@ -25,9 +25,9 @@ import Composer from '../com