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

fix(icons): replace remaining hand-rolled inline SVGs with Lucide

Browse Source 
telegram-login: close X and lock icons (auth-gate icon reused across
telegram-login and cart - same 'log in required' concept, now the
same lock icon in both instead of two different hand-drawn shapes);
retry/refresh icon (QR expired/error states, was duplicated). Added
missing aria-label on the close button (had none).

catalog-empty-state, category, subcategories, item-detail: empty-state
illustrations (package/search/grid), add-to-cart icons, success/error
status icons, and thumbs up/down vote icons replaced. Rating stars
(item-detail, both product rating and per-review rating) now use one
Star icon with a color input and a .dx-star--filled CSS class for the
solid/outline toggle, instead of hand-toggling raw fill/stroke SVG
attributes - fixes the same rating-star pattern being drawn two
different ways (outline-only in the carousel earlier, fill-toggling
here).

Added color input to app-icon (was stroke-only via currentColor
before) and four more icons to the registry: refresh, thumbsUp/Down,
locate/mapPin (added earlier this session).

Also fixed the currency-dropdown chevron in language-selector that a
prior replace_all missed (same markup, different [class.rotated]
binding target).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
sdarbinyan
2026-07-20 02:53:52 +04:00
parent 3837ddfb2d
commit e1112bbd50
14 changed files with 46 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/pages/category/category.component.html
View File

@@ -45,12 +45,7 @@
@if (items().length === 0 && !loading()) {
<div class="no-items">
<div class="no-items-icon">
<svg width="72" height="72" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7H4C3.44772 7 3 7.44772 3 8V19C3 19.5523 3.44772 20 4 20H20C20.5523 20 21 19.5523 21 19V8C21 7.44772 20.5523 7 20 7Z" stroke="#a1b4b5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 7V5C16 4.46957 15.7893 3.96086 15.4142 3.58579C15.0391 3.21071 14.5304 3 14 3H10C9.46957 3 8.96086 3.21071 8.58579 3.58579C8.21071 3.96086 8 4.46957 8 5V7" stroke="#a1b4b5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 12V16" stroke="#d3dad9" stroke-width="1.5" stroke-linecap="round"/>
<path d="M10 14H14" stroke="#d3dad9" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<app-icon name="package" [size]="48" />
</div>
<h3>{{ 'category.emptyTitle' | translate }}</h3>
<p>{{ 'category.emptyDesc' | translate }}</p>

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

@@ -11,10 +11,11 @@ import { TranslatePipe } from '../../i18n/translate.pipe';
import { SCROLL_THRESHOLD_PX, SCROLL_DEBOUNCE_MS, ITEMS_PER_PAGE } 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-category',
imports: [RouterLink, LangRoutePipe, TranslatePipe, ProductCardComponent],
imports: [RouterLink, LangRoutePipe, TranslatePipe, ProductCardComponent, IconComponent],
templateUrl: './category.component.html',
styleUrls: ['./category.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush

13
src/app/pages/category/subcategories.component.html
View File

@@ -79,11 +79,7 @@
}
</div>
<button class="item-cart-btn" (click)="addToCart(item.itemID, $event)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="9" cy="21" r="1"></circle>
<circle cx="20" cy="21" r="1"></circle>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
</svg>
<app-icon name="cart" [size]="16" />
</button>
</div>
</a>
@@ -95,12 +91,7 @@
@if (!hasSubcategories() && categoryItems().length === 0) {
<div class="no-subcats">
<div class="no-subcats-icon">
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="3" width="7" height="7" rx="1.5" stroke="#a1b4b5" stroke-width="1.5"/>
<rect x="14" y="3" width="7" height="7" rx="1.5" stroke="#d3dad9" stroke-width="1.5"/>
<rect x="3" y="14" width="7" height="7" rx="1.5" stroke="#d3dad9" stroke-width="1.5"/>
<rect x="14" y="14" width="7" height="7" rx="1.5" stroke="#d3dad9" stroke-width="1.5"/>
</svg>
<app-icon name="layoutGrid" [size]="40" />
</div>
<h3>{{ 'subcategories.emptyTitle' | translate }}</h3>
<p>{{ 'subcategories.emptyDesc' | translate }}</p>

3
src/app/pages/category/subcategories.component.ts
View File

@@ -11,10 +11,11 @@ import { getDiscountedPrice, getMainImage, trackByItemId, getBadgeClass, getTran
import { ProductFacade } from '../../facades/platform/product.facade';
import { CategoryFacade } from '../../facades/platform/category.facade';
import { Category } from '../../core/categories/models/category-domain.model';
import { IconComponent } from '../../shared/ui/icon/icon.component';
@Component({
selector: 'app-subcategories',
imports: [DecimalPipe, RouterLink, LangRoutePipe, TranslatePipe],
imports: [DecimalPipe, RouterLink, LangRoutePipe, TranslatePipe, IconComponent],
templateUrl: './subcategories.component.html',
styleUrls: ['./subcategories.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush

34
src/app/pages/item-detail/item-detail.component.html
View File

@@ -42,11 +42,7 @@
}
} @else {
<div class="dx-no-image">
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#a1b4b5" stroke-width="1.5">
<rect x="3" y="3" width="18" height="18" rx="2"></rect>
<circle cx="8.5" cy="8.5" r="1.5"></circle>
<path d="M21 15l-5-5L5 21"></path>
</svg>
<app-icon name="image" [size]="48" />
<span>{{ 'itemDetail.noImage' | translate }}</span>
</div>
}
@@ -76,9 +72,7 @@
<div class="dx-rating">
<div class="dx-stars">
@for (star of [1, 2, 3, 4, 5]; track star) {
<svg width="18" height="18" viewBox="0 0 24 24" [attr.fill]="star <= item()!.rating ? '#497671' : 'none'" [attr.stroke]="star <= item()!.rating ? '#497671' : '#a1b4b5'" stroke-width="2">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
</svg>
<app-icon name="star" [size]="18" [class.dx-star--filled]="star <= item()!.rating" [color]="star <= item()!.rating ? '#497671' : '#a1b4b5'" />
}
</div>
<span class="dx-rating-value">{{ item()!.rating }}</span>
@@ -104,7 +98,7 @@
{{ getStockLabel() }}
</span>
@if (effectiveRemaining() != null) {
<span class="dx-stock-qty">({{ effectiveRemaining() }} øò.)</span>
<span class="dx-stock-qty">({{ effectiveRemaining() }} <EFBFBD><EFBFBD>.)</span>
}
</div>
@@ -177,11 +171,7 @@
}
<button class="dx-add-cart" (click)="addToCart()">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="9" cy="21" r="1"></circle>
<circle cx="20" cy="21" r="1"></circle>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
</svg>
<app-icon name="cart" [size]="20" />
{{ 'itemDetail.addToCart' | translate }}
</button>
@@ -260,14 +250,14 @@
@if (reviewSubmitStatus() === 'success') {
<div class="dx-status success">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6L9 17l-5-5"/></svg>
<app-icon name="check" [size]="16" />
{{ 'itemDetail.reviewSuccess' | translate }}
</div>
}
@if (reviewSubmitStatus() === 'error') {
<div class="dx-status error">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M18 6L6 18M6 6l12 12"/></svg>
<app-icon name="x" [size]="16" />
{{ 'itemDetail.reviewError' | translate }}
</div>
}
@@ -287,9 +277,7 @@
@if (callback.rating) {
<div class="dx-review-stars">
@for (star of [1, 2, 3, 4, 5]; track star) {
<svg width="14" height="14" viewBox="0 0 24 24" [attr.fill]="star <= callback.rating ? '#497671' : 'none'" [attr.stroke]="star <= callback.rating ? '#497671' : '#d3dad9'" stroke-width="2">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
</svg>
<app-icon name="star" [size]="14" [class.dx-star--filled]="star <= callback.rating" [color]="star <= callback.rating ? '#497671' : '#d3dad9'" />
}
</div>
}
@@ -313,20 +301,20 @@
@for (question of item()!.questions!; track $index) {
<div class="dx-qa-card">
<div class="dx-question">
<span class="dx-qa-label q">Â</span>
<span class="dx-qa-label q"><EFBFBD></span>
<span>{{ question.question }}</span>
</div>
<div class="dx-answer">
<span class="dx-qa-label a">Î</span>
<span class="dx-qa-label a"><EFBFBD></span>
<span>{{ question.answer }}</span>
</div>
<div class="dx-qa-votes">
<button class="dx-vote up">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3H14z"/><path d="M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/></svg>
<app-icon name="thumbsUp" [size]="14" />
{{ question.upvotes }}
</button>
<button class="dx-vote down">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3H10z"/><path d="M17 2h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"/></svg>
<app-icon name="thumbsDown" [size]="14" />
{{ question.downvotes }}
</button>
</div>

8
src/app/pages/item-detail/item-detail.component.scss
View File

@@ -204,6 +204,10 @@ $dx-card-bg: #f5f3f9;
gap: 3px;
}
.dx-star--filled svg path {
fill: currentColor;
}
.dx-rating-value {
font-weight: 700;
font-size: 1rem;
@@ -310,7 +314,7 @@ $dx-card-bg: #f5f3f9;
}
}
// Variant chips (colour/size) — shared between platform and alt
// Variant chips (colour/size) <EFBFBD> shared between platform and alt
.dx-variants, .alt-variants {
display: flex;
flex-direction: column;
@@ -812,7 +816,7 @@ $dx-card-bg: #f5f3f9;
// ========== platform RESPONSIVE ==========
// Large desktop — constrain gallery height
// Large desktop <EFBFBD> constrain gallery height
@media (min-width: 1201px) {
.dx-main-photo {
max-height: 560px;

3
src/app/pages/item-detail/item-detail.component.ts
View File

@@ -14,10 +14,11 @@ import { TranslatePipe } from '../../i18n/translate.pipe';
import { TranslateService } from '../../i18n/translate.service';
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-item-detail',
imports: [DecimalPipe, RouterLink, FormsModule, LangRoutePipe, TranslatePipe, ProductCardComponent],
imports: [DecimalPipe, RouterLink, FormsModule, LangRoutePipe, TranslatePipe, ProductCardComponent, IconComponent],
templateUrl: './item-detail.component.html',
styleUrls: ['./item-detail.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush