From 2e1ec469fc2964cd9a052fe26c84bcf2cc991a20 Mon Sep 17 00:00:00 2001
From: Umbrix Dev <vodorod@umbrix.net>
Date: Fri, 6 Feb 2026 01:11:44 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20=D0=9F=D1=80=D0=B8=D0=BC=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B5=D0=BD=D1=8B=20=D1=86=D0=B2=D0=B5=D1=82=D0=B0=20Umb?=
 =?UTF-8?q?rix=20brand=20=D0=BA=D0=BE=20=D0=B2=D1=81=D0=B5=D0=BC=20=D1=8D?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BC=D0=B5=D0=BD=D1=82=D0=B0=D0=BC=20Setup=20Wiza?=
 =?UTF-8?q?rd?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Прогресс бар: #2fbea5 (primary)
- Кнопки устройств: teal hover
- Блоки скачивания: rgba primary bg
- Location cards: teal selection
- Final step кнопки: primary colors
- Все текст цвета: CSS variables
---
 components/SetupWizard.tsx | 132 ++++++++++++++++++++++++-------------
 1 file changed, 86 insertions(+), 46 deletions(-)

diff --git a/components/SetupWizard.tsx b/components/SetupWizard.tsx
index f942e85..009af9c 100644
--- a/components/SetupWizard.tsx
+++ b/components/SetupWizard.tsx
@@ -206,14 +206,17 @@ export default function SetupWizard({
               </div>
 
               {hasApp === false && (
-                <div className="mt-6 p-4 bg-blue-500/10 border border-blue-500/30 rounded-xl">
-                  <p className="text-white font-medium mb-3">Скачайте Umbrix:</p>
+                <div className="mt-6 p-4 rounded-xl" style={{ background: 'rgba(47, 190, 165, 0.1)', borderWidth: '1px', borderStyle: 'solid', borderColor: 'var(--primary)' }}>
+                  <p style={{ color: 'var(--text-white)' }} className="font-medium mb-3">Скачайте Umbrix:</p>
                   <div className="flex flex-col gap-2">
                     <a
                       href="https://umbrix.net/download"
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-white font-medium transition-colors text-center"
+                      className="px-4 py-2 rounded-lg font-medium transition-colors text-center"
+                      style={{ background: 'var(--primary)', color: 'var(--text-white)' }}
+                      onMouseEnter={e => e.currentTarget.style.background = 'var(--primary-dark)'}
+                      onMouseLeave={e => e.currentTarget.style.background = 'var(--primary)'}
                     >
                       🪟 Windows
                     </a>
@@ -221,7 +224,10 @@ export default function SetupWizard({
                       href="https://umbrix.net/download"
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-white font-medium transition-colors text-center"
+                      className="px-4 py-2 rounded-lg font-medium transition-colors text-center"
+                      style={{ background: 'var(--primary)', color: 'var(--text-white)' }}
+                      onMouseEnter={e => e.currentTarget.style.background = 'var(--primary-dark)'}
+                      onMouseLeave={e => e.currentTarget.style.background = 'var(--primary)'}
                     >
                       🍎 macOS
                     </a>
@@ -229,14 +235,20 @@ export default function SetupWizard({
                       href="https://umbrix.net/download"
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-white font-medium transition-colors text-center"
+                      className="px-4 py-2 rounded-lg font-medium transition-colors text-center"
+                      style={{ background: 'var(--primary)', color: 'var(--text-white)' }}
+                      onMouseEnter={e => e.currentTarget.style.background = 'var(--primary-dark)'}
+                      onMouseLeave={e => e.currentTarget.style.background = 'var(--primary)'}
                     >
                       🐧 Linux
                     </a>
                   </div>
                   <button
                     onClick={() => setStep(needsLocationSelection ? 'location' : 'final')}
-                    className="w-full mt-4 px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg text-white font-medium transition-colors"
+                    className="w-full mt-4 px-4 py-2 rounded-lg font-medium transition-colors"
+                    style={{ background: 'var(--bg-elevated)', color: 'var(--text-white)' }}
+                    onMouseEnter={e => e.currentTarget.style.background = 'var(--border)'}
+                    onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-elevated)'}
                   >
                     ➡️ Уже установил, далее
                   </button>
@@ -257,10 +269,13 @@ export default function SetupWizard({
                     setMobileOS('android');
                     setHasApp(null);
                   }}
-                  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 border-2 transition-all"
+                  style={{ background: 'var(--bg-elevated)', borderColor: 'var(--border)' }}
+                  onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--success)'}
+                  onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--border)'}
                 >
                   <div className="text-4xl mb-3">🤖</div>
-                  <p className="text-white font-medium">Android</p>
+                  <p className="font-medium" style={{ color: 'var(--text-white)' }}>Android</p>
                 </button>
 
                 <button
@@ -268,10 +283,13 @@ export default function SetupWizard({
                     setMobileOS('ios');
                     setHasApp(null);
                   }}
-                  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"
+                  className="p-6 rounded-xl border-2 transition-all"
+                  style={{ background: 'var(--bg-elevated)', borderColor: 'var(--border)' }}
+                  onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--text-white)'}
+                  onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--border)'}
                 >
                   <div className="text-4xl mb-3">🍎</div>
-                  <p className="text-white font-medium">iOS</p>
+                  <p className="font-medium" style={{ color: 'var(--text-white)' }}>iOS</p>
                 </button>
               </div>
 
@@ -288,30 +306,36 @@ export default function SetupWizard({
                     </button>
                     <button
                       onClick={() => setHasApp(false)}
-                      className="px-4 py-3 bg-slate-700 hover:bg-slate-600 rounded-lg text-white font-medium transition-colors"
+                      className="px-4 py-3 rounded-lg font-medium transition-colors"
+                      style={{ background: 'var(--bg-elevated)', color: 'var(--text-white)' }}
+                      onMouseEnter={e => e.currentTarget.style.background = 'var(--border)'}
+                      onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-elevated)'}
                     >
                       ❌ Нет
                     </button>
                   </div>
 
                   {hasApp === false && (
-                    <div className="p-4 bg-blue-500/10 border border-blue-500/30 rounded-xl">
-                      <p className="text-slate-300 text-sm mb-2">Рекомендуем:</p>
+                    <div className="p-4 rounded-xl" style={{ background: 'rgba(47, 190, 165, 0.1)', borderWidth: '1px', borderStyle: 'solid', borderColor: 'var(--primary)' }}>
+                      <p className="text-sm mb-2" style={{ color: 'var(--text-primary)' }}>Рекомендуем:</p>
                       {mobileOS === 'android' ? (
                         <div className="space-y-2">
-                          <div className="text-white">• V2RayNG</div>
-                          <div className="text-white">• Hiddify</div>
-                          <div className="text-white">• v2rayTun</div>
+                          <div style={{ color: 'var(--text-white)' }}>• V2RayNG</div>
+                          <div style={{ color: 'var(--text-white)' }}>• Hiddify</div>
+                          <div style={{ color: 'var(--text-white)' }}>• v2rayTun</div>
                         </div>
                       ) : (
                         <div className="space-y-2">
-                          <div className="text-white">• Shadowrocket (AppStore)</div>
-                          <div className="text-white">• Hiddify (AppStore)</div>
+                          <div style={{ color: 'var(--text-white)' }}>• Shadowrocket (AppStore)</div>
+                          <div style={{ color: 'var(--text-white)' }}>• Hiddify (AppStore)</div>
                         </div>
                       )}
                       <button
                         onClick={() => handleAppCheck(true)}
-                        className="w-full mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-white font-medium transition-colors"
+                        className="w-full mt-4 px-4 py-2 rounded-lg font-medium transition-colors"
+                        style={{ background: 'var(--primary)', color: 'var(--text-white)' }}
+                        onMouseEnter={e => e.currentTarget.style.background = 'var(--primary-dark)'}
+                        onMouseLeave={e => e.currentTarget.style.background = 'var(--primary)'}
                       >
                         ➡️ Уже установил, далее
                       </button>
@@ -342,23 +366,26 @@ export default function SetupWizard({
                       key={location.id}
                       onClick={() => handleLocationToggle(location.id)}
                       disabled={!isSelected && !canSelect}
-                      className={`w-full p-4 rounded-xl border-2 transition-all flex items-center justify-between ${
-                        isSelected
-                          ? 'bg-blue-600/20 border-blue-500'
-                          : canSelect
-                          ? 'bg-slate-800/50 border-slate-700 hover:border-slate-600'
-                          : 'bg-slate-800/30 border-slate-700/50 opacity-50 cursor-not-allowed'
-                      }`}
+                      className="w-full p-4 rounded-xl border-2 transition-all flex items-center justify-between"
+                      style={{
+                        background: isSelected ? 'rgba(47, 190, 165, 0.2)' : canSelect ? 'var(--bg-elevated)' : 'var(--bg-card)',
+                        borderColor: isSelected ? 'var(--primary)' : 'var(--border)',
+                        opacity: canSelect || isSelected ? 1 : 0.5,
+                        cursor: canSelect || isSelected ? 'pointer' : 'not-allowed'
+                      }}
+                      onMouseEnter={e => { if (canSelect && !isSelected) e.currentTarget.style.borderColor = 'var(--text-primary)' }}
+                      onMouseLeave={e => { if (!isSelected) e.currentTarget.style.borderColor = 'var(--border)' }}
                     >
                       <div className="flex items-center gap-3">
-                        <div className={`w-5 h-5 rounded border-2 flex items-center justify-center ${
-                          isSelected ? 'bg-blue-500 border-blue-500' : 'border-slate-600'
-                        }`}>
-                          {isSelected && <Check className="h-4 w-4 text-white" />}
+                        <div className="w-5 h-5 rounded border-2 flex items-center justify-center" style={{
+                          background: isSelected ? 'var(--primary)' : 'transparent',
+                          borderColor: isSelected ? 'var(--primary)' : 'var(--border)'
+                        }}>
+                          {isSelected && <Check className="h-4 w-4" style={{ color: 'var(--text-white)' }} />}
                         </div>
-                        <span className="text-white font-medium">{location.name}</span>
+                        <span className="font-medium" style={{ color: 'var(--text-white)' }}>{location.name}</span>
                       </div>
-                      <span className="text-slate-400 text-sm">{location.ping}</span>
+                      <span className="text-sm" style={{ color: 'var(--text-primary)' }}>{location.ping}</span>
                     </button>
                   );
                 })}
@@ -367,11 +394,15 @@ export default function SetupWizard({
               <button
                 onClick={() => setStep('final')}
                 disabled={!canProceedFromLocation}
-                className={`w-full py-3 rounded-xl font-medium transition-colors ${
-                  canProceedFromLocation
-                    ? 'bg-blue-600 hover:bg-blue-700 text-white'
-                    : 'bg-slate-700 text-slate-500 cursor-not-allowed'
-                }`}
+                className="w-full py-3 rounded-xl font-medium transition-colors"
+                style={{
+                  background: canProceedFromLocation ? 'var(--primary)' : 'var(--bg-elevated)',
+                  color: canProceedFromLocation ? 'var(--text-white)' : 'var(--text-primary)',
+                  cursor: canProceedFromLocation ? 'pointer' : 'not-allowed',
+                  opacity: canProceedFromLocation ? 1 : 0.5
+                }}
+                onMouseEnter={e => { if (canProceedFromLocation) e.currentTarget.style.background = 'var(--primary-dark)' }}
+                onMouseLeave={e => { if (canProceedFromLocation) e.currentTarget.style.background = 'var(--primary)' }}
               >
                 {canProceedFromLocation ? '➡️ Продолжить' : `Выберите ещё ${maxLocations - selectedLocations.length}`}
               </button>
@@ -383,33 +414,39 @@ export default function SetupWizard({
             <div className="space-y-4">
               <div className="text-center mb-6">
                 <div className="text-4xl mb-3">🎉</div>
-                <p className="text-slate-300 text-sm">
+                <p className="text-sm" style={{ color: 'var(--text-primary)' }}>
                   {deviceType === 'desktop' ? 'Скопируйте ссылку и вставьте в Umbrix' : 'Отсканируйте QR код или скопируйте ссылку'}
                 </p>
               </div>
 
               <button
                 onClick={handleCopy}
-                className="w-full p-4 bg-slate-800/50 border-2 border-slate-700 hover:border-blue-500 rounded-xl transition-all group"
+                className="w-full p-4 rounded-xl border-2 transition-all group"
+                style={{ background: 'var(--bg-elevated)', borderColor: 'var(--border)' }}
+                onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--primary)'}
+                onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--border)'}
               >
                 <div className="flex items-center justify-between">
-                  <span className="text-white font-medium">
+                  <span className="font-medium" style={{ color: 'var(--text-white)' }}>
                     {copied ? '✅ Скопировано!' : '📋 Скопировать ссылку'}
                   </span>
-                  <Copy className={`h-5 w-5 transition-colors ${copied ? 'text-green-500' : 'text-slate-400 group-hover:text-blue-500'}`} />
+                  <Copy className="h-5 w-5 transition-colors" style={{ color: copied ? 'var(--success)' : 'var(--text-primary)' }} />
                 </div>
               </button>
 
               {deviceType === 'mobile' && (
                 <button
                   onClick={() => setShowQR(!showQR)}
-                  className="w-full p-4 bg-slate-800/50 border-2 border-slate-700 hover:border-blue-500 rounded-xl transition-all group"
+                  className="w-full p-4 rounded-xl border-2 transition-all group"
+                  style={{ background: 'var(--bg-elevated)', borderColor: 'var(--border)' }}
+                  onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--primary)'}
+                  onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--border)'}
                 >
                   <div className="flex items-center justify-between">
-                    <span className="text-white font-medium">
+                    <span className="font-medium" style={{ color: 'var(--text-white)' }}>
                       {showQR ? '📱 Скрыть QR код' : '📱 Показать QR код'}
                     </span>
-                    <QrCode className="h-5 w-5 text-slate-400 group-hover:text-blue-500 transition-colors" />
+                    <QrCode className="h-5 w-5 transition-colors" style={{ color: 'var(--text-primary)' }} />
                   </div>
                 </button>
               )}
@@ -421,10 +458,13 @@ export default function SetupWizard({
                 </div>
               )}
 
-              <div className="border-t border-slate-700 pt-4 mt-4">
+              <div className="pt-4 mt-4" style={{ borderTop: '1px solid var(--border)' }}>
                 <button
                   onClick={onClose}
-                  className="w-full p-4 bg-slate-700 hover:bg-slate-600 rounded-xl transition-colors text-white font-medium"
+                  className="w-full p-4 rounded-xl transition-colors font-medium"
+                  style={{ background: 'var(--bg-elevated)', color: 'var(--text-white)' }}
+                  onMouseEnter={e => e.currentTarget.style.background = 'var(--border)'}
+                  onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-elevated)'}
                 >
                   📖 Нужна помощь? Открыть инструкцию
                 </button>