observation / observation/react-native-components

Use fixed font size in SectionHeader component

Open
#116 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Theming
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, fixedSmallBold and fixedSmallLight (names can be discussed)
  • Use the fixedSmallBold text 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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.