From 60c182793e6e5d91c12b6390b946e22394559893 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Thu, 7 Oct 2021 18:17:24 +0200
Subject: [PATCH] Tweak the search bar colors a little bit, add label, move it
 higher

---
 src/assets/styles/main.scss       | 17 ++++++++++++++++-
 src/components/RunewordsTable.vue | 22 +++++++---------------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss
index 7b50913..9a000c0 100644
--- a/src/assets/styles/main.scss
+++ b/src/assets/styles/main.scss
@@ -162,10 +162,25 @@ object {
 // runeword search box
 // --------------------------------------------------------------------
 .rw-Search {
+  label {
+    color: #a29f9d;
+  }
+
   &-input {
     @apply w-full rounded text-[#444];
     padding: 0.5rem;
-    border: 2px solid #ccc;
+    background: #000;
+    @apply border border-gold;
+    @apply text-gold-light;
+  }
+
+  &-input:focus {
+    @apply outline-none;
+    @apply border-gold-light;
+  }
+
+  &-input::placeholder {
+    @apply text-[#686047];
   }
 }
 
diff --git a/src/components/RunewordsTable.vue b/src/components/RunewordsTable.vue
index add41ab..31a65dd 100644
--- a/src/components/RunewordsTable.vue
+++ b/src/components/RunewordsTable.vue
@@ -1,22 +1,14 @@
 <template>
-  <div class="flex justify-between items-center mb-2">
-    <h2 class="rw-Title-h2 mb-0"
-      >Runewords<span v-if="availableCount">
-        ({{ availableCount }} available)</span
-      ></h2
-    >
+  <div class="rw-Search flex items-center mb-4">
+    <label class="text-gold whitespace-nowrap mr-4">{{ "Search" }}</label>
+    <input v-model="searchTitle" type="text" class="rw-Search-input" />
   </div>
 
-  <runeword-popup ref="popup" />
+  <h2 class="rw-Title-h2 mb-2">
+    Runewords<span v-if="availableCount">({{ availableCount }} available)</span>
+  </h2>
 
-  <div class="rw-Search mb-4">
-    <input
-      v-model="searchTitle"
-      type="text"
-      class="rw-Search-input"
-      placeholder="Search for Runeword"
-    />
-  </div>
+  <runeword-popup ref="popup" />
 
   <table class="rw-Table w-full">
     <thead>