Adapt app to light and dark theme

francelu commented 2 days ago

Make app readable in light and dark mode

Goal
Ensure all existing components use consistent colour variables by applying the ColorScheme object, and align these colours with any existing Figma design specifications.

Steps

Review Existing Components:
- Audit all components currently using colour variables.
- Identify inconsistencies in colour usage and note any variations or deprecated values.
Apply ColorScheme Object:
- Integrate the standardised ColorScheme object across components where applicable.
- Replace outdated or hardcoded colour values with the appropriate variables from ColorScheme.
- Ensure accessibility compliance for colour contrast ratios.
Align with Figma Designs:
- Cross-check updated components against Figma designs for visual consistency.
- Make any necessary adjustments to ensure visual parity with the Figma references.
- Communicate with the design team to address discrepancies or unclear specifications.

Done Criteria

[x] All colour variables are audited and documented for their current state.
[x] The ColorScheme object is consistently applied across all relevant components.
[x] No hardcoded colors remain in the reviewed components; only standardized variables are used.
[x] Updated components visually match their Figma design counterparts.
[ ] Code changes are reviewed and approved by the team.
[x] All necessary tests (e.g., visual regression) are conducted and passed.

francelu commented 17 hours ago

Before light and dark mode on compact large screen

First notable issue, CreateAlertScreen's location field's label probably has some kind of non transparent background. Figma hasn't been changed yet for the drop down menu.
Dark mode :
- Some texts are unreadable.
- Edit button on profile screen is invisible.
For all others, check no hard coded values.
Graded background on auth screens won't be changed for now.
Map isn't adapted in dark mode. Out of the scope of this task.

Screen	Light Theme	Dark Theme
`SignInScreen`
`SignUpScreen`
`CreateProfileScreen`
`ProfileScreen`
`EditProfileScreen`
`CreateAlertScreen`
`AlertListsScreen` - My alerts empty
`AlertListsScreen` - My alerts no empty
`AlertListsScreen` - Pals' alerts empty
`AlertListsScreen` - Pals' alerts non empty
`MapScreen`
`TimerScreen`

francelu commented 16 hours ago

Discovered the Material Theme Builder website has components "previews".

After light and dark mode on compact large screen

Screen	Light	Dark
`SignInScreen`
`SignUpScreen`
`CreateProfileScreen`
`ProfileScreen`
`EditProfileScreen`
`CreateAlertScreen`
`AlertListsScreen` - My alerts (empty)
`AlertListsScreen` - My alerts (non-empty)
`AlertListsScreen` - Pals' alerts (empty)
`AlertListsScreen` - Pals' alerts (non-empty)
`MapScreen`
`TimerScreen`