Team member preview refactoring

resources/js/components/Teams/Components/TeamList.vue

@@ -6,8 +6,12 @@
 			</div>
 			<div class="member-preview">
 				<div class="avatar">
-					<img v-if="entry.avatar" :src="entry.avatar" alt="avatar">
-					<TypedAvatar v-else :size="38" :letter="entry.email.substr(0, 1)" :color="entry.color"/>
+					<MemberAvatar
+						class="mr-3 ml-2"
+						:is-border="true"
+						:size="44"
+						:member="$mapIntoMemberResource(entry)"
+					/>
 				</div>
 				<div v-if="entry.type === 'member'" class="info">
 					<b class="title">
@@ -35,7 +39,7 @@
 
 <script>
 	import PermissionToggleButton from "./PermissionToggleButton"
-	import TypedAvatar from "../../Others/TypedAvatar"
+	import MemberAvatar from "../../FilesView/MemberAvatar";
 	import {XIcon} from 'vue-feather-icons'
 	import {mapGetters} from "vuex";
 
@@ -51,7 +55,7 @@
 		},
 		components: {
 			PermissionToggleButton,
-			TypedAvatar,
+			MemberAvatar,
 			XIcon,
 		},
 		data() {
@@ -107,18 +111,6 @@
 			display: flex;
 			align-items: center;
 
-			.avatar {
-				padding: 0 12px;
-
-				img {
-					width: 38px;
-					height: 38px;
-					border-radius: 8px;
-					object-fit: cover;
-					display: block;
-				}
-			}
-
 			.info {
 
 				.title {

resources/js/components/Teams/Components/TeamMembersPreview.vue

@@ -5,15 +5,15 @@
 		</span>
 		<div class="members">
 			<div v-for="member in members" :key="member.data.id" :title="member.data.attributes.email" class="member-preview">
-				<img v-if="member.data.attributes.avatar" :src="member.data.attributes.avatar" class="member" alt="avatar">
-				<TypedAvatar v-else :size="avatarSize" :letter="member.data.attributes.email.substr(0, 1)" :color="member.data.attributes.color" />
+				<MemberAvatar :is-border="true" :size="34" :member="member" />
 			</div>
 		</div>
 	</div>
 </template>
 
 <script>
-	import TypedAvatar from "../../Others/TypedAvatar";
+	import MemberAvatar from "../../FilesView/MemberAvatar"
+
 	export default {
 		name: "TeamMembersPreview",
 		props: [
@@ -22,7 +22,7 @@
 			'avatarSize'
 		],
 		components: {
-			TypedAvatar,
+			MemberAvatar,
 		},
 		computed: {
 			membersCount() {