From aa57529b54c4e9b6e4780a502d683664bc162537 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 29 Jul 2024 14:17:23 +0200
Subject: [PATCH 1/5] chore(deps): bump @nextcloud/vue library from 8.15.0 to
 8.15.1

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a4f61efcdc7..b611072ab42 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,7 @@
         "@nextcloud/paths": "^2.2.1",
         "@nextcloud/router": "^3.0.1",
         "@nextcloud/upload": "^1.4.2",
-        "@nextcloud/vue": "^8.15.0",
+        "@nextcloud/vue": "^8.15.1",
         "@vueuse/components": "^10.11.0",
         "crypto-js": "^4.2.0",
         "debounce": "^2.1.0",
@@ -3868,9 +3868,9 @@
       }
     },
     "node_modules/@nextcloud/vue": {
-      "version": "8.15.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-8.15.0.tgz",
-      "integrity": "sha512-Yxf7bIzKV3vCDJDZo99dSLpfe9wMh0hTvmlov5B8V+ZX/foq+O/EcvPivbJmesjIi6LKg+z4K53d7tU2izAPSg==",
+      "version": "8.15.1",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-8.15.1.tgz",
+      "integrity": "sha512-gZEcXPNhRGYhjSd/IeTs0jQ5P8tPIv9BJm5A8qsdpB1Mb/Xb9suhJv1xHaeGcOGoUCcs7A66coPkCgv1zcSJ2w==",
       "dependencies": {
         "@floating-ui/dom": "^1.1.0",
         "@linusborg/vue-simple-portal": "^0.1.5",
@@ -23621,9 +23621,9 @@
       }
     },
     "@nextcloud/vue": {
-      "version": "8.15.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-8.15.0.tgz",
-      "integrity": "sha512-Yxf7bIzKV3vCDJDZo99dSLpfe9wMh0hTvmlov5B8V+ZX/foq+O/EcvPivbJmesjIi6LKg+z4K53d7tU2izAPSg==",
+      "version": "8.15.1",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-8.15.1.tgz",
+      "integrity": "sha512-gZEcXPNhRGYhjSd/IeTs0jQ5P8tPIv9BJm5A8qsdpB1Mb/Xb9suhJv1xHaeGcOGoUCcs7A66coPkCgv1zcSJ2w==",
       "requires": {
         "@floating-ui/dom": "^1.1.0",
         "@linusborg/vue-simple-portal": "^0.1.5",
diff --git a/package.json b/package.json
index 3334f091a66..ed88d2c910c 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "@nextcloud/paths": "^2.2.1",
     "@nextcloud/router": "^3.0.1",
     "@nextcloud/upload": "^1.4.2",
-    "@nextcloud/vue": "^8.15.0",
+    "@nextcloud/vue": "^8.15.1",
     "@vueuse/components": "^10.11.0",
     "crypto-js": "^4.2.0",
     "debounce": "^2.1.0",

From 12ec9babcb3f3bef763db380bfc1c32ab271f947 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 25 Jul 2024 10:27:15 +0200
Subject: [PATCH 2/5] fix(Conversation): align side borders of list items,
 increase icon size to match two-lines layout height

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/ConversationIcon.vue             |  2 +-
 .../ConversationsList/Conversation.vue          |  9 ---------
 .../ConversationsListVirtual.vue                |  4 ++--
 src/components/LeftSidebar/LeftSidebar.vue      | 17 ++++++++++-------
 src/constants.js                                |  1 +
 5 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
index bb60b41a829..e79a010db41 100644
--- a/src/components/ConversationIcon.vue
+++ b/src/components/ConversationIcon.vue
@@ -129,7 +129,7 @@ export default {
 
 		size: {
 			type: Number,
-			default: AVATAR.SIZE.DEFAULT,
+			default: AVATAR.SIZE.TWO_LINES,
 		},
 	},
 
diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.vue b/src/components/LeftSidebar/ConversationsList/Conversation.vue
index 5bb46bfad1e..a2e43788ad8 100644
--- a/src/components/LeftSidebar/ConversationsList/Conversation.vue
+++ b/src/components/LeftSidebar/ConversationsList/Conversation.vue
@@ -329,15 +329,6 @@ export default {
 }
 
 .conversation {
-	// Overwrite NcListItem styles to reduce a component height
-	padding: 0 !important;
-	margin: var(--default-grid-baseline);
-	width: calc(100% - var(--default-grid-baseline) * 2);
-
-	:deep(.list-item) {
-		padding-block: var(--default-grid-baseline);
-	}
-
 	// Overwrite ConversationIcon styles to blend a type icon with NcListItem
 	& :deep(.list-item:hover .conversation-icon__type) {
 		background-color: var(--color-background-hover);
diff --git a/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue b/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue
index c10aec4f8cc..c3c8f5c781a 100644
--- a/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue
+++ b/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue
@@ -29,9 +29,9 @@ import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 /* Consider:
  * 48 = 2 * var(--default-line-height) - 2 lines of text
  * 8 = 2 * var(--default-grid-baseline) - item padding
- * 4 = var(--default-grid-baseline) - item margin (collapsed)
+ * 8 = 2 * var(--default-grid-baseline) - focus offset
  */
-const CONVERSATION_ITEM_SIZE = 60
+const CONVERSATION_ITEM_SIZE = 64
 
 export default {
 	name: 'ConversationsListVirtual',
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 9b403ec5a78..d368b9abc30 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.TWO_LINES" />
 					</template>
 					<template #subname>
 						{{ t('spreed', 'New group conversation') }}
@@ -206,7 +206,7 @@
 						:name="item.label"
 						@click="createAndJoinConversation(item)">
 						<template #icon>
-							<AvatarWrapper v-bind="iconData(item)" />
+							<AvatarWrapper v-bind="iconData(item)" :size="AVATAR.SIZE.TWO_LINES" />
 						</template>
 						<template #subname>
 							{{ t('spreed', 'New private conversation') }}
@@ -259,7 +259,7 @@
 							:name="item.label"
 							@click="createAndJoinConversation(item)">
 							<template #icon>
-								<AvatarWrapper v-bind="iconData(item)" />
+								<AvatarWrapper v-bind="iconData(item)" :size="AVATAR.SIZE.TWO_LINES" />
 							</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,
@@ -1005,7 +1006,7 @@ export default {
 <style lang="scss" scoped>
 .scroller {
 	height: 100%;
-	padding-left: calc(var(--default-grid-baseline) * 2);
+	padding-left: var(--default-grid-baseline);
 	overflow-y: scroll !important; // reserve a place for scrollbar
 }
 
@@ -1013,6 +1014,8 @@ export default {
 	position: relative;
 	display: flex;
 	padding: calc(var(--default-grid-baseline) * 2);
+	padding-right: var(--default-grid-baseline);
+	overflow-y: scroll !important; // reserve a place for scrollbar
 	align-items: center;
 	border-bottom: 1px solid transparent;
 
@@ -1023,13 +1026,13 @@ export default {
 	.filters {
 		position: absolute;
 		top: calc(var(--default-grid-baseline) * 2);
-		right: calc(var(--default-grid-baseline) * 3 + var(--default-clickable-area));
+		right: calc(var(--default-grid-baseline) * 2 + var(--default-clickable-area));
 	}
 
 	.actions {
 		position: absolute;
 		top: calc(var(--default-grid-baseline) * 2);
-		right: calc(var(--default-grid-baseline) * 2);
+		right: calc(var(--default-grid-baseline) * 1);
 	}
 }
 
diff --git a/src/constants.js b/src/constants.js
index 992c77bc3bb..b98cf9f6038 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -274,6 +274,7 @@ export const AVATAR = {
 		EXTRA_SMALL: 22,
 		SMALL: 32,
 		DEFAULT: 44,
+		TWO_LINES: 48, // 2 * var(--default-line-height)
 		MEDIUM: 64,
 		LARGE: 128,
 		EXTRA_LARGE: 180,

From 6ab2f7d9e5d7c12e96f373ee602c24576ffcd6c4 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 25 Jul 2024 12:02:56 +0200
Subject: [PATCH 3/5] fix(MediaSettings): align icons placement

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../MediaSettings/MediaDevicesSelector.vue    | 36 ++++++++-----------
 .../MediaSettings/MediaDevicesSpeakerTest.vue | 12 +++----
 2 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/src/components/MediaSettings/MediaDevicesSelector.vue b/src/components/MediaSettings/MediaDevicesSelector.vue
index ca21d8fe49e..eaec9bfab08 100644
--- a/src/components/MediaSettings/MediaDevicesSelector.vue
+++ b/src/components/MediaSettings/MediaDevicesSelector.vue
@@ -5,14 +5,10 @@
 
 <template>
 	<div class="media-devices-selector">
-		<div class="media-devices-selector__icon">
-			<Microphone v-if="deviceIcon === 'microphone'"
-				title=""
-				:size="16" />
-			<VideoIcon v-if="deviceIcon === 'camera'"
-				title=""
-				:size="16" />
-		</div>
+		<component :is="deviceIcon"
+			class="media-devices-selector__icon"
+			title=""
+			:size="16" />
 
 		<NcSelect v-model="deviceSelectedOption"
 			:input-id="deviceSelectorId"
@@ -89,15 +85,11 @@ export default {
 		},
 
 		deviceIcon() {
-			if (this.kind === 'audioinput') {
-				return 'microphone'
-			}
-
-			if (this.kind === 'videoinput') {
-				return 'camera'
+			switch (this.kind) {
+			case 'audioinput': return Microphone
+			case 'videoinput': return VideoIcon
+			default: return null
 			}
-
-			return null
 		},
 
 		deviceOptionsAvailable() {
@@ -203,15 +195,15 @@ export default {
 <style lang="scss" scoped>
 .media-devices-selector {
 	display: flex;
-	margin: 16px 0;
+	gap: var(--default-grid-baseline);
+	margin: calc(3 * var(--default-grid-baseline)) 0;
+
 	&__icon {
 		display: flex;
-		justify-content: flex-start;
+		justify-content: center;
 		align-items: center;
-		width: 36px;
-	}
-	&__heading {
-		font-weight: bold;
+		width: var(--default-clickable-area);
+		flex-shrink: 0;
 	}
 
 	:deep(.v-select.select) {
diff --git a/src/components/MediaSettings/MediaDevicesSpeakerTest.vue b/src/components/MediaSettings/MediaDevicesSpeakerTest.vue
index 2bd7712304d..ce3af05a3a8 100644
--- a/src/components/MediaSettings/MediaDevicesSpeakerTest.vue
+++ b/src/components/MediaSettings/MediaDevicesSpeakerTest.vue
@@ -5,9 +5,7 @@
 
 <template>
 	<div class="media-devices-checker">
-		<div class="media-devices-checker__icon">
-			<VolumeHighIcon :size="16" />
-		</div>
+		<VolumeHighIcon class="media-devices-checker__icon" :size="16" />
 		<NcButton type="secondary" @click="playTestSound">
 			{{ buttonLabel }}
 		</NcButton>
@@ -82,13 +80,15 @@ export default {
 <style lang="scss" scoped>
 .media-devices-checker {
 	display: flex;
-	margin: 16px 0;
+	gap: var(--default-grid-baseline);
+	margin: calc(3 * var(--default-grid-baseline)) 0;
 
 	&__icon {
 		display: flex;
-		justify-content: flex-start;
+		justify-content: center;
 		align-items: center;
-		width: 36px;
+		width: var(--default-clickable-area);
+		flex-shrink: 0;
 	}
 
 	.equalizer {

From 25cc37f3200412c95d859ebf565ea732cc0c3b25 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 25 Jul 2024 12:06:37 +0200
Subject: [PATCH 4/5] fix: decrease border-radius of elements, add hover
 feedback on tertiary buttons

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/MediaSettings/MediaDevicesSelector.vue      | 2 +-
 src/components/MediaSettings/VideoBackgroundEditor.vue     | 2 +-
 src/components/MessagesList/MessagesList.vue               | 2 +-
 src/components/NewMessage/NewMessagePollEditor.vue         | 7 ++++---
 .../RightSidebar/BreakoutRooms/BreakoutRoomItem.vue        | 2 +-
 5 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/MediaSettings/MediaDevicesSelector.vue b/src/components/MediaSettings/MediaDevicesSelector.vue
index eaec9bfab08..4eb696f3bae 100644
--- a/src/components/MediaSettings/MediaDevicesSelector.vue
+++ b/src/components/MediaSettings/MediaDevicesSelector.vue
@@ -19,7 +19,7 @@
 			:placeholder="deviceSelectorPlaceholder"
 			:disabled="!enabled || !deviceOptionsAvailable" />
 
-		<NcButton type="tertiary-no-background"
+		<NcButton type="tertiary"
 			:title="t('spreed', 'Refresh devices list')"
 			:aria-lebel="t('spreed', 'Refresh devices list')"
 			@click="$emit('refresh')">
diff --git a/src/components/MediaSettings/VideoBackgroundEditor.vue b/src/components/MediaSettings/VideoBackgroundEditor.vue
index 2daba8761a3..a46ad4d5010 100644
--- a/src/components/MediaSettings/VideoBackgroundEditor.vue
+++ b/src/components/MediaSettings/VideoBackgroundEditor.vue
@@ -288,7 +288,7 @@ export default {
 	&__element {
 		border: none;
 		margin: 0 !important;
-		border-radius: calc(var(--border-radius-large) * 1.5);
+		border-radius: var(--border-radius-element, calc(var(--border-radius-large) * 1.5));
 		height: calc(var(--default-grid-baseline) * 16);
 		display: flex;
 		flex-direction: column;
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index c1bd2f49659..7213b065538 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -1286,7 +1286,7 @@ export default {
 		left: 50%;
 		color: var(--color-text-maxcontrast);
 		background-color: var(--color-background-dark);
-		border-radius: var(--border-radius-pill);
+		border-radius: var(--border-radius-element, var(--border-radius-pill));
 	}
 
 	&:last-child {
diff --git a/src/components/NewMessage/NewMessagePollEditor.vue b/src/components/NewMessage/NewMessagePollEditor.vue
index 52781403a55..1255c434c84 100644
--- a/src/components/NewMessage/NewMessagePollEditor.vue
+++ b/src/components/NewMessage/NewMessagePollEditor.vue
@@ -28,7 +28,7 @@
 					:value.sync="pollOptions[index]"
 					:label="t('spreed', 'Answer {option}', {option: index + 1})" />
 				<NcButton v-if="pollOptions.length > 2"
-					type="tertiary-no-background"
+					type="tertiary"
 					:aria-label="t('spreed', 'Delete poll option')"
 					@click="deleteOption(index)">
 					<template #icon>
@@ -38,7 +38,7 @@
 			</div>
 
 			<!-- Add options -->
-			<NcButton class="poll-editor__add-more" type="tertiary-no-background" @click="addOption">
+			<NcButton class="poll-editor__add-more" type="tertiary" @click="addOption">
 				<template #icon>
 					<Plus />
 				</template>
@@ -181,7 +181,8 @@ export default {
 
 	&__option {
 		display: flex;
-		align-items: center;
+		align-items: flex-end;
+		gap: var(--default-grid-baseline);
 		width: 100%;
 		margin-bottom: calc(var(--default-grid-baseline) * 2);
 	}
diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
index 0dc316d92f2..31313ac1853 100644
--- a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
+++ b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
@@ -9,7 +9,7 @@
 		@mouseenter="elementHoveredOrFocused = true"
 		@mouseleave="elementHoveredOrFocused = false">
 		<div class="breakout-room-item__wrapper">
-			<NcButton type="tertiary-no-background"
+			<NcButton type="tertiary"
 				:aria-label="toggleParticipantsListLabel"
 				@focus="elementHoveredOrFocused = true"
 				@blur="elementHoveredOrFocused = false"

From c901d724222bd74bbe4d12ba52b79ca01ebdb409 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 26 Jul 2024 13:53:56 +0200
Subject: [PATCH 5/5] fix(FilePreview):  stretch image preview in container
 (for SharedItems tab)

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../MessagesGroup/Message/MessagePart/FilePreview.vue            | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index b7bb7447ea3..a54c126cb26 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -588,6 +588,7 @@ export default {
 	.image-container {
 		position: relative;
 		display: inline-block;
+		width: 100%;
 		height: 100%;
 
 		&.playable {