From 9611c977b214e007ba409a01e2d53403c79a47be Mon Sep 17 00:00:00 2001
From: Swikriti Tripathi <41103328+SwikritiT@users.noreply.github.com>
Date: Thu, 10 Aug 2023 11:25:04 +0545
Subject: [PATCH] [OP#49182] Fix the form heading index colour in different
 themes (#453)

* Fix the colour of the indexes in different themes

Signed-off-by: Swikriti Tripathi <swikriti808@gmail.com>

* update snapshots

Signed-off-by: Swikriti Tripathi <swikriti808@gmail.com>

* fix style lint

Signed-off-by: Swikriti Tripathi <swikriti808@gmail.com>

---------

Signed-off-by: Swikriti Tripathi <swikriti808@gmail.com>
---
 src/components/AdminSettings.vue              | 21 ++++++++++++-------
 src/components/admin/FormHeading.vue          | 18 ++++++++++------
 .../__snapshots__/AdminSettings.spec.js.snap  |  2 +-
 .../__snapshots__/FormHeading.spec.js.snap    |  4 ++--
 4 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/components/AdminSettings.vue b/src/components/AdminSettings.vue
index 666a3e0f4..d41abd7e2 100644
--- a/src/components/AdminSettings.vue
+++ b/src/components/AdminSettings.vue
@@ -4,7 +4,9 @@
 		<div class="openproject-server-host">
 			<FormHeading index="1"
 				:title="t('integration_openproject', 'OpenProject server')"
-				:is-complete="isServerHostFormComplete" />
+				:is-complete="isServerHostFormComplete"
+				:is-dark-theme="isDarkTheme" />
+
 			<FieldValue v-if="isServerHostFormInView"
 				is-required
 				class="pb-1"
@@ -56,7 +58,8 @@
 			<FormHeading index="2"
 				:title="t('integration_openproject', 'OpenProject OAuth settings')"
 				:is-complete="isOPOAuthFormComplete"
-				:is-disabled="isOPOAuthFormInDisableMode" />
+				:is-disabled="isOPOAuthFormInDisableMode"
+				:is-dark-theme="isDarkTheme" />
 			<div v-if="isServerHostFormComplete">
 				<FieldValue v-if="isOPOAuthFormInView"
 					is-required
@@ -109,7 +112,8 @@
 			<FormHeading index="3"
 				:title="t('integration_openproject', 'Nextcloud OAuth client')"
 				:is-complete="isNcOAuthFormComplete"
-				:is-disabled="isNcOAuthFormInDisableMode" />
+				:is-disabled="isNcOAuthFormInDisableMode"
+				:is-dark-theme="isDarkTheme" />
 			<div v-if="state.nc_oauth_client">
 				<TextInput v-if="isNcOAuthFormInEdit"
 					id="nextcloud-oauth-client-id"
@@ -262,7 +266,8 @@
 			<FormHeading index="5"
 				:title="t('integration_openproject', 'Project folders application connection')"
 				:is-complete="isOPUserAppPasswordFormComplete"
-				:is-disabled="isOPUserAppPasswordInDisableMode" />
+				:is-disabled="isOPUserAppPasswordInDisableMode"
+				:is-dark-theme="isDarkTheme" />
 			<div v-if="state.app_password_set">
 				<TextInput v-if="isOPUserAppPasswordFormInEdit"
 					id="openproject-system-password"
@@ -408,6 +413,7 @@ export default {
 			textLabelProjectFolderSetupButton: null,
 			// pointer for which form the request is coming
 			isFormStep: null,
+			isDarkTheme: null,
 		}
 	},
 	computed: {
@@ -528,14 +534,13 @@ export default {
 		isResetButtonDisabled() {
 			return !(this.state.openproject_client_id || this.state.openproject_client_secret || this.state.openproject_instance_url)
 		},
-		isDarkTheme() {
-			return !!document.querySelector("body[data-themes*='dark']")
-
-		},
 	},
 	created() {
 		this.init()
 	},
+	mounted() {
+		this.isDarkTheme = window.getComputedStyle(this.$el).getPropertyValue('--background-invert-if-dark') === 'invert(100%)'
+	},
 	methods: {
 		init() {
 			if (this.state) {
diff --git a/src/components/admin/FormHeading.vue b/src/components/admin/FormHeading.vue
index 8540a97ea..db4b319e0 100644
--- a/src/components/admin/FormHeading.vue
+++ b/src/components/admin/FormHeading.vue
@@ -10,7 +10,12 @@
 		<div v-else-if="isComplete" class="complete">
 			<CheckBoldIcon fill-color="#FFFFFF" :size="12" />
 		</div>
-		<div v-else class="index">
+		<div v-else
+			class="index"
+			:class="{
+				'index-dark-mode': isDarkTheme,
+				'index-light-mode': !isDarkTheme
+			}">
 			{{ index }}
 		</div>
 		<div class="title"
@@ -124,7 +129,6 @@ export default {
 		text-align: center;
 		border-radius: 50%;
 		background: var(--color-loading-dark);
-		color: white;
 	}
 	.title {
 		font-weight: 700;
@@ -134,10 +138,12 @@ export default {
 	}
 }
 
-body[data-themes*='dark'] {
-	.index {
-		color: #000000;
-	}
+.index-dark-mode {
+	color: #000000;
+}
+
+.index-light-mode {
+	color: #FFFFFF;
 }
 
 .form-heading.disabled {
diff --git a/tests/jest/components/__snapshots__/AdminSettings.spec.js.snap b/tests/jest/components/__snapshots__/AdminSettings.spec.js.snap
index 8cc31199e..71d7003ba 100644
--- a/tests/jest/components/__snapshots__/AdminSettings.spec.js.snap
+++ b/tests/jest/components/__snapshots__/AdminSettings.spec.js.snap
@@ -33,7 +33,7 @@ exports[`AdminSettings.vue Nextcloud OAuth values form view mode with complete v
 exports[`AdminSettings.vue OpenProject OAuth values form edit mode should show the form and hide the field values 1`] = `
 <div class="openproject-oauth-values">
   <div class="form-heading">
-    <div class="index">
+    <div class="index index-light-mode">
       2
     </div>
     <div class="title">
diff --git a/tests/jest/components/admin/__snapshots__/FormHeading.spec.js.snap b/tests/jest/components/admin/__snapshots__/FormHeading.spec.js.snap
index d49944d77..0ef68f125 100644
--- a/tests/jest/components/admin/__snapshots__/FormHeading.spec.js.snap
+++ b/tests/jest/components/admin/__snapshots__/FormHeading.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`FormHeading.vue is complete prop should hide the checkmark icon and show the index if not complete 1`] = `
 <div class="form-heading">
-  <div class="index">
+  <div class="index index-light-mode">
     1
   </div>
   <div class="title">
@@ -22,7 +22,7 @@ exports[`FormHeading.vue is complete prop should show checkmark icon, add green
 
 exports[`FormHeading.vue is disabled prop should add disabled class to the form heading 1`] = `
 <div class="form-heading disabled">
-  <div class="index">
+  <div class="index index-light-mode">
     1
   </div>
   <div class="title">