From ae7da0c86af013f64d124919adc65a02faf2abf6 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Tue, 26 May 2026 11:19:49 +0300
Subject: [PATCH] refactor(theming): replace gray-* with dark-* tokens on
 blocking screens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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).
---
 src/components/blocking/AccountDeletedScreen.tsx      | 6 +++---
 src/components/blocking/BlacklistedScreen.tsx         | 8 ++++----
 src/components/blocking/ChannelSubscriptionScreen.tsx | 6 +++---
 src/components/blocking/MaintenanceScreen.tsx         | 8 ++++----
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/blocking/AccountDeletedScreen.tsx b/src/components/blocking/AccountDeletedScreen.tsx
index 6da6702..d94faf5 100644
--- a/src/components/blocking/AccountDeletedScreen.tsx
+++ b/src/components/blocking/AccountDeletedScreen.tsx
@@ -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>
   );
diff --git a/src/components/blocking/BlacklistedScreen.tsx b/src/components/blocking/BlacklistedScreen.tsx
index dd33cb8..2bb99e7 100644
--- a/src/components/blocking/BlacklistedScreen.tsx
+++ b/src/components/blocking/BlacklistedScreen.tsx
@@ -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>
   );
diff --git a/src/components/blocking/ChannelSubscriptionScreen.tsx b/src/components/blocking/ChannelSubscriptionScreen.tsx
index 8ccddd2..a4c78e8 100644
--- a/src/components/blocking/ChannelSubscriptionScreen.tsx
+++ b/src/components/blocking/ChannelSubscriptionScreen.tsx
@@ -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>
   );
diff --git a/src/components/blocking/MaintenanceScreen.tsx b/src/components/blocking/MaintenanceScreen.tsx
index 8f9abfd..6adc56f 100644
--- a/src/components/blocking/MaintenanceScreen.tsx
+++ b/src/components/blocking/MaintenanceScreen.tsx
@@ -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>
   );