DemoOverlay — индикация демо-режима

Контекст

Демо-режим активируется через VITE_DEMO_MODE=true (client/.env.local). Сейчас есть только DemoBanner (Alert в потоке страницы, не фиксированный). Нужно добавить постоянную визуальную индикацию — оверлей, который не мешает взаимодействию с сайтом.

Что делаем

Новый компонент DemoOverlay в client/src/shared/ui/DemoOverlay.tsx.

Два фиксированных слоя, оба pointer-events: none:

Водяной знак — крупная надпись «ДЕМО», полупрозрачная, повёрнута на ~-30°, по центру экрана.
Плашка — правый нижний угол, скруглённая полупрозрачная тёмная плашка с текстом «ДЕМО-РЕЖИМ».

Оба рендерятся только при IS_DEMO_MODE === true.

Размещение

В App.tsx на одном уровне с <NoiseOverlay />, вне роутов:

<NoiseOverlay />
<DemoOverlay />

DemoBanner (существующий Alert в MainLayout) — не трогаем, остаётся как есть.

Водяной знак

Текст: ДЕМО
Размер шрифта: 10vw (адаптивный)
Поворот: rotate(-30deg)
Цвет: rgba(0,0,0,0.04) (тёмная тема: rgba(255,255,255,0.04))
Позиция: position: fixed, inset: 0, центрирование через flex
z-index: 9990

Плашка

Текст: ДЕМО-РЕЖИМ
Позиция: position: fixed, bottom: 16px, right: 16px
Фон: rgba(0,0,0,0.6) (тёмная тема: rgba(255,255,255,0.08))
Цвет текста: #fff (тёмная тема: rgba(255,255,255,0.6))
Паддинги: 6px 16px
Скругление: 8px
Размер шрифта: 12px, font-weight: 600
z-index: 9991

Тёмная тема

Компонент читает тему через useTheme() из MUI и применяет соответствующие цвета для watermark и плашки.

Тесты

Проверяем:

Компонент рендерится когда IS_DEMO_MODE === true (водяной знак + плашка видны)
Компонент не рендерится когда IS_DEMO_MODE === false
Плашка в правом нижнем углу (проверяем CSS-свойства)
pointer-events: none на обоих элементах

Файлы

Действие	Файл
Создать	`client/src/shared/ui/DemoOverlay.tsx`
Изменить	`client/src/app/App.tsx`
Создать	`client/src/shared/ui/__tests__/DemoOverlay.test.tsx`

2.9 KiB Raw Blame History Unescape Escape