chore(vue3): migrate ::v-deep to :deep

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>

12 files changed, 27 insertions, 37 deletions

diff --git a/src/components/AppNavigation/RootNavigation.vue b/src/components/AppNavigation/RootNavigation.vue
index 232b9473..9f98dfb4 100644
--- a/src/components/AppNavigation/RootNavigation.vue
+++ b/src/components/AppNavigation/RootNavigation.vue
@@ -490,7 +490,7 @@ $caption-padding: 22px;
 #newcircle {
 	margin-top: $caption-padding;
 
-	::v-deep a {
+	:deep(a) {
 		color: var(--color-text-maxcontrast)
 	}
 }
@@ -499,10 +499,10 @@ $caption-padding: 22px;
 	margin: 0 $caption-padding;
 }
 
-.app-navigation__collapse ::v-deep a {
+.app-navigation__collapse :deep(a) {
 	color: var(--color-text-maxcontrast)
 }
-::v-deep .settings-button__label {
+:deep(.settings-button__label) {
 	opacity: .7;
 	font-weight: bold;
 }
diff --git a/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue b/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue
index c77eca3e..3ab1bcdf 100644
--- a/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue
+++ b/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue
@@ -151,7 +151,7 @@ export default {
 	text-overflow: ellipsis;
 	width: 107px;
 }
-::v-deep .button-vue--vue-secondary {
+:deep(.button-vue--vue-secondary) {
 	background-color: transparent;
 	border: none;
 	box-shadow: none;
diff --git a/src/components/AppNavigation/Settings/SettingsImportContacts.vue b/src/components/AppNavigation/Settings/SettingsImportContacts.vue
index b57f0f92..07fde312 100644
--- a/src/components/AppNavigation/Settings/SettingsImportContacts.vue
+++ b/src/components/AppNavigation/Settings/SettingsImportContacts.vue
@@ -337,7 +337,7 @@ export default {
 		}
 		&-disabled {
 			// Wrap warning about disabled button instead of ellipsing it
-			::v-deep .button-vue__text {
+			:deep(.button-vue__text) {
 				white-space: pre-wrap;
 			}
 		}
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index 715a5ed5..414f039c 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -1092,7 +1092,7 @@ section.contact-details {
 		}
 	}
 #qrcode-modal {
-	::v-deep .modal-container {
+	:deep(.modal-container) {
 		display: flex;
 		padding: 10px;
 		background-color: #fff;
@@ -1101,7 +1101,7 @@ section.contact-details {
 		}
 	}
 }
-::v-deep .v-select.select {
+:deep(.v-select.select) {
 	min-width: 0;
 	flex: 1 auto;
 	.vs__actions {
@@ -1109,7 +1109,7 @@ section.contact-details {
 	}
 }
 #pick-addressbook-modal {
-	::v-deep .modal-container {
+	:deep(.modal-container) {
 		display: flex;
 		overflow: visible;
 		flex-wrap: wrap;
@@ -1128,11 +1128,10 @@ section.contact-details {
 	background-color: var(--color-primary-element-light);
 	border-radius: var(--border-radius-rounded);
 }
-::v-deep .button-vue--vue-tertiary:hover,
-.button-vue--vue-tertiary:active {
-		background-color: var(--color-primary-element-light-hover) !important;
-
-	}
+:deep(.button-vue--vue-tertiary:hover),
+:deep(.button-vue--vue-tertiary:active) {
+	background-color: var(--color-primary-element-light-hover) !important;
+}
 .related-resources {
 	display:inline-grid;
 	margin-top: 88px;
@@ -1153,7 +1152,7 @@ section.contact-details {
 	display: inline-flex;
 }
 // forcing the size only for contacts app to fit the text size of the contacts app
-::v-deep .related-resources__header h5 {
+:deep(.related-resources__header h5) {
 	font-size: medium;
 	opacity: .7;
 	color: var(--color-primary-element);
diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue
index e7e30337..a519cf38 100644
--- a/src/components/ContactDetails/ContactDetailsAvatar.vue
+++ b/src/components/ContactDetails/ContactDetailsAvatar.vue
@@ -596,7 +596,7 @@ export default {
 			justify-content: space-between;
 		}
 
-		&::v-deep .cropper-view-box {
+		&:deep(.cropper-view-box) {
 			border-radius: 50%;
 		}
 	}
@@ -640,7 +640,7 @@ export default {
 		justify-content: center;
 		background-color: rgba(0, 0, 0, .2);
 		// Always show max opacity, let the background-color be the visual cue
-		&::v-deep .action-item__menutoggle {
+		&:deep(.action-item__menutoggle) {
 			opacity: 1;
 		}
 	}
@@ -654,7 +654,7 @@ export default {
 		width: 44px;
 		height: 44px;
 		margin: -50%;
-		&::v-deep {
+		&:deep {
 			.action-item__menutoggle {
 				opacity: .7;
 				background-color: rgba(0, 0, 0, .2);
@@ -675,7 +675,7 @@ export default {
 	// Because of that, we now fill the modal-container,
 	// so we need to watch for click on the photo-wrapper to
 	// close on image click outside.
-	&::v-deep .modal-container {
+	&:deep(.modal-container) {
 		background-color: transparent;
 		box-shadow: none;
 
diff --git a/src/components/DetailsHeader.vue b/src/components/DetailsHeader.vue
index 31788e19..502e2a28 100644
--- a/src/components/DetailsHeader.vue
+++ b/src/components/DetailsHeader.vue
@@ -145,11 +145,11 @@ $top-padding: 50px;
 			margin: 0;
 		}
 
-		::v-deep input {
+		:deep(input) {
 			flex: 1 auto;
 		}
 
-		&-title ::v-deep input {
+		&-title :deep(input) {
 			font-weight: bold;
 		}
 
diff --git a/src/components/EntityPicker/EntityBubble.vue b/src/components/EntityPicker/EntityBubble.vue
index 4864a86f..660a0be6 100644
--- a/src/components/EntityPicker/EntityBubble.vue
+++ b/src/components/EntityPicker/EntityBubble.vue
@@ -87,7 +87,7 @@ export default {
 
 <style lang="scss" scoped>
 // better visual with light default tint
-::v-deep .user-bubble__content {
+:deep(.user-bubble__content) {
 	background-color: var(--color-pirimary-light);
 }
 
diff --git a/src/components/EntityPicker/EntityPicker.vue b/src/components/EntityPicker/EntityPicker.vue
index 391e45e4..3be09c5f 100644
--- a/src/components/EntityPicker/EntityPicker.vue
+++ b/src/components/EntityPicker/EntityPicker.vue
@@ -466,13 +466,13 @@ $icon-margin: math.div($clickable-area - $icon-size, 2);
 }
 
 // Properly center Entity Picker empty content
-::v-deep .empty-content {
+:deep(.empty-content) {
 	margin: auto 0 !important;
 }
 
 /** Size full in the modal component doesn't have border radius, this adds
 it back */
-::v-deep .modal-container {
+:deep(.modal-container) {
 	border-radius: var(--border-radius-large) !important;
 }
 
diff --git a/src/components/EntityPicker/EntitySearchResult.vue b/src/components/EntityPicker/EntitySearchResult.vue
index 498471e9..cdc4e35c 100644
--- a/src/components/EntityPicker/EntitySearchResult.vue
+++ b/src/components/EntityPicker/EntitySearchResult.vue
@@ -128,7 +128,7 @@ $icon-margin: math.div($clickable-area - $icon-size, 2);
 		&--selected,
 		&:hover,
 		&:focus {
-			::v-deep .user-bubble__content {
+			:deep(.user-bubble__content) {
 				// better visual with light default tint
 				background-color: var(--color-primary-element-light);
 			}
@@ -136,7 +136,7 @@ $icon-margin: math.div($clickable-area - $icon-size, 2);
 	}
 }
 
-::v-deep .user-bubble__content {
+:deep(.user-bubble__content){
 	// Take full width
 	width: 100%;
 	// Override default styling
diff --git a/src/components/EntityPicker/NewCircleIntro.vue b/src/components/EntityPicker/NewCircleIntro.vue
index 3c5345f7..a0c1126c 100644
--- a/src/components/EntityPicker/NewCircleIntro.vue
+++ b/src/components/EntityPicker/NewCircleIntro.vue
@@ -212,7 +212,7 @@ $icon-margin: math.div($clickable-area - $icon-size, 2);
 }
 
 // Make the checkboxes span full width
-::v-deep .checkbox-radio-switch__label {
+:deep(.checkbox-radio-switch__label) {
 	width: 100%;
 }
 
@@ -223,7 +223,7 @@ $icon-margin: math.div($clickable-area - $icon-size, 2);
 
 /** Size full in the modal component doesn't have border radius, this adds
 it back */
-::v-deep .modal-container {
+:deep(.modal-container) {
 	border-radius: var(--border-radius-large) !important;
 }
 
diff --git a/src/components/MemberList.vue b/src/components/MemberList.vue
index 784f8e2d..171d6964 100644
--- a/src/components/MemberList.vue
+++ b/src/components/MemberList.vue
@@ -335,7 +335,7 @@ export default {
 		}
 	}
 
-	&::v-deep .empty-content {
+	:deep(.empty-content) {
 		margin: auto;
 	}
 }
diff --git a/src/components/ProcessingScreen.vue b/src/components/ProcessingScreen.vue
index 42ca511b..eed658a5 100644
--- a/src/components/ProcessingScreen.vue
+++ b/src/components/ProcessingScreen.vue
@@ -52,15 +52,6 @@ export default {
 		flex-direction: column;
 		width: auto;
 		margin: 50px;
-
-		// Progress &desc wrapper
-		&::v-deep > p {
-			display: flex;
-			align-items: center;
-			flex-direction: column;
-			width: 80%;
-			margin: auto;
-		}
 	}
 
 	&__progress {