openedx / openedx/frontend-app-authoring
Unit Navigation Tabs have ugly rounding/borders
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 17
- Forks
- 218
- Avg merge
- 9d 20h
- Merged PRs (30d)
- 20
Description
The unit tabs used to quickly navigate between units in a subsection don't follow standard UX practice of merging into a "button group" where only the outer borders are rounded.
Current UI:
Expected UI:
- only the outer borders are rounded
- Adjoining (inner) borders are merged to a single border (1px) instead of double border (2px)
This may be more of a Paragon issue - it seems to lack an appropriate Tab component that looks like this. Or maybe we should just be using the Paragon Tab component. See https://paragon-openedx.netlify.app/components/tabs/#pills-usage
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the unit navigation tabs in the frontend and compare their styling with Paragon’s button group and Tabs documentation. Verify which component is currently used, then check the result against the expected UI: only the outer corners are rounded and adjoining borders appear as a single 1px border.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100