feat: Add BackLink component and integrate it into Sighting and Submit pages #180
+86
−52
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Align back links across pages
Closes #160
What changed
The back link on the detail page was a tinted pill with an arrow, but on the submit page it was a plain underlined link. Both pages now use one shared component:
BackLinkcomponent (frontend/src/components/BackLink.tsxandBackLink.css). It uses the detail page's pill style, which matches the other secondary buttons (Load more, Clear filters) and the existing colour tokens (--accent-strong,--accent-bg,--accent-bg-strong).BackLink, and the old.sighting-detail__backstyle is removed. It still goes back to the search you came from.BackLink, and the old.submit-sighting__backstyle is removed. The heading now sits 24px below the link, the same as on the detail page.Light and dark themes
e2e/accessibility.spec.tspass for the detail and submit pages in both themes, on desktop and mobile.Not included
The issue also asks to "reuse shared visual styles or design tokens for form controls". That isn't about back links, so it's left for a separate issue. The submit form's inputs still look different from the search bar.
Tests
BackLink.test.tsxchecks the link target and that its name leaves out the arrow.npm run lint,npm run format:check,npm run build,npm run testandnpm run test:e2eall pass.How to check
npm run dev