From feee9f9c05b2f872173ef6d4951bf2db8065514a Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Tue, 26 May 2026 11:14:58 +0300
Subject: [PATCH] fix(theming): replace off-token TelegramCallback/VerifyEmail
 with design tokens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Both pages were rendering with raw Tailwind gray-* + a non-existent border-primary-600
class (invisible spinner). Map: bg-gray-50 → bg-dark-950, text-gray-900 → text-dark-50,
text-gray-500 → text-dark-400, border-primary-600 → border-accent-500. Pages now match
the dark theme and the spinner is visible.
---
 src/pages/TelegramCallback.tsx | 14 +++++++-------
 src/pages/VerifyEmail.tsx      | 18 +++++++++---------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/pages/TelegramCallback.tsx b/src/pages/TelegramCallback.tsx
index e2153c0..981327e 100644
--- a/src/pages/TelegramCallback.tsx
+++ b/src/pages/TelegramCallback.tsx
@@ -64,11 +64,11 @@ export default function TelegramCallback() {
 
   if (error) {
     return (
-      <div className="min-h-viewport flex items-center justify-center bg-gray-50 px-4 py-8">
+      <div className="min-h-viewport flex items-center justify-center bg-dark-950 px-4 py-8">
         <div className="w-full max-w-md text-center">
           <div className="mb-4 text-5xl text-error-500">✗</div>
-          <h2 className="mb-2 text-lg font-semibold text-gray-900">{t('auth.loginFailed')}</h2>
-          <p className="mb-6 text-sm text-gray-500">{error}</p>
+          <h2 className="mb-2 text-lg font-semibold text-dark-50">{t('auth.loginFailed')}</h2>
+          <p className="mb-6 text-sm text-dark-400">{error}</p>
           <button onClick={() => navigate('/login')} className="btn-primary">
             {t('auth.tryAgain')}
           </button>
@@ -78,11 +78,11 @@ export default function TelegramCallback() {
   }
 
   return (
-    <div className="min-h-viewport flex items-center justify-center bg-gray-50">
+    <div className="min-h-viewport flex items-center justify-center bg-dark-950">
       <div className="text-center">
-        <div className="border-primary-600 mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-b-2"></div>
-        <h2 className="text-lg font-semibold text-gray-900">{t('auth.authenticating')}</h2>
-        <p className="mt-2 text-sm text-gray-500">{t('common.loading')}</p>
+        <div className="mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-b-2 border-accent-500"></div>
+        <h2 className="text-lg font-semibold text-dark-50">{t('auth.authenticating')}</h2>
+        <p className="mt-2 text-sm text-dark-400">{t('common.loading')}</p>
       </div>
     </div>
   );
diff --git a/src/pages/VerifyEmail.tsx b/src/pages/VerifyEmail.tsx
index d17ea65..e7d473c 100644
--- a/src/pages/VerifyEmail.tsx
+++ b/src/pages/VerifyEmail.tsx
@@ -66,7 +66,7 @@ export default function VerifyEmail() {
   }, [searchParams, t, navigate, setTokens, setUser, checkAdminStatus]);
 
   return (
-    <div className="min-h-viewport flex items-center justify-center bg-gray-50 px-4 py-8 sm:py-12">
+    <div className="min-h-viewport flex items-center justify-center bg-dark-950 px-4 py-8 sm:py-12">
       {/* Language switcher in corner */}
       <div className="fixed right-4 top-4 z-50">
         <LanguageSwitcher />
@@ -75,11 +75,11 @@ export default function VerifyEmail() {
       <div className="w-full max-w-md text-center">
         {status === 'loading' && (
           <div>
-            <div className="border-primary-600 mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-b-2"></div>
-            <h2 className="text-lg font-semibold text-gray-900 sm:text-xl">
+            <div className="mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-b-2 border-accent-500"></div>
+            <h2 className="text-lg font-semibold text-dark-50 sm:text-xl">
               {t('emailVerification.verifying')}
             </h2>
-            <p className="mt-2 text-sm text-gray-500 sm:text-base">
+            <p className="mt-2 text-sm text-dark-400 sm:text-base">
               {t('emailVerification.pleaseWait')}
             </p>
           </div>
@@ -88,14 +88,14 @@ export default function VerifyEmail() {
         {status === 'success' && (
           <div>
             <div className="mb-4 text-5xl text-success-500 sm:text-6xl">✓</div>
-            <h2 className="text-lg font-semibold text-gray-900 sm:text-xl">
+            <h2 className="text-lg font-semibold text-dark-50 sm:text-xl">
               {t('emailVerification.success')}
             </h2>
-            <p className="mt-2 text-sm text-gray-500 sm:text-base">
+            <p className="mt-2 text-sm text-dark-400 sm:text-base">
               {t('emailVerification.redirecting', 'Redirecting to dashboard...')}
             </p>
             <div className="mt-4">
-              <div className="border-primary-600 mx-auto h-6 w-6 animate-spin rounded-full border-b-2"></div>
+              <div className="mx-auto h-6 w-6 animate-spin rounded-full border-b-2 border-accent-500"></div>
             </div>
           </div>
         )}
@@ -103,10 +103,10 @@ export default function VerifyEmail() {
         {status === 'error' && (
           <div>
             <div className="mb-4 text-5xl text-error-500 sm:text-6xl">✗</div>
-            <h2 className="text-lg font-semibold text-gray-900 sm:text-xl">
+            <h2 className="text-lg font-semibold text-dark-50 sm:text-xl">
               {t('emailVerification.failed')}
             </h2>
-            <p className="mt-2 text-sm text-gray-500 sm:text-base">{error}</p>
+            <p className="mt-2 text-sm text-dark-400 sm:text-base">{error}</p>
             <div className="mt-6">
               <Link to="/login" className="btn-secondary">
                 {t('emailVerification.goToLogin')}