From 48082b64f84514259855e98818bb4ec95a73f290 Mon Sep 17 00:00:00 2001
From: Mike McGhen <mcghenmike@gmail.com>
Date: Mon, 25 Aug 2025 20:56:42 -0400
Subject: [PATCH] Replace emoji icons with Bootstrap icons in search pages

Updated SearchMovies.razor and SearchShows.razor to use Bootstrap icon classes instead of emoji icons for navigation, input, and state indicators. Also improved the matched movie result layout and styling in SearchMovies.razor for a more modern and consistent UI.
---
 .../Components/Pages/SearchMovies.razor       | 124 ++++++++++++++----
 .../Components/Pages/SearchShows.razor        |  13 +-
 2 files changed, 106 insertions(+), 31 deletions(-)

diff --git a/MovieActorLookup/Components/Pages/SearchMovies.razor b/MovieActorLookup/Components/Pages/SearchMovies.razor
index 6e58e5c..37e2bdf 100644
--- a/MovieActorLookup/Components/Pages/SearchMovies.razor
+++ b/MovieActorLookup/Components/Pages/SearchMovies.razor
@@ -10,7 +10,7 @@
     <div class="search-header">
         <div class="navigation-toggle">
             <a href="/searchshows" class="nav-btn shows-btn">
-                <span class="nav-icon">📺</span>
+                <i class="bi bi-tv"></i>
                 <span class="nav-text">Switch to TV Shows</span>
             </a>
         </div>
@@ -26,7 +26,7 @@
                        @bind="_movieTitle"
                        placeholder="Enter movie title..."
                        @onkeypress="@(async (e) => { if (e.Key == "Enter") await SearchForActorAndCharacters(); })" />
-                <div class="input-icon">🎬</div>
+                <div class="input-icon bi bi-film"></div>
             </div>
             <div class="input-wrapper">
                 <input type="text"
@@ -34,7 +34,7 @@
                        @bind="_characterName"
                        placeholder="Enter character name..."
                        @onkeypress="@(async (e) => { if (e.Key == "Enter") await SearchForActorAndCharacters(); })" />
-                <div class="input-icon">🎭</div>
+                <div class="input-icon bi bi-person-vcard"></div>
             </div>
         </div>
         <button class="search-btn @(_isSearching ? "searching" : "")"
@@ -47,7 +47,7 @@
             }
             else
             {
-                <span>🔍 Search</span>
+                <span class="bi bi-search"> Search</span>
             }
         </button>
     </div>
@@ -74,25 +74,20 @@
             @if (_matchedMovie != null)
             {
                 <div class="matched-movie-section">
-                    <h4 class="section-title">Your Search Match</h4>
-                    <div class="movie-card featured">
-                        <div class="poster-container">
-                            <img class="poster-image"
-                                 src="@($"https://image.tmdb.org/t/p/w500{_matchedMovie.MoviePosterPath}")"
+                    <h4 class="section-title">
+                        <span class="match-indicator"></span>
+                        Your Search Result
+                    </h4>
+                    <div class="search-match-banner">
+                        <div class="match-poster">
+                            <img src="@($"https://image.tmdb.org/t/p/w200{_matchedMovie.MoviePosterPath}")"
                                  alt="@_matchedMovie.MovieTitle Poster"
                                  loading="lazy" />
-                            <div class="match-badge">✨ Match</div>
                         </div>
-                        <div class="card-content">
-                            <h5 class="movie-title">@_matchedMovie.MovieTitle</h5>
-                            <div class="character-name">as @_matchedMovie.CharacterName</div>
-                            @if (!string.IsNullOrEmpty(_matchedMovie.Overview?.Trim()))
-                            {
-                                <p class="movie-overview expanded">
-                                    @_matchedMovie.Overview.Trim()
-                                </p>
-                            }
-                            <div class="release-date">Released: @_matchedMovie.ReleaseDate</div>
+                        <div class="match-info">
+                            <h5 class="match-title">@_matchedMovie.MovieTitle</h5>
+                            <div class="match-character">as @_matchedMovie.CharacterName</div>
+                            <div class="match-date">Released: @_matchedMovie.ReleaseDate</div>
                         </div>
                     </div>
                 </div>
@@ -159,7 +154,7 @@
     else if (!string.IsNullOrEmpty(_movieTitle) || !string.IsNullOrEmpty(_characterName))
     {
         <div class="no-results">
-            <div class="no-results-icon">🔍</div>
+            <div class="no-results-icon bi bi-search"></div>
             <h4>No matches found</h4>
             <p>Try adjusting your search terms or check the spelling</p>
         </div>
@@ -167,7 +162,7 @@
     else
     {
         <div class="welcome-state">
-            <div class="welcome-icon">🎬</div>
+            <div class="welcome-icon bi bi-film"></div>
             <h4>Ready to explore?</h4>
             <p>Enter a movie title and character name to discover an actor's complete film journey</p>
         </div>
@@ -175,14 +170,35 @@
 </div>
 
 <style>
+    body {
+        margin: 0;
+        padding: 0;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        min-height: 100vh;
+        position: relative;
+    }
+
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.08)"/><circle cx="80" cy="30" r="1.5" fill="rgba(255,255,255,0.06)"/></svg>') repeat;
+            opacity: 0.3;
+            pointer-events: none;
+            animation: float 20s ease-in-out infinite;
+            z-index: -1;
+        }
+
     .search-container {
         max-width: 1200px;
         margin: 0 auto;
         padding: 2rem 1rem;
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        min-height: 100vh;
         position: relative;
+        z-index: 1;
     }
 
         .search-container::before {
@@ -545,7 +561,65 @@
     }
 
     .matched-movie-section {
-        margin-bottom: 3rem;
+        margin-bottom: 2rem;
+    }
+
+    .search-match-banner {
+        background: rgba(255,255,255,0.15);
+        border-radius: 1rem;
+        padding: 1.5rem;
+        display: flex;
+        align-items: center;
+        gap: 1.5rem;
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(255,255,255,0.2);
+        box-shadow: 0 8px 25px rgba(0,0,0,0.1);
+    }
+
+    .match-poster {
+        flex-shrink: 0;
+    }
+
+        .match-poster img {
+            width: 80px;
+            height: 120px;
+            object-fit: cover;
+            border-radius: 0.5rem;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+        }
+
+    .match-info {
+        flex: 1;
+        color: white;
+    }
+
+    .match-title {
+        font-size: 1.25rem;
+        font-weight: 600;
+        margin: 0 0 0.5rem 0;
+        color: white;
+    }
+
+    .match-character {
+        font-size: 0.95rem;
+        color: rgba(255,255,255,0.8);
+        margin-bottom: 0.25rem;
+    }
+
+    .match-date {
+        font-size: 0.85rem;
+        color: rgba(255,255,255,0.6);
+    }
+
+    .match-indicator {
+        font-family: 'Courier New', monospace;
+        background: rgba(16, 185, 129, 0.8);
+        color: white;
+        padding: 0.25rem 0.75rem;
+        border-radius: 0.5rem;
+        font-size: 0.8rem;
+        font-weight: 600;
+        margin-right: 0.5rem;
     }
 
     .section-title {
diff --git a/MovieActorLookup/Components/Pages/SearchShows.razor b/MovieActorLookup/Components/Pages/SearchShows.razor
index 08d7ea5..344679c 100644
--- a/MovieActorLookup/Components/Pages/SearchShows.razor
+++ b/MovieActorLookup/Components/Pages/SearchShows.razor
@@ -8,7 +8,7 @@
     <div class="search-header">
         <div class="navigation-toggle">
             <a href="/searchmovies" class="nav-btn movies-btn">
-                <span class="nav-icon">🎬</span>
+                <span class="nav-icon bi bi-film"></span>
                 <span class="nav-text">Switch to Movies</span>
             </a>
         </div>
@@ -24,7 +24,7 @@
                        @bind="_tvTitle"
                        placeholder="Enter TV show title..."
                        @onkeypress="@(async (e) => { if (e.Key == "Enter") await SearchForActorAndCharacters(); })" />
-                <div class="input-icon">📺</div>
+                <div class="input-icon bi bi-tv"></div>
             </div>
             <div class="input-wrapper">
                 <input type="text"
@@ -32,7 +32,7 @@
                        @bind="_characterName"
                        placeholder="Enter character name..."
                        @onkeypress="@(async (e) => { if (e.Key == "Enter") await SearchForActorAndCharacters(); })" />
-                <div class="input-icon">🎭</div>
+                <div class="input-icon bi bi-person-vcard"></div>
             </div>
         </div>
         <button class="search-btn @(_isSearching ? "searching" : "")"
@@ -45,7 +45,8 @@
             }
             else
             {
-                <span>🔍 Search</span>
+                <span class="bi bi-search"></span>
+                <span> Search</span>
             }
         </button>
     </div>
@@ -162,7 +163,7 @@
     else if (!string.IsNullOrEmpty(_tvTitle) || !string.IsNullOrEmpty(_characterName))
     {
         <div class="no-results">
-            <div class="no-results-icon">🔍</div>
+            <div class="no-results-icon bi-search"></div>
             <h4>No matches found</h4>
             <p>Try adjusting your search terms or check the spelling</p>
         </div>
@@ -170,7 +171,7 @@
     else
     {
         <div class="welcome-state">
-            <div class="welcome-icon">📺</div>
+            <div class="welcome-icon bi bi-tv"></div>
             <h4>Ready to explore?</h4>
             <p>Enter a TV show title and character name to discover an actor's complete television journey</p>
         </div>