diff --git a/src/components/AvatarWrapper/AvatarWrapper.spec.js b/src/components/AvatarWrapper/AvatarWrapper.spec.js index b7090f25ea4..cf4f6c5702b 100644 --- a/src/components/AvatarWrapper/AvatarWrapper.spec.js +++ b/src/components/AvatarWrapper/AvatarWrapper.spec.js @@ -12,6 +12,7 @@ import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js' import AvatarWrapper from './AvatarWrapper.vue' +import { AVATAR } from '../../constants.js' import storeConfig from '../../store/storeConfig.js' describe('AvatarWrapper.vue', () => { @@ -39,7 +40,7 @@ describe('AvatarWrapper.vue', () => { const avatar = wrapper.findComponent(NcAvatar) expect(avatar.exists()).toBeTruthy() - expect(avatar.props('size')).toBe(44) + expect(avatar.props('size')).toBe(AVATAR.SIZE.DEFAULT) }) test('component does not render NcAvatar for non-users', () => { @@ -89,7 +90,7 @@ describe('AvatarWrapper.vue', () => { expect(avatar.props('showUserStatus')).toBe(true) expect(avatar.props('showUserStatusCompact')).toBe(false) expect(avatar.props('preloadedUserStatus')).toBe(PRELOADED_USER_STATUS) - expect(avatar.props('size')).toBe(44) + expect(avatar.props('size')).toBe(AVATAR.SIZE.DEFAULT) }) }) diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue index 5ea3f3cf708..82372abbc28 100644 --- a/src/components/ConversationIcon.vue +++ b/src/components/ConversationIcon.vue @@ -24,7 +24,7 @@ role="img" aria-hidden="false" :aria-label="conversationType.label"> - + @@ -265,11 +265,14 @@ export default { &__type { position: absolute; - right: -4px; - bottom: -4px; - height: 18px; - width: 18px; - border: 2px solid var(--color-main-background); + right: -2px; + bottom: -2px; + display: flex; + align-content: center; + justify-content: center; + height: clamp(14px, 40%, 18px); + width: clamp(14px, 40%, 18px); + border: 1px solid var(--color-main-background); background-color: var(--color-main-background); color: var(--color-main-text); border-radius: 50%; diff --git a/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue b/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue index 024c8ed06b3..5bb9e2e01fe 100644 --- a/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue +++ b/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue @@ -27,11 +27,11 @@ import LoadingPlaceholder from '../../UIShared/LoadingPlaceholder.vue' import 'vue-virtual-scroller/dist/vue-virtual-scroller.css' /* Consider: - * 45 = 2lh - 2 lines of text + * 36 = 2 * 1.2 * var(--default-font-size) - two lines of text * 8 = 2 * var(--default-grid-baseline) - item padding * 4 = var(--default-grid-baseline) - item outline (collapsed) */ -const CONVERSATION_ITEM_SIZE = 61 +const CONVERSATION_ITEM_SIZE = 48 export default { name: 'ConversationsListVirtual', diff --git a/src/components/LeftSidebar/InvitationHandler.vue b/src/components/LeftSidebar/InvitationHandler.vue index f0438d24574..07950cd040e 100644 --- a/src/components/LeftSidebar/InvitationHandler.vue +++ b/src/components/LeftSidebar/InvitationHandler.vue @@ -226,11 +226,14 @@ export default { padding-left: 4px; &__name { + line-height: 1.2; font-weight: bold; color: var(--color-main-text); } &__subname { + // Overwrite NcRichText styles + line-height: 1.2 !important; color: var(--color-text-maxcontrast); } } diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue index 99c2a1ac315..bec6a2a500d 100644 --- a/src/components/LeftSidebar/LeftSidebar.vue +++ b/src/components/LeftSidebar/LeftSidebar.vue @@ -180,7 +180,7 @@ data-nav-id="conversation_create_new" @click="createConversation(searchText)">