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