mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 09:33:46 +00:00
782568e091
The status screens (service-unavailable, maintenance, channel-subscription, blacklist, account-deleted) all shared a generic flat look — an icon in a grey circle, a title, a subtitle, three raw pulsing dots — that didn't match the app's premium dark-glass aesthetic. Introduce one shared BlockingShell that all five compose: an opaque themed canvas with a self-contained accent glow, a centered glass card (rounded-[--bento-radius] border bg-dark-900/80 backdrop-blur + inset highlight), a gradient-ringed icon medallion (warning/error/info accent) instead of a flat grey circle, font-display typography, the canonical Button for every action, and a subtle framer-motion scale/slide entrance. Accent per screen: warning (maintenance, account-deleted, service-unavailable), error (blacklist), info (channel). Behavior is preserved 1:1 — every i18n key, the channel list + open buttons, the telegram deep-link, retry/check/close, the recovery poll, focus trap and aria all carried over verbatim; only the visuals change.
34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
import { useTranslation } from 'react-i18next';
|
|
import { useBlockingStore } from '../../store/blocking';
|
|
import { useFocusTrap } from '../../hooks/useFocusTrap';
|
|
import { WrenchIcon } from '@/components/icons';
|
|
import BlockingShell from './BlockingShell';
|
|
|
|
export default function MaintenanceScreen() {
|
|
const { t } = useTranslation();
|
|
const maintenanceInfo = useBlockingStore((state) => state.maintenanceInfo);
|
|
const screenRef = useFocusTrap<HTMLDivElement>(true, { lockScroll: false });
|
|
|
|
return (
|
|
<BlockingShell
|
|
screenRef={screenRef}
|
|
titleId="maintenance-title"
|
|
accent="warning"
|
|
icon={<WrenchIcon className="h-9 w-9" />}
|
|
title={t('blocking.maintenance.title')}
|
|
description={maintenanceInfo?.message || t('blocking.maintenance.defaultMessage')}
|
|
pulse
|
|
footer={t('blocking.maintenance.waitMessage')}
|
|
>
|
|
{maintenanceInfo?.reason && (
|
|
<div className="rounded-xl border border-dark-700/30 bg-dark-800/50 p-4">
|
|
<p className="mb-1 text-xs font-medium uppercase tracking-wide text-dark-500">
|
|
{t('blocking.maintenance.reason')}:
|
|
</p>
|
|
<p className="text-sm text-dark-300">{maintenanceInfo.reason}</p>
|
|
</div>
|
|
)}
|
|
</BlockingShell>
|
|
);
|
|
}
|