From cc914a1ca3f8173d40d2c1f65582b128d55cd9a1 Mon Sep 17 00:00:00 2001
From: pac7 <47831526-pac7@users.noreply.replit.com>
Date: Sun, 21 Sep 2025 14:02:50 +0000
Subject: [PATCH] Improve the appearance and functionality of mobile
 authentication and search buttons

Redesign mobile view authentication buttons and header search bar in enhanced_header.html, addressing display issues and improving user experience with theme-agnostic styling.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: eff39de1-3afa-446d-a965-acaf61837fc7
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/eff39de1-3afa-446d-a965-acaf61837fc7/JMGFpIL
---
 .../components/layout/enhanced_header.html    | 67 +++++++++++--------
 1 file changed, 39 insertions(+), 28 deletions(-)

diff --git a/backend/templates/components/layout/enhanced_header.html b/backend/templates/components/layout/enhanced_header.html
index d46a147f..99d11347 100644
--- a/backend/templates/components/layout/enhanced_header.html
+++ b/backend/templates/components/layout/enhanced_header.html
@@ -388,29 +388,31 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
 
                 <!-- Mobile Authentication -->
                 {% if not user.is_authenticated %}
-                <div>
-                  <h3 class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">
-                    ACCOUNT
+                <div class="bg-slate-50 dark:bg-slate-800 rounded-lg p-4 border border-slate-200 dark:border-slate-700">
+                  <h3 class="text-sm font-medium text-slate-900 dark:text-slate-100 mb-3">
+                    Get Started
                   </h3>
-                  <div class="space-y-2">
-                    <div 
+                  <div class="space-y-3">
+                    <button 
                       hx-get="{% url 'account_login' %}"
                       hx-target="body"
                       hx-swap="beforeend"
-                      class="cursor-pointer"
                       @click="open = false"
+                      class="w-full px-4 py-3 bg-white dark:bg-slate-700 border-2 border-slate-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-slate-100 font-medium hover:bg-slate-50 dark:hover:bg-slate-600 hover:border-slate-400 dark:hover:border-slate-500 transition-all duration-200 text-center"
                     >
-                      <c-ui.button variant="outline" size="default" text="Login" button_classes="w-full" />
-                    </div>
-                    <div 
+                      <i class="fas fa-sign-in-alt mr-2"></i>
+                      Sign In
+                    </button>
+                    <button 
                       hx-get="{% url 'account_signup' %}"
                       hx-target="body"
                       hx-swap="beforeend"
-                      class="cursor-pointer"
                       @click="open = false"
+                      class="w-full px-4 py-3 bg-blue-600 hover:bg-blue-700 border-2 border-blue-600 hover:border-blue-700 rounded-lg text-white font-medium transition-all duration-200 text-center"
                     >
-                      <c-ui.button variant="default" size="default" text="Join ThrillWiki" button_classes="w-full" />
-                    </div>
+                      <i class="fas fa-user-plus mr-2"></i>
+                      Join ThrillWiki
+                    </button>
                   </div>
                 </div>
                 {% endif %}
@@ -456,23 +458,32 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
   </div>
 
   <!-- Mobile Search Bar -->
-  <div class="md:hidden border-t bg-background">
-    <div class="px-4 py-3">
-      <div class="relative">
-        <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground"></i>
-        <input
-          type="search"
-          placeholder="Search parks, rides..."
-          class="w-full pl-10 pr-20 h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-          hx-get="{% url 'search:search' %}"
-          hx-trigger="input changed delay:300ms"
-          hx-target="#mobile-search-results"
-          hx-include="this"
-          name="q"
-        />
-        <c-ui.button variant="default" size="sm" text="Search" button_classes="absolute right-1 top-1/2 transform -translate-y-1/2" />
+  <div class="md:hidden border-t border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900">
+    <div class="px-4 py-4">
+      <div class="bg-slate-50 dark:bg-slate-800 rounded-lg p-3 border border-slate-200 dark:border-slate-700">
+        <div class="flex gap-2">
+          <div class="relative flex-1">
+            <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-slate-500 dark:text-slate-400"></i>
+            <input
+              type="search"
+              placeholder="Search parks, rides..."
+              class="w-full pl-10 pr-3 py-3 bg-white dark:bg-slate-700 border border-slate-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-slate-100 placeholder-slate-500 dark:placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
+              hx-get="{% url 'search:search' %}"
+              hx-trigger="input changed delay:300ms"
+              hx-target="#mobile-search-results"
+              hx-include="this"
+              name="q"
+            />
+          </div>
+          <button 
+            type="submit"
+            class="px-4 py-3 bg-blue-600 hover:bg-blue-700 border border-blue-600 hover:border-blue-700 rounded-lg text-white font-medium transition-all duration-200 flex-shrink-0"
+          >
+            <i class="fas fa-search"></i>
+          </button>
+        </div>
       </div>
-      <div id="mobile-search-results" class="mt-2"></div>
+      <div id="mobile-search-results" class="mt-3"></div>
     </div>
   </div>
 </header>