From 704373994828db3fbf92c9d82811a4dccc857f0a Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 13 Aug 2024 17:31:06 +0200
Subject: [PATCH 1/3] fix(avatar): decrease avatar size from 44px to 36px

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/AvatarWrapper/AvatarWrapper.spec.js | 5 +++--
 src/components/LeftSidebar/LeftSidebar.vue         | 5 +++--
 src/components/TopBar/TopBar.vue                   | 9 ++++-----
 src/components/UIShared/LoadingPlaceholder.vue     | 6 +++---
 src/constants.js                                   | 2 +-
 5 files changed, 14 insertions(+), 13 deletions(-)

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/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 99c2a1ac315..940aac2a50d 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)">
 					<template #icon>
-						<ChatPlus :size="44" />
+						<ChatPlus :size="AVATAR.SIZE.DEFAULT" />
 					</template>
 					<template #subname>
 						{{ t('spreed', 'New group conversation') }}
@@ -336,7 +336,7 @@ import SearchBox from '../UIShared/SearchBox.vue'
 import TransitionWrapper from '../UIShared/TransitionWrapper.vue'
 
 import { useArrowNavigation } from '../../composables/useArrowNavigation.js'
-import { ATTENDEE, CONVERSATION } from '../../constants.js'
+import { ATTENDEE, AVATAR, CONVERSATION } from '../../constants.js'
 import BrowserStorage from '../../services/BrowserStorage.js'
 import { getTalkConfig, hasTalkFeature } from '../../services/CapabilitiesManager.ts'
 import {
@@ -410,6 +410,7 @@ export default {
 		const isMobile = useIsMobile()
 
 		return {
+			AVATAR,
 			initializeNavigation,
 			resetNavigation,
 			leftSidebar,
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 256f0833ba2..4cab49eeb24 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -12,7 +12,7 @@
 			class="conversation-icon"
 			:offline="isPeerInactive"
 			:item="conversation"
-			:size="iconSize"
+			:size="AVATAR.SIZE.DEFAULT"
 			:disable-menu="false"
 			show-user-online-status
 			:hide-favorite="false"
@@ -129,7 +129,7 @@ import BreakoutRoomsEditor from '../BreakoutRoomsEditor/BreakoutRoomsEditor.vue'
 import ConversationIcon from '../ConversationIcon.vue'
 
 import { useGetParticipants } from '../../composables/useGetParticipants.js'
-import { CONVERSATION } from '../../constants.js'
+import { AVATAR, CONVERSATION } from '../../constants.js'
 import BrowserStorage from '../../services/BrowserStorage.js'
 import { getTalkConfig } from '../../services/CapabilitiesManager.ts'
 import { useChatExtrasStore } from '../../stores/chatExtras.js'
@@ -177,12 +177,11 @@ export default {
 
 	setup() {
 		useGetParticipants()
-		const iconSize = parseFloat(getComputedStyle(document.documentElement)
-			.getPropertyValue('--default-clickable-area'))
+
 		return {
+			AVATAR,
 			localCallParticipantModel,
 			localMediaModel,
-			iconSize,
 			chatExtrasStore: useChatExtrasStore(),
 			isMobile: useIsMobile(),
 		}
diff --git a/src/components/UIShared/LoadingPlaceholder.vue b/src/components/UIShared/LoadingPlaceholder.vue
index 23b4c672e49..a7ebe391681 100644
--- a/src/components/UIShared/LoadingPlaceholder.vue
+++ b/src/components/UIShared/LoadingPlaceholder.vue
@@ -79,9 +79,9 @@ export default {
 	&__avatar {
 		flex-shrink: 0;
 		&-circle {
-			height: 44px; // AVATAR.SIZE.DEFAULT
-			width: 44px;
-			border-radius: 44px;
+			height: 36px; // AVATAR.SIZE.DEFAULT
+			width: 36px;
+			border-radius: 36px;
 		}
 	}
 
diff --git a/src/constants.js b/src/constants.js
index 992c77bc3bb..0028e7f9b6e 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -273,7 +273,7 @@ export const AVATAR = {
 	SIZE: {
 		EXTRA_SMALL: 22,
 		SMALL: 32,
-		DEFAULT: 44,
+		DEFAULT: 36,
 		MEDIUM: 64,
 		LARGE: 128,
 		EXTRA_LARGE: 180,

From 8ce30cc2cbf0c3795a0c5ff814cb4305fecb1a92 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 13 Aug 2024 17:32:11 +0200
Subject: [PATCH 2/3] fix(NcListItem): decrease line height from 1.5 to 1.2

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../ConversationsList/ConversationsListVirtual.vue         | 4 ++--
 src/components/LeftSidebar/InvitationHandler.vue           | 3 +++
 src/components/LeftSidebar/LeftSidebar.vue                 | 2 ++
 src/components/RightSidebar/Participants/Participant.vue   | 1 +
 .../RightSidebar/Participants/ParticipantsListVirtual.vue  | 7 ++++++-
 5 files changed, 14 insertions(+), 3 deletions(-)

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 940aac2a50d..a30c3697eeb 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -1089,7 +1089,9 @@ export default {
 	padding: 0 !important;
 }
 
+// Overwrite NcListItem styles
 :deep(.list-item) {
+	line-height: 1.2;
 	overflow: hidden;
 	outline-offset: -2px;
 }
diff --git a/src/components/RightSidebar/Participants/Participant.vue b/src/components/RightSidebar/Participants/Participant.vue
index 56d2c0070e2..10985268108 100644
--- a/src/components/RightSidebar/Participants/Participant.vue
+++ b/src/components/RightSidebar/Participants/Participant.vue
@@ -1135,6 +1135,7 @@ export default {
 .participant {
 	// Overwrite NcListItem styles
 	:deep(.list-item) {
+		line-height: 1.2;
 		overflow: hidden;
 		outline-offset: -2px;
 		cursor: default;
diff --git a/src/components/RightSidebar/Participants/ParticipantsListVirtual.vue b/src/components/RightSidebar/Participants/ParticipantsListVirtual.vue
index 128a6cf7cf0..a2eea066ccd 100644
--- a/src/components/RightSidebar/Participants/ParticipantsListVirtual.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsListVirtual.vue
@@ -26,7 +26,12 @@ import LoadingPlaceholder from '../../UIShared/LoadingPlaceholder.vue'
 
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
-const PARTICIPANT_ITEM_SIZE = 64
+/* Consider:
+ * 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 PARTICIPANT_ITEM_SIZE = 48
 
 export default {
 	name: 'ParticipantsListVirtual',

From 2bae5527a7208017d2705c8b62d9645943880e79 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 15 Aug 2024 11:38:30 +0200
Subject: [PATCH 3/3] fix: adjust user status / conversation type size and
 position

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/ConversationIcon.vue               | 15 +++++++++------
 src/components/LeftSidebar/LeftSidebar.vue        | 10 ++++++++++
 .../RightSidebar/Participants/Participant.vue     | 10 ++++++++++
 3 files changed, 29 insertions(+), 6 deletions(-)

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">
-				<component :is="conversationType.icon" :size="14" />
+				<component :is="conversationType.icon" :size="12" />
 			</span>
 		</template>
 		<!-- NcAvatar doesn't fully support props update and works only for 1 user -->
@@ -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/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index a30c3697eeb..bec6a2a500d 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -1094,5 +1094,15 @@ export default {
 	line-height: 1.2;
 	overflow: hidden;
 	outline-offset: -2px;
+
+	// FIXME clean up after nextcloud/vue release
+	.avatardiv .avatardiv__user-status {
+		right: -2px !important;
+		bottom: -2px !important;
+		min-height: 14px !important;
+		min-width: 14px !important;
+		line-height: 1 !important;
+		font-size: clamp(var(--font-size-small), 85%, var(--default-font-size)) !important;
+	}
 }
 </style>
diff --git a/src/components/RightSidebar/Participants/Participant.vue b/src/components/RightSidebar/Participants/Participant.vue
index 10985268108..b998b9ac592 100644
--- a/src/components/RightSidebar/Participants/Participant.vue
+++ b/src/components/RightSidebar/Participants/Participant.vue
@@ -1147,6 +1147,16 @@ export default {
 		button, button * {
 			cursor: pointer;
 		}
+
+		// FIXME clean up after nextcloud/vue release
+		.avatardiv .avatardiv__user-status {
+			right: -2px !important;
+			bottom: -2px !important;
+			min-height: 14px !important;
+			min-width: 14px !important;
+			line-height: 1 !important;
+			font-size: clamp(var(--font-size-small), 85%, var(--default-font-size)) !important;
+		}
 	}
 
 	&--offline &__user-name {