From d5603c229e27443cf71e50461cdb84a15e6b9f35 Mon Sep 17 00:00:00 2001 From: sdarbinyan Date: Thu, 23 Jul 2026 12:07:14 +0400 Subject: [PATCH] fix(storefront): premium UX polish for static pages - faq-{ru,en,hy}.component.html: convert each FAQ entry from an always- expanded
/

block into a native
/ disclosure, reusing the global expander-chevron pattern already defined in styles.scss (no bespoke accordion component built); answer body wrapped in .faq-answer for spacing - faq.component.scss: restyle .faq-item for the details/summary shape (summary uses tokenized font-size/weight, focus-visible ring, [open] state gets a stronger shadow instead of the old always-on hover-lift); hardcoded `all 0.3s ease` replaced with --transition-normal on the specific properties that change; added a reduced-motion override - shared-legal.scss: hardcoded `transition: all 0.3s ease` (4 call sites: info-card, features-list feature, contact-item/contact-link, contact-email) normalized to --transition-normal on transform/ box-shadow/background; paragraphs and lists get max-width: 70ch so long-form legal/info text keeps a readable line length within the wider 900px .legal-container - static-page.component.scss (CMS-driven static-page renderer): spacing converted to --space-* tokens; prose now capped at 70ch; added actual content styling (headings, lists, links, images, blockquote, table) for arbitrary CMS-authored HTML rendered via [innerHTML], since the previous rules only styled h2/h3 margins and left every other tag unstyled; line-height moved to --line-height-relaxed token Build verified green via `npm run build`. Out of scope / skipped: - info/contacts has no contact form (plain link list) - no app-input/ app-form-field polish applicable - no breadcrumbs/anchor nav exist on any page in scope - nothing to align focus-visible on - legal-page/info scss files (about, delivery, guarantee, company- details, payment-terms, privacy-policy, public-offer, return-policy) already used design tokens with no hex literals and had no accordion/ form elements - left untouched - shared-legal.scss's border-left accent on .legal-section/.info-box/ .highlight and the fadeIn entrance animation durations left as-is; pre-existing sitewide pattern, not a new introduction, changing it is a redesign call outside this pass's scope Co-Authored-By: Claude Sonnet 5 --- .../pages/info/faq/en/faq-en.component.html | 240 +++++++++++------- src/app/pages/info/faq/faq.component.scss | 66 +++-- .../pages/info/faq/hy/faq-hy.component.html | 240 +++++++++++------- .../pages/info/faq/ru/faq-ru.component.html | 240 +++++++++++------- .../static-page/static-page.component.scss | 70 ++++- src/styles/shared-legal.scss | 10 +- 6 files changed, 566 insertions(+), 300 deletions(-) diff --git a/src/app/pages/info/faq/en/faq-en.component.html b/src/app/pages/info/faq/en/faq-en.component.html index f07ac47..01883fc 100644 --- a/src/app/pages/info/faq/en/faq-en.component.html +++ b/src/app/pages/info/faq/en/faq-en.component.html @@ -5,27 +5,34 @@
-
-

How do I register on the platform?

+
+ How do I register on the platform? +

Registration is easy: open our app within Telegram. Your profile will be created automatically as soon as you log in.

-
+
+ -
-

Is it safe to buy on the site?

+
+ Is it safe to buy on the site? +

Absolutely! All transactions are protected by modern encryption technologies (PCI DSS and 3D Secure). Your banking details are securely stored separately from our system.

-
+
+