marwan/HH
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
HH/.opencode/plans/onboarding-theme-alignment.md
ismail 177a7e0f5f updates
2026-04-08 17:13:35 +03:00

6.5 KiB
Raw Blame History

Plan: Align Onboarding Wizard User-Facing Pages with App Theme

Files to Modify (6)

  1. templates/accounts/onboarding/welcome.html
  2. templates/accounts/onboarding/step_content.html
  3. templates/accounts/onboarding/step_checklist.html
  4. templates/accounts/onboarding/step_activation.html
  5. templates/accounts/onboarding/complete.html
  6. templates/accounts/onboarding/activation_error.html

Design System Reference

The app theme uses:

  • Primary CTA: bg-navy text-white rounded-xl font-bold hover:bg-blue transition
  • Page titles: text-2xl font-bold text-navy
  • Subtitles: text-sm text-slate
  • Cards: rounded-2xl (not rounded-3xl)
  • Card backgrounds: bg-slate-50 with border-2 border-slate-200
  • Icon containers: flat tinted bg (bg-navy/10, bg-green-50, bg-blue-50) — not gradients
  • Progress bars: bg-navy solid
  • Alert boxes: bg-slate-50 border border-slate-200 rounded-xl or themed (blue for info, green for success)
  • Form inputs: border-2 border-slate-200 rounded-xl focus:border-navy focus:ring-2 focus:ring-navy/20
  • Form labels: text-sm font-bold text-slate mb-2

Changes Per File

1. welcome.html

Line Current Replacement
11 rounded-3xl rounded-2xl
14 bg-gradient-to-br from-blue to-orange-500 (icon) bg-navy
17 text-4xl md:text-5xl font-bold text-gray-800 mb-3 text-2xl md:text-3xl font-bold text-navy mb-1
20 text-xl text-gray-500 text-sm text-slate
26 bg-blue-50 border border-blue-200 rounded-2xl bg-blue-50 border border-blue-200 rounded-xl
40 bg-gray-50 rounded-2xl border-2 border-gray-100 hover:border-blue-200 bg-slate-50 rounded-xl border-2 border-slate-200 hover:border-navy
41 bg-light rounded-xl (Learn icon) bg-navy/10 rounded-xl
45 text-sm text-gray-600 text-sm text-slate
50 bg-gray-50 rounded-2xl border-2 border-gray-100 hover:border-green-200 bg-slate-50 rounded-xl border-2 border-slate-200 hover:border-green-400
51 bg-green-100 (Ack icon) bg-green-50
53 text-green-500 text-green-600
60 bg-gray-50 rounded-2xl border-2 border-gray-100 hover:border-orange-200 bg-slate-50 rounded-xl border-2 border-slate-200 hover:border-blue
61 bg-orange-100 (Sign icon) bg-blue-50
62 text-orange-500 text-blue-600
73 bg-gradient-to-r from-navy to-orange-500 ... rounded-2xl ... shadow-lg shadow-blue-200 bg-navy text-white ... rounded-xl ... shadow-lg
77 text-gray-400 text-slate

2. step_content.html

Line Current Replacement
11 rounded-3xl rounded-2xl
14 bg-gradient-to-br from-blue to-orange-500 (icon) bg-navy
17 text-3xl md:text-4xl font-bold text-gray-800 mb-3 text-xl md:text-2xl font-bold text-navy mb-1
20 text-gray-500 text-sm text-slate
32 bg-gradient-to-r from-navy to-orange-500 (progress bar) bg-navy
39 bg-gray-50 rounded-2xl p-6 border border-gray-100 bg-slate-50 rounded-xl p-6 border border-slate-200
56 rounded-xl (confirmation box) keep as-is (already rounded-xl)
69 bg-gradient-to-r from-navy to-orange-500 ... shadow-lg shadow-blue-200 bg-navy text-white ... shadow-lg

3. step_checklist.html

Line Current Replacement
11 rounded-3xl rounded-2xl
14 bg-gradient-to-br from-blue to-orange-500 (icon) bg-navy
17 text-3xl md:text-4xl font-bold text-gray-800 mb-3 text-xl md:text-2xl font-bold text-navy mb-1
20 text-gray-500 text-sm text-slate
34 bg-gradient-to-r from-navy to-orange-500 (progress bar) bg-navy
99 rounded-3xl (signature modal) rounded-2xl
117 bg-gradient-to-r from-navy to-orange-500 ... shadow-lg shadow-blue-200 (modal button) bg-navy text-white ... shadow-lg
125 bg-gradient-to-r from-navy to-orange-500 ... rounded-2xl ... shadow-lg shadow-blue-200 (continue button) bg-navy text-white ... rounded-xl ... shadow-lg

4. step_activation.html

Line Current Replacement
11 rounded-3xl rounded-2xl
14 bg-gradient-to-br from-blue to-orange-500 (icon) bg-navy
17 text-3xl md:text-4xl font-bold text-gray-800 mb-3 text-xl md:text-2xl font-bold text-navy mb-1
20 text-gray-500 text-sm text-slate
49, 57, 65, 74, 84, 92 text-gray-700 font-medium mb-2 (labels) text-sm font-bold text-slate mb-2
52, 61 border border-gray-200 rounded-xl (readonly inputs) border-2 border-slate-200 rounded-xl
68, 78, 87, 96 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent border-2 border-slate-200 rounded-xl focus:outline-none focus:border-navy focus:ring-2 focus:ring-navy/20 transition
101 bg-gradient-to-r from-navy to-orange-500 ... shadow-lg shadow-blue-200 bg-navy text-white ... shadow-lg

5. complete.html

Line Current Replacement
11 rounded-3xl rounded-2xl
17 text-4xl md:text-5xl font-bold text-gray-800 mb-3 text-2xl md:text-3xl font-bold text-navy mb-1
20 text-xl text-gray-500 text-sm text-slate
26 bg-green-50 border border-green-200 rounded-2xl bg-green-50 border border-green-200 rounded-xl
40 text-xl font-bold text-gray-800 text-lg font-bold text-navy
45 bg-gray-50 rounded-xl border-2 border-gray-100 hover:border-green-400 hover:shadow-md bg-slate-50 rounded-xl border-2 border-slate-200 hover:border-green-400 hover:shadow-md
56 same as above same fix
71 bg-gradient-to-r from-green-500 to-emerald-500 ... rounded-2xl ... shadow-lg shadow-green-200 bg-emerald-500 text-white ... rounded-xl ... shadow-lg

6. activation_error.html

Line Current Replacement
11 rounded-3xl rounded-2xl
17 text-4xl md:text-5xl font-bold text-gray-800 mb-3 text-2xl md:text-3xl font-bold text-navy mb-1
20 text-xl text-gray-500 text-sm text-slate
26 bg-red-50 border border-red-200 rounded-2xl bg-red-50 border border-red-200 rounded-xl
39 bg-blue-50 border border-blue-200 rounded-2xl bg-blue-50 border border-blue-200 rounded-xl
64 bg-gradient-to-r from-gray-500 to-gray-600 ... rounded-2xl border-2 border-slate-200 text-slate-700 rounded-xl hover:bg-slate-50 transition