Update search icon size

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

diff --git a/core/css/header.scss b/core/css/header.scss
index 2c1dc647189150a50b4fd71c88cce8b5ef69eb3d..39e3156fb0bd241adea93ae43c5de012f7eb0443 100644 (file)
--- 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 89f5d2a0bab25ab16391c9419068b8c037275d06..1e11d6bfbde451def2c32369dd21816d3529f730 100644 (file)
--- 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