From 6b0ad6455b0be37cf5d1bb93c009bb1bf5ee1929 Mon Sep 17 00:00:00 2001 From: sdarbinyan Date: Mon, 20 Jul 2026 02:37:23 +0400 Subject: [PATCH] fix(icons): replace hand-rolled inline SVGs with Lucide (header, search) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../components/header/header.component.html | 40 +++++-------------- .../components/header/header.component.scss | 12 +----- src/app/components/header/header.component.ts | 3 +- src/app/pages/search/search.component.html | 22 ++-------- src/app/pages/search/search.component.scss | 3 ++ src/app/pages/search/search.component.ts | 3 +- 6 files changed, 22 insertions(+), 61 deletions(-) diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html index 856c06a..c6edbef 100644 --- a/src/app/components/header/header.component.html +++ b/src/app/components/header/header.component.html @@ -32,10 +32,7 @@ @if (headerConfig().showSearch) {
- - - - +
@@ -44,10 +41,7 @@ @if (headerConfig().showSearch) { } @@ -55,7 +49,7 @@
@if (headerConfig().showWishlist && features().wishlist && userExperienceConfig().wishlist.enabled) { } @for (page of headerPages(); track page.id) { } diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss index 04089dd..93b06d4 100644 --- a/src/app/components/header/header.component.scss +++ b/src/app/components/header/header.component.scss @@ -299,20 +299,10 @@ background: #497671; color: #ffffff; border-color: #497671; - - svg path { - fill: #ffffff; - } - - .platform-mobile-chevron path { - stroke: #ffffff; - } } - svg:first-child { + app-icon:first-child { flex-shrink: 0; - width: 24px; - height: 24px; } span { diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts index 16e9644..142f5ed 100644 --- a/src/app/components/header/header.component.ts +++ b/src/app/components/header/header.component.ts @@ -13,10 +13,11 @@ import { ConfigService } from '../../core/config/config.service'; import { FeatureConfigService } from '../../core/config/feature-config.service'; import { DEFAULT_HEADER_CONFIG, DEFAULT_USER_EXPERIENCE_CONFIG } from '../../shared/models/config'; import { StaticPageResolverService } from '../../core/config/static-page-resolver.service'; +import { IconComponent } from '../../shared/ui/icon/icon.component'; @Component({ selector: 'app-header', - imports: [RouterLink, RouterLinkActive, LogoComponent, LanguageSelectorComponent, RegionSelectorComponent, LangRoutePipe, TranslatePipe], + imports: [RouterLink, RouterLinkActive, LogoComponent, LanguageSelectorComponent, RegionSelectorComponent, LangRoutePipe, TranslatePipe, IconComponent], templateUrl: './header.component.html', styleUrls: ['./header.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush diff --git a/src/app/pages/search/search.component.html b/src/app/pages/search/search.component.html index b0d72f0..86ed5ff 100644 --- a/src/app/pages/search/search.component.html +++ b/src/app/pages/search/search.component.html @@ -11,12 +11,7 @@ class="search-input" autofocus /> - - - - - - +
@@ -43,10 +38,7 @@ @if (isQueryTooShort()) {
- - - - +

{{ 'search.minLength' | translate:{ count: minSearchLength } }}

@@ -55,10 +47,7 @@ @if (!loading() && searchQuery && !isQueryTooShort() && items().length === 0 && !error()) {
- - - - +

{{ 'search.noResults' | translate }}

{{ 'search.noResultsFor' | translate:{ query: searchQuery } }}

@@ -108,10 +97,7 @@ @if (!searchQuery) {
- - - - +

{{ 'search.emptyState' | translate }}

diff --git a/src/app/pages/search/search.component.scss b/src/app/pages/search/search.component.scss index d78e539..d9bb107 100644 --- a/src/app/pages/search/search.component.scss +++ b/src/app/pages/search/search.component.scss @@ -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 { diff --git a/src/app/pages/search/search.component.ts b/src/app/pages/search/search.component.ts index adcd130..7ecdcf8 100644 --- a/src/app/pages/search/search.component.ts +++ b/src/app/pages/search/search.component.ts @@ -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