From dca344be07ee60e1ee019077d3c286f5e9732dc1 Mon Sep 17 00:00:00 2001
From: Jeder <jeder+git@jeder.pl>
Date: Thu, 3 Aug 2023 17:38:09 +0200
Subject: [PATCH] Change look and position of Search button when viewing as
 visitor/logged-out

---
 packages/client/src/ui/visitor/header.vue | 36 +++++++++--------------
 1 file changed, 14 insertions(+), 22 deletions(-)

diff --git a/packages/client/src/ui/visitor/header.vue b/packages/client/src/ui/visitor/header.vue
index 5fb103e49..00342ff70 100644
--- a/packages/client/src/ui/visitor/header.vue
+++ b/packages/client/src/ui/visitor/header.vue
@@ -30,6 +30,10 @@
 					><i class="ph-image-square ph-bold ph-lg icon"></i
 					>{{ i18n.ts.gallery }}</MkA
 				>
+				<button class="_button link" active-class="active" @click="search()">
+					<i class="ph-magnifying-glass ph-bold ph-lg icon"></i
+					><span>{{ i18n.ts.search }}</span>
+				</button>
 				<div v-if="info" class="page active link">
 					<div class="title">
 						<i v-if="info.icon" class="icon" :class="info.icon"></i>
@@ -59,10 +63,6 @@
 					</button>
 				</div>
 				<div class="right">
-					<button class="_button search" @click="search()">
-						<i class="ph-magnifying-glass ph-bold ph-lg icon"></i
-						><span>{{ i18n.ts.search }}</span>
-					</button>
 					<button class="_buttonPrimary signup" @click="signup()">
 						{{ i18n.ts.signup }}
 					</button>
@@ -198,6 +198,16 @@ export default defineComponent({
 				&.page {
 					border-bottom-color: var(--accent);
 				}
+				
+				&._button {
+					text-decoration: underline;
+					text-decoration-color: transparent;
+					transition: text-decoration-color .2s;
+
+					&:hover {
+						text-decoration-color: currentColor;
+					}
+				}
 			}
 
 			> .page {
@@ -242,24 +252,6 @@ export default defineComponent({
 
 			> .right {
 				margin-left: auto;
-
-				> .search {
-					background: var(--bg);
-					border-radius: 999px;
-					width: 230px;
-					line-height: $height - 20px;
-					margin-right: 16px;
-					text-align: left;
-
-					> * {
-						opacity: 0.7;
-					}
-
-					> .icon {
-						padding: 0 16px;
-					}
-				}
-
 				> .signup {
 					border-radius: 999px;
 					padding: 0 24px;