Avatars in conversation list sidebar have gray hairline

[bentuna]

Steps to reproduce

1. Open talk and look at an avatar of a group conversation in the left sidebar.
2. See the dark gray hairline around the avatar image.

Expected behaviour

• There should be no hairline.
• Also, there could be more contrast on light backgrounds, so adding a white Border to the avatars would solve the problem.
• Also, it makes little sense to display a dark border around the user status when using dark mode, when in the top menu the icon color is determined by the custom background and not by light or dark mode.

Talk app

Talk app version: 19.0.9

Screenshots

	before	after
light
dark

	before	after
light
dark

CSS

/* Talk avatars */
.conversation-icon .avatar.icon { background-color: var(--color-main-background) !important }
.avatar, .conversation-icon .avatardiv.conversation-icon__avatar:not(.avatardiv--unknown), .button-vue__wrapper .button-vue__icon .avatardiv.user-menu__avatar:not(.avatardiv--unknown) { border: 3px solid var(--color-main-background) !important; background-color: var(--color-main-background) !important}
.avatardiv .avatardiv__user-status { border: 2px solid var(--color-main-background) !important; background-color: var(--color-main-background) !important}
/* Top menu avatar */
.user-menu .button-vue__wrapper .button-vue__icon .avatardiv.user-menu__avatar:not(.avatardiv--unknown) { border: 3px solid var(--color-primary-text) !important; background-color: var(--color-primary-text) !important}
.user-menu .button-vue__icon .avatardiv .avatardiv__user-status { border: 2px solid var(--color-primary-text) !important; background-color: var(--color-primary-text) !important}

[Antreesy]

hairline is fixable, as we have this background as a fallback for non-loaded images.

Regarding the contrast border, I'd involve @nextcloud/designers to discuss that. Not sure that's aligned with the general idea to make the interface more light-weighted

[marcoambrosini]

Agree that the gray line should go, but I wouldn't introduce a border to the avatars and conversations

[nickvergessen]

@Antreesy is the grey from UI or the backend?

[Antreesy]

https://github.com/nextcloud/spreed/blob/f67e2ffd417f6e7bf1aa5d8fc7ce062747d97194/src/components/ConversationIcon.vue#L253

[nickvergessen]

Okay, so front-end