From da6202d3e34ca3d3c2439baec94412147efb5133 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 4 Dec 2023 11:17:00 +0100
Subject: [PATCH] switch theme for toggle in call

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/App.vue | 36 ++++++++++++------------------------
 1 file changed, 12 insertions(+), 24 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c3536a83f39..e3913717e2f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -230,6 +230,18 @@ export default {
 				this.recordingConsentGiven = false
 			}
 		},
+
+		isInCall: {
+			immediate: true,
+			handler(value) {
+				const toggle = this.$refs.leftSidebar?.$refs.leftSidebar?.$el.querySelector('button.app-navigation-toggle')
+				if (value) {
+					toggle?.setAttribute('data-theme-dark', true)
+				} else {
+					toggle?.removeAttribute('data-theme-dark')
+				}
+			}
+		}
 	},
 
 	beforeCreate() {
@@ -718,17 +730,10 @@ export default {
 </script>
 
 <style lang="scss">
-
 /* FIXME: remove after https://github.com/nextcloud/nextcloud-vue/issues/2097 is solved */
 .mx-datepicker-main.mx-datepicker-popup {
 	z-index: 10001 !important;
 }
-
-/* FIXME: remove after https://github.com/nextcloud-libraries/nextcloud-vue/pull/4350 regression is solved */
-/* Force modal close button to be above modal content */
-.modal-container__close {
-	z-index: 1;
-}
 </style>
 
 <style lang="scss" scoped>
@@ -738,23 +743,6 @@ export default {
 		:deep(.app-content) {
 			background-color: transparent;
 		}
-
-		&:hover :deep(.app-navigation-toggle) {
-			background-color: rgba(0, 0, 0, .1) !important;
-
-			&:hover {
-				background-color: rgba(0, 0, 0, .2) !important;
-			}
-		}
-
-		:deep(.app-navigation-toggle) {
-			/* Force white handle when inside a call */
-			color: #D8D8D8;
-
-			&:active {
-				color: #FFFFFF;
-			}
-		}
 	}
 
 	// Fix fullscreen black bar on top