From 35c441116808789dbaa07c835269123c6126e061 Mon Sep 17 00:00:00 2001
From: Brandon Winger-Air <brandonwinger-air@outlook.com>
Date: Wed, 17 Jan 2024 20:10:52 -0500
Subject: [PATCH] add content height and button icon & border styles

---
 layouts/default.vue |  4 ++--
 pages/index.vue     | 16 +++++++++++-----
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index bdab0ce..590c97c 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
   <nav class="flex justify-center bg-white border-b-2 border-black text-white py-12">
-    <NuxtLink to="/" class="px-4 py-2 bg-gray-400 border rounded-lg">
+    <NuxtLink to="/" class="px-4 py-2 bg-gray-400 border border-neutral-800 rounded-lg">
       Home Page
     </NuxtLink>
   </nav>
@@ -8,7 +8,7 @@
     <slot/>
   </main>
 
-  <div class="bg-white text-center py-7">
+  <div class="bg-white text-center py-7 border-t-4 border-t-red-600 border-b-4 border-b-neutral-900">
     <h2 class="mb-5">
       Built with Nuxt 3 by <a href="https://www.brandonwinger-air.com" target="_blank" class="font-semibold">Brandon Winger-Air</a> using <a href="https://www.giantbomb.com/api/" target="_blank" class="font-semibold">external API</a>.
     </h2>
diff --git a/pages/index.vue b/pages/index.vue
index e18ce60..c99ed2d 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -6,7 +6,7 @@
           <h1 class="text-3xl font-bold text-white">Video Games</h1>
         </div>
         <div class="flex justify-center mb-10">
-          <div class="border rounded-md border-neutral-400 mr-1">
+          <div class="border rounded-md border-neutral-400 mr-2">
             <input 
               class="px-2 py-1 border-0 min-w-64"
               v-model="searchTerm"
@@ -22,14 +22,14 @@
           </div>
           <button 
             @click="!showResults ? showResults = !showResults : showResults = showResults; hideSuggestions = true" 
-            class="h-9 px-4 bg-neutral-500 text-white border border-neutral-700 active:border-neutral-500 font-semibold rounded-lg"
+            class="h-9 px-3 bg-neutral-500 text-white border border-neutral-700 active:border-neutral-500 font-semibold rounded-lg"
           >
-            Search
+            Search <span class="text-sm">🔎</span>
           </button>
         </div>
       </div>
 
-      <div class="z-0 self-center pt-10">
+      <div class="z-0 self-center pt-10 min-content-height">
         <div 
           v-if="showResults && data?.results[0]" 
           class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-x-10 gap-y-10 mb-10"
@@ -72,4 +72,10 @@ const { data } = await useFetch<Response>(url);
 
 const showResults = ref(false);
 const hideSuggestions = ref(true);
-</script>
\ No newline at end of file
+</script>
+
+<style>
+.min-content-height {
+  min-height: 832px;
+}
+</style>
\ No newline at end of file