From fc605715d3d5db7d9578b341c4938d72347b8785 Mon Sep 17 00:00:00 2001
From: pac7 <47831526-pac7@users.noreply.replit.com>
Date: Sun, 21 Sep 2025 14:06:20 +0000
Subject: [PATCH] Update components to use new UI elements and theme colors

Refactors various HTML components to use new UI button and input elements, and updates styling to integrate with the existing theme, including dark mode.

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/tFmNsk5
---
 .../components/layout/enhanced_header.html    | 75 ++++++++++---------
 1 file changed, 39 insertions(+), 36 deletions(-)

diff --git a/backend/templates/components/layout/enhanced_header.html b/backend/templates/components/layout/enhanced_header.html
index 99d11347..58185e4c 100644
--- a/backend/templates/components/layout/enhanced_header.html
+++ b/backend/templates/components/layout/enhanced_header.html
@@ -388,31 +388,33 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
 
                 <!-- Mobile Authentication -->
                 {% if not user.is_authenticated %}
-                <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">
+                <div class="bg-accent/30 rounded-lg p-4 border border-border">
+                  <h3 class="text-sm font-medium text-foreground mb-3">
                     Get Started
                   </h3>
                   <div class="space-y-3">
-                    <button 
-                      hx-get="{% url 'account_login' %}"
-                      hx-target="body"
-                      hx-swap="beforeend"
-                      @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"
-                    >
-                      <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"
-                      @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"
-                    >
-                      <i class="fas fa-user-plus mr-2"></i>
-                      Join ThrillWiki
-                    </button>
+                    <c-ui.button 
+                      variant="outline" 
+                      size="lg" 
+                      text="Sign In" 
+                      icon_left="fas fa-sign-in-alt"
+                      button_classes="w-full justify-center"
+                      hx_get="{% url 'account_login' %}"
+                      hx_target="body"
+                      hx_swap="beforeend"
+                      x_on="@click='open = false'"
+                    />
+                    <c-ui.button 
+                      variant="default" 
+                      size="lg" 
+                      text="Join ThrillWiki" 
+                      icon_left="fas fa-user-plus"
+                      button_classes="w-full justify-center"
+                      hx_get="{% url 'account_signup' %}"
+                      hx_target="body"
+                      hx_swap="beforeend"
+                      x_on="@click='open = false'"
+                    />
                   </div>
                 </div>
                 {% endif %}
@@ -458,29 +460,30 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
   </div>
 
   <!-- Mobile Search Bar -->
-  <div class="md:hidden border-t border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900">
+  <div class="md:hidden border-t border-border bg-background">
     <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="bg-accent/30 rounded-lg p-3 border border-border">
         <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
+            <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground"></i>
+            <c-ui.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"
+              input_classes="pl-10 flex-1"
+              hx_get="{% url 'search:search' %}"
+              hx_trigger="input changed delay:300ms"
+              hx_target="#mobile-search-results"
+              hx_include="this"
               name="q"
             />
           </div>
-          <button 
+          <c-ui.button 
+            variant="default" 
+            size="default" 
+            icon_left="fas fa-search"
+            button_classes="px-4 flex-shrink-0"
             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-3"></div>