[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>
nextcloud · Aug 21, 2023 · 9611c97 · 9611c97
1 parent 968d719
commit 9611c97
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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">