style(ui): full UX/UI + motion pass across storefront, admin, editor

- fix save-bar buttons to use shared app-button primitive (were unstyled) - fix platform-nav-group border/radius via structural selectors, drop dead -middle/-right classes - storefront widgets (hero/categories/product-carousel/footer-nav): design tokens, hover/focus states, 44px touch targets, entrance motion, reduced- motion guards - admin dashboard cards + quick-actions: hover lift, entrance animation - admin product-form gallery remove badge: hover/focus + expanded hit area - project-editor section.shared button styles: hover/active/focus/disabled states + reduced-motion; section-switch fade-in motion Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-16 23:32:31 +04:00
parent 897c1f3196
commit ee1cbdf38b
15 changed files with 358 additions and 51 deletions
--- a/src/app/features/admin/dashboard/components/admin-dashboard-card.component.scss
+++ b/src/app/features/admin/dashboard/components/admin-dashboard-card.component.scss
@@ -8,6 +8,30 @@
  background: var(--bg-primary, #fff);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06));
  min-height: 108px;
+  transition: box-shadow var(--transition-normal, 180ms ease), border-color var(--transition-normal, 180ms ease), transform var(--transition-normal, 180ms ease);
+  animation: dashboard-card-in 320ms ease-out both;
+}
+
+.dashboard-card:hover {
+  border-color: var(--primary-color, #497671);
+  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));
+  transform: translateY(-2px);
+}
+
+@keyframes dashboard-card-in {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dashboard-card {
+    animation: none;
+    transition: none;
+  }
+
+  .dashboard-card:hover {
+    transform: none;
+  }
 }

 .dashboard-card--error {
--- a/src/app/features/admin/dashboard/components/admin-dashboard-quick-actions.component.scss
+++ b/src/app/features/admin/dashboard/components/admin-dashboard-quick-actions.component.scss
@@ -25,13 +25,29 @@
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
 }

 .dashboard-quick-actions__item:hover,
 .dashboard-quick-actions__item:focus-visible {
  border-color: var(--primary-color, #497671);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.1));
+  transform: translateY(-2px);
+}
+
+.dashboard-quick-actions__item:active {
+  transform: translateY(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dashboard-quick-actions__item {
+    transition: none;
+  }
+
+  .dashboard-quick-actions__item:hover,
+  .dashboard-quick-actions__item:focus-visible {
+    transform: none;
+  }
 }

@media (max-width: 960px) {
--- a/src/app/features/admin/products/components/admin-product-form.component.scss
+++ b/src/app/features/admin/products/components/admin-product-form.component.scss
@@ -14,7 +14,35 @@ input[type='checkbox'] { width: auto; }
 .gallery-grid { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
 .gallery-item { position: relative; width: 64px; height: 64px; }
 .gallery-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-color, #d3dad9); }
-.gallery-item button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: none; background: #d9433c; color: #fff; cursor: pointer; }
+.gallery-item button {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: none;
+  background: #d9433c;
+  color: #fff;
+  cursor: pointer;
+  transition: transform var(--transition-fast, 120ms ease), background-color var(--transition-fast, 120ms ease);
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -12px;
+  }
+
+  &:hover {
+    background: #b8352f;
+    transform: scale(1.1);
+  }
+
+  &:focus-visible {
+    outline: 2px solid #d9433c;
+    outline-offset: 2px;
+  }
+}
 .related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
 .price-preview { font-weight: 600; }
 .actions { display: flex; justify-content: flex-end; }
--- a/src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.html
+++ b/src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.html
@@ -2,7 +2,7 @@
  @if (draftRestored()) {
    <div class="project-editor-save-bar-notice">
      <span>{{ 'builder.draftRestored' | translate }}</span>
-      <button type="button" (click)="dismissDraftRestoredNotice()">{{ 'builder.dismiss' | translate }}</button>
+      <app-button variant="ghost" size="sm" (click)="dismissDraftRestoredNotice()">{{ 'builder.dismiss' | translate }}</app-button>
    </div>
  }
  <div class="project-editor-save-bar-status">
@@ -21,8 +21,8 @@
    }
  </div>
  <div class="project-editor-save-bar-actions">
-    <button type="button" class="project-editor-save-bar-reset" (click)="resetDraft()">{{ 'builder.resetDraft' | translate }}</button>
-    <button type="button" (click)="save()">{{ 'builder.save' | translate }}</button>
-    <button type="button" [disabled]="issues().length > 0" (click)="publish()">{{ 'builder.publish' | translate }}</button>
+    <app-button variant="danger" size="sm" (click)="resetDraft()">{{ 'builder.resetDraft' | translate }}</app-button>
+    <app-button variant="secondary" size="sm" (click)="save()">{{ 'builder.save' | translate }}</app-button>
+    <app-button variant="primary" size="sm" [disabled]="issues().length > 0" (click)="publish()">{{ 'builder.publish' | translate }}</app-button>
  </div>
 </div>
--- a/src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.scss
+++ b/src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.scss
@@ -22,8 +22,10 @@
  color: var(--danger, #b91c1c);
 }

-.project-editor-save-bar-actions button + button {
-  margin-left: 0.5rem;
+.project-editor-save-bar-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }

 .project-editor-save-bar-saved-at {
@@ -45,7 +47,3 @@
  color: var(--info, #1d4ed8);
  border-bottom: 1px solid var(--border, #ddd);
 }
-
-.project-editor-save-bar-reset {
-  color: var(--danger, #b91c1c);
-}
--- a/src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.ts
+++ b/src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.ts
@@ -2,11 +2,12 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { TranslatePipe } from '../../../../i18n/translate.pipe';
 import { TranslateService } from '../../../../i18n/translate.service';
 import { ProjectEditorFacade } from '../../facade/project-editor.facade';
+import { ButtonComponent } from '../../../../shared/ui/button/button.component';

@Component({
  selector: 'app-project-editor-save-bar',
  standalone: true,
-  imports: [TranslatePipe],
+  imports: [TranslatePipe, ButtonComponent],
  templateUrl: './project-editor-save-bar.component.html',
  styleUrls: ['./project-editor-save-bar.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
--- a/src/app/features/project-editor/pages/project-editor-page.component.scss
+++ b/src/app/features/project-editor/pages/project-editor-page.component.scss
@@ -23,6 +23,27 @@
 .project-editor-stack {
  display: grid;
  gap: 16px;
+
+  > * {
+    animation: project-editor-section-in 220ms ease-out both;
+  }
+}
+
+@keyframes project-editor-section-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .project-editor-stack > * {
+    animation: none;
+  }
 }

 .project-editor-section-actions {
@@ -37,6 +58,23 @@
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
+  transition: background-color var(--transition-fast, 120ms ease), border-color var(--transition-fast, 120ms ease);
+
+  &:hover {
+    background: rgba(185, 28, 28, 0.08);
+    border-color: #b91c1c;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #b91c1c;
+    outline-offset: 2px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .project-editor-section-actions button {
+    transition: none;
+  }
 }

 .project-editor-empty {
--- a/src/app/features/project-editor/sections/section.shared.scss
+++ b/src/app/features/project-editor/sections/section.shared.scss
@@ -111,12 +111,58 @@ button {
  padding: 0 14px;
  font-weight: 700;
  cursor: pointer;
+  transition: background-color var(--transition-fast, 120ms ease),
+    border-color var(--transition-fast, 120ms ease),
+    transform var(--transition-fast, 120ms ease),
+    box-shadow var(--transition-fast, 120ms ease);
+
+  &:hover {
+    background: var(--primary-hover, #3d635f);
+    border-color: var(--primary-hover, #3d635f);
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.1));
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  &:focus-visible {
+    outline: 2px solid #497671;
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    transform: none;
+    box-shadow: none;
+  }
 }

 button.secondary {
  background: #fff;
  color: #1e3c38;
  border-color: var(--border-color, #d3dad9);
+
+  &:hover {
+    background: var(--bg-secondary, #f5f5f5);
+    border-color: #497671;
+  }
+
+  &:focus-visible {
+    outline-color: #497671;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  button {
+    transition: none;
+
+    &:hover {
+      transform: none;
+    }
+  }
 }

 .editor-error {