Merge remote-tracking branch 'origin/fix-canvas-images' into profile-modal

components/Avatar.vue

@@ -3,8 +3,10 @@
 		class="display-avatar"
 		:src="displayAvatar"
 		:alt="displayName" />
-	<Icon v-else
-		name="lucide:user"
+	<DefaultIcon v-else
+		class="display-avatar"
+		:name="displayName"
+		:seed="user.uuid"
 		:alt="displayName" />
 </template>
 
@@ -19,26 +21,17 @@ const props = defineProps<{
 }>();
 
 const displayName = getDisplayName(props.profile)
+let user: UserResponse
 let displayAvatar: string | null
 
-
 if ("username" in props.profile) {
 	// assume it's a UserResponse
 	displayAvatar = props.profile.avatar
-	if (!displayAvatar) {
-		if (!isCanvasBlocked()) {
-			displayAvatar = generateDefaultIcon(displayName, props.profile.uuid)
-		}
-	}
-
+	user = props.profile
 } else {
 	// assume it's a GuildMemberResponse
 	displayAvatar = props.profile.user.avatar
-	if (!displayAvatar) {
-		if (!isCanvasBlocked()) {
-			displayAvatar = generateDefaultIcon(displayName, props.profile.user_uuid)
-		}
-	}
+	user = props.profile.user
 }
 
 </script>

components/DefaultIcon.vue

@@ -0,0 +1,48 @@
+<template>
+  <div :style="`background-color: ${generateIrcColor(seed, 50)}`"
+	class="default-icon">
+		<span class="default-icon-text">
+			{{ previewName }}
+		</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+const props = defineProps<{
+	seed: string,
+	name: string	
+}>();
+
+let previewName = "";
+if (props.name.length > 3) {
+	let guildName: string[] = props.name.split(' ')
+	for (let i = 0; i < 3; i ++) {
+		if (guildName.length > i) {
+			previewName += guildName[i].charAt(0)
+		} else {
+			break
+		}
+	}
+} else {
+	previewName = props.name
+}
+
+</script>
+
+<style scoped>
+.default-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.default-icon-text {
+	/* helps centre the icon, yes, this is NOT perfect */
+	margin-top: -0.15em;
+
+	font-weight: bold;
+
+	color: var(--secondary-text-color)
+}
+</style>

components/Guild/MemberEntry.vue

@@ -32,4 +32,11 @@ function hideModalPopup() {
 .member-item {
     position: relative;
 }
+
+.member-avatar {
+    min-height: 2.3em;
+	max-height: 2.3em;
+	min-width: 2.3em;
+	max-width: 2.3em;
+}
 </style>

components/Message.vue

@@ -228,7 +228,10 @@ function getDayDifference(date1: Date, date2: Date) {
 }
 
 .message-author-avatar {
-	width: 100%;
+	min-height: 2em;
+	max-height: 2em;
+	min-width: 2em;
+	max-width: 2em;
 }
 
 .left-column {

components/User/UserEntry.vue

@@ -38,7 +38,7 @@ const props = defineProps<{
 .user-avatar {
     min-width: 2.3em;
     max-width: 2.3em;
-    min-width: 2.3em;
+    min-height: 2.3em;
     max-height: 2.3em;
 }