From c92a4e7704b6591d833a3ffc7778bbe0478aa7ef Mon Sep 17 00:00:00 2001 From: Dev Date: Tue, 20 Jan 2026 22:26:13 +0500 Subject: [PATCH] feat: complete Phase 2 - refactor all user pages to Bento UI --- .ai/BENTO_REFACTOR.md | 37 +++++++++++++++++++++++++++++-------- src/pages/Balance.tsx | 14 +++++++------- src/pages/Info.tsx | 8 ++++---- src/pages/Profile.tsx | 6 +++--- src/pages/Referral.tsx | 16 ++++++++-------- src/pages/Subscription.tsx | 34 ++++++++++++++++------------------ src/pages/Support.tsx | 8 ++++---- src/styles/globals.css | 8 +++++++- 8 files changed, 78 insertions(+), 53 deletions(-) diff --git a/.ai/BENTO_REFACTOR.md b/.ai/BENTO_REFACTOR.md index 8cbdfad..e9cf2f2 100644 --- a/.ai/BENTO_REFACTOR.md +++ b/.ai/BENTO_REFACTOR.md @@ -126,6 +126,7 @@ interface BentoCardProps { Этап 2: ██████████ 100% Этап 3: ██████████ 100% Этап 4: ██████████ 100% +Этап 5: ██████████ 100% ───────────────────── Общий: ██████████ 100% ``` @@ -156,14 +157,14 @@ interface BentoCardProps { ### Этап 5: Остальные страницы пользователя > Применить bento-стили к основным страницам -| # | Страница | Приоритет | Объём | -|---|----------|-----------|-------| -| 5.1 | Subscription.tsx | High | Большая — формы, тарифы, карточки | -| 5.2 | Balance.tsx | High | Средняя — баланс, транзакции, методы оплаты | -| 5.3 | Referral.tsx | Medium | Средняя — статистика, ссылка, условия | -| 5.4 | Support.tsx | Medium | Малая — тикеты | -| 5.5 | Profile.tsx | Low | Малая — настройки | -| 5.6 | Info.tsx | Low | Малая — статичный контент | +| # | Страница | Приоритет | Объём | Статус | +|---|----------|-----------|-------|--------| +| 5.1 | Subscription.tsx | High | Большая — формы, тарифы, карточки | `[x]` | +| 5.2 | Balance.tsx | High | Средняя — баланс, транзакции, методы оплаты | `[x]` | +| 5.3 | Referral.tsx | Medium | Средняя — статистика, ссылка, условия | `[x]` | +| 5.4 | Support.tsx | Medium | Малая — тикеты | `[x]` | +| 5.5 | Profile.tsx | Low | Малая — настройки | `[x]` | +| 5.6 | Info.tsx | Low | Малая — статичный контент | `[x]` | ### Этап 6: Модалки > Обновить модальные окна в bento-стиле @@ -203,3 +204,23 @@ interface BentoCardProps { - ✅ Floating TabBar - ✅ Dashboard в bento-стиле - ✅ Commit: `bf0bcfb` + +### 2026-01-20 — Subscription.tsx Refactor +- ✅ Все секции `card` → `bento-card` (6 шт): + - Current Subscription (line 429) + - Daily Pause (line 634) + - Additional Options (line 733) + - My Devices (line 1153) + - Tariffs section (line 1223) + - Classic mode purchase (line 1925) +- ✅ Tariff cards: `bento-card-hover` + `bento-card-glow` для выбранного +- ✅ Period selection cards: `bento-card-hover` + `bento-card-glow` +- ✅ Traffic selection cards: `bento-card-hover` + `bento-card-glow` +- ✅ Исправлен `.bento-grid` — добавлен breakpoint для xs (<375px) + +### 2026-01-20 — Phase 2 Complete (Все страницы пользователя) +- ✅ **Balance.tsx**: 4 карточки → `bento-card`, методы оплаты → `bento-card-hover` +- ✅ **Referral.tsx**: stats grid → `bento-grid` + `bento-card-hover`, 5 секций → `bento-card` +- ✅ **Support.tsx**: 3 карточки → `bento-card`, tickets list items → `rounded-bento` +- ✅ **Profile.tsx**: 3 карточки → `bento-card` +- ✅ **Info.tsx**: FAQ items, rules, privacy, offer → `bento-card` diff --git a/src/pages/Balance.tsx b/src/pages/Balance.tsx index 4f3b5ee..eb8b5c2 100644 --- a/src/pages/Balance.tsx +++ b/src/pages/Balance.tsx @@ -122,7 +122,7 @@ export default function Balance() {

{t('balance.title')}

{/* Balance Card */} -
+
{t('balance.currentBalance')}
{formatAmount(balanceData?.balance_rubles || 0)} @@ -131,7 +131,7 @@ export default function Balance() {
{/* Promo Code Section */} -
+

{t('balance.promocode.title')}

0 && ( -
+

{t('balance.topUpBalance')}

{paymentMethods.map((method) => { @@ -181,10 +181,10 @@ export default function Balance() { key={method.id} disabled={!method.is_available} onClick={() => method.is_available && setSelectedMethod(method)} - className={`p-4 rounded-xl border text-left transition-all ${ + className={`bento-card-hover p-4 text-left transition-all ${ method.is_available - ? 'border-dark-700/50 hover:border-accent-500/50 bg-dark-800/30 cursor-pointer' - : 'border-dark-800/30 bg-dark-900/30 opacity-50 cursor-not-allowed' + ? 'cursor-pointer' + : 'opacity-50 cursor-not-allowed' }`} >
{translatedName || method.name}
@@ -202,7 +202,7 @@ export default function Balance() { )} {/* Transaction History */} -
+

{t('balance.transactionHistory')}

{isLoading ? ( diff --git a/src/pages/Info.tsx b/src/pages/Info.tsx index 5e246ea..1ba1e16 100644 --- a/src/pages/Info.tsx +++ b/src/pages/Info.tsx @@ -166,7 +166,7 @@ export default function Info() { return (
{faqPages.map((faq: FaqPage) => ( -
+