AOSSIE-Org / AOSSIE-Org/CarbonTracker
[GOOD FIRST ISSUE]: FIX(UI): improve color contrast for tracking modes and input placeholders in UserInfo.dart section
- Ngôn ngữ chính
- Dart
- Star
- 7
- Fork
- 5
- Chỉ số merge pull request
- Không có pull request nào được merge trong 30 ngày
Mô tả
### Context
### Summary
The `UserInfoScreen` contains severe color contrast and accessibility issues , making selected options and input placeholder text difficult to read.
---
### Description & Affected Locations
#### 1. Low Contrast on Selected Tracking Mode Card
* **File:** `lib/features/onboarding/user_info.dart
* **Location:** `_buildTrackingSection()`
* **Issue:** When a tracking option is selected, the container background uses `AppColors.selectedOptionColor` while the icon and text apply `AppColors.focusedColor`. Because both colors share similar olive-green hues, it results in unreadable olive-on-olive text and icons.
* **Expected Behavior:** Selected options should display high-contrast foreground colors (e.g. Colors.white ) so text and icons remain clear.
#### 2. Low Contrast on Input Placeholders
* **File:** `lib/features/onboarding/user_info.dart
* **Locations:** buildNameSection() , buildWeightSection() , buildSustainabilitySection().
* **Issue:** All text fields set (hintStyle) to (Colors.grey.shade400) . When rendered over AppColors.optionBackgroundColor , the placeholder text is too faint.
* **Expected Behaviour:** Placeholders should use a higher contrast grey (e.g. Colors.grey.shade700) for better legibility.
---
### Proposed Solution
1. Update buildTrackingSection() to use high-contrast background and foreground pairs (e.g. (AppColors.focusedColor) background with (Colors.white ) when an option is selected.
2. Update the (hintStyle) across all text inputs in (UserInfoScreen) to use a darker, legible text color.
---
### Additional Context
I have identified the specific lines causing these contrast issues and tested the fix locally.
I would like to work on this issue. Could you please assign it to me?
### What Needs to Be Done
- [x] Refactor buildTrackingSection() in UserInfoScreen to use high-contrast text and icon colors (Colors.white) when a tracking mode option is selected.
- [x] Increase the text contrast for input placeholders (Name , Weight , Sustainability Thoughts) by replacing Colors.grey.shade400 with Colors.grey.shade700.
- [x] Verify UI readability on both light and dark themes and test form input states locally.
### Resources
- [Contribution Guide - Start Here!](https://github.com/AOSSIE-Org/TODO/blob/main/CONTRIBUTING.md)
- [Discord Channel](https://discord.gg/hjUhu33uAn)
### Getting Started
- [x] I have joined the [Discord server](https://discord.gg/hjUhu33uAn) and will post updates there
- [x] I have read the [Contribution Guide](https://github.com/AOSSIE-Org/Template-Repo/blob/main/CONTRIBUTING.md)
- [x] I understand this issue is assigned on a first-come, first-served basis
Hướng dẫn đóng góp
Đánh giá
Issue này chưa được đánh giá.