vodorod/app_umbrix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 Применены цвета Umbrix brand ко всем элементам Setup Wizard

Browse Source 
- Прогресс бар: #2fbea5 (primary)
- Кнопки устройств: teal hover
- Блоки скачивания: rgba primary bg
- Location cards: teal selection
- Final step кнопки: primary colors
- Все текст цвета: CSS variables
This commit is contained in:
Umbrix Dev
2026-02-06 01:11:44 +03:00
parent 30789eb257
commit 2e1ec469fc
1 changed files with 86 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
components/SetupWizard.tsx
View File

@@ -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>