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 (cart, selectors, carousel)

Browse Source 
Cart: trash/X/plus/minus/lock icons replaced with app-icon. Removed
the standalone EmptyCartIconComponent entirely - it was a duplicate
80px shopping-cart glyph with no unique illustration, only ever used
in one place; now app-icon name="cart" inline.

Language/region selectors: dropdown chevrons (duplicated 3x with
identical path data across two components) unified on
chevronDown; region pin, locate (crosshair), and globe icons replaced.
New mapPin/locate icons added to the registry.

Items carousel: rating star and add-to-cart icons replaced.

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

34
src/app/pages/cart/cart.component.html
View File

@@ -3,9 +3,7 @@
<h1>{{ 'cart.title' | translate }}</h1>
@if (itemCount() > 0) {
<button class="clear-cart-btn" (click)="clearCart()">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
</svg>
<app-icon name="trash" [size]="16" />
{{ 'cart.clear' | translate }}
</button>
}
@@ -14,7 +12,7 @@
@if (itemCount() === 0) {
<div class="empty-cart">
<div class="empty-icon">
<app-empty-cart-icon />
<app-icon name="cart" [size]="64" />
</div>
<h2>{{ 'cart.empty' | translate }}</h2>
<p>{{ 'cart.emptyDesc' | translate }}</p>
@@ -38,9 +36,7 @@
<div class="item-header">
<a [routerLink]="['/product', item.itemID] | langRoute" class="item-name">{{ itemName(item) }}</a>
<button class="remove-btn" (click)="removeItem(item)" [attr.title]="'cart.removeItem' | translate" [attr.aria-label]="'cart.removeItem' | translate">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 6L6 18M6 6l12 12"/>
</svg>
<app-icon name="x" [size]="18" />
</button>
</div>
@@ -82,15 +78,11 @@
<div class="quantity-controls">
<button class="qty-btn" (click)="decreaseQuantity(item)" [disabled]="item.quantity <= 1" [attr.aria-label]="'cart.decreaseQuantity' | translate">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M5 12h14"/>
</svg>
<app-icon name="minus" [size]="14" />
</button>
<span class="qty-value">{{ item.quantity }}</span>
<button class="qty-btn" (click)="increaseQuantity(item)" [attr.aria-label]="'cart.increaseQuantity' | translate">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M12 5v14M5 12h14"/>
</svg>
<app-icon name="plus" [size]="14" />
</button>
</div>
</div>
@@ -105,9 +97,7 @@
</div>
<button class="delete-btn-mobile" (click)="removeItem(item)" [attr.aria-label]="'cart.removeItem' | translate">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2" stroke="white" stroke-width="2" stroke-linecap="round"/>
</svg>
<app-icon name="trash" [size]="20" />
</button>
</div>
}
@@ -181,9 +171,7 @@
@if (!isAuthenticated()) {
<div class="cart-login-gate">
<div class="login-gate-icon">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
</svg>
<app-icon name="lock" [size]="32" />
</div>
<p class="login-gate-title">{{ 'cart.loginRequired' | translate }}</p>
<p class="login-gate-desc">{{ 'cart.loginRequiredDesc' | translate }}</p>
@@ -206,9 +194,7 @@
<div class="payment-modal-overlay">
<div class="payment-modal">
<button class="close-modal-btn" (click)="closePaymentPopup()" [attr.aria-label]="'cart.close' | translate">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
<app-icon name="x" [size]="20" />
</button>
@if (paymentStatus() === 'creating') {
<div class="payment-status-screen">
@@ -343,9 +329,7 @@
<div class="bank-payment-modal-overlay">
<div class="bank-payment-modal">
<button class="close-modal-btn" (click)="closeBankPaymentPopup()" [attr.aria-label]="'cart.close' | translate">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
<app-icon name="x" [size]="20" />
</button>
<iframe [src]="bankPaymentFrameUrl()" class="bank-payment-frame" title="Bank card payment"></iframe>
</div>