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

refactor(admin): unify platform UX and consistency

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

- Tokenized every admin card/container radius to the design-system scale: raw 16px/12px/8px replaced with var(--radius-md)/var(--radius-sm) per DESIGN.md (cards 12px, fields keep 10px rounded.field)
- All 16 admin surfaces now share one card language: 1px --border-color border, --radius-md, white fill, 16px padding
- Normalized type-ramp outliers: 0.88rem -> 0.85rem (order timeline), 0.9em -> 0.9rem (category form breadcrumb)
- Visual-only pass: no markup, logic, or layout changes
This commit is contained in:
sdarbinyan
2026-07-18 22:47:15 +04:00
parent 574f038738
commit e2ec8dc632
16 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/features/admin/analytics/pages/admin-analytics-page.component.scss
View File

@@ -21,11 +21,11 @@
.panel { display: grid; gap: 16px; }
.summary-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.summary-card { border: 1px solid var(--border-color, #d3dad9); border-radius: 12px; padding: 12px; display: grid; gap: 4px; background: #fff; }
.summary-card { border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); padding: 12px; display: grid; gap: 4px; background: #fff; }
.summary-card span { font-size: 0.75rem; color: var(--text-secondary, #6b7280); }
.summary-card strong { font-size: 1.1rem; }
.card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: 16px; background: #fff; }
.card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); background: #fff; }
.card-head { display: flex; justify-content: space-between; align-items: center; }
.card h2 { margin: 0; font-size: 1.1rem; }
.chart { display: flex; align-items: flex-end; gap: 3px; height: 140px; }

6
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: 16px; background: #fff; }
.admin-categories-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); background: #fff; }
.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; }
select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-color, #d3dad9); border-radius: 10px; }
@@ -24,7 +24,7 @@ tr.deleted { opacity: 0.55; }
justify-content: space-between;
gap: 8px;
padding: 8px 10px;
border-radius: 8px;
border-radius: var(--radius-sm);
&:hover { background: var(--surface-muted, #eef2f0); }
&:focus-visible { outline: 2px solid var(--brand-primary, #1e8a6e); outline-offset: -2px; }
@@ -42,7 +42,7 @@ tr.deleted { opacity: 0.55; }
.category-grid--compact { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.category-grid__item { position: relative; display: grid; gap: 6px; }
.category-grid__select { position: absolute; top: 8px; left: 8px; z-index: 1; }
.category-grid__image { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; background: var(--surface-muted, #eef2f0); }
.category-grid__image { width: 100%; height: 120px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-muted, #eef2f0); }
.category-grid__image--placeholder { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.category-grid__name { margin: 0; font-size: 0.85rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-grid__items { margin: 0; font-size: 0.78rem; color: var(--text-secondary, #5f6e6a); }

4
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: 16px; background: #fff; }
.form-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); background: #fff; }
.grid { display: grid; gap: 12px; }
.grid.one { grid-template-columns: 1fr; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@@ -7,7 +7,7 @@ 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; }
input[type='checkbox'] { width: auto; }
.sub-block { border-top: 1px dashed #d9e2e1; padding-top: 12px; }
.breadcrumb-preview { margin: 0; color: var(--text-muted, #667); font-size: 0.9em; }
.breadcrumb-preview { margin: 0; color: var(--text-muted, #667); font-size: 0.9rem; }
.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); }
.actions { display: flex; justify-content: flex-end; gap: 10px; }

2
src/app/features/admin/customers/pages/admin-customer-detail-page.component.scss
View File

@@ -3,7 +3,7 @@
.toolbar h1 { margin: 0; font-size: 1.25rem; }
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { border: 1px solid var(--border-color, #d3dad9); border-radius: 12px; padding: 14px; display: grid; gap: 6px; }
.card { border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); padding: 14px; display: grid; gap: 6px; }
.card h3 { margin: 0 0 6px; }
.card p { margin: 0; }
.muted { color: var(--text-secondary, #5f6e6a); font-size: 0.85rem; }

2
src/app/features/admin/customers/pages/admin-customers-list-page.component.scss
View File

@@ -1,3 +1,3 @@
.admin-customers-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: 16px; background: #fff; }
.admin-customers-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); background: #fff; }
.toolbar { display: flex; }
.skeleton-rows { display: grid; gap: 8px; }

2
src/app/features/admin/moderation/pages/admin-reports-list-page.component.scss
View File

@@ -1,4 +1,4 @@
.admin-reports-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: 16px; background: #fff; }
.admin-reports-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); background: #fff; }
.toolbar { display: flex; align-items: center; gap: 12px; }
.toolbar h1 { margin: 0; font-size: 1.25rem; }
.actions { display: flex; gap: 8px; }

6
src/app/features/admin/moderation/pages/admin-review-detail-page.component.scss
View File

@@ -3,12 +3,12 @@
.toolbar h1 { margin: 0; font-size: 1.25rem; }
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { border: 1px solid var(--border-color, #d3dad9); border-radius: 12px; padding: 14px; display: grid; gap: 6px; }
.card { border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); padding: 14px; display: grid; gap: 6px; }
.card h3 { margin: 0 0 6px; }
.card p { margin: 0; }
.muted { color: var(--text-secondary, #5f6e6a); font-size: 0.85rem; }
.photo-row { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-row img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
.photo-row img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); }
.workflow-actions { display: flex; flex-wrap: wrap; gap: 8px; }
textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border-color, #d3dad9); border-radius: 8px; font: inherit; }
textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-sm); font: inherit; }
@media (max-width: 700px) { .grid.two { grid-template-columns: 1fr; } }

2
src/app/features/admin/moderation/pages/admin-reviews-list-page.component.scss
View File

@@ -1,4 +1,4 @@
.admin-reviews-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: 16px; background: #fff; }
.admin-reviews-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); background: #fff; }
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; }
select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-color, #d3dad9); border-radius: 10px; }

2
src/app/features/admin/monitoring/pages/admin-monitoring-page.component.scss
View File

@@ -1,5 +1,5 @@
.admin-monitoring-page { display: grid; gap: 16px; padding: 16px; max-width: 1100px; margin: 0 auto; }
.card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: 16px; background: #fff; }
.card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); background: #fff; }
.card h2 { margin: 0; font-size: 1.1rem; }
.health-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.queue-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

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

@@ -52,6 +52,6 @@
.order-timeline__note {
margin: 0;
font-size: 0.88rem;
font-size: 0.85rem;
color: var(--text-secondary, #5f6e6a);
}

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

@@ -4,11 +4,11 @@
.spacer { flex: 1; }
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { border: 1px solid var(--border-color, #d3dad9); border-radius: 12px; padding: 14px; display: grid; gap: 6px; }
.card { border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); padding: 14px; display: grid; gap: 6px; }
.card h3 { margin: 0 0 6px; }
.card p { margin: 0; }
.total { font-weight: 600; }
select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border-color, #d3dad9); border-radius: 8px; font: inherit; }
select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-sm); font: inherit; }
.actions { display: flex; gap: 8px; }
@media (max-width: 700px) { .grid.two { grid-template-columns: 1fr; } }
@media print { .no-print { display: none !important; } .print-only { display: block !important; } }

2
src/app/features/admin/orders/pages/admin-orders-list-page.component.scss
View File

@@ -1,4 +1,4 @@
.admin-orders-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: 16px; background: #fff; }
.admin-orders-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); background: #fff; }
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; }
select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-color, #d3dad9); border-radius: 10px; }

6
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: 16px; background: #fff; }
.form-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); background: #fff; }
.grid { display: grid; gap: 12px; }
.grid.one { grid-template-columns: 1fr; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@@ -10,10 +10,10 @@ textarea, select { width: 100%; padding: 10px 12px; border: 1px solid var(--bord
input[type='checkbox'] { width: auto; }
.sub-block { border-top: 1px dashed #d9e2e1; padding-top: 12px; }
.readonly-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.readonly-grid article { border: 1px solid #ececec; border-radius: 12px; padding: 12px; }
.readonly-grid article { border: 1px solid #ececec; border-radius: var(--radius-md); padding: 12px; }
.gallery-grid { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.gallery-item { display: grid; gap: 4px; width: 72px; }
.gallery-item img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; 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); }
.gallery-item__actions { display: flex; justify-content: space-between; gap: 2px; }
.gallery-item__actions button {
flex: 1;

4
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: 16px; background: #fff; }
.admin-products-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); background: #fff; }
.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; }
select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-color, #d3dad9); border-radius: 10px; }
@@ -20,7 +20,7 @@ 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__item { position: relative; display: grid; gap: 6px; }
.product-grid__select { position: absolute; top: 8px; left: 8px; z-index: 1; }
.product-grid__image { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; background: var(--surface-muted, #eef2f0); }
.product-grid__image { width: 100%; height: 120px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-muted, #eef2f0); }
.product-grid__image--placeholder { display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: var(--text-tertiary, #9aa6a2); }
.product-grid__name { margin: 0; font-size: 0.85rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-grid__price { margin: 0; font-size: 0.8rem; color: var(--text-secondary, #5f6e6a); }

2
src/app/features/admin/transactions/pages/admin-transactions-list-page.component.scss
View File

@@ -1,4 +1,4 @@
.admin-transactions-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: 16px; background: #fff; }
.admin-transactions-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); background: #fff; }
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; }
select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-color, #d3dad9); border-radius: 10px; }

2
src/app/features/admin/users/pages/admin-users-page.component.scss
View File

@@ -1,5 +1,5 @@
.admin-users-page { display: grid; gap: 16px; padding: 16px; max-width: 1100px; margin: 0 auto; }
.card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: 16px; background: #fff; }
.card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); background: #fff; }
.card h2 { margin: 0; font-size: 1.1rem; }
.hint { margin: 0; color: var(--text-secondary, #6b7280); font-size: 0.85rem; }
.invite-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }