Apply approved HH Service brand design (logo header + accent pressed buttons) #20

Merged
forgejo-admin merged 5 commits from feature/16_logo_and_accent into main 2026-09-26 10:42:05 +00:00
Collaborator

Реализация утверждённого заказчиком дизайна (смесь вариантов B и C из превью в issue #16).

Что сделано

  • Брендовая шапка (вариант B): полоса фирменного #d4dc00 с логотипом HH Service вместо текстового заголовка «KEBA Panel». Логотип переключается по теме: белый текст — в тёмной теме, тёмный — в светлой (файлы заказчика logo-horiz*.svg перенесены в web/public/assets/).
  • Нажатая кнопка (вариант C): заливка акцентным градиентом (#e8ed34 → #d4dc00 → #c3ca02) с тёмными чернилами #3d4100, акцентная рамка и свечение.
  • Акценты #d4dc00 вместо прежних синего/янтарного: значение маски, бейдж PRESS в журнале, рамка и свечение нажатия, фокус-ринги кнопок.
  • Индикатор связи на шапке: полупрозрачно-белая «пилюля» с тёмным текстом (как в утверждённом превью B).
  • Кнопка «⚙ Настройки»: белая подложка с тёмным текстом в обеих темах — отдельная просьба заказчика в issue #16 (в тёмной теме чип оставался тёмным, исправлено явным переопределением).

Как проверить

  1. cd web && npm install && npm run dev — откроется панель с брендовой шапкой.
  2. Зажать кнопку — заливается фирменным жёлтым с тёмной надписью; в журнале бейдж PRESS акцентный, значение маски акцентное.
  3. Настройки → тёмная тема: логотип меняется на версию с белым текстом, шапка и акценты остаются фирменными, кнопка «Настройки» — белая с тёмным текстом.
  4. Скриншоты реализации — во вложениях к issue #16 (final_*.png), сравнение с утверждённым превью — 1:1 по цветам шапки.
  5. Тесты: npm test (36/36), сборка npm run build, линтер без новых предупреждений.

Closes #16

Реализация утверждённого заказчиком дизайна (смесь вариантов B и C из превью в issue #16). ## Что сделано - **Брендовая шапка (вариант B)**: полоса фирменного `#d4dc00` с логотипом HH Service вместо текстового заголовка «KEBA Panel». Логотип переключается по теме: белый текст — в тёмной теме, тёмный — в светлой (файлы заказчика `logo-horiz*.svg` перенесены в `web/public/assets/`). - **Нажатая кнопка (вариант C)**: заливка акцентным градиентом (`#e8ed34 → #d4dc00 → #c3ca02`) с тёмными чернилами `#3d4100`, акцентная рамка и свечение. - **Акценты `#d4dc00`** вместо прежних синего/янтарного: значение маски, бейдж PRESS в журнале, рамка и свечение нажатия, фокус-ринги кнопок. - **Индикатор связи на шапке**: полупрозрачно-белая «пилюля» с тёмным текстом (как в утверждённом превью B). - **Кнопка «⚙ Настройки»**: белая подложка с **тёмным текстом** в обеих темах — отдельная просьба заказчика в issue #16 (в тёмной теме чип оставался тёмным, исправлено явным переопределением). ## Как проверить 1. `cd web && npm install && npm run dev` — откроется панель с брендовой шапкой. 2. Зажать кнопку — заливается фирменным жёлтым с тёмной надписью; в журнале бейдж PRESS акцентный, значение маски акцентное. 3. Настройки → тёмная тема: логотип меняется на версию с белым текстом, шапка и акценты остаются фирменными, кнопка «Настройки» — белая с тёмным текстом. 4. Скриншоты реализации — во вложениях к issue #16 (`final_*.png`), сравнение с утверждённым превью — 1:1 по цветам шапки. 5. Тесты: `npm test` (36/36), сборка `npm run build`, линтер без новых предупреждений. Closes #16
Vendor the two customer-provided logo variants (light/dark text) and
capture design previews for the logo + #d4dc00 accent review so the
customer can pick one before implementation.
- Brand header: #d4dc00 band with HH Service logo replacing the
  'KEBA Panel' text title (variant B, approved 2026-09-25)
- Swap logo variants per theme: white wordmark in dark mode,
  dark wordmark in light mode (logos moved to public/assets)
- Pressed panel buttons fill with the accent gradient and dark ink
  (variant C), accent border and focus ring, accent glow shadow
- Accent #d4dc00 replaces the old blue/amber accents: mask value,
  PRESS log badge
- Status chip on the header: translucent white with dark ink
- Settings toggle keeps a white chip with dark ink in dark theme
  (explicit customer request)
- Tests: header logo rendering and theme-based logo switching

Ты забыл обновить скриншоты в README и Wiki. Сделай это с измененным интерфейсом. @developer

Ты забыл обновить скриншоты в README и Wiki. Сделай это с измененным интерфейсом. @developer
Author
Collaborator

Принято, обновляю скриншоты в README и Wiki под новый интерфейс (брендовая шапка с логотипом + акценты #d4dc00). Сниму заново desktop/tablet/mobile для README и для wiki-страницы Home в этой же ветке, сообщу коммитом.

Принято, обновляю скриншоты в README и Wiki под новый интерфейс (брендовая шапка с логотипом + акценты #d4dc00). Сниму заново desktop/tablet/mobile для README и для wiki-страницы Home в этой же ветке, сообщу коммитом.
Re-capture desktop/tablet/mobile screenshots at the same viewport sizes
and themes (desktop/tablet light, mobile dark) so README reflects the
approved HH Service brand design from issue #16: logo header and
#d4dc00 accent styling.
Author
Collaborator

Готово — скриншоты обновлены в обоих местах:

  • README — коммит 78e368b в ветке feature/16_logo_and_accent: заново сняты desktop.png (1200×800, светлая), tablet.png (1024×768, светлая), mobile.png (375×667, тёмная) — те же размеры и темы, что и раньше, но уже с брендовой шапкой HH Service и акцентами #d4dc00.
  • Wiki (Home) — коммит f1828f9 в keba-hhs.wiki: те же три скриншота заменены в screenshots/, страница Home обновилась автоматически.

Снимал с работающей панели (dev-сервер + API): шапка с логотипом, статус ONLINE, кнопки, журнал. Тесты после изменений: 36/36, сами компоненты не трогал.

Готово — скриншоты обновлены в обоих местах: - **README** — коммит 78e368b в ветке `feature/16_logo_and_accent`: заново сняты `desktop.png` (1200×800, светлая), `tablet.png` (1024×768, светлая), `mobile.png` (375×667, тёмная) — те же размеры и темы, что и раньше, но уже с брендовой шапкой HH Service и акцентами #d4dc00. - **Wiki (Home)** — коммит f1828f9 в `keba-hhs.wiki`: те же три скриншота заменены в `screenshots/`, страница Home обновилась автоматически. Снимал с работающей панели (dev-сервер + API): шапка с логотипом, статус ONLINE, кнопки, журнал. Тесты после изменений: 36/36, сами компоненты не трогал.

Посмотри конфликты - исправь

Посмотри конфликты - исправь
Resolve conflicts after #15 and #19 merges:
- App.css: keep both phone-mode rules (branded header + support modal)
- App.test.tsx: scope support-modal logo lookup to the dialog (brand
  header logo also uses alt 'HH Service' now)

Tests: 38/38 green, build OK.
Author
Collaborator

Исправлено — конфликты разрешены, PR снова смержибелен.

  • Мерж main (там #15 и #19) в feature/16_logo_and_accent: коммит 9de1ec6.
  • Единственный содержательный конфликт — web/src/App.css (мобильный медиа-блок): оставлены правила обеих сторон — брендовая шапка и модалка поддержки.
  • Тест модалки поддержки упал из-за двух логотипов с одинаковым alt="HH Service" (шапка + модалка) — поиск скоуплен в диалог (within(dialog)).
  • Проверка: vitest 38/38 зелёные, npm run build проходит.
Исправлено — конфликты разрешены, PR снова смержибелен. - Мерж `main` (там #15 и #19) в `feature/16_logo_and_accent`: коммит 9de1ec6. - Единственный содержательный конфликт — `web/src/App.css` (мобильный медиа-блок): оставлены правила обеих сторон — брендовая шапка и модалка поддержки. - Тест модалки поддержки упал из-за двух логотипов с одинаковым alt="HH Service" (шапка + модалка) — поиск скоуплен в диалог (`within(dialog)`). - Проверка: vitest 38/38 зелёные, `npm run build` проходит.
forgejo-admin deleted branch feature/16_logo_and_accent 2026-09-26 10:46:54 +00:00
Sign in to join this conversation.
No reviewers
No milestone
No project
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
forgejo-admin/keba-hhs!20
No description provided.