From c7a1722a909ada80891d5ed72dc836e2fb1cef69 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Wed, 27 Sep 2023 19:13:20 +0200
Subject: [PATCH] increase avatar sizes in MediaSettings

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../MediaSettings/MediaSettings.vue           | 29 +++++++++----------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue
index 157b2ab720d2..260c9924c7f7 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
@@ -41,14 +41,14 @@
 					<VideoBackground :display-name="displayName"
 						:user="userId" />
 					<NcAvatar v-if="userId"
-						:size="128"
+						:size="180"
 						:disable-menu="true"
 						:disable-tooltip="true"
 						:show-user-status="false"
 						:user="userId"
 						:display-name="displayName" />
 					<div v-if="!userId"
-						class="avatar avatar-128px guest">
+						class="avatar avatar-180px guest">
 						{{ firstLetterOfGuestName }}
 					</div>
 				</div>
@@ -320,12 +320,12 @@ export default {
 
 		isStartingRecording() {
 			return this.conversation.callRecording === CALL.RECORDING.VIDEO_STARTING
-				|| this.conversation.callRecording === CALL.RECORDING.AUDIO_STARTING
+					|| this.conversation.callRecording === CALL.RECORDING.AUDIO_STARTING
 		},
 
 		isRecording() {
 			return this.conversation.callRecording === CALL.RECORDING.VIDEO
-				|| this.conversation.callRecording === CALL.RECORDING.AUDIO
+					|| this.conversation.callRecording === CALL.RECORDING.AUDIO
 		},
 
 		showSilentCallOption() {
@@ -345,7 +345,7 @@ export default {
 		},
 		showUpdateChangesButton() {
 			return this.updatedBackground || this.deviceIdChanged || this.audioDeviceStateChanged
-			 || this.videoDeviceStateChanged
+					|| this.videoDeviceStateChanged
 		},
 	},
 
@@ -557,13 +557,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/variables';
 @import '../../assets/avatar';
-@include avatar-mixin(64px);
-@include avatar-mixin(128px);
+@include avatar-mixin(180px);
 
 .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;
@@ -573,14 +571,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;
@@ -608,11 +607,11 @@ export default {
 	}
 
 	&__call-preferences {
-		height: $clickable-area;
+		height: var(--default-clickable-area);
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		gap: calc(var(--default-grid-baseline)*2);
+		gap: calc(var(--default-grid-baseline) * 2);
 	}
 
 	&__call-buttons {
@@ -648,7 +647,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) {