Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(curriculum): increase module list tab contrast #11062

Merged
merged 5 commits into from
May 24, 2024

Conversation

caugner
Copy link
Contributor

@caugner caugner commented May 3, 2024

Summary

(MP-1104)

Problem

On the Curriculum landing page, the module list tabs don't have sufficient contrast.

Solution

Increase the contrast.


Screenshots

Before After
Light image image
Dark image image

How did you test this change?

Ran yarn dev and viewed http://localhost:3000/en-US/curriculum/ locally.

Light theme: 4.51
Dark theme: 4.57
@caugner caugner added ux make the user experience awesome contrast issues related to low contrast, especially in dark mode curriculum labels May 3, 2024
@caugner caugner requested a review from a team as a code owner May 3, 2024 12:07
Copy link
Contributor

@fiji-flo fiji-flo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@caugner can you please clarify why this contains both: moving to --text-secondary + opacity and modifying the -text-inactive color?

@caugner
Copy link
Contributor Author

caugner commented May 15, 2024

@caugner can you please clarify why this contains both: moving to --text-secondary + opacity and modifying the -text-inactive color?

Good catch, the text-inactive color modification shouldn't be in this PR.

As for the move to opacity, this is in alignment with the separate change of the top navigation highlighting, which has two advantages:

  1. The reduction in contrast is in relation to the background-color, so it shouldn't reduce contrast more on brighter/darker backgrounds.
  2. The reduction in contrast also affects other elements like the New/Beta badges in the top nav (doesn't apply here).

@caugner
Copy link
Contributor Author

caugner commented May 20, 2024

Good catch, the text-inactive color modification shouldn't be in this PR.

@fiji-flo This is now fixed. ✅

@caugner caugner requested a review from fiji-flo May 20, 2024 14:51
@caugner caugner merged commit 4084fff into main May 24, 2024
15 checks passed
@caugner caugner deleted the increase-curriculum-module-list-tab-contrast branch May 24, 2024 18:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
contrast issues related to low contrast, especially in dark mode curriculum ux make the user experience awesome
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants