From 99c0cfe0b9ab8de7ae9bf016c837b653bfd9167e Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Mon, 11 Mar 2024 14:22:04 +0100
Subject: [PATCH] fix(ConversationIcon): force light background color for
 conversation type when using light theme

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 src/components/TopBar/TopBar.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 5ffb8159110..a5353f41d09 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -20,7 +20,7 @@
 -->
 
 <template>
-	<div class="top-bar" :data-theme-dark="isInCall">
+	<div class="top-bar" :style="topBarStyle" :data-theme-dark="isInCall">
 		<ConversationIcon :key="conversation.token"
 			class="conversation-icon"
 			:offline="isPeerInactive"
@@ -306,6 +306,12 @@ export default {
 		hasReactionSupport() {
 			return this.isInCall && this.supportedReactions?.length > 0
 		},
+
+		topBarStyle() {
+			return {
+				'--original-color-main-background': window.getComputedStyle(document.body).getPropertyValue('--color-main-background')
+			}
+		},
 	},
 
 	watch: {
@@ -465,4 +471,9 @@ export default {
 		}
 	}
 }
+
+:deep(.conversation-icon__type) {
+	border-color: var(--original-color-main-background) !important;
+	background-color: var(--original-color-main-background) !important;
+}
 </style>