In T368422, an initial version was implemented to support basic topic selection in order to customize translation suggestions. Topics are represented by filter tags, and the selected one is shown in an active state. This active state needs some visual adjustments:
- Background color. Currently, active filter tags use #36c, the Codex color background-color-progressive--active (#233566) should be used instead since it aligns with the active state used for toggle buttons.
- Border color. Currently, a gray border is used. The Codex color background-color-progressive--active (#233566) should be used instead. As pressed buttons, background and borders using the same color help to create a single pressed surface.
Color references are based on Codex colors. This change applies to filter chips used on both the "Filter status" and the "Adjust suggestions view". Current and proposed examples illustrated below:
Filter status
| Current | Proposed |
|---|---|
 |  |
Adjust suggestions view
| Current | Proposed |
|---|---|
 |  |
Derived Requirements
Requirement 1: Update Active Filter Tag Background Color
- Update the background color of active filter tags to use the Codex color background-color-progressive--active (#233566) instead of #36c.
Requirement 2: Update Active Filter Tag Border Color
- Use the Codex color background-color-progressive--active (#233566) for the border of active filter tags, ensuring the border and background create a unified pressed surface.
Requirement 3: Apply Changes to Both "Filter Status" and "Adjust Suggestions View" Sections
- Implement the updated background and border color changes for active filter tags in both the "Filter status" and "Adjust suggestions view" sections.
Test Cases
Test Case 1: Ensure Changes Are Reflected in "Filter Status" and "Adjust Suggestions View"
- Precondition: Access both the "Filter status" and "Adjust suggestions view" sections on the interface.
- Select a filter tag in each section to activate it.
- Inspect the active filter tags in both sections.
- AC1: Confirm that both sections reflect the updated background and border colors for active filter tags for background and border #233566.
QA Results - Test Mobile ContentTranslation
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T380368#10368751 |
