diff --git a/css/icons.css b/css/icons.css index d45ce208eed..4fe49391a4f 100644 --- a/css/icons.css +++ b/css/icons.css @@ -1,15 +1,6 @@ -/* Mention bubbles in the chat input and messages */ -.avatar-class-icon.icon-group-forced-white { - background-image: url(../img/icon-contacts-white.svg); -} - -.avatar-class-icon.icon-user-forced-white { - background-image: url(../img/icon-contacts-white.svg); -} - .app-talk .icon-user, -.talk-modal .icon-user, -.sidebar-callview .icon-user, +.modal-mask .icon-user, +.talk-sidebar-callview .icon-user, #talk-panel .icon-user, #talk-sidebar .icon-user, #call-container .icon-user, @@ -18,8 +9,8 @@ } .app-talk .icon-public, -.talk-modal .icon-public, -.sidebar-callview .icon-public, +.modal-mask .icon-public, +.talk-sidebar-callview .icon-public, #talk-panel .icon-public, #talk-sidebar .icon-public, #call-container .icon-public, @@ -28,8 +19,8 @@ } .app-talk .icon-contacts, -.talk-modal .icon-contacts, -.sidebar-callview .icon-contacts, +.modal-mask .icon-contacts, +.talk-sidebar-callview .icon-contacts, #talk-panel .icon-contacts, #talk-sidebar .icon-contacts, #call-container .icon-contacts, @@ -38,8 +29,8 @@ } .app-talk .icon-phone, -.talk-modal .icon-phone, -.sidebar-callview .icon-phone, +.modal-mask .icon-phone, +.talk-sidebar-callview .icon-phone, #talk-panel .icon-phone, #talk-sidebar .icon-phone, #call-container .icon-phone, @@ -48,8 +39,8 @@ } .app-talk .icon-password, -.talk-modal .icon-password, -.sidebar-callview .icon-password, +.modal-mask .icon-password, +.talk-sidebar-callview .icon-password, #talk-panel .icon-password, #talk-sidebar .icon-password, #call-container .icon-password, @@ -58,8 +49,8 @@ } .app-talk .icon-file, -.talk-modal .icon-file, -.sidebar-callview .icon-file, +.modal-mask .icon-file, +.talk-sidebar-callview .icon-file, #talk-panel .icon-file, #talk-sidebar .icon-file, #call-container .icon-file, @@ -68,8 +59,8 @@ } .app-talk .icon-mail, -.talk-modal .icon-mail, -.sidebar-callview .icon-mail, +.modal-mask .icon-mail, +.talk-sidebar-callview .icon-mail, #talk-panel .icon-mail, #talk-sidebar .icon-mail, #call-container .icon-mail, @@ -78,8 +69,8 @@ } .app-talk .icon-team, -.talk-modal .icon-team, -.sidebar-callview .icon-team, +.modal-mask .icon-team, +.talk-sidebar-callview .icon-team, #talk-panel .icon-team, #talk-sidebar .icon-team, #call-container .icon-team, @@ -88,8 +79,8 @@ } .app-talk .icon-changelog, -.talk-modal .icon-changelog, -.sidebar-callview .icon-changelog, +.modal-mask .icon-changelog, +.talk-sidebar-callview .icon-changelog, #talk-panel .icon-changelog, #talk-sidebar .icon-changelog, #call-container .icon-changelog, @@ -101,51 +92,50 @@ * .app-Talk rules above. * "forced-white" needs to be included in the class name as the Avatar does * not accept several classes. */ -.user-bubble__avatar .avatar-class-icon.icon-group-forced-white, -.tribute-container .icon-group-forced-white { - background-color: var(--color-text-maxcontrast-default); - background-image: url(../img/icon-contacts-white.svg); - background-size: 75%; +.user-bubble__avatar .icon-group-forced-white, +.user-bubble__avatar .icon-user-forced-white, +.autocomplete-result .icon-group-forced-white, +.autocomplete-result .icon-user-forced-white, +.mention-bubble .icon-group-forced-white, +.mention-bubble .icon-user-forced-white { + background-color: var(--color-text-maxcontrast-default) !important; } -.user-bubble__avatar .avatar-class-icon.icon-user-forced-white, -.tribute-container .icon-user-forced-white { - background-color: var(--color-text-maxcontrast-default); - background-image: url(../img/icon-user-white.svg); - background-size: 75%; -} - -/* Needed to use white color also in dark mode. */ -.app-files .app-sidebar__close.forced-white { - color: #ffffff; +body[data-theme-dark] .icon-group-forced-white, +body[data-theme-dark] .icon-user-forced-white { + background-color: #3B3B3B !important; } -.dashboard-talk-icon { - background-image: url(../img/app-dark.svg); - filter: var(--background-invert-if-dark); -} - -/* To be used in new conversation / invitation handler dialogs */ -.conversation-icon .icon-conversation-group.icon--dark { - background-image: url('../img/icon-conversation-group-dark.svg') +.user-bubble__avatar .icon-group-forced-white, +.user-bubble__avatar .icon-user-forced-white { + background-size: 75%; } -.conversation-icon .icon-conversation-group.icon--bright { - background-image: url('../img/icon-conversation-group-bright.svg') +.autocomplete-result .icon-group-forced-white.autocomplete-result__icon--, +.autocomplete-result .icon-user-forced-white.autocomplete-result__icon--, +.mention-bubble .icon-group-forced-white.mention-bubble__icon--, +.mention-bubble .icon-user-forced-white.mention-bubble__icon-- { + background-size: 50% !important; } -.conversation-icon .icon-conversation-public.icon--dark { - background-image: url('../img/icon-conversation-public-dark.svg') +.user-bubble__avatar .icon-user-forced-white, +.autocomplete-result .icon-user-forced-white.autocomplete-result__icon--, +.mention-bubble .icon-user-forced-white.mention-bubble__icon-- { + background-image: url(../img/icon-user-white.svg); } -.conversation-icon .icon-conversation-public.icon--bright { - background-image: url('../img/icon-conversation-public-bright.svg') +.user-bubble__avatar .icon-group-forced-white, +.autocomplete-result .icon-group-forced-white.autocomplete-result__icon--, +.mention-bubble .icon-group-forced-white.mention-bubble__icon-- { + background-image: url(../img/icon-contacts-white.svg); } -.conversation-icon .icon-conversation-federation.icon--dark { - background-image: url('../img/icon-conversation-federation-dark.svg') +/* Needed to use white color also in dark mode. */ +.app-files .app-sidebar__close.forced-white { + color: #ffffff; } -.conversation-icon .icon-conversation-federation.icon--bright { - background-image: url('../img/icon-conversation-federation-bright.svg') +.dashboard-talk-icon { + background-image: url(../img/app-dark.svg); + filter: var(--background-invert-if-dark); } diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue index bb5d399ebfa..ea1e12c9d35 100644 --- a/src/components/AvatarWrapper/AvatarWrapper.vue +++ b/src/components/AvatarWrapper/AvatarWrapper.vue @@ -156,11 +156,15 @@ export default { if (this.source === ATTENDEE.ACTOR_TYPE.BOTS && this.id === ATTENDEE.CHANGELOG_BOT_ID) { return 'icon-changelog' } - // source: groups, circles + if (this.source === ATTENDEE.ACTOR_TYPE.CIRCLES) { + return 'icon-team' + } + // source: groups return 'icon-contacts' }, avatarClass() { return { + 'avatar-wrapper--dark': isDarkTheme, 'avatar-wrapper--offline': this.offline, 'avatar-wrapper--condensed': this.condensed, 'avatar-wrapper--highlighted': this.highlighted, @@ -211,6 +215,10 @@ export default { width: var(--avatar-size); border-radius: var(--avatar-size); + &--dark .avatar { + background-color: #3B3B3B !important; + } + .avatar { position: sticky; top: 0; @@ -219,9 +227,9 @@ export default { line-height: var(--avatar-size); font-size: calc(var(--avatar-size) / 2); border-radius: 50%; + background-color: var(--color-text-maxcontrast-default); &.icon { - background-color: var(--color-background-darker); background-size: calc(var(--avatar-size) / 2); &.icon-changelog { background-size: cover !important; @@ -235,7 +243,6 @@ export default { &.guest { color: #ffffff; - background-color: #b9b9b9; padding: 0; display: block; text-align: center; diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue index 47534661570..7745d8d2460 100644 --- a/src/components/ConversationIcon.vue +++ b/src/components/ConversationIcon.vue @@ -178,10 +178,7 @@ export default { iconClass() { if (this.item.isDummyConversation) { // Prevent a 404 when trying to load an avatar before the conversation data is actually loaded - // 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' - return `${isFed || type} icon--dummy` + return this.item.type === CONVERSATION.TYPE.PUBLIC ? 'icon-public' : 'icon-contacts' } if (!supportsAvatar) { @@ -268,10 +265,6 @@ export default { background-size: calc(var(--icon-size) / 2); background-color: var(--color-text-maxcontrast-default); - &--dummy { - background-size: var(--icon-size); - } - &.icon-changelog { background-size: cover !important; } diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue index a3c7a21ccab..011dcd8e6a2 100644 --- a/src/components/MediaSettings/MediaSettings.vue +++ b/src/components/MediaSettings/MediaSettings.vue @@ -21,7 +21,6 @@