fix(unified-search): Refactor header menu entry

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

2 files changed, 29 insertions, 28 deletions

diff --git a/core/src/views/UnifiedSearch.vue b/core/src/views/UnifiedSearch.vue
index 419c0b47c41..c151516c205 100644
--- a/core/src/views/UnifiedSearch.vue
+++ b/core/src/views/UnifiedSearch.vue
@@ -20,13 +20,16 @@
   -
   -->
 <template>
-	<div class="header-menu">
-		<NcButton class="unified-search__button" :aria-label="t('core', 'Unified search')" @click="toggleUnifiedSearch">
+	<div class="header-menu unified-search-menu">
+		<NcButton class="header-menu__trigger"
+			:aria-label="t('core', 'Unified search')"
+			type="tertiary-no-background"
+			@click="toggleUnifiedSearch">
 			<template #icon>
-				<Magnify class="unified-search__trigger" :size="22" />
+				<Magnify class="header-menu__trigger-icon" :size="20" />
 			</template>
 		</NcButton>
-		<UnifiedSearchModal :class="'unified-search-modal'" :is-visible="showUnifiedSearch" @update:isVisible="handleModalVisibilityChange" />
+		<UnifiedSearchModal :is-visible="showUnifiedSearch" @update:isVisible="handleModalVisibilityChange" />
 	</div>
 </template>
 
@@ -62,35 +65,32 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.header-menu {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	.unified-search__button {
+// this is needed to allow us overriding component styles (focus-visible)
+#header {
+	.header-menu {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: var(--header-height);
-		// height: var(--header-height);
-		margin: 0;
-		padding: 0;
-		cursor: pointer;
-		opacity: .85;
-		background-color: transparent;
-		border: none;
-		filter: none !important;
-		color: var(--color-primary-text) !important;
 
-		&:hover {
-			background-color: transparent !important;
-		}
-	}
-}
+		&__trigger {
+			height: var(--header-height);
+			width: var(--header-height) !important;
 
-.unified-search-modal {
-	::v-deep .modal-container {
-		height: 80%;
+			&:focus-visible {
+				// align with other header menu entries
+				outline: none !important;
+				box-shadow: none !important;
+			}
+
+			&:not(:hover,:focus,:focus-visible) {
+				opacity: .85;
+			}
+
+			&-icon {
+				// ensure the icon has the correct color
+				color: var(--color-background-plain-text) !important;
+			}
+		}
 	}
 }
 </style>
diff --git a/core/src/views/UnifiedSearchModal.vue b/core/src/views/UnifiedSearchModal.vue
index 004005b57d9..9c719d2bcf6 100644
--- a/core/src/views/UnifiedSearchModal.vue
+++ b/core/src/views/UnifiedSearchModal.vue
@@ -542,6 +542,7 @@ export default {
 .unified-search-modal {
 	box-sizing: border-box;
 	height: 100%;
+	min-height: 80vh;
 
 	display: flex;
 	flex-direction: column;