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

fix(backoffice): composition audit fixes for dashboard, products, categories, orders

Browse Source 
- Fix var(--x, #hex) references to nonexistent theme variables (--brand-primary, --color-primary, --border-subtle, --surface-muted, --text-muted, --text-tertiary, --danger-color) across admin products/categories/orders forms, lists, health widgets, variants editor, timeline, and dashboard stat cards. These silently fell back to hardcoded hex and never responded to theming; remapped to the real tokens (--primary-color, --border-color, --bg-tertiary, --text-secondary, --text-light, --error-color, --bg-primary).
- Add scope="col" to table headers in admin-products-list, admin-categories-list, admin-orders-list for proper header/data-cell association.
This commit is contained in:
sdarbinyan
2026-07-23 10:57:06 +04:00
parent 4ebc15fff8
commit 712a7b4daf
13 changed files with 86 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/features/admin/categories/components/admin-categories-list.component.html
View File

@@ -129,14 +129,14 @@
<app-table [class.density-compact]="density === 'compact'"> <app-table [class.density-compact]="density === 'compact'">
<thead> <thead>
<tr> <tr>
<th><input type="checkbox" [attr.aria-label]="'adminCategories.selectAllRows' | translate" (change)="selectAll.emit($any($event.target).checked)" /></th> <th scope="col"><input type="checkbox" [attr.aria-label]="'adminCategories.selectAllRows' | translate" (change)="selectAll.emit($any($event.target).checked)" /></th>
<th>{{ 'adminCategories.title' | translate }}</th> <th scope="col">{{ 'adminCategories.title' | translate }}</th>
@if (visibleColumns.includes('slug')) { <th>{{ 'adminCategories.slug' | translate }}</th> } @if (visibleColumns.includes('slug')) { <th scope="col">{{ 'adminCategories.slug' | translate }}</th> }
@if (visibleColumns.includes('items')) { <th>{{ 'adminCategories.items' | translate }}</th> } @if (visibleColumns.includes('items')) { <th scope="col">{{ 'adminCategories.items' | translate }}</th> }
@if (visibleColumns.includes('status')) { <th>{{ 'backoffice.status' | translate }}</th> } @if (visibleColumns.includes('status')) { <th scope="col">{{ 'backoffice.status' | translate }}</th> }
@if (visibleColumns.includes('visibility')) { <th>{{ 'adminProducts.visibility' | translate }}</th> } @if (visibleColumns.includes('visibility')) { <th scope="col">{{ 'adminProducts.visibility' | translate }}</th> }
<th>{{ 'adminProducts.healthColumn' | translate }}</th> <th scope="col">{{ 'adminProducts.healthColumn' | translate }}</th>
<th>{{ 'adminProducts.actions' | translate }}</th> <th scope="col">{{ 'adminProducts.actions' | translate }}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

14
src/app/features/admin/categories/components/admin-categories-list.component.scss
View File

@@ -1,4 +1,4 @@
.admin-categories-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); background: #fff; } .admin-categories-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-primary); }
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; } .toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; flex: 1; } .filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; flex: 1; }
select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-color, #d3dad9); border-radius: 10px; } select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-color, #d3dad9); border-radius: 10px; }
@@ -26,23 +26,23 @@ tr.deleted { opacity: 0.55; }
padding: 8px 10px; padding: 8px 10px;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
&:hover { background: var(--surface-muted, #eef2f0); } &:hover { background: var(--bg-tertiary); }
&:focus-visible { outline: 2px solid var(--brand-primary, #1e8a6e); outline-offset: -2px; } &:focus-visible { outline: 2px solid var(--primary-color); outline-offset: -2px; }
} }
.category-tree__row--deleted { opacity: 0.55; } .category-tree__row--deleted { opacity: 0.55; }
.category-tree__row-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; } .category-tree__row-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.category-tree__toggle { all: unset; cursor: pointer; width: 18px; text-align: center; color: var(--text-secondary, #5f6e6a); } .category-tree__toggle { all: unset; cursor: pointer; width: 18px; text-align: center; color: var(--text-secondary); }
.category-tree__toggle-spacer { width: 18px; display: inline-block; } .category-tree__toggle-spacer { width: 18px; display: inline-block; }
.category-tree__icon { font-size: var(--font-size-lg, 1rem); } .category-tree__icon { font-size: var(--font-size-lg, 1rem); }
.category-tree__title { font-weight: var(--font-weight-semibold, 600); color: var(--text-primary, #1e3c38); } .category-tree__title { font-weight: var(--font-weight-semibold, 600); color: var(--text-primary); }
.category-tree__items { font-size: var(--font-size-xs, 0.75rem); color: var(--text-tertiary, #9aa6a2); } .category-tree__items { font-size: var(--font-size-xs, 0.75rem); color: var(--text-light); }
.category-tree__actions { display: flex; gap: 6px; flex-wrap: wrap; } .category-tree__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.category-grid--compact { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .category-grid--compact { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.category-grid__item { position: relative; display: grid; gap: 6px; } .category-grid__item { position: relative; display: grid; gap: 6px; }
.category-grid__select { position: absolute; top: 8px; left: 8px; z-index: 1; } .category-grid__select { position: absolute; top: 8px; left: 8px; z-index: 1; }
.category-grid__image { width: 100%; height: 120px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-muted, #eef2f0); } .category-grid__image { width: 100%; height: 120px; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-tertiary); }
.category-grid__image--placeholder { display: flex; align-items: center; justify-content: center; font-size: var(--font-size-3xl, 1.5rem); } .category-grid__image--placeholder { display: flex; align-items: center; justify-content: center; font-size: var(--font-size-3xl, 1.5rem); }
.category-grid__name { margin: 0; font-size: var(--font-size-sm, 0.8125rem); font-weight: var(--font-weight-bold, 700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .category-grid__name { margin: 0; font-size: var(--font-size-sm, 0.8125rem); font-weight: var(--font-weight-bold, 700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-grid__items { margin: 0; font-size: var(--font-size-xs, 0.75rem); color: var(--text-secondary, #5f6e6a); } .category-grid__items { margin: 0; font-size: var(--font-size-xs, 0.75rem); color: var(--text-secondary, #5f6e6a); }

22
src/app/features/admin/categories/components/admin-category-form.component.scss
View File

@@ -1,4 +1,4 @@
.form-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); background: #fff; } .form-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-primary); }
.grid { display: grid; gap: 12px; } .grid { display: grid; gap: 12px; }
.grid.one { grid-template-columns: 1fr; } .grid.one { grid-template-columns: 1fr; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@@ -6,8 +6,8 @@ label { display: grid; gap: 6px; font-weight: var(--font-weight-semibold, 600);
label.check { display: flex; align-items: center; gap: 8px; } label.check { display: flex; align-items: center; gap: 8px; }
textarea, select { width: 100%; padding: 10px 12px; border: 1px solid var(--border-color, #d3dad9); border-radius: 10px; font: inherit; } textarea, select { width: 100%; padding: 10px 12px; border: 1px solid var(--border-color, #d3dad9); border-radius: 10px; font: inherit; }
input[type='checkbox'] { width: auto; } input[type='checkbox'] { width: auto; }
.sub-block { border-top: 1px dashed #d9e2e1; padding-top: 12px; } .sub-block { border-top: 1px dashed var(--border-color); padding-top: 12px; }
.breadcrumb-preview { margin: 0; color: var(--text-muted, #667); font-size: var(--font-size-base, 0.875rem); } .breadcrumb-preview { margin: 0; color: var(--text-secondary); font-size: var(--font-size-base, 0.875rem); }
.image-field { display: flex; align-items: center; gap: 12px; } .image-field { display: flex; align-items: center; gap: 12px; }
.image-field .preview { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border-color, #d3dad9); } .image-field .preview { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border-color, #d3dad9); }
.actions { display: flex; justify-content: flex-end; gap: 10px; } .actions { display: flex; justify-content: flex-end; gap: 10px; }
@@ -15,7 +15,7 @@ input[type='checkbox'] { width: auto; }
.form-card__header { display: grid; gap: 8px; } .form-card__header { display: grid; gap: 8px; }
.form-card__tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border-subtle, #e7ece9); } .form-card__tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border-color); }
.form-card__tab { .form-card__tab {
all: unset; all: unset;
cursor: pointer; cursor: pointer;
@@ -23,25 +23,25 @@ input[type='checkbox'] { width: auto; }
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
font-size: var(--font-size-base, 0.875rem); font-size: var(--font-size-base, 0.875rem);
font-weight: var(--font-weight-semibold, 600); font-weight: var(--font-weight-semibold, 600);
color: var(--text-secondary, #5f6e6a); color: var(--text-secondary);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
&:focus-visible { outline: 2px solid var(--brand-primary, #1e8a6e); outline-offset: 2px; } &:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
} }
.form-card__tab--active { color: var(--brand-primary, #1e8a6e); background: var(--surface-muted, #eef2f0); } .form-card__tab--active { color: var(--primary-color); background: var(--bg-tertiary); }
.form-card__panel { min-height: 200px; display: grid; gap: 14px; } .form-card__panel { min-height: 200px; display: grid; gap: 14px; }
.form-card__subheading { margin: 8px 0 0; font-size: var(--font-size-sm, 0.8125rem); font-weight: var(--font-weight-bold, 700); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary, #5f6e6a); } .form-card__subheading { margin: 8px 0 0; font-size: var(--font-size-sm, 0.8125rem); font-weight: var(--font-weight-bold, 700); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary); }
.form-card__explain { margin: 0; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #5f6e6a); } .form-card__explain { margin: 0; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary); }
.toggle-row { display: flex; align-items: center; gap: 8px; font-weight: var(--font-weight-normal, 400); } .toggle-row { display: flex; align-items: center; gap: 8px; font-weight: var(--font-weight-normal, 400); }
.nav-children { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--font-size-sm, 0.8125rem); } .nav-children { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--font-size-sm, 0.8125rem); }
.seo-preview { border: 1px solid var(--border-subtle, #e7ece9); border-radius: 10px; padding: 12px 14px; display: grid; gap: 2px; } .seo-preview { border: 1px solid var(--border-color); border-radius: 10px; padding: 12px 14px; display: grid; gap: 2px; }
.seo-preview__title { margin: 0; color: #1a0dab; font-size: var(--font-size-lg, 1rem); } .seo-preview__title { margin: 0; color: #1a0dab; font-size: var(--font-size-lg, 1rem); }
.seo-preview__url { margin: 0; color: #006621; font-size: var(--font-size-sm, 0.8125rem); } .seo-preview__url { margin: 0; color: #006621; font-size: var(--font-size-sm, 0.8125rem); }
.seo-preview__description { margin: 0; color: var(--text-secondary, #5f6e6a); font-size: var(--font-size-sm, 0.8125rem); } .seo-preview__description { margin: 0; color: var(--text-secondary); font-size: var(--font-size-sm, 0.8125rem); }
.icon-field { display: flex; align-items: center; gap: 8px; app-input { flex: 1; } } .icon-field { display: flex; align-items: center; gap: 8px; app-input { flex: 1; } }
.icon-field__preview { font-size: var(--font-size-3xl, 1.5rem); line-height: 1; } .icon-field__preview { font-size: var(--font-size-3xl, 1.5rem); line-height: 1; }
.seo-generate-row { display: flex; align-items: center; gap: 10px; } .seo-generate-row { display: flex; align-items: center; gap: 10px; }

10
src/app/features/admin/categories/components/category-health-widget/category-health-widget.component.scss
View File

@@ -7,19 +7,19 @@
.category-health__bar { .category-health__bar {
height: 6px; height: 6px;
border-radius: var(--radius-full, 999px); border-radius: var(--radius-full, 999px);
background: var(--surface-muted, #eef2f0); background: var(--bg-tertiary);
overflow: hidden; overflow: hidden;
} }
.category-health__bar-fill { .category-health__bar-fill {
height: 100%; height: 100%;
background: var(--brand-primary, #1e8a6e); background: var(--primary-color);
} }
.category-health__percent { .category-health__percent {
font-size: var(--font-size-xs, 0.75rem); font-size: var(--font-size-xs, 0.75rem);
font-weight: var(--font-weight-bold, 700); font-weight: var(--font-weight-bold, 700);
color: var(--text-secondary, #5f6e6a); color: var(--text-secondary);
} }
.category-health__list { .category-health__list {
@@ -29,7 +29,7 @@
display: grid; display: grid;
gap: 4px; gap: 4px;
font-size: var(--font-size-xs, 0.75rem); font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary, #5f6e6a); color: var(--text-secondary);
li { li {
display: flex; display: flex;
@@ -39,7 +39,7 @@
} }
.category-health__list-item--done { .category-health__list-item--done {
color: var(--text-primary, #1e3c38); color: var(--text-primary);
} }
.category-health--compact { .category-health--compact {

10
src/app/features/admin/orders/components/order-timeline/order-timeline.component.scss
View File

@@ -19,7 +19,7 @@
top: 14px; top: 14px;
bottom: 0; bottom: 0;
width: 2px; width: 2px;
background: var(--border-subtle, #e7ece9); background: var(--border-color);
} }
} }
@@ -27,7 +27,7 @@
width: 10px; width: 10px;
height: 10px; height: 10px;
border-radius: var(--radius-full, 999px); border-radius: var(--radius-full, 999px);
background: var(--brand-primary, #1e8a6e); background: var(--primary-color);
margin-top: 4px; margin-top: 4px;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -42,16 +42,16 @@
gap: 8px; gap: 8px;
align-items: center; align-items: center;
font-size: var(--font-size-xs, 0.75rem); font-size: var(--font-size-xs, 0.75rem);
color: var(--text-tertiary, #9aa6a2); color: var(--text-light);
} }
.order-timeline__status { .order-timeline__status {
font-weight: var(--font-weight-bold, 700); font-weight: var(--font-weight-bold, 700);
color: var(--text-primary, #1e3c38); color: var(--text-primary);
} }
.order-timeline__note { .order-timeline__note {
margin: 0; margin: 0;
font-size: var(--font-size-sm, 0.8125rem); font-size: var(--font-size-sm, 0.8125rem);
color: var(--text-secondary, #5f6e6a); color: var(--text-secondary);
} }

12
src/app/features/admin/orders/pages/admin-order-detail-page.component.scss
View File

@@ -16,7 +16,7 @@ select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--borde
.link-button { .link-button {
all: unset; all: unset;
cursor: pointer; cursor: pointer;
color: var(--brand-primary, #1e8a6e); color: var(--primary-color);
font-weight: var(--font-weight-semibold, 600); font-weight: var(--font-weight-semibold, 600);
&:hover, &:focus-visible { text-decoration: underline; } &:hover, &:focus-visible { text-decoration: underline; }
@@ -47,21 +47,21 @@ select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--borde
width: 14px; width: 14px;
height: 14px; height: 14px;
border-radius: var(--radius-full, 999px); border-radius: var(--radius-full, 999px);
background: var(--surface-muted, #eef2f0); background: var(--bg-tertiary);
border: 2px solid var(--border-subtle, #e7ece9); border: 2px solid var(--border-color);
flex-shrink: 0; flex-shrink: 0;
} }
.status-stepper__step--done .status-stepper__dot, .status-stepper__step--done .status-stepper__dot,
.status-stepper__step--current .status-stepper__dot { .status-stepper__step--current .status-stepper__dot {
background: var(--brand-primary, #1e8a6e); background: var(--primary-color);
border-color: var(--brand-primary, #1e8a6e); border-color: var(--primary-color);
} }
.status-stepper__label { .status-stepper__label {
font-size: var(--font-size-sm, 0.8125rem); font-size: var(--font-size-sm, 0.8125rem);
font-weight: var(--font-weight-semibold, 600); font-weight: var(--font-weight-semibold, 600);
color: var(--text-secondary, #5f6e6a); color: var(--text-secondary);
} }
.status-stepper__step--done .status-stepper__label, .status-stepper__step--done .status-stepper__label,

16
src/app/features/admin/orders/pages/admin-orders-list-page.component.html
View File

@@ -60,14 +60,14 @@
<app-table> <app-table>
<thead> <thead>
<tr> <tr>
<th><input type="checkbox" [attr.aria-label]="'adminOrders.selectAllRows' | translate" (change)="facade.toggleAll($any($event.target).checked)" /></th> <th scope="col"><input type="checkbox" [attr.aria-label]="'adminOrders.selectAllRows' | translate" (change)="facade.toggleAll($any($event.target).checked)" /></th>
<th>{{ 'adminOrders.orderNumber' | translate }}</th> <th scope="col">{{ 'adminOrders.orderNumber' | translate }}</th>
@if (isColumnVisible('customer')) { <th>{{ 'adminOrders.customer' | translate }}</th> } @if (isColumnVisible('customer')) { <th scope="col">{{ 'adminOrders.customer' | translate }}</th> }
@if (isColumnVisible('status')) { <th>{{ 'backoffice.status' | translate }}</th> } @if (isColumnVisible('status')) { <th scope="col">{{ 'backoffice.status' | translate }}</th> }
@if (isColumnVisible('payment')) { <th>{{ 'adminOrders.payment' | translate }}</th> } @if (isColumnVisible('payment')) { <th scope="col">{{ 'adminOrders.payment' | translate }}</th> }
@if (isColumnVisible('total')) { <th>{{ 'backoffice.price' | translate }}</th> } @if (isColumnVisible('total')) { <th scope="col">{{ 'backoffice.price' | translate }}</th> }
@if (isColumnVisible('created')) { <th>{{ 'adminOrders.createdAt' | translate }}</th> } @if (isColumnVisible('created')) { <th scope="col">{{ 'adminOrders.createdAt' | translate }}</th> }
<th>{{ 'adminProducts.actions' | translate }}</th> <th scope="col">{{ 'adminProducts.actions' | translate }}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

34
src/app/features/admin/products/components/admin-product-form.component.scss
View File

@@ -1,4 +1,4 @@
.form-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); background: #fff; } .form-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-primary); }
.grid { display: grid; gap: 12px; } .grid { display: grid; gap: 12px; }
.grid.one { grid-template-columns: 1fr; } .grid.one { grid-template-columns: 1fr; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@@ -8,9 +8,9 @@ label.full, app-form-field.full { grid-column: 1 / -1; }
label.check { display: flex; align-items: center; gap: 8px; } label.check { display: flex; align-items: center; gap: 8px; }
textarea, select { width: 100%; padding: 10px 12px; border: 1px solid var(--border-color, #d3dad9); border-radius: 10px; font: inherit; } textarea, select { width: 100%; padding: 10px 12px; border: 1px solid var(--border-color, #d3dad9); border-radius: 10px; font: inherit; }
input[type='checkbox'] { width: auto; } input[type='checkbox'] { width: auto; }
.sub-block { border-top: 1px dashed #d9e2e1; padding-top: 12px; } .sub-block { border-top: 1px dashed var(--border-color); padding-top: 12px; }
.readonly-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .readonly-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.readonly-grid article { border: 1px solid #ececec; border-radius: var(--radius-md); padding: 12px; } .readonly-grid article { border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 12px; }
.gallery-grid { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; } .gallery-grid { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.gallery-item { display: grid; gap: 4px; width: 72px; } .gallery-item { display: grid; gap: 4px; width: 72px; }
.gallery-item img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-color, #d3dad9); } .gallery-item img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-color, #d3dad9); }
@@ -20,14 +20,14 @@ input[type='checkbox'] { width: auto; }
min-width: 0; min-width: 0;
border: none; border: none;
border-radius: 6px; border-radius: 6px;
background: var(--surface-muted, #eef2f0); background: var(--bg-tertiary);
color: var(--text-secondary, #5f6e6a); color: var(--text-secondary);
cursor: pointer; cursor: pointer;
font-size: var(--font-size-xs, 0.75rem); font-size: var(--font-size-xs, 0.75rem);
padding: 2px 4px; padding: 2px 4px;
&:hover, &:focus-visible { &:hover, &:focus-visible {
background: var(--brand-primary, #1e8a6e); background: var(--primary-color);
color: #fff; color: #fff;
} }
} }
@@ -39,7 +39,7 @@ input[type='checkbox'] { width: auto; }
.form-card__header { display: grid; gap: 8px; } .form-card__header { display: grid; gap: 8px; }
.form-card__tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border-subtle, #e7ece9); } .form-card__tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border-color); }
.form-card__tab { .form-card__tab {
all: unset; all: unset;
cursor: pointer; cursor: pointer;
@@ -47,23 +47,23 @@ input[type='checkbox'] { width: auto; }
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
font-size: var(--font-size-base, 0.875rem); font-size: var(--font-size-base, 0.875rem);
font-weight: var(--font-weight-semibold, 600); font-weight: var(--font-weight-semibold, 600);
color: var(--text-secondary, #5f6e6a); color: var(--text-secondary);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
&:focus-visible { outline: 2px solid var(--brand-primary, #1e8a6e); outline-offset: 2px; } &:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
} }
.form-card__tab--active { color: var(--brand-primary, #1e8a6e); background: var(--surface-muted, #eef2f0); } .form-card__tab--active { color: var(--primary-color); background: var(--bg-tertiary); }
.form-card__panel { min-height: 200px; display: grid; gap: 14px; } .form-card__panel { min-height: 200px; display: grid; gap: 14px; }
.form-card__subheading { margin: 8px 0 0; font-size: var(--font-size-sm, 0.8125rem); font-weight: var(--font-weight-bold, 700); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary, #5f6e6a); } .form-card__subheading { margin: 8px 0 0; font-size: var(--font-size-sm, 0.8125rem); font-weight: var(--font-weight-bold, 700); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary); }
.form-card__explain { margin: 0; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #5f6e6a); } .form-card__explain { margin: 0; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary); }
.form-card__group { border: 1px solid var(--border-subtle, #e7ece9); border-radius: 10px; padding: 10px 14px; } .form-card__group { border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 14px; }
.form-card__group summary { cursor: pointer; font-weight: var(--font-weight-bold, 700); color: var(--text-primary, #1e3c38); } .form-card__group summary { cursor: pointer; font-weight: var(--font-weight-bold, 700); color: var(--text-primary, #1e3c38); }
.toggle-row { display: flex; align-items: center; gap: 8px; font-weight: var(--font-weight-normal, 400); } .toggle-row { display: flex; align-items: center; gap: 8px; font-weight: var(--font-weight-normal, 400); }
.seo-preview { .seo-preview {
border: 1px solid var(--border-subtle, #e7ece9); border: 1px solid var(--border-color);
border-radius: 10px; border-radius: 10px;
padding: 12px 14px; padding: 12px 14px;
display: grid; display: grid;
@@ -71,7 +71,7 @@ input[type='checkbox'] { width: auto; }
} }
.seo-preview__title { margin: 0; color: #1a0dab; font-size: var(--font-size-lg, 1rem); } .seo-preview__title { margin: 0; color: #1a0dab; font-size: var(--font-size-lg, 1rem); }
.seo-preview__url { margin: 0; color: #006621; font-size: var(--font-size-sm, 0.8125rem); } .seo-preview__url { margin: 0; color: #006621; font-size: var(--font-size-sm, 0.8125rem); }
.seo-preview__description { margin: 0; color: var(--text-secondary, #5f6e6a); font-size: var(--font-size-sm, 0.8125rem); } .seo-preview__description { margin: 0; color: var(--text-secondary); font-size: var(--font-size-sm, 0.8125rem); }
.field-with-action { display: flex; gap: 8px; align-items: center; app-input { flex: 1; } } .field-with-action { display: flex; gap: 8px; align-items: center; app-input { flex: 1; } }
.seo-generate-row { display: flex; align-items: center; gap: 10px; } .seo-generate-row { display: flex; align-items: center; gap: 10px; }
.seo-generate-row__hint { color: var(--text-secondary, #6b7280); font-size: var(--font-size-sm, 0.8125rem); } .seo-generate-row__hint { color: var(--text-secondary, #6b7280); font-size: var(--font-size-sm, 0.8125rem); }
@@ -89,7 +89,7 @@ input[type='checkbox'] { width: auto; }
font-weight: var(--font-weight-semibold, 600); font-weight: var(--font-weight-semibold, 600);
font-size: var(--font-size-base, 0.875rem); font-size: var(--font-size-base, 0.875rem);
&:focus-visible { outline: 2px solid var(--color-primary, #2f8f5b); outline-offset: 2px; } &:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
} }
&[open] summary { margin-bottom: 8px; } &[open] summary { margin-bottom: 8px; }
@@ -113,7 +113,7 @@ input[type='checkbox'] { width: auto; }
color: #fff; font-size: var(--font-size-xs, 0.75rem); font-weight: var(--font-weight-bold, 700); text-transform: uppercase; color: #fff; font-size: var(--font-size-xs, 0.75rem); font-weight: var(--font-weight-bold, 700); text-transform: uppercase;
border: none; border: none;
} }
.badge-chip--add { cursor: pointer; opacity: 0.55; &:hover { opacity: 1; } &:focus-visible { outline: 2px solid var(--color-primary, #2f8f5b); outline-offset: 2px; opacity: 1; } } .badge-chip--add { cursor: pointer; opacity: 0.55; &:hover { opacity: 1; } &:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; opacity: 1; } }
.badge-chip__remove { .badge-chip__remove {
border: none; background: transparent; color: inherit; cursor: pointer; border: none; background: transparent; color: inherit; cursor: pointer;
font-size: var(--font-size-base, 0.875rem); line-height: 1; padding: 0 0 0 2px; font-size: var(--font-size-base, 0.875rem); line-height: 1; padding: 0 0 0 2px;

18
src/app/features/admin/products/components/admin-products-list.component.html
View File

@@ -88,15 +88,15 @@
<app-table [class.density-compact]="density === 'compact'"> <app-table [class.density-compact]="density === 'compact'">
<thead> <thead>
<tr> <tr>
<th><input type="checkbox" [attr.aria-label]="'adminProducts.selectAllRows' | translate" (change)="selectAll.emit($any($event.target).checked)" /></th> <th scope="col"><input type="checkbox" [attr.aria-label]="'adminProducts.selectAllRows' | translate" (change)="selectAll.emit($any($event.target).checked)" /></th>
<th>{{ 'adminProducts.name' | translate }}</th> <th scope="col">{{ 'adminProducts.name' | translate }}</th>
@if (isColumnVisible('sku')) { <th>{{ 'backoffice.sku' | translate }}</th> } @if (isColumnVisible('sku')) { <th scope="col">{{ 'backoffice.sku' | translate }}</th> }
@if (isColumnVisible('brand')) { <th>{{ 'adminProducts.brand' | translate }}</th> } @if (isColumnVisible('brand')) { <th scope="col">{{ 'adminProducts.brand' | translate }}</th> }
@if (isColumnVisible('price')) { <th>{{ 'backoffice.price' | translate }}</th> } @if (isColumnVisible('price')) { <th scope="col">{{ 'backoffice.price' | translate }}</th> }
@if (isColumnVisible('stock')) { <th>{{ 'adminProducts.stockStatus' | translate }}</th> } @if (isColumnVisible('stock')) { <th scope="col">{{ 'adminProducts.stockStatus' | translate }}</th> }
@if (isColumnVisible('visibility')) { <th>{{ 'adminProducts.visibility' | translate }}</th> } @if (isColumnVisible('visibility')) { <th scope="col">{{ 'adminProducts.visibility' | translate }}</th> }
<th>{{ 'adminProducts.healthColumn' | translate }}</th> <th scope="col">{{ 'adminProducts.healthColumn' | translate }}</th>
<th>{{ 'adminProducts.actions' | translate }}</th> <th scope="col">{{ 'adminProducts.actions' | translate }}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

6
src/app/features/admin/products/components/admin-products-list.component.scss
View File

@@ -1,4 +1,4 @@
.admin-products-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); background: #fff; } .admin-products-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-primary); }
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; } .toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; }
.filters { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap: 10px; flex: 1; } .filters { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap: 10px; flex: 1; }
select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-color, #d3dad9); border-radius: 10px; } select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-color, #d3dad9); border-radius: 10px; }
@@ -20,8 +20,8 @@ select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-color
.product-grid--compact { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .product-grid--compact { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.product-grid__item { position: relative; display: grid; gap: 6px; } .product-grid__item { position: relative; display: grid; gap: 6px; }
.product-grid__select { position: absolute; top: 8px; left: 8px; z-index: 1; } .product-grid__select { position: absolute; top: 8px; left: 8px; z-index: 1; }
.product-grid__image { width: 100%; height: 120px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-muted, #eef2f0); } .product-grid__image { width: 100%; height: 120px; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-tertiary); }
.product-grid__image--placeholder { display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xs, 0.75rem); color: var(--text-tertiary, #9aa6a2); } .product-grid__image--placeholder { display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xs, 0.75rem); color: var(--text-light); }
.product-grid__name { margin: 0; font-size: var(--font-size-sm, 0.8125rem); font-weight: var(--font-weight-bold, 700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .product-grid__name { margin: 0; font-size: var(--font-size-sm, 0.8125rem); font-weight: var(--font-weight-bold, 700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-grid__price { margin: 0; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #5f6e6a); } .product-grid__price { margin: 0; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #5f6e6a); }
.product-grid__actions { display: flex; gap: 6px; flex-wrap: wrap; } .product-grid__actions { display: flex; gap: 6px; flex-wrap: wrap; }

10
src/app/features/admin/products/components/product-health-widget/product-health-widget.component.scss
View File

@@ -7,19 +7,19 @@
.product-health__bar { .product-health__bar {
height: 6px; height: 6px;
border-radius: var(--radius-full, 999px); border-radius: var(--radius-full, 999px);
background: var(--surface-muted, #eef2f0); background: var(--bg-tertiary);
overflow: hidden; overflow: hidden;
} }
.product-health__bar-fill { .product-health__bar-fill {
height: 100%; height: 100%;
background: var(--brand-primary, #1e8a6e); background: var(--primary-color);
} }
.product-health__percent { .product-health__percent {
font-size: var(--font-size-xs, 0.75rem); font-size: var(--font-size-xs, 0.75rem);
font-weight: var(--font-weight-bold, 700); font-weight: var(--font-weight-bold, 700);
color: var(--text-secondary, #5f6e6a); color: var(--text-secondary);
} }
.product-health__list { .product-health__list {
@@ -29,7 +29,7 @@
display: grid; display: grid;
gap: 4px; gap: 4px;
font-size: var(--font-size-xs, 0.75rem); font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary, #5f6e6a); color: var(--text-secondary);
li { li {
display: flex; display: flex;
@@ -39,7 +39,7 @@
} }
.product-health__list-item--done { .product-health__list-item--done {
color: var(--text-primary, #1e3c38); color: var(--text-primary);
} }
.product-health--compact { .product-health--compact {

2
src/app/features/admin/products/components/product-variants-editor/product-variants-editor.component.scss
View File

@@ -22,7 +22,7 @@
.attribute-card__remove { .attribute-card__remove {
margin-left: auto; border: none; background: transparent; cursor: pointer; margin-left: auto; border: none; background: transparent; cursor: pointer;
font-size: var(--font-size-lg, 1rem); color: var(--text-secondary, #6b7280); font-size: var(--font-size-lg, 1rem); color: var(--text-secondary, #6b7280);
&:hover { color: var(--danger-color, #c0392b); } &:hover { color: var(--error-color); }
} }
.attribute-card__values { display: flex; flex-wrap: wrap; gap: 6px; } .attribute-card__values { display: flex; flex-wrap: wrap; gap: 6px; }

2
src/app/features/admin/products/components/products-dashboard/products-dashboard.component.scss
View File

@@ -64,7 +64,7 @@
.products-dashboard__recent button { .products-dashboard__recent button {
all: unset; all: unset;
cursor: pointer; cursor: pointer;
color: var(--brand-primary, #1e8a6e); color: var(--primary-color);
font-size: var(--font-size-sm, 0.8125rem); font-size: var(--font-size-sm, 0.8125rem);
&:hover, &:focus-visible { &:hover, &:focus-visible {