fix: Adjust dashboard and header menu to use new background colors

fix(UnifiedSearch): Adjust to new background color

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

4 files changed, 18 insertions, 11 deletions

diff --git a/core/src/components/AppMenu.vue b/core/src/components/AppMenu.vue
index a9bce0dcea3..e84a1250222 100644
--- a/core/src/components/AppMenu.vue
+++ b/core/src/components/AppMenu.vue
@@ -144,7 +144,7 @@ $header-icon-size: 20px;
 				width: 12px;
 				height: 5px;
 				border-radius: 3px;
-				background-color: var(--color-primary-text);
+				background-color: var(--color-background-plain-text);
 				left: 50%;
 				bottom: 6px;
 				display: block;
@@ -161,8 +161,8 @@ $header-icon-size: 20px;
 			width: calc(100% - 4px);
 			height: calc(100% - 4px);
 			margin: 2px;
-			// this is shown directly on the background which has `color-primary`, so we need `color-primary-text`
-			color: var(--color-primary-text);
+			// this is shown directly on the background
+			color: var(--color-background-plain-text);
 			position: relative;
 		}
 
@@ -179,8 +179,8 @@ $header-icon-size: 20px;
 			opacity: 0;
 			position: absolute;
 			font-size: 12px;
-			// this is shown directly on the background which has `color-primary`, so we need `color-primary-text`
-			color: var(--color-primary-text);
+			// this is shown directly on the background
+			color: var(--color-background-plain-text);
 			text-align: center;
 			left: 50%;
 			top: 45%;
@@ -238,7 +238,7 @@ $header-icon-size: 20px;
 
 	/* Remove all background and align text color if not expanded */
 	&:not([aria-expanded="true"]) {
-		color: var(--color-primary-element-text);
+		color: var(--color-background-plain-text);
 
 		&:hover {
 			opacity: 1;
@@ -278,7 +278,7 @@ $header-icon-size: 20px;
 	content: "";
 	width: 8px;
 	height: 8px;
-	background-color: var(--color-primary-element-text);
+	background-color: var(--color-background-plain-text);
 	border-radius: 50%;
 	position: absolute;
 	display: block;
diff --git a/core/src/views/ContactsMenu.vue b/core/src/views/ContactsMenu.vue
index 75c4994ef9b..51eea0a0fb1 100644
--- a/core/src/views/ContactsMenu.vue
+++ b/core/src/views/ContactsMenu.vue
@@ -9,7 +9,7 @@
 		:aria-label="t('core', 'Search contacts')"
 		@open="handleOpen">
 		<template #trigger>
-			<Contacts :size="20" />
+			<Contacts class="contactsmenu__trigger-icon" :size="20" />
 		</template>
 		<div class="contactsmenu__menu">
 			<div class="contactsmenu__menu__input-wrapper">
@@ -171,6 +171,10 @@ export default {
 .contactsmenu {
 	overflow-y: hidden;
 
+	&__trigger-icon {
+		color: var(--color-background-plain-text) !important;
+	}
+
 	&__menu {
 		display: flex;
 		flex-direction: column;
diff --git a/core/src/views/LegacyUnifiedSearch.vue b/core/src/views/LegacyUnifiedSearch.vue
index ed955060c96..72a30b5b708 100644
--- a/core/src/views/LegacyUnifiedSearch.vue
+++ b/core/src/views/LegacyUnifiedSearch.vue
@@ -12,8 +12,7 @@
 		@close="onClose">
 		<!-- Header icon -->
 		<template #trigger>
-			<Magnify class="unified-search__trigger"
-				:size="22/* fit better next to other 20px icons */" />
+			<Magnify class="unified-search__trigger-icon" :size="20" />
 		</template>
 
 		<!-- Search form & filters wrapper -->
@@ -706,6 +705,10 @@ $input-height: 34px;
 $input-padding: 10px;
 
 .unified-search {
+	&__trigger-icon {
+		color: var(--color-background-plain-text) !important;
+	}
+
 	&__input-wrapper {
 		position: sticky;
 		// above search results
diff --git a/core/src/views/UnifiedSearch.vue b/core/src/views/UnifiedSearch.vue
index d769b7b556f..2adf818b181 100644
--- a/core/src/views/UnifiedSearch.vue
+++ b/core/src/views/UnifiedSearch.vue
@@ -71,7 +71,7 @@ export default {
 
 			&-icon {
 				// ensure the icon has the correct color
-				color: var(--color-primary-text) !important;
+				color: var(--color-background-plain-text) !important;
 			}
 		}
 	}