lint files, clean unused scss variables

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

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>