Add progress bar, icons, go back button and button to return to beggining#68
Add progress bar, icons, go back button and button to return to beggining#68hugotiburtino wants to merge 4 commits intoedufeed-org:mainfrom
Conversation
Remove switch account, since it is not implemented
There was a problem hiding this comment.
Pull request overview
This PR enhances the onboarding UX by adding a shared progress bar component, introducing contextual icons, and improving navigation with “Zurück” / “Wieder von Anfang an” actions across the onboarding flow.
Changes:
- Added a reusable
OnboardingProgressBarcomponent and integrated it into the onboarding pages (steps 1–6). - Added lucide icons to onboarding/option cards to improve visual scanning.
- Added/adjusted back-navigation buttons on multiple onboarding steps (including a “restart” button on Starter Packs).
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/pages/WelcomePage.tsx | Adds step-1 progress bar and benefit-card icons. |
| src/pages/WarumEdufeedPage.tsx | Adds header, step-2 progress bar, advantage icons, and a back button. |
| src/pages/RegisterPage.tsx | Adds step-3 progress bar and a back button alongside “Weiter”. |
| src/pages/OptionsPage.tsx | Adds step-4 progress bar, resource icons, and a conditional back button. |
| src/pages/UserDashboardPage.tsx | Adds step-5 progress bar and a back button to return to options. |
| src/pages/StarterPacksPage.tsx | Adds step-6 progress bar plus back/restart navigation buttons. |
| src/components/OnboardingProgressBar.tsx | Introduces the new reusable onboarding progress bar component. |
| src/components/auth/AccountSwitcher.tsx | Removes the “Switch Account” label from the dropdown content. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div className="flex justify-center gap-4 mt-12"> | ||
| <Button | ||
| onClick={() => window.history.back()} | ||
| variant="outline" | ||
| size="lg" | ||
| className="px-8 py-6 text-base font-semibold" | ||
| > | ||
| Zurück | ||
| </Button> |
There was a problem hiding this comment.
Using window.history.back() bypasses React Router and makes navigation harder to reason about/test (and ties the component to window). Since this component already uses useNavigate, prefer navigate(-1) (and optionally fall back to a known route when there is no history entry).
| export function OnboardingProgressBar({ | ||
| currentStep, | ||
| totalSteps = 6, | ||
| className | ||
| }: OnboardingProgressBarProps) { | ||
| const progress = (currentStep / totalSteps) * 100; | ||
|
|
||
| return ( | ||
| <div className={cn("w-full max-w-2xl mx-auto px-4", className)}> | ||
| <div className="space-y-2"> | ||
| <div className="flex justify-between text-sm text-muted-foreground"> | ||
| <span>Schritt {currentStep} von {totalSteps}</span> | ||
| <span>{Math.round(progress)}%</span> | ||
| </div> | ||
| <Progress value={progress} className="h-2" /> | ||
| </div> |
There was a problem hiding this comment.
progress assumes currentStep is within [0, totalSteps] and totalSteps > 0. Since this component is reusable, it’s easy for a future call site to pass an out-of-range step (or totalSteps={0}) and end up with Infinity/NaN or values outside 0–100, which the underlying Progress transform won’t render sensibly. Consider guarding totalSteps and clamping the computed percentage before rendering.
Uh oh!
There was an error while loading. Please reload this page.