tiennm99/coolify
1
0 Fork 0
mirror of https://github.com/tiennm99/coolify.git synced 2026-10-18 16:13:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(onboarding): redesign user onboarding flow with modern UI/UX

Browse Source 
- Add centered, card-based layout with clean design
- Implement 3-step progress indicator component
- Add proper dark/light mode support following Coolify design system
- Implement Livewire URL state persistence for browser navigation
- Separate private key textareas for "Generate" vs "Add your own" modes
- Consistent checkpoint styling across all onboarding phases
- Enhanced typography with prominent titles (semibold, white in dark mode)
- Fixed state restoration on page refresh and browser back/forward navigation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Andras BacsaiandClaude committed 2025-10-12 17:59:37 +02:00
1 parent 821aa6a531
commit 7a008c859a
5 files changed
+675 -214
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

resources/views/components/boarding-progress.blade.php
+47
View File
@@ -0,0 +1,47 @@
@props(['currentStep' => 1, 'totalSteps' => 3])
<div class="w-full max-w-2xl mx-auto mb-8">
<div class="flex items-center justify-between">
@for ($i = 1; $i <= $totalSteps; $i++)
<div class="flex items-center {{ $i < $totalSteps ? 'flex-1' : '' }}">
<div class="flex flex-col items-center">
<div
class="flex items-center justify-center size-10 rounded-full border-2 transition-all duration-300
{{ $i < $currentStep ? 'bg-success border-success' : '' }}
{{ $i === $currentStep ? 'bg-white dark:bg-coolgray-100' : '' }}
">
@if ($i < $currentStep)
<svg class="size-5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd" />
</svg>
@else
<span
class="text-sm font-bold text-black dark:text-white">
{{ $i }}
</span>
@endif
</div>
<span
class="mt-2 text-xs font-medium text-black dark:text-white">
@if ($i === 1)
Server
@elseif ($i === 2)
Connection
@elseif ($i === 3)
Complete
@endif
</span>
</div>
@if ($i < $totalSteps)
<div
class="flex-1 h-0.5 mx-4 transition-all duration-300
{{ $i < $currentStep ? 'bg-success' : 'bg-coolgray-200 dark:bg-coolgray-600' }}">
</div>
@endif
</div>
@endfor
</div>
</div>
resources/views/components/boarding-step.blade.php
+22 -18
View File
@@ -1,25 +1,29 @@
<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
<div class="box-border col-span-2 lg:min-w-[24rem] lg:min-h-[21rem]">
<h1 class="text-2xl font-bold lg:text-5xl">{{ $title }}</h1>
<div class="py-6">
<div class="w-full max-w-4xl">
<div class="bg-white dark:bg-coolgray-100 rounded-lg shadow-sm border border-neutral-200 dark:border-coolgray-300 overflow-hidden">
<div class="p-8 lg:p-12">
<h1 class="text-3xl font-bold lg:text-4xl mb-4">{{ $title }}</h1>
@isset($question)
<p class="dark:text-neutral-400">
<div class="text-base lg:text-lg dark:text-neutral-400 mb-8">
{{ $question }}
</p>
</div>
@endisset
@if ($actions)
<div class="flex flex-col gap-4">
{{ $actions }}
</div>
@endif
</div>
@if ($actions)
<div class="flex flex-col flex-wrap gap-4 lg:items-center md:flex-row">
{{ $actions }}
@isset($explanation)
<div class="dark:bg-coolgray-200 border-t border-neutral-200 dark:border-coolgray-300 p-8 lg:p-12 bg-neutral-50">
<h3 class="text-sm font-bold uppercase tracking-wide mb-4 dark:text-neutral-400">
Technical Details
</h3>
<div class="space-y-3 text-sm dark:text-neutral-400">
{{ $explanation }}
</div>
</div>
@endif
@endisset
</div>
@isset($explanation)
<div class="col-span-1">
<h3 class="pb-8 font-bold">Explanation</h3>
<div class="space-y-4">
{{ $explanation }}
</div>
</div>
@endisset
</div>