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

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

Browse Source
This commit is contained in:
Umbrix Dev
2026-02-06 01:04:12 +03:00
parent 39561a1381
commit 30789eb257
1 changed files with 28 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
components/SetupWizard.tsx
View File

@@ -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="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="fixed inset-0 bg-black/90 backdrop-blur-sm flex items-center justify-center z-50 p-4">
<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 ${
i <= currentStepIndex ? 'bg-blue-500' : 'bg-slate-700'
}`}
className="h-1 flex-1 rounded-full transition-colors"
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" />
<p className="text-white font-medium">Компьютер</p>
<Laptop className="h-12 w-12 mx-auto mb-3 group-hover:scale-110 transition-transform" style={{ color: 'var(--primary)' }} />
<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" />
<p className="text-white font-medium">Телефон</p>
<Smartphone className="h-12 w-12 mx-auto mb-3 group-hover:scale-110 transition-transform" style={{ color: 'var(--primary)' }} />
<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" />
<p className="text-white font-medium">Да</p>
<Check className="h-12 w-12 mx-auto mb-3" style={{ color: 'var(--success)' }} />
<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" />
<p className="text-white font-medium">Нет</p>
<X className="h-12 w-12 mx-auto mb-3" style={{ color: 'var(--error)' }} />
<p className="font-medium" style={{ color: 'var(--text-white)' }}>Нет</p>
</button>
</div>