From e84eec1f0305cb18da1701d40e5c815f4d612809 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 29 Sep 2023 16:53:31 +0200
Subject: git rid of avatar mixin in AvatarWrapper.vue

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/AvatarWrapper/AvatarWrapper.vue | 70 +++++++++++++++-----------
 1 file changed, 40 insertions(+), 30 deletions(-)

diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue
index 196be555b..1ddf96303 100644
--- a/src/components/AvatarWrapper/AvatarWrapper.vue
+++ b/src/components/AvatarWrapper/AvatarWrapper.vue
@@ -21,18 +21,12 @@
 -->
 
 <template>
-	<div class="avatar-wrapper" :class="avatarClass" :style="{'--condensed-overlap': condensedOverlap}">
-		<div v-if="iconClass"
-			class="icon"
-			:class="[`avatar-${size}px`, iconClass]" />
-		<div v-else-if="isGuest || isDeletedUser"
-			class="guest"
-			:class="`avatar-${size}px`">
+	<div class="avatar-wrapper" :class="avatarClass" :style="avatarStyle">
+		<div v-if="iconClass" class="avatar icon" :class="[iconClass]" />
+		<div v-else-if="isGuest || isDeletedUser" class="avatar guest">
 			{{ firstLetterOfGuestName }}
 		</div>
-		<div v-else-if="isBot"
-			class="bot"
-			:class="`avatar-${size}px`">
+		<div v-else-if="isBot" class="avatar bot">
 			{{ '>_' }}
 		</div>
 		<NcAvatar v-else
@@ -146,12 +140,16 @@ export default {
 		avatarClass() {
 			return {
 				'avatar-wrapper--offline': this.offline,
-				'avatar-wrapper--small': this.small,
-				'avatar-wrapper--medium': this.medium,
 				'avatar-wrapper--condensed': this.condensed,
 				'avatar-wrapper--highlighted': this.highlighted,
 			}
 		},
+		avatarStyle() {
+			return {
+				'--avatar-size': this.size + 'px',
+				'--condensed-overlap': this.condensedOverlap,
+			}
+		},
 		isUser() {
 			return this.source === 'users' || this.source === ATTENDEE.ACTOR_TYPE.BRIDGED
 		},
@@ -184,26 +182,38 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/avatar';
-
 .avatar-wrapper {
-	height: 44px;
-	width: 44px;
-	border-radius: 44px;
-	@include avatar-mixin(44px);
-
-	&--small {
-		height: 22px;
-		width: 22px;
-		border-radius: 22px;
-		@include avatar-mixin(22px);
-	}
+	height: var(--avatar-size);
+	width: var(--avatar-size);
+	border-radius: var(--avatar-size);
+
+	.avatar {
+		position: sticky;
+		top: 0;
+		width: var(--avatar-size);
+		height: var(--avatar-size);
+		line-height: var(--avatar-size);
+		font-size: calc(var(--avatar-size) / 2);
+		border-radius: 50%;
+
+		&.icon {
+			background-color: var(--color-background-darker);
+		}
+
+		&.bot {
+			padding-left: 5px;
+			background-color: var(--color-background-darker);
+		}
 
-	&--medium {
-		height: 32px;
-		width: 32px;
-		border-radius: 32px;
-		@include avatar-mixin(32px);
+		&.guest {
+			color: #ffffff;
+			background-color: #b9b9b9;
+			padding: 0;
+			display: block;
+			text-align: center;
+			margin-left: auto;
+			margin-right: auto;
+		}
 	}
 
 	&--condensed {
-- 
cgit v1.2.3


From 0473b2c345918d97bd832a912ed81831b1a1d272 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 29 Sep 2023 16:55:11 +0200
Subject: explicitly set size of AvatarWrapper.vue and ConversationIcon.vue

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/AvatarWrapper/AvatarWrapper.spec.js        |  7 ++++---
 src/components/AvatarWrapper/AvatarWrapper.vue            | 15 ++++-----------
 src/components/ConversationIcon.vue                       |  4 ++--
 .../ConversationSettings/ConversationAvatarEditor.vue     |  8 +++++++-
 .../ContactSelectionBubble/ContactSelectionBubble.vue     |  8 +++++++-
 .../Message/MessagePart/PollVotersDetails.vue             | 10 +++++++---
 .../MessagesList/MessagesGroup/MessagesGroup.vue          |  8 ++++----
 src/components/NewMessage/NewMessageTypingIndicator.vue   |  5 +++--
 src/components/Quote.vue                                  |  8 +++++++-
 src/constants.js                                          | 12 ++++++++++++
 10 files changed, 57 insertions(+), 28 deletions(-)

diff --git a/src/components/AvatarWrapper/AvatarWrapper.spec.js b/src/components/AvatarWrapper/AvatarWrapper.spec.js
index c7f0eaf9b..1c3216033 100644
--- a/src/components/AvatarWrapper/AvatarWrapper.spec.js
+++ b/src/components/AvatarWrapper/AvatarWrapper.spec.js
@@ -49,17 +49,18 @@ describe('AvatarWrapper.vue', () => {
 			expect(avatar.exists()).toBeFalsy()
 		})
 
-		test('component renders NcAvatar with smaller size', () => {
+		test('component renders NcAvatar with specified size', () => {
+			const size = 22
 			const wrapper = shallowMount(AvatarWrapper, {
 				store,
 				propsData: {
 					name: USER_NAME,
-					small: true,
+					size,
 				},
 			})
 
 			const avatar = wrapper.findComponent(NcAvatar)
-			expect(avatar.props('size')).toBe(22)
+			expect(avatar.props('size')).toBe(size)
 		})
 
 		test('component pass props to NcAvatar correctly', async () => {
diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue
index 1ddf96303..88524a996 100644
--- a/src/components/AvatarWrapper/AvatarWrapper.vue
+++ b/src/components/AvatarWrapper/AvatarWrapper.vue
@@ -47,7 +47,7 @@
 <script>
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 
-import { ATTENDEE } from '../../constants.js'
+import { ATTENDEE, AVATAR } from '../../constants.js'
 
 export default {
 
@@ -70,13 +70,9 @@ export default {
 			type: String,
 			default: null,
 		},
-		small: {
-			type: Boolean,
-			default: false,
-		},
-		medium: {
-			type: Boolean,
-			default: false,
+		size: {
+			type: Number,
+			default: AVATAR.SIZE.DEFAULT,
 		},
 		condensed: {
 			type: Boolean,
@@ -120,9 +116,6 @@ export default {
 		},
 	},
 	computed: {
-		size() {
-			return this.small ? 22 : this.medium ? 32 : 44
-		},
 		// Determines which icon is displayed
 		iconClass() {
 			if (!this.source || this.isUser || this.isBot || this.isGuest || this.isDeletedUser) {
diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
index 1977faaaf..4b3a34ad0 100644
--- a/src/components/ConversationIcon.vue
+++ b/src/components/ConversationIcon.vue
@@ -69,7 +69,7 @@ import { generateOcsUrl } from '@nextcloud/router'
 
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 
-import { CONVERSATION } from '../constants.js'
+import { AVATAR, CONVERSATION } from '../constants.js'
 import { isDarkTheme } from '../utils/isDarkTheme.js'
 
 const supportsAvatar = getCapabilities()?.spreed?.features?.includes('avatar')
@@ -134,7 +134,7 @@ export default {
 
 		size: {
 			type: Number,
-			default: 44,
+			default: AVATAR.SIZE.DEFAULT,
 		},
 	},
 
diff --git a/src/components/ConversationSettings/ConversationAvatarEditor.vue b/src/components/ConversationSettings/ConversationAvatarEditor.vue
index c6b944cab..16692446f 100644
--- a/src/components/ConversationSettings/ConversationAvatarEditor.vue
+++ b/src/components/ConversationSettings/ConversationAvatarEditor.vue
@@ -32,7 +32,7 @@
 				</div>
 				<ConversationIcon v-else-if="!loading"
 					:item="conversation"
-					:size="180"
+					:size="AVATAR.SIZE.EXTRA_LARGE"
 					hide-user-status />
 				<div v-else class="icon-loading" />
 			</div>
@@ -132,6 +132,8 @@ import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js'
 
 import ConversationIcon from '../ConversationIcon.vue'
 
+import { AVATAR } from '../../constants.js'
+
 // eslint-disable-next-line n/no-extraneous-import
 import 'cropperjs/dist/cropper.css'
 
@@ -185,6 +187,10 @@ export default {
 
 	emits: ['avatar-edited'],
 
+	setup() {
+		return { AVATAR }
+	},
+
 	data() {
 		return {
 			showCropper: false,
diff --git a/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue b/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue
index 01456bd85..61559cdca 100644
--- a/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue
@@ -25,7 +25,7 @@
 			class="contact-selection-bubble__avatar"
 			:name="participant.label"
 			:source="participant.source"
-			small
+			:size="AVATAR.SIZE.EXTRA_SMALL"
 			disable-menu
 			disable-tooltip />
 		<span class="contact-selection-bubble__username">
@@ -48,6 +48,8 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 import AvatarWrapper from '../../../../AvatarWrapper/AvatarWrapper.vue'
 
+import { AVATAR } from '../../../../../constants.js'
+
 export default {
 	name: 'ContactSelectionBubble',
 
@@ -64,6 +66,10 @@ export default {
 		},
 	},
 
+	setup() {
+		return { AVATAR }
+	},
+
 	computed: {
 		displayName() {
 			// Used to be the group of characters before the first space in the name.
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue
index 82e72d9f4..9e22a2494 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue
@@ -31,7 +31,7 @@
 						:key="index"
 						:name="getDisplayName(item)"
 						:source="item.actorType"
-						small
+						:size="AVATAR.SIZE.EXTRA_SMALL"
 						condensed
 						disable-menu
 						disable-tooltip />
@@ -45,7 +45,7 @@
 				<AvatarWrapper :id="item.actorId"
 					:name="getDisplayName(item)"
 					:source="item.actorType"
-					small
+					:size="AVATAR.SIZE.EXTRA_SMALL"
 					disable-menu />
 				<p class="poll-voters-details__display-name">
 					{{ getDisplayName(item) }}
@@ -61,7 +61,7 @@ import NcPopover from '@nextcloud/vue/dist/Components/NcPopover.js'
 
 import AvatarWrapper from '../../../../AvatarWrapper/AvatarWrapper.vue'
 
-import { ATTENDEE } from '../../../../../constants.js'
+import { ATTENDEE, AVATAR } from '../../../../../constants.js'
 
 export default {
 
@@ -80,6 +80,10 @@ export default {
 		},
 	},
 
+	setup() {
+		return { AVATAR }
+	},
+
 	methods: {
 		getDisplayName(item) {
 			if (item.actorDisplayName === '' && item.actorType === ATTENDEE.ACTOR_TYPE.GUESTS) {
diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
index 476ff0a25..038aa18f0 100644
--- a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
+++ b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
@@ -25,9 +25,9 @@
 			<AvatarWrapper :id="actorId"
 				:name="actorDisplayName"
 				:source="actorType"
+				:size="AVATAR.SIZE.SMALL"
 				:disable-menu="disableMenu"
-				disable-tooltip
-				medium />
+				disable-tooltip />
 		</div>
 		<ul class="messages">
 			<li class="messages__author" aria-level="4">
@@ -50,7 +50,7 @@
 import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue'
 import Message from './Message/Message.vue'
 
-import { ATTENDEE } from '../../../constants.js'
+import { ATTENDEE, AVATAR } from '../../../constants.js'
 import { useGuestNameStore } from '../../../stores/guestName.js'
 
 export default {
@@ -91,7 +91,7 @@ export default {
 
 	setup() {
 		const guestNameStore = useGuestNameStore()
-		return { guestNameStore }
+		return { AVATAR, guestNameStore }
 	},
 
 	expose: ['highlightMessage'],
diff --git a/src/components/NewMessage/NewMessageTypingIndicator.vue b/src/components/NewMessage/NewMessageTypingIndicator.vue
index 61b4813ec..4230f3738 100644
--- a/src/components/NewMessage/NewMessageTypingIndicator.vue
+++ b/src/components/NewMessage/NewMessageTypingIndicator.vue
@@ -28,7 +28,7 @@
 					:key="index"
 					:name="participant.displayName"
 					:source="participant.actorType"
-					small
+					:size="AVATAR.SIZE.EXTRA_SMALL"
 					condensed
 					:condensed-overlap="8"
 					disable-menu
@@ -45,6 +45,7 @@ import escapeHtml from 'escape-html'
 
 import AvatarWrapper from '../AvatarWrapper/AvatarWrapper.vue'
 
+import { AVATAR } from '../../constants.js'
 import { useGuestNameStore } from '../../stores/guestName.js'
 
 export default {
@@ -63,7 +64,7 @@ export default {
 
 	setup() {
 		const guestNameStore = useGuestNameStore()
-		return { guestNameStore }
+		return { AVATAR, guestNameStore }
 	},
 
 	computed: {
diff --git a/src/components/Quote.vue b/src/components/Quote.vue
index bd5fefa57..f2cc1820b 100644
--- a/src/components/Quote.vue
+++ b/src/components/Quote.vue
@@ -37,7 +37,7 @@ components.
 				<AvatarWrapper :id="actorId"
 					:name="getDisplayName"
 					:source="actorType"
-					small
+					:size="AVATAR.SIZE.EXTRA_SMALL"
 					disable-menu />
 				{{ getDisplayName }}
 			</div>
@@ -74,6 +74,7 @@ import AvatarWrapper from './AvatarWrapper/AvatarWrapper.vue'
 import DefaultParameter from './MessagesList/MessagesGroup/Message/MessagePart/DefaultParameter.vue'
 import FilePreview from './MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue'
 
+import { AVATAR } from '../constants.js'
 import { EventBus } from '../services/EventBus.js'
 
 export default {
@@ -140,6 +141,11 @@ export default {
 			default: false,
 		},
 	},
+
+	setup() {
+		return { AVATAR }
+	},
+
 	computed: {
 		/**
 		 * The message actor display name.
diff --git a/src/constants.js b/src/constants.js
index b453316e6..60a9a55bf 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -232,3 +232,15 @@ export const BOT = {
 		NO_SETUP: 2,
 	},
 }
+
+export const AVATAR = {
+	SIZE: {
+		EXTRA_SMALL: 22,
+		SMALL: 32,
+		DEFAULT: 44,
+		MEDIUM: 64,
+		LARGE: 128,
+		EXTRA_LARGE: 180,
+		FULL: 512,
+	},
+}
-- 
cgit v1.2.3


From 973a735924e095ffbf7740299771b8075c97ee71 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 29 Sep 2023 18:24:00 +0200
Subject: replace NcAvatar with AvatarWrapper in call components

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/assets/avatar.scss                         | 63 --------------------------
 src/components/CallView/shared/LocalVideo.vue  | 42 +++++------------
 src/components/CallView/shared/VideoVue.vue    | 61 ++++++++++---------------
 src/components/MediaSettings/MediaSettings.vue | 37 ++++++---------
 4 files changed, 48 insertions(+), 155 deletions(-)
 delete mode 100644 src/assets/avatar.scss

diff --git a/src/assets/avatar.scss b/src/assets/avatar.scss
deleted file mode 100644
index 54645ee12..000000000
--- a/src/assets/avatar.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * @copyright Copyright (c) 2020 Joas Schilling <coding@schilljs.com>
- *
- * @author Joas Schilling <coding@schilljs.com>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-@use 'sass:math';
-
-@import 'variables';
-
-
-@mixin avatar-mixin($size: 32px) {
-	.avatar-#{$size} {
-		position: sticky;
-		top: 0;
-		width: $size;
-		height: $size;
-		line-height: $size;
-		font-size: math.div($size, 2);
-		border-radius: 50%;
-
-		&.icon {
-			border-radius: 50%;
-			height: $size;
-			width: $size;
-			background-color: var(--color-background-darker);
-		}
-
-		&.bot {
-			padding-left: 5px;
-			line-height: $size;
-			border-radius: 50%;
-			background-color: var(--color-background-darker);
-		}
-
-		&.guest {
-			line-height: $size;
-			font-size: math.div($size, 2);
-			color: $color-guests-avatar;
-			background-color: $color-background-guests-avatar;
-			padding: 0;
-			display: block;
-			text-align: center;
-			margin-left: auto;
-			margin-right: auto;
-		}
-	}
-}
diff --git a/src/components/CallView/shared/LocalVideo.vue b/src/components/CallView/shared/LocalVideo.vue
index f88b4e8af..d0c058ccf 100644
--- a/src/components/CallView/shared/LocalVideo.vue
+++ b/src/components/CallView/shared/LocalVideo.vue
@@ -3,7 +3,7 @@
   -
   - @author Grigorii Shartsev <me@shgk.me>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -42,19 +42,13 @@
 			<VideoBackground v-if="isGrid || isStripe"
 				:display-name="displayName"
 				:user="userId" />
-			<NcAvatar v-if="userId"
+			<AvatarWrapper :id="userId"
+				:name="displayName"
+				:source="actorType"
 				:size="avatarSize"
-				:disable-menu="true"
-				:disable-tooltip="true"
-				:show-user-status="false"
-				:user="userId"
-				:display-name="displayName"
+				disable-menu
+				disable-tooltip
 				:class="avatarClass" />
-			<div v-if="!userId"
-				:class="guestAvatarClass"
-				class="avatar guest">
-				{{ firstLetterOfGuestName }}
-			</div>
 		</div>
 
 		<div v-if="mouseover && isSelectable" class="hover-shadow" />
@@ -76,9 +70,9 @@ import SHA1 from 'crypto-js/sha1.js'
 
 import { showError, showInfo, TOAST_PERMANENT_TIMEOUT } from '@nextcloud/dialogs'
 
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
+import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue'
 import VideoBackground from './VideoBackground.vue'
 
 import video from '../../../mixins/video.js'
@@ -90,7 +84,7 @@ export default {
 	name: 'LocalVideo',
 
 	components: {
-		NcAvatar,
+		AvatarWrapper,
 		NcButton,
 		VideoBackground,
 	},
@@ -187,13 +181,12 @@ export default {
 			return this.$store.getters.getUserId()
 		},
 
-		displayName() {
-			return this.$store.getters.getDisplayName()
+		actorType() {
+			return this.$store.getters.getActorType()
 		},
 
-		firstLetterOfGuestName() {
-			const customName = this.guestName !== t('spreed', 'Guest') ? this.guestName : '?'
-			return customName.charAt(0)
+		displayName() {
+			return this.$store.getters.getDisplayName()
 		},
 
 		sessionHash() {
@@ -223,12 +216,6 @@ export default {
 			}
 		},
 
-		guestAvatarClass() {
-			return Object.assign(this.avatarClass, {
-				['avatar-' + this.avatarSize + 'px']: true,
-			})
-		},
-
 		localStreamVideoError() {
 			return this.localMediaModel.attributes.localStream && this.localMediaModel.attributes.localStreamRequestVideoError
 		},
@@ -364,11 +351,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../assets/variables';
-@import '../../../assets/avatar';
-@include avatar-mixin(64px);
-@include avatar-mixin(128px);
-
 .not-connected {
 	video,
 	.avatar-container {
diff --git a/src/components/CallView/shared/VideoVue.vue b/src/components/CallView/shared/VideoVue.vue
index 234242807..e8bedf6fd 100644
--- a/src/components/CallView/shared/VideoVue.vue
+++ b/src/components/CallView/shared/VideoVue.vue
@@ -1,7 +1,7 @@
 <!--
   - @copyright Copyright (c) 2019, Daniel Calviño Sánchez (danxuliu@gmail.com)
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -50,24 +50,14 @@
 			<div v-if="showBackgroundAndAvatar"
 				:key="'backgroundAvatar'"
 				class="avatar-container">
-				<template v-if="participantUserId">
-					<VideoBackground :display-name="participantName"
-						:user="participantUserId" />
-					<NcAvatar :size="avatarSize"
-						:disable-menu="true"
-						:disable-tooltip="true"
-						:user="participantUserId"
-						:display-name="participantName"
-						:show-user-status="false"
-						:class="avatarClass" />
-				</template>
-				<template v-else>
-					<VideoBackground :display-name="participantName" />
-					<div :class="guestAvatarClass"
-						class="avatar guest">
-						{{ firstLetterOfGuestName }}
-					</div>
-				</template>
+				<VideoBackground :display-name="participantName" :user="participantUserId" />
+				<AvatarWrapper :id="participantUserId"
+					:name="participantName"
+					:source="participantActorType"
+					:size="avatarSize"
+					disable-menu
+					disable-tooltip
+					:class="avatarClass" />
 			</div>
 		</TransitionWrapper>
 		<TransitionWrapper name="fade">
@@ -101,8 +91,7 @@ import SHA1 from 'crypto-js/sha1.js'
 
 import AccountCircle from 'vue-material-design-icons/AccountCircle.vue'
 
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
-
+import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue'
 import TransitionWrapper from '../../TransitionWrapper.vue'
 import Screen from './Screen.vue'
 import VideoBackground from './VideoBackground.vue'
@@ -119,7 +108,7 @@ export default {
 	name: 'VideoVue',
 
 	components: {
-		NcAvatar,
+		AvatarWrapper,
 		TransitionWrapper,
 		VideoBackground,
 		AccountCircle,
@@ -317,23 +306,12 @@ export default {
 			}
 		},
 
-		guestAvatarClass() {
-			return Object.assign(this.avatarClass, {
-				['avatar-' + this.avatarSize + 'px']: true,
-			})
-		},
-
 		connectionMessageClass() {
 			return {
 				'below-avatar': this.showBackgroundAndAvatar,
 			}
 		},
 
-		firstLetterOfGuestName() {
-			const customName = this.participantName && this.participantName !== t('spreed', 'Guest') ? this.participantName : '?'
-			return customName.charAt(0)
-		},
-
 		sessionHash() {
 			return Hex.stringify(SHA1(this.peerId))
 		},
@@ -361,6 +339,18 @@ export default {
 			}) || {}
 		},
 
+		participantActorType() {
+			if (this.participant?.actorType) {
+				return this.participant.actorType
+			} else if (this.peerData?.actorType) {
+				return this.peerData.actorType
+			} else {
+				return this.participantUserId
+					? ATTENDEE.ACTOR_TYPE.USERS
+					: ATTENDEE.ACTOR_TYPE.GUESTS
+			}
+		},
+
 		participantUserId() {
 			if (this.model.attributes.userId) {
 				return this.model.attributes.userId
@@ -588,11 +578,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../assets/avatar';
-@import '../../../assets/variables';
-@include avatar-mixin(64px);
-@include avatar-mixin(128px);
-
 .forced-white {
 	filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
 }
diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue
index 157b2ab72..d59ede4d2 100644
--- a/src/components/MediaSettings/MediaSettings.vue
+++ b/src/components/MediaSettings/MediaSettings.vue
@@ -3,7 +3,7 @@
   -
   - @author Marco Ambrosini <marcoambrosini@icloud.com>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -40,17 +40,12 @@
 					class="preview__novideo">
 					<VideoBackground :display-name="displayName"
 						:user="userId" />
-					<NcAvatar v-if="userId"
+					<AvatarWrapper :id="userId"
+						:name="displayName"
+						:source="actorType"
 						:size="128"
-						:disable-menu="true"
-						:disable-tooltip="true"
-						:show-user-status="false"
-						:user="userId"
-						:display-name="displayName" />
-					<div v-if="!userId"
-						class="avatar avatar-128px guest">
-						{{ firstLetterOfGuestName }}
-					</div>
+						disable-menu
+						disable-tooltip />
 				</div>
 			</div>
 
@@ -190,13 +185,13 @@ import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
+import AvatarWrapper from '../AvatarWrapper/AvatarWrapper.vue'
 import VideoBackground from '../CallView/shared/VideoBackground.vue'
 import MediaDevicesSelector from '../MediaDevicesSelector.vue'
 import CallButton from '../TopBar/CallButton.vue'
@@ -219,6 +214,7 @@ export default {
 	},
 
 	components: {
+		AvatarWrapper,
 		Bell,
 		BellOff,
 		CallButton,
@@ -226,7 +222,6 @@ export default {
 		Creation,
 		NcActionButton,
 		NcActions,
-		NcAvatar,
 		NcButton,
 		NcCheckboxRadioSwitch,
 		NcModal,
@@ -279,15 +274,14 @@ export default {
 			)
 		},
 
-		firstLetterOfGuestName() {
-			const customName = this.guestName !== t('spreed', 'Guest') ? this.guestName : '?'
-			return customName.charAt(0)
-		},
-
 		userId() {
 			return this.$store.getters.getUserId()
 		},
 
+		actorType() {
+			return this.$store.getters.getActorType()
+		},
+
 		token() {
 			return this.$store.getters.getToken()
 		},
@@ -557,11 +551,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/variables';
-@import '../../assets/avatar';
-@include avatar-mixin(64px);
-@include avatar-mixin(128px);
-
 .media-settings {
 	padding: calc(var(--default-grid-baseline)*4);
 	background-color: var(--color-main-background);
@@ -608,7 +597,7 @@ export default {
 	}
 
 	&__call-preferences {
-		height: $clickable-area;
+		height: var(--default-clickable-area);
 		display: flex;
 		justify-content: center;
 		align-items: center;
-- 
cgit v1.2.3


From 2dd26f4c2c1a4fbd9b4f6107dad9eba51db45edb Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 29 Sep 2023 18:29:57 +0200
Subject: increase avatar sizes in call components

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/CallView/shared/LocalVideo.vue  | 15 +++++++++++----
 src/components/CallView/shared/VideoVue.vue    | 18 ++++++++++++++----
 src/components/MediaSettings/MediaSettings.vue |  6 +++---
 3 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/components/CallView/shared/LocalVideo.vue b/src/components/CallView/shared/LocalVideo.vue
index d0c058ccf..ec53600b8 100644
--- a/src/components/CallView/shared/LocalVideo.vue
+++ b/src/components/CallView/shared/LocalVideo.vue
@@ -75,6 +75,7 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue'
 import VideoBackground from './VideoBackground.vue'
 
+import { AVATAR } from '../../../constants.js'
 import video from '../../../mixins/video.js'
 import { useGuestNameStore } from '../../../stores/guestName.js'
 import { ConnectionState } from '../../../utils/webrtc/models/CallParticipantModel.js'
@@ -104,7 +105,7 @@ export default {
 			type: Object,
 			required: true,
 		},
-		useConstrainedLayout: {
+		isGrid: {
 			type: Boolean,
 			default: false,
 		},
@@ -169,7 +170,7 @@ export default {
 		},
 
 		videoWrapperStyle() {
-			if (!this.containerAspectRatio || !this.videoAspectRatio || !this.isBig) {
+			if (!this.containerAspectRatio || !this.videoAspectRatio || !this.isBig || this.isGrid) {
 				return
 			}
 			return (this.containerAspectRatio > this.videoAspectRatio)
@@ -207,7 +208,13 @@ export default {
 		},
 
 		avatarSize() {
-			return this.useConstrainedLayout ? 64 : 128
+			if (this.isStripe || (!this.isBig && !this.isGrid)) {
+				return AVATAR.SIZE.LARGE
+			} else if (!this.containerAspectRatio) {
+				return AVATAR.SIZE.FULL
+			} else {
+				return Math.min(AVATAR.SIZE.FULL, this.$refs.videoContainer.clientHeight / 2, this.$refs.videoContainer.clientWidth / 2)
+			}
 		},
 
 		avatarClass() {
@@ -281,7 +288,7 @@ export default {
 		// Set initial state
 		this._setLocalStream(this.localMediaModel.attributes.localStream)
 
-		if (this.isBig) {
+		if (this.isBig || this.isGrid) {
 			this.resizeObserver = new ResizeObserver(this.updateContainerAspectRatio)
 			this.resizeObserver.observe(this.$refs.videoContainer)
 		}
diff --git a/src/components/CallView/shared/VideoVue.vue b/src/components/CallView/shared/VideoVue.vue
index e8bedf6fd..25d17fd96 100644
--- a/src/components/CallView/shared/VideoVue.vue
+++ b/src/components/CallView/shared/VideoVue.vue
@@ -97,7 +97,7 @@ import Screen from './Screen.vue'
 import VideoBackground from './VideoBackground.vue'
 import VideoBottomBar from './VideoBottomBar.vue'
 
-import { ATTENDEE } from '../../../constants.js'
+import { ATTENDEE, AVATAR } from '../../../constants.js'
 import video from '../../../mixins/video.js'
 import { EventBus } from '../../../services/EventBus.js'
 import { useGuestNameStore } from '../../../stores/guestName.js'
@@ -139,6 +139,10 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		isGrid: {
+			type: Boolean,
+			default: false,
+		},
 		// True if this video component is used in the promoted view's video stripe
 		isStripe: {
 			type: Boolean,
@@ -193,7 +197,7 @@ export default {
 	computed: {
 
 		videoWrapperStyle() {
-			if (!this.containerAspectRatio || !this.videoAspectRatio) {
+			if (!this.containerAspectRatio || !this.videoAspectRatio || !this.isBig || this.isGrid) {
 				return
 			}
 
@@ -297,7 +301,13 @@ export default {
 		},
 
 		avatarSize() {
-			return this.isBig ? 128 : 128
+			if (this.isStripe || (!this.isBig && !this.isGrid)) {
+				return AVATAR.SIZE.LARGE
+			} else if (!this.containerAspectRatio) {
+				return AVATAR.SIZE.FULL
+			} else {
+				return Math.min(AVATAR.SIZE.FULL, this.$refs.videoContainer.clientHeight / 2, this.$refs.videoContainer.clientWidth / 2)
+			}
 		},
 
 		avatarClass() {
@@ -513,7 +523,7 @@ export default {
 		// Set initial state
 		this._setStream(this.model.attributes.stream)
 
-		if (this.isBig) {
+		if (this.isBig || this.isGrid) {
 			this.resizeObserver = new ResizeObserver(this.updateContainerAspectRatio)
 			this.resizeObserver.observe(this.$refs.videoContainer)
 		}
diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue
index d59ede4d2..480ad43e2 100644
--- a/src/components/MediaSettings/MediaSettings.vue
+++ b/src/components/MediaSettings/MediaSettings.vue
@@ -43,7 +43,7 @@
 					<AvatarWrapper :id="userId"
 						:name="displayName"
 						:source="actorType"
-						:size="128"
+						:size="AVATAR.SIZE.EXTRA_LARGE"
 						disable-menu
 						disable-tooltip />
 				</div>
@@ -199,7 +199,7 @@ import VolumeIndicator from '../VolumeIndicator/VolumeIndicator.vue'
 import VideoBackgroundEditor from './VideoBackgroundEditor.vue'
 
 import { useIsInCall } from '../../composables/useIsInCall.js'
-import { CALL, VIRTUAL_BACKGROUND } from '../../constants.js'
+import { AVATAR, CALL, VIRTUAL_BACKGROUND } from '../../constants.js'
 import { devices } from '../../mixins/devices.js'
 import isInLobby from '../../mixins/isInLobby.js'
 import BrowserStorage from '../../services/BrowserStorage.js'
@@ -239,7 +239,7 @@ export default {
 	setup() {
 		const isInCall = useIsInCall()
 		const guestNameStore = useGuestNameStore()
-		return { isInCall, guestNameStore }
+		return { AVATAR, isInCall, guestNameStore }
 	},
 
 	data() {
-- 
cgit v1.2.3


From e4692febc97dc52d40369de67750e9a3d43b114b Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 29 Sep 2023 18:48:48 +0200
Subject: lint files, clean unused scss variables

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/assets/variables.scss                          | 54 +---------------------
 src/components/CallView/Grid/Grid.vue              |  2 -
 src/components/CallView/shared/LocalVideo.vue      |  9 ++--
 src/components/CallView/shared/VideoBottomBar.vue  |  2 -
 src/components/CallView/shared/VideoVue.vue        | 29 ++++++------
 .../CallView/shared/ViewerOverlayCallView.vue      |  2 -
 src/components/ChatView.vue                        |  2 -
 src/components/ConversationIcon.vue                | 16 +++----
 .../ConversationSettings/EditableTextField.vue     |  6 +--
 .../Matterbridge/BridgePart.vue                    |  4 +-
 src/components/LeftSidebar/LeftSidebar.vue         |  2 -
 src/components/MediaSettings/MediaSettings.vue     | 13 +++---
 .../MessagesList/MessagesGroup/Message/Message.vue | 12 ++---
 .../MessagesGroup/MessagesSystemGroup.vue          |  2 +-
 src/components/MessagesList/MessagesList.vue       |  2 +-
 src/components/NewMessage/NewMessage.vue           |  6 +--
 .../NewMessage/NewMessageUploadEditor.vue          |  2 -
 src/components/TopBar/TopBar.vue                   |  6 +--
 src/components/TopBar/TopBarMediaControls.vue      |  4 +-
 src/components/TopBar/TopBarMenu.vue               |  7 +--
 src/views/MainView.vue                             |  2 -
 21 files changed, 53 insertions(+), 131 deletions(-)

diff --git a/src/assets/variables.scss b/src/assets/variables.scss
index 8aeb4f402..ea8f10de2 100644
--- a/src/assets/variables.scss
+++ b/src/assets/variables.scss
@@ -20,66 +20,14 @@
  *
  */
 
-@use 'sass:math';
-
-// https://uxplanet.org/7-rules-for-mobile-ui-button-design-e9cf2ea54556
-// recommended is 48px
-// 44px is what we choose and have very good visual-to-usability ratio
-$clickable-area: 44px;
-
-// background icon size
-// also used for the scss icon font
-$icon-size: 16px;
-
-// icon padding for a $clickable-area width and a $icon-size icon
-// ( 44px - 16px ) / 2
-$icon-margin: math.div($clickable-area - $icon-size, 2);
-
-// transparency background for icons
-$icon-focus-bg: rgba(127, 127, 127, .25);
-
-// popovermenu arrow width from the triangle center
-$arrow-width: 9px;
-
-// opacities
-$opacity_disabled: .5;
-$opacity_normal: .7;
-$opacity_full: 1;
-
-// menu round background hover feedback
-// good looking on dark AND white bg
-$action-background-hover: rgba(127, 127, 127, .25);
-
-// various structure data used in the
-// `NcAppNavigation` component
-$header-height: 50px;
-$navigation-width: 300px;
-
-// mobile breakpoint
-$breakpoint-mobile: 1024px;
-
 //messages list max width
 $messages-list-max-width: 800px;
 
-//message max width
-$message-max-width: 680px;
-
 //message utils width
 $message-utils-width: 100px;
 
-//message form max height
-$message-form-max-height: 180px;
-
+// background color of call container
 $color-call-background: rgba(34, 34, 34, 0.8);
-$color-guests-avatar: #ffffff;
-$color-background-guests-avatar: #b9b9b9;
-
-
-//chat font size
-$chat-font-size: 15px;
-
-//chat line height
-$chat-line-height: 1.6em;
 
 // transition
 $transition-duration-quick: var(--animation-quick, 100ms);
diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index c3ca10f6a..c3f4e2ace 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -858,8 +858,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../assets/variables';
-
 .grid-main-wrapper {
 	position: relative;
 	width: 100%;
diff --git a/src/components/CallView/shared/LocalVideo.vue b/src/components/CallView/shared/LocalVideo.vue
index ec53600b8..247da1639 100644
--- a/src/components/CallView/shared/LocalVideo.vue
+++ b/src/components/CallView/shared/LocalVideo.vue
@@ -368,12 +368,12 @@ export default {
 // Always display the local video in the last row
 .localVideoContainer {
 	grid-row-end: -1;
-	border-radius: calc(var(--default-clickable-area)/2);
+	border-radius: calc(var(--default-clickable-area) / 2);
 	z-index: 1;
 }
 
 .video-container-grid {
-	position:relative;
+	position: relative;
 	height: 100%;
 	width: 100%;
 	overflow: hidden;
@@ -444,7 +444,7 @@ export default {
 	left: 0;
 	box-shadow: inset 0 0 0 3px white;
 	cursor: pointer;
-	border-radius: calc(var(--default-clickable-area)/2);
+	border-radius: calc(var(--default-clickable-area) / 2);
 }
 
 .bottom-bar {
@@ -456,13 +456,16 @@ export default {
 	justify-content: center;
 	align-items: center;
 	height: 40px;
+
 	&--big {
 		justify-content: center;
 		height: 48px;
 	}
+
 	& &__button {
 		opacity: 0.8;
 		background-color: var(--color-background-dark);
+
 		&:hover,
 		&:focus {
 			opacity: 1;
diff --git a/src/components/CallView/shared/VideoBottomBar.vue b/src/components/CallView/shared/VideoBottomBar.vue
index b41f4cdcd..77eff1b08 100644
--- a/src/components/CallView/shared/VideoBottomBar.vue
+++ b/src/components/CallView/shared/VideoBottomBar.vue
@@ -285,8 +285,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../assets/variables';
-
 .wrapper {
 	display: flex;
 	align-items: center;
diff --git a/src/components/CallView/shared/VideoVue.vue b/src/components/CallView/shared/VideoVue.vue
index 25d17fd96..321b1ebba 100644
--- a/src/components/CallView/shared/VideoVue.vue
+++ b/src/components/CallView/shared/VideoVue.vue
@@ -64,9 +64,7 @@
 			<div v-if="showPlaceholderForPromoted"
 				:key="'placeholderForPromoted'"
 				class="placeholder-for-promoted">
-				<AccountCircle v-if="isPromoted || isSelected"
-					fill-color="#FFFFFF"
-					:size="36" />
+				<AccountCircle v-if="isPromoted || isSelected" fill-color="#FFFFFF" :size="64" />
 			</div>
 		</TransitionWrapper>
 		<div v-if="connectionMessage"
@@ -195,7 +193,6 @@ export default {
 	},
 
 	computed: {
-
 		videoWrapperStyle() {
 			if (!this.containerAspectRatio || !this.videoAspectRatio || !this.isBig || this.isGrid) {
 				return
@@ -239,7 +236,7 @@ export default {
 		 * A "failed" connection state will trigger a reconnection, but that may
 		 * not immediately change the "negotiating" or "connecting" attributes
 		 * (for example, while the new offer requested to the HPB was not
-		 * received yet). Similarly both "negotiating" and "connecting" need to
+		 * received yet). Similarly, both "negotiating" and "connecting" need to
 		 * be checked, as the negotiation will start before the connection
 		 * attempt is started.
 		 *
@@ -341,7 +338,7 @@ export default {
 
 		participant() {
 			/**
-			 * This only works for logged in users. Guests can not load the data
+			 * This only works for logged-in users. Guests can not load the data
 			 * via the participant list
 			 */
 			return this.$store.getters.findParticipant(this.$store.getters.getToken(), {
@@ -438,9 +435,9 @@ export default {
 		showSharedScreen() {
 			// Big screen
 			if (this.isBig) {
-				// Alwais show shared screen if there's one
+				// Always show shared screen if there's one
 				return this.hasSharedScreen
-			// Stripe
+				// Stripe
 			} else if (this.isStripe) {
 				if (this.isSharedScreenPromoted) {
 					return false
@@ -449,9 +446,9 @@ export default {
 					return !((this.isSelected) ? this.isSelected : this.isPromoted) && this.hasSharedScreen
 				}
 
-			// Grid
+				// Grid
 			} else {
-				// Alwais show shared screen if there's one
+				// Always show shared screen if there's one
 				return this.hasSharedScreen
 			}
 		},
@@ -606,15 +603,17 @@ export default {
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;
-	border-radius: calc(var(--default-clickable-area)/2);
+	border-radius: calc(var(--default-clickable-area) / 2);
 }
 
 .video-container-big {
 	position: absolute;
+
 	&.one-to-one {
 		width: calc(100% - 16px);
 		height: calc(100% - 8px);
 	}
+
 	& .videoWrapper {
 		margin: auto;
 	}
@@ -637,14 +636,14 @@ export default {
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	border-radius: calc(var(--default-clickable-area)/2);
+	border-radius: calc(var(--default-clickable-area) / 2);
 }
 
 .videoWrapper,
 .video {
 	height: 100%;
 	width: 100%;
-	border-radius: calc(var(--default-clickable-area)/2);
+	border-radius: calc(var(--default-clickable-area) / 2);
 }
 
 .videoWrapper.icon-loading:after {
@@ -688,7 +687,7 @@ export default {
 	top: 0;
 	left: 0;
 	box-shadow: inset 0 0 0 2px white;
-	border-radius: calc(var(--default-clickable-area)/2);
+	border-radius: calc(var(--default-clickable-area) / 2);
 }
 
 .hover-shadow {
@@ -699,6 +698,6 @@ export default {
 	left: 0;
 	box-shadow: inset 0 0 0 3px white;
 	cursor: pointer;
-	border-radius: calc(var(--default-clickable-area)/2);
+	border-radius: calc(var(--default-clickable-area) / 2);
 }
 </style>
diff --git a/src/components/CallView/shared/ViewerOverlayCallView.vue b/src/components/CallView/shared/ViewerOverlayCallView.vue
index 4fdb40f50..6fad37e45 100644
--- a/src/components/CallView/shared/ViewerOverlayCallView.vue
+++ b/src/components/CallView/shared/ViewerOverlayCallView.vue
@@ -228,8 +228,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../../assets/variables";
-
 .viewer-overlay-ghost {
 	position: absolute;
 	bottom: 8px;
diff --git a/src/components/ChatView.vue b/src/components/ChatView.vue
index 7d338ba99..a1fb7b831 100644
--- a/src/components/ChatView.vue
+++ b/src/components/ChatView.vue
@@ -209,8 +209,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../assets/variables';
-
 .chatView {
 	width: 100%;
 	height: 100%;
diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
index 4b3a34ad0..a4a096574 100644
--- a/src/components/ConversationIcon.vue
+++ b/src/components/ConversationIcon.vue
@@ -230,19 +230,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$icon-size: var(--icon-size, 44px);
-
 .conversation-icon {
-	width: $icon-size;
-	height: $icon-size;
+	width: var(--icon-size);
+	height: var(--icon-size);
 	position: relative;
 
 	.avatar.icon {
 		display: block;
-		width: $icon-size;
-		height: $icon-size;
-		line-height: $icon-size;
-		background-size: calc($icon-size / 2);
+		width: var(--icon-size);
+		height: var(--icon-size);
+		line-height: var(--icon-size);
+		background-size: calc(var(--icon-size) / 2);
 		background-color: var(--color-background-darker);
 
 		&.icon-changelog {
@@ -253,7 +251,7 @@ $icon-size: var(--icon-size, 44px);
 	.overlap-icon {
 		position: absolute;
 		top: 0;
-		left: calc(#{$icon-size} - 12px);
+		left: calc(var(--icon-size) - 12px);
 		line-height: 100%;
 		display: inline-block;
 		vertical-align: middle;
diff --git a/src/components/ConversationSettings/EditableTextField.vue b/src/components/ConversationSettings/EditableTextField.vue
index 1642e19dd..ccfd04547 100644
--- a/src/components/ConversationSettings/EditableTextField.vue
+++ b/src/components/ConversationSettings/EditableTextField.vue
@@ -256,7 +256,7 @@ export default {
 	width: 100%;
 	overflow: hidden;
 	position: relative;
-	min-height: $clickable-area;
+	min-height: var(--default-clickable-area);
 	align-items: flex-end;
 
 	&__edit {
@@ -271,8 +271,8 @@ export default {
 }
 
 .spinner {
-	width: $clickable-area;
-	height: $clickable-area;
+	width: var(--default-clickable-area);
+	height: var(--default-clickable-area);
 	margin: 0 0 0 44px;
 }
 
diff --git a/src/components/ConversationSettings/Matterbridge/BridgePart.vue b/src/components/ConversationSettings/Matterbridge/BridgePart.vue
index 165519ce5..157c09a0b 100644
--- a/src/components/ConversationSettings/Matterbridge/BridgePart.vue
+++ b/src/components/ConversationSettings/Matterbridge/BridgePart.vue
@@ -187,8 +187,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../assets/variables';
-
 .part {
 	padding-top: 10px;
 }
@@ -247,7 +245,7 @@ input {
 
 // Force action buttons to be 44px tall;
 :deep(.action-item__menutoggle) {
-	height: $clickable-area !important;
+	height: var(--default-clickable-area) !important;
 }
 
 .field {
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 0e7f40eb3..1fce07c42 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -819,8 +819,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/variables';
-
 .scroller {
 	padding: 0 4px 0 6px;
 }
diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue
index 480ad43e2..209517c4e 100644
--- a/src/components/MediaSettings/MediaSettings.vue
+++ b/src/components/MediaSettings/MediaSettings.vue
@@ -339,7 +339,7 @@ export default {
 		},
 		showUpdateChangesButton() {
 			return this.updatedBackground || this.deviceIdChanged || this.audioDeviceStateChanged
-			 || this.videoDeviceStateChanged
+				|| this.videoDeviceStateChanged
 		},
 	},
 
@@ -552,7 +552,7 @@ export default {
 
 <style lang="scss" scoped>
 .media-settings {
-	padding: calc(var(--default-grid-baseline)*4);
+	padding: calc(var(--default-grid-baseline) * 4);
 	background-color: var(--color-main-background);
 	overflow-y: auto;
 	overflow-x: hidden;
@@ -562,14 +562,15 @@ export default {
 	&__title {
 		text-align: center;
 	}
+
 	&__preview {
 		position: relative;
-		margin: 0 auto calc(var(--default-grid-baseline)*3) auto;
+		margin: 0 auto calc(var(--default-grid-baseline) * 3);
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		overflow: hidden;
-		border-radius: calc(var(--default-grid-baseline)*3);
+		border-radius: calc(var(--default-grid-baseline) * 3);
 		background-color: var(--color-loading-dark);
 		height: 300px;
 		width: 400px;
@@ -601,7 +602,7 @@ export default {
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		gap: calc(var(--default-grid-baseline)*2);
+		gap: calc(var(--default-grid-baseline) * 2);
 	}
 
 	&__call-buttons {
@@ -637,7 +638,7 @@ export default {
 .checkbox {
 	display: flex;
 	justify-content: center;
-	margin: calc(var(--default-grid-baseline)*2);
+	margin: calc(var(--default-grid-baseline) * 2);
 }
 
 :deep(.modal-container) {
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 214ee0f34..d9e2cb3ae 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -942,8 +942,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../../assets/variables';
-
 .message {
 	position: relative;
 
@@ -956,8 +954,8 @@ export default {
 
 .message-body {
 	padding: 4px;
-	font-size: $chat-font-size;
-	line-height: $chat-line-height;
+	font-size: var(--default-font-size);
+	line-height: var(--default-line-height);
 	position: relative;
 	&__main {
 		display: flex;
@@ -1008,7 +1006,7 @@ export default {
 			user-select: none;
 			display: flex;
 			color: var(--color-text-maxcontrast);
-			font-size: $chat-font-size;
+			font-size: var(--default-font-size);
 			flex: 1 0 auto;
 			padding: 0 8px 0 8px;
 		}
@@ -1031,7 +1029,7 @@ export default {
 }
 
 .date {
-	margin-right: $clickable-area;
+	margin-right: var(--default-clickable-area);
 	&--self {
 		margin-right: 0;
 	}
@@ -1074,7 +1072,7 @@ export default {
 }
 
 .message-status {
-	width: $clickable-area;
+	width: var(--default-clickable-area);
 	height: 24px;
 	display: flex;
 	justify-content: center;
diff --git a/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue
index c6ab6e95b..c75df0d47 100644
--- a/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue
+++ b/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue
@@ -279,7 +279,7 @@ export default {
 	padding: 0;
 	&--system {
 		flex-direction: column;
-		padding-left: $clickable-area + 8px;
+		padding-left: calc(var(--default-clickable-area) + 8px);
 	}
 	&:focus {
 		background-color: rgba(47, 47, 47, 0.068);
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index 5eb18b864..a77f91021 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -1173,7 +1173,7 @@ export default {
 	}
 
 	&__date-text {
-		margin-right: $clickable-area * 2;
+		margin-right: calc(var(--default-clickable-area) * 2);
 		content: attr(data-date);
 		padding: 4px 12px;
 		left: 50%;
diff --git a/src/components/NewMessage/NewMessage.vue b/src/components/NewMessage/NewMessage.vue
index b60021d07..a01da03ab 100644
--- a/src/components/NewMessage/NewMessage.vue
+++ b/src/components/NewMessage/NewMessage.vue
@@ -784,8 +784,6 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@import '../../assets/variables';
-
 .wrapper {
 	padding: 12px 0;
 	min-height: 69px;
@@ -835,9 +833,9 @@ export default {
 	&__icon:hover,
 	&__icon:focus,
 	&__icon:active {
-		opacity: $opacity_full;
+		opacity: 1;
 		// good looking on dark AND white bg
-		background-color: $icon-focus-bg;
+		background-color: rgba(127, 127, 127, .25);
 	}
 }
 
diff --git a/src/components/NewMessage/NewMessageUploadEditor.vue b/src/components/NewMessage/NewMessageUploadEditor.vue
index 570395849..236b92b48 100644
--- a/src/components/NewMessage/NewMessageUploadEditor.vue
+++ b/src/components/NewMessage/NewMessageUploadEditor.vue
@@ -196,8 +196,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/variables';
-
 .upload-editor {
 	height: 100%;
 	display: flex;
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index ec6f5c3c3..9f4fe190f 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -402,8 +402,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/variables';
-
 .top-bar {
 	right: 12px; /* needed so we can still use the scrollbar */
 	display: flex;
@@ -414,7 +412,7 @@ export default {
 	border-bottom: 1px solid var(--color-border);
 
 	.talk-sidebar-callview & {
-		margin-right: $clickable-area;
+		margin-right: var(--default-clickable-area);
 	}
 
 	&.in-call {
@@ -487,7 +485,7 @@ export default {
 		justify-content: center;
 		width: 100%;
 		overflow: hidden;
-		height: $clickable-area;
+		height: var(--default-clickable-area);
 		&--offline {
 			color: var(--color-text-maxcontrast);
 		}
diff --git a/src/components/TopBar/TopBarMediaControls.vue b/src/components/TopBar/TopBarMediaControls.vue
index e61b9a134..20af35667 100644
--- a/src/components/TopBar/TopBarMediaControls.vue
+++ b/src/components/TopBar/TopBarMediaControls.vue
@@ -564,8 +564,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/variables';
-
 .buttons-bar {
 	display: flex;
 	align-items: center;
@@ -598,7 +596,7 @@ export default {
 		padding-top:4px;
 	}
 	&__button {
-		height: $clickable-area;
+		height: var(--default-clickable-area);
 	}
 }
 
diff --git a/src/components/TopBar/TopBarMenu.vue b/src/components/TopBar/TopBarMenu.vue
index 1d3a58f65..19d29c5bd 100644
--- a/src/components/TopBar/TopBarMenu.vue
+++ b/src/components/TopBar/TopBarMenu.vue
@@ -490,10 +490,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/variables';
-.top-bar {
-	&__wrapper {
-		display: flex;
-	}
+.top-bar__wrapper {
+	display: flex;
 }
 </style>
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index a706855e5..5fd2af983 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -77,8 +77,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../assets/variables';
-
 .main-view {
 	height: 100%;
 	width: 100%;
-- 
cgit v1.2.3