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.
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user