Merge pull request #11840 from nextcloud/bugfix/noid/bring-back-dark-…

…avatars fix(conversations): Make avatars dark in dark mode again
nextcloud · Mar 18, 2024 · 43c70c0 · 43c70c0
2 parents 9f6332a + 7255d4f
commit 43c70c0
Show file tree

Hide file tree

Showing 12 changed files with 39 additions and 23 deletions.
diff --git a/img/icon-conversation-federation-dark.svg b/img/icon-conversation-federation-dark.svg
diff --git a/img/icon-conversation-group-dark.svg b/img/icon-conversation-group-dark.svg
diff --git a/img/icon-conversation-mail-dark.svg b/img/icon-conversation-mail-dark.svg
diff --git a/img/icon-conversation-password-dark.svg b/img/icon-conversation-password-dark.svg
diff --git a/img/icon-conversation-phone-dark.svg b/img/icon-conversation-phone-dark.svg
diff --git a/img/icon-conversation-public-dark.svg b/img/icon-conversation-public-dark.svg
diff --git a/img/icon-conversation-text-dark.svg b/img/icon-conversation-text-dark.svg
diff --git a/img/icon-conversation-user-dark.svg b/img/icon-conversation-user-dark.svg
diff --git a/lib/Service/AvatarService.php b/lib/Service/AvatarService.php
@@ -43,7 +43,7 @@
 
 class AvatarService {
 	public const THEMING_PLACEHOLDER = '{{THEMING}}';
-	public const THEMING_DARK_BACKGROUND = '999999';
+	public const THEMING_DARK_BACKGROUND = '3B3B3B';
 	public const THEMING_BRIGHT_BACKGROUND = '6B6B6B';
 
 	public function __construct(

diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
@@ -22,7 +22,7 @@
 <template>
 	<div class="conversation-icon"
 		:style="{'--icon-size': `${size}px`}"
-		:class="{'offline': offline}">
+		:class="[themeClass, {'offline': offline}]">
 		<template v-if="!isOneToOne">
 			<div v-if="iconClass"
 				class="avatar icon"
@@ -181,8 +181,7 @@ export default {
 				// Also used in new conversation / invitation handler dialog
 				const isFed = this.item.remoteServer && 'icon-conversation-federation'
 				const type = this.item.type === CONVERSATION.TYPE.PUBLIC ? 'icon-conversation-public' : 'icon-conversation-group'
-				const theme = isDarkTheme ? 'dark' : 'bright'
-				return `${isFed || type} icon--dummy icon--${theme}`
+				return `${isFed || type} icon--dummy`
 			}
 
 			if (!supportsAvatar) {
@@ -220,6 +219,10 @@ export default {
 			return undefined
 		},
 
+		themeClass() {
+			return `conversation-icon--${isDarkTheme ? 'dark' : 'bright'}`
+		},
+
 		isOneToOne() {
 			return this.item.type === CONVERSATION.TYPE.ONE_TO_ONE
 		},
@@ -267,6 +270,10 @@ export default {
 		}
 	}
 
+	&--dark .avatar.icon {
+		background-color: #3B3B3B;
+	}
+
 	&__type {
 		position: absolute;
 		right: -4px;

diff --git a/src/components/ConversationSettings/ConversationAvatarEditor.vue b/src/components/ConversationSettings/ConversationAvatarEditor.vue
@@ -26,7 +26,7 @@
 		<div class="avatar__container">
 			<div v-if="!showCropper" class="avatar__preview">
 				<div v-if="emojiAvatar"
-					class="avatar__preview-emoji"
+					:class="['avatar__preview-emoji', themeClass]"
 					:style="{'background-color': backgroundColor}">
 					{{ emojiAvatar }}
 				</div>
@@ -141,6 +141,7 @@ import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js'
 import ConversationIcon from '../ConversationIcon.vue'
 
 import { AVATAR } from '../../constants.js'
+import { isDarkTheme } from '../../utils/isDarkTheme.js'
 
 // eslint-disable-next-line n/no-extraneous-import
 import 'cropperjs/dist/cropper.css'
@@ -228,6 +229,10 @@ export default {
 			return this.conversation.isCustomAvatar
 		},
 
+		themeClass() {
+			return `avatar__preview-emoji--${isDarkTheme ? 'dark' : 'bright'}`
+		},
+
 		showControls() {
 			return this.editable && (this.showCropper || this.emojiAvatar)
 		},
@@ -434,6 +439,10 @@ section {
 			background-color: var(--color-text-maxcontrast);
 			font-size: 575%;
 			line-height: 100%;
+
+			&--dark {
+				background-color: #3B3B3B;
+			}
 		}
 	}
 

diff --git a/tests/integration/features/conversation-1/avatar.feature b/tests/integration/features/conversation-1/avatar.feature
@@ -150,7 +150,7 @@ Feature: conversation/avatar
     Then user "participant1" sets emoji "🍏" with color "null" as avatar of room "room" with 200 (v1)
     And the avatar svg of room "room" contains the string "🍏"
     And the avatar svg of room "room" contains the string "6B6B6B"
-    And the avatar svg of room "room" not contains the string "999999"
+    And the avatar svg of room "room" not contains the string "3B3B3B"
     And the dark avatar svg of room "room" contains the string "🍏"
     And the dark avatar svg of room "room" not contains the string "6B6B6B"
-    And the dark avatar svg of room "room" contains the string "999999"
+    And the dark avatar svg of room "room" contains the string "3B3B3B"