AOSSIE-Org / AOSSIE-Org/CarbonTracker

[GOOD FIRST ISSUE]: FIX(UI): improve color contrast for tracking modes and input placeholders in UserInfo.dart section

Đang mở
#18 1 bình luận 0 reaction 1 người được giao Được @badal-chaudhary nhận Xem trên GitHub
enhancement good first issue
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

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.