🎨 Umbrix colors: основные элементы (фон, прогресс, кнопки устройств)

components/SetupWizard.tsx

@@ -93,10 +93,10 @@ export default function SetupWizard({
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+    <div className="fixed inset-0 bg-black/90 backdrop-blur-sm flex items-center justify-center z-50 p-4">
-      <div className="bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 rounded-2xl max-w-md w-full relative border border-slate-700 shadow-2xl">
+      <div className="rounded-2xl max-w-md w-full relative border shadow-2xl" style={{ background: 'var(--bg-card)', borderColor: 'var(--border)' }}>
         {/* Header */}
-        <div className="p-6 border-b border-slate-700">
+        <div className="p-6 border-b" style={{ borderColor: 'var(--border)' }}>
           <div className="flex items-center justify-between mb-4">
             <button
               onClick={() => {
@@ -114,11 +114,12 @@ export default function SetupWizard({
                   }
                 }
               }}
-              className="text-slate-400 hover:text-white transition-colors"
+              className="transition-colors"
+              style={{ color: 'var(--text-primary)' }}
             >
               {step === 'device' ? <X className="h-6 w-6" /> : <ChevronLeft className="h-6 w-6" />}
             </button>
-            <h2 className="text-xl font-bold text-white">
+            <h2 className="text-xl font-bold" style={{ color: 'var(--text-white)' }}>
               {step === 'device' && '🎉 Подписка создана!'}
               {step === 'app-check' && deviceType === 'desktop' && '💻 Настройка'}
               {step === 'app-check' && deviceType === 'mobile' && '📱 Настройка'}
@@ -133,9 +134,10 @@ export default function SetupWizard({
             {Array.from({ length: totalSteps }).map((_, i) => (
               <div
                 key={i}
-                className={`h-1 flex-1 rounded-full transition-colors ${
+                className="h-1 flex-1 rounded-full transition-colors"
-                  i <= currentStepIndex ? 'bg-blue-500' : 'bg-slate-700'
+                style={{
-                }`}
+                  backgroundColor: i <= currentStepIndex ? 'var(--primary)' : 'var(--border)'
+                }}
               />
             ))}
           </div>
@@ -146,29 +148,31 @@ export default function SetupWizard({
           {/* Step 1: Device Selection */}
           {step === 'device' && (
             <div className="space-y-4">
-              <p className="text-slate-300 text-center mb-6">
+              <p className="text-center mb-6" style={{ color: 'var(--text-primary)' }}>
                 {expiryDate ? `Действует до ${expiryDate}` : 'Осталось 2 шага до подключения'}
               </p>
 
-              <p className="text-white font-medium text-center mb-4">
+              <p className="font-medium text-center mb-4" style={{ color: 'var(--text-white)' }}>
                 Какое у вас устройство?
               </p>
 
               <div className="grid grid-cols-2 gap-4">
                 <button
                   onClick={() => handleDeviceSelect('desktop')}
-                  className="p-6 bg-slate-800/50 hover:bg-slate-700/50 border-2 border-slate-700 hover:border-blue-500 rounded-xl transition-all group"
+                  className="p-6 rounded-xl transition-all group border-2"
+                  style={{ background: 'var(--bg-elevated)', borderColor: 'var(--border)' }}
                 >
-                  <Laptop className="h-12 w-12 mx-auto mb-3 text-blue-500 group-hover:scale-110 transition-transform" />
+                  <Laptop className="h-12 w-12 mx-auto mb-3 group-hover:scale-110 transition-transform" style={{ color: 'var(--primary)' }} />
-                  <p className="text-white font-medium">Компьютер</p>
+                  <p className="font-medium" style={{ color: 'var(--text-white)' }}>Компьютер</p>
                 </button>
 
                 <button
                   onClick={() => handleDeviceSelect('mobile')}
-                  className="p-6 bg-slate-800/50 hover:bg-slate-700/50 border-2 border-slate-700 hover:border-blue-500 rounded-xl transition-all group"
+                  className="p-6 rounded-xl transition-all group border-2"
+                  style={{ background: 'var(--bg-elevated)', borderColor: 'var(--border)' }}
                 >
-                  <Smartphone className="h-12 w-12 mx-auto mb-3 text-blue-500 group-hover:scale-110 transition-transform" />
+                  <Smartphone className="h-12 w-12 mx-auto mb-3 group-hover:scale-110 transition-transform" style={{ color: 'var(--primary)' }} />
-                  <p className="text-white font-medium">Телефон</p>
+                  <p className="font-medium" style={{ color: 'var(--text-white)' }}>Телефон</p>
                 </button>
               </div>
             </div>
@@ -184,18 +188,20 @@ export default function SetupWizard({
               <div className="grid grid-cols-2 gap-4">
                 <button
                   onClick={() => handleAppCheck(true)}
-                  className="p-6 bg-slate-800/50 hover:bg-slate-700/50 border-2 border-slate-700 hover:border-green-500 rounded-xl transition-all"
+                  className="p-6 rounded-xl transition-all border-2"
+                  style={{ background: 'var(--bg-elevated)', borderColor: 'var(--border)' }}
                 >
-                  <Check className="h-12 w-12 mx-auto mb-3 text-green-500" />
+                  <Check className="h-12 w-12 mx-auto mb-3" style={{ color: 'var(--success)' }} />
-                  <p className="text-white font-medium">Да</p>
+                  <p className="font-medium" style={{ color: 'var(--text-white)' }}>Да</p>
                 </button>
 
                 <button
                   onClick={() => handleAppCheck(false)}
-                  className="p-6 bg-slate-800/50 hover:bg-slate-700/50 border-2 border-slate-700 hover:border-red-500 rounded-xl transition-all"
+                  className="p-6 rounded-xl transition-all border-2"
+                  style={{ background: 'var(--bg-elevated)', borderColor: 'var(--border)' }}
                 >
-                  <X className="h-12 w-12 mx-auto mb-3 text-red-500" />
+                  <X className="h-12 w-12 mx-auto mb-3" style={{ color: 'var(--error)' }} />
-                  <p className="text-white font-medium">Нет</p>
+                  <p className="font-medium" style={{ color: 'var(--text-white)' }}>Нет</p>
                 </button>
               </div>