refactor(theming): replace gray-* with dark-* tokens on blocking screens

Map text/bg/border-gray-N → dark-N across the four blocking screens (Maintenance,
Blacklisted, ChannelSubscription, AccountDeleted) so muted text + decorative surfaces
follow the design tokens. BroadcastPreview's email mockup and MessageMediaGrid's
fullscreen overlay intentionally keep their literal gray/white (mock chrome).
This commit is contained in:
c0mrade
2026-05-26 11:19:49 +03:00
parent 8a442e8aaa
commit ae7da0c86a
4 changed files with 14 additions and 14 deletions

View File

@@ -76,7 +76,7 @@ export default function AccountDeletedScreen() {
{t('blocking.accountDeleted.title')}
</h1>
<p className="mb-6 text-lg text-gray-400">{t('blocking.accountDeleted.description')}</p>
<p className="mb-6 text-lg text-dark-400">{t('blocking.accountDeleted.description')}</p>
<div className="space-y-3">
{deepLink && (
@@ -91,13 +91,13 @@ export default function AccountDeletedScreen() {
<button
type="button"
onClick={handleRetry}
className="block w-full rounded-xl bg-dark-800 px-6 py-3 text-base font-medium text-gray-200 transition-colors hover:bg-dark-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-dark-950"
className="block w-full rounded-xl bg-dark-800 px-6 py-3 text-base font-medium text-dark-200 transition-colors hover:bg-dark-700 focus:outline-none focus:ring-2 focus:ring-dark-400 focus:ring-offset-2 focus:ring-offset-dark-950"
>
{t('blocking.accountDeleted.retry')}
</button>
</div>
<p className="mt-8 text-sm text-gray-500">{t('blocking.accountDeleted.hint')}</p>
<p className="mt-8 text-sm text-dark-500">{t('blocking.accountDeleted.hint')}</p>
</div>
</div>
);

View File

@@ -42,17 +42,17 @@ export default function BlacklistedScreen() {
</h1>
{/* Message */}
<p className="mb-6 text-lg text-gray-400">{t('blocking.blacklisted.defaultMessage')}</p>
<p className="mb-6 text-lg text-dark-400">{t('blocking.blacklisted.defaultMessage')}</p>
{/* Reason */}
{blacklistedInfo?.message && (
<div className="mb-6 rounded-xl bg-dark-800/50 p-4">
<p className="mb-1 text-sm text-gray-500">{t('blocking.blacklisted.reason')}:</p>
<p className="text-gray-300">{blacklistedInfo.message}</p>
<p className="mb-1 text-sm text-dark-500">{t('blocking.blacklisted.reason')}:</p>
<p className="text-dark-300">{blacklistedInfo.message}</p>
</div>
)}
<p className="mt-8 text-sm text-gray-500">{t('blocking.blacklisted.contactSupport')}</p>
<p className="mt-8 text-sm text-dark-500">{t('blocking.blacklisted.contactSupport')}</p>
</div>
</div>
);

View File

@@ -108,7 +108,7 @@ export default function ChannelSubscriptionScreen() {
</h1>
{/* Message */}
<p className="mb-6 text-lg text-gray-400">
<p className="mb-6 text-lg text-dark-400">
{channelInfo?.message || t('blocking.channel.defaultMessage')}
</p>
@@ -184,7 +184,7 @@ export default function ChannelSubscriptionScreen() {
) : cooldown > 0 ? (
<>
<svg
className="h-5 w-5 text-gray-500"
className="h-5 w-5 text-dark-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@@ -214,7 +214,7 @@ export default function ChannelSubscriptionScreen() {
</button>
{/* Hint */}
<p className="mt-4 text-sm text-gray-500">{t('blocking.channel.hint')}</p>
<p className="mt-4 text-sm text-dark-500">{t('blocking.channel.hint')}</p>
</div>
</div>
);

View File

@@ -42,15 +42,15 @@ export default function MaintenanceScreen() {
</h1>
{/* Message */}
<p className="mb-6 text-lg text-gray-400">
<p className="mb-6 text-lg text-dark-400">
{maintenanceInfo?.message || t('blocking.maintenance.defaultMessage')}
</p>
{/* Reason */}
{maintenanceInfo?.reason && (
<div className="mb-6 rounded-xl bg-dark-800/50 p-4">
<p className="mb-1 text-sm text-gray-500">{t('blocking.maintenance.reason')}:</p>
<p className="text-gray-300">{maintenanceInfo.reason}</p>
<p className="mb-1 text-sm text-dark-500">{t('blocking.maintenance.reason')}:</p>
<p className="text-dark-300">{maintenanceInfo.reason}</p>
</div>
)}
@@ -70,7 +70,7 @@ export default function MaintenanceScreen() {
/>
</div>
<p className="mt-4 text-sm text-gray-500">{t('blocking.maintenance.waitMessage')}</p>
<p className="mt-4 text-sm text-dark-500">{t('blocking.maintenance.waitMessage')}</p>
</div>
</div>
);