observation / observation/react-native-components
Use fixed font size in SectionHeader component
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1
- Forks
- 0
- Avg merge
- 2d 1h
- Merged PRs (30d)
- 3
Description
Context
Our current section header uses the smallBold font. That means it has font size 12pt in ObsIdentify and 14pt in Observation. This is actually not according to the design. This is a small element and one of the exceptions to texts that scale with the given base font size. So the aim is to use a fixed 12pt font size in this component, in both apps.
Requirements
- Solve this in the theme, not by specifying a hard-coded font size in the app
- Define fixed 12pt versions for the small font variations, e.g.
fixedSmall,fixedSmallBoldandfixedSmallLight(names can be discussed) - Use the
fixedSmallBoldtext style in SectionHeader - Increment the version number and update react-native-components in both apps
Other examples
We have several other examples of texts that should not scale with the base font size. Not all of these things have a shared component yet, but they might be in the future.
Examples:
- text size in tab-bar buttons (should be same)
- text size in notification (circle + number) (should be same?)
- text size for labels in observation filter / rarity filter (should be same)
- icon size of "about this species" icon in identification result (should be what?)
Contributor guide
No contributing guide indexed for this repository
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 SectionHeader component and the shared theme definitions in this react-native-components repository. Check how smallBold is defined, then trace the versioning and react-native-components update points for ObsIdentify and Observation. Done means both apps use a fixed 12pt small-bold style, the theme includes the requested fixed small variants, and the package version and app dependencies are updated.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- design, mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100