Tweak the search bar colors a little bit, add label, move it higher

fabd · Oct 7, 2021 · 60c1827 · 60c1827
1 parent efeaebd
commit 60c1827
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 16 deletions.
diff --git 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
@@ -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>