sdarbinyan/marketplaces
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(icons): replace hand-rolled inline SVGs with Lucide (header, search)

Browse Source 
Header: same magnifying-glass path was hand-duplicated twice with two
different hex fills (#576463 desktop, #1e3c38 mobile) - now one
app-icon name="search", color inherited via currentColor. Wishlist/
compare buttons used bare '♥'/'⇄' text glyphs, entirely outside any
icon system - replaced with heart/scale icons. Cart icon, mobile-menu
home/catalog icons, and three duplicated inline chevron SVGs replaced
with app-icon equivalents. Cleaned up now-dead CSS that targeted the
old raw svg/path selectors.

Search: the same magnifying-glass path was hand-duplicated 4 times
(input icon, empty-query state, no-results state, no-query state) at
three sizes and three colors. Replaced all four with app-icon,
preserving each state's intended color via a color property on the
wrapper (icons default to currentColor).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
sdarbinyan
2026-07-20 02:37:23 +04:00
parent 043192accf
commit 6b0ad6455b
6 changed files with 22 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/pages/search/search.component.html
View File

@@ -11,12 +11,7 @@
class="search-input"
autofocus
/>
<span class="search-icon">
<svg width="22" height="22" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#697777" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.2929 18.2929C18.6834 17.9024 19.3166 17.9024 19.7071 18.2929L25.7071 24.2929C26.0976 24.6834 26.0976 25.3166 25.7071 25.7071C25.3166 26.0976 24.6834 26.0976 24.2929 25.7071L18.2929 19.7071C17.9024 19.3166 17.9024 18.6834 18.2929 18.2929Z" fill="#697777" />
</svg>
</span>
<app-icon name="search" [size]="20" class="search-icon" />
</div>
</div>
@@ -43,10 +38,7 @@
@if (isQueryTooShort()) {
<div class="empty-state">
<div class="empty-state-icon">
<svg width="56" height="56" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#d3dad9" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.2929 18.2929C18.6834 17.9024 19.3166 17.9024 19.7071 18.2929L25.7071 24.2929C26.0976 24.6834 26.0976 25.3166 25.7071 25.7071C25.3166 26.0976 24.6834 26.0976 24.2929 25.7071L18.2929 19.7071C17.9024 19.3166 17.9024 18.6834 18.2929 18.2929Z" fill="#d3dad9" />
</svg>
<app-icon name="search" [size]="40" />
</div>
<p>{{ 'search.minLength' | translate:{ count: minSearchLength } }}</p>
</div>
@@ -55,10 +47,7 @@
@if (!loading() && searchQuery && !isQueryTooShort() && items().length === 0 && !error()) {
<div class="no-results">
<div class="no-results-icon">
<svg width="48" height="48" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#a1b4b5" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.2929 18.2929C18.6834 17.9024 19.3166 17.9024 19.7071 18.2929L25.7071 24.2929C26.0976 24.6834 26.0976 25.3166 25.7071 25.7071C25.3166 26.0976 24.6834 26.0976 24.2929 25.7071L18.2929 19.7071C17.9024 19.3166 17.9024 18.6834 18.2929 18.2929Z" fill="#a1b4b5" />
</svg>
<app-icon name="search" [size]="32" />
</div>
<h2>{{ 'search.noResults' | translate }}</h2>
<p>{{ 'search.noResultsFor' | translate:{ query: searchQuery } }}</p>
@@ -108,10 +97,7 @@
@if (!searchQuery) {
<div class="empty-state">
<div class="empty-state-icon">
<svg width="56" height="56" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#d3dad9" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.2929 18.2929C18.6834 17.9024 19.3166 17.9024 19.7071 18.2929L25.7071 24.2929C26.0976 24.6834 26.0976 25.3166 25.7071 25.7071C25.3166 26.0976 24.6834 26.0976 24.2929 25.7071L18.2929 19.7071C17.9024 19.3166 17.9024 18.6834 18.2929 18.2929Z" fill="#d3dad9" />
</svg>
<app-icon name="search" [size]="40" />
</div>
<p>{{ 'search.emptyState' | translate }}</p>
</div>

3
src/app/pages/search/search.component.scss
View File

@@ -44,6 +44,7 @@
transform: translateY(-50%);
display: flex;
align-items: center;
color: #697777;
pointer-events: none;
}
}
@@ -77,6 +78,7 @@
background: #f5f3f9;
border-radius: 50%;
margin-bottom: 20px;
color: #d3dad9;
}
p {
@@ -102,6 +104,7 @@
background: #f5f3f9;
border-radius: 50%;
margin-bottom: 20px;
color: #a1b4b5;
}
h2 {

3
src/app/pages/search/search.component.ts
View File

@@ -12,10 +12,11 @@ import { TranslateService } from '../../i18n/translate.service';
import { SEARCH_DEBOUNCE_MS, ITEMS_PER_PAGE, SCROLL_THRESHOLD_PX, SCROLL_DEBOUNCE_MS } from '../../config/constants';
import { ProductFacade } from '../../facades/platform/product.facade';
import { ProductCardComponent } from '../../components/product-card/product-card.component';
import { IconComponent } from '../../shared/ui/icon/icon.component';
@Component({
selector: 'app-search',
imports: [FormsModule, TranslatePipe, ProductCardComponent],
imports: [FormsModule, TranslatePipe, ProductCardComponent, IconComponent],
templateUrl: './search.component.html',
styleUrls: ['./search.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush