Update search icon size

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

2 files changed, 5 insertions, 63 deletions

diff --git a/core/css/header.scss b/core/css/header.scss
index 2c1dc647189..39e3156fb0b 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -658,61 +658,6 @@ nav[role='navigation'] {
 	}
 }
 
-/* SEARCHBOX --------------------------------------------------------------- */
-.searchbox {
-	position: relative;
-	display: flex;
-	align-items: center;
-	input[type='search'] {
-		position: relative;
-		font-size: 1.2em;
-		padding: 3px;
-		padding-left: 25px;
-		padding-right: 20px;
-		background-color: transparent;
-		color: var(--color-primary-text);
-		border: 0;
-		border-radius: var(--border-radius-pill);
-		height: 34px;
-		width: 0;
-		cursor: pointer;
-		transition: width 100ms, opacity 100ms;
-		opacity: .6;
-		&:focus, &:active, &:valid {
-			background-position-x: 6px;
-			color: var(--color-primary-text);
-			width: 155px;
-			cursor: text;
-			background-color: transparent !important;
-			border: 1px solid var(--color-primary-text) !important;
-		}
-		&:hover, &:focus, &:active {
-			opacity: 1;
-		}
-		& ~ .icon-close-white {
-			display: inline;
-			position: absolute;
-			width: 30px;
-			height: 100%;
-			right: 0;
-			top: 0;
-			margin: 0;
-			&, &:focus, &:active, &:hover {
-				border: none;
-				background-color: transparent;
-			}
-		}
-		&:not(:valid) ~ .icon-close-white {
-			display: none;
-		}
-		&::-webkit-search-cancel-button {
-			-webkit-appearance: none;
-		}
-	}
-	.icon-search-force-white {
-		@include icon-color('search', 'actions', '#fffffe', 1, true);
-	}
-}
 
 /* Empty content messages in the header e.g. notifications, contacts menu, … */
 header #emptycontent,
diff --git a/core/src/views/UnifiedSearch.vue b/core/src/views/UnifiedSearch.vue
index 89f5d2a0bab..1e11d6bfbde 100644
--- a/core/src/views/UnifiedSearch.vue
+++ b/core/src/views/UnifiedSearch.vue
@@ -30,7 +30,7 @@
 		<!-- Header icon -->
 		<template #trigger>
 			<Magnify class="unified-search__trigger"
-				:size="20"
+				:size="22/* fit better next to other 20px icons */"
 				fill-color="var(--color-primary-text)" />
 		</template>
 
@@ -81,15 +81,17 @@
 			<!-- Loading placeholders -->
 			<SearchResultPlaceholders v-if="isLoading" />
 
-			<EmptyContent v-else-if="isValidQuery" icon="icon-search">
+			<EmptyContent v-else-if="isValidQuery">
 				<Highlight v-if="triggered" :text="t('core', 'No results for {query}', { query })" :search="query" />
 				<div v-else>
 					{{ t('core', 'Press enter to start searching') }}
 				</div>
+				<template #icon><Magnify /></template>
 			</EmptyContent>
 
-			<EmptyContent v-else-if="!isLoading || isShortQuery" icon="icon-search">
+			<EmptyContent v-else-if="!isLoading || isShortQuery">
 				{{ t('core', 'Start typing to search') }}
+				<template #icon><Magnify /></template>
 				<template v-if="isShortQuery" #desc>
 					{{ n('core',
 						'Please enter {minSearchLength} character or more to search',
@@ -677,11 +679,6 @@ $input-height: 34px;
 $input-padding: 6px;
 
 .unified-search {
-	&__trigger {
-		width: 20px;
-		height: 20px;
-	}
-
 	&__input-wrapper {
 		position: sticky;
 		// above search results