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.

Sign up for GitHub

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

Jump to bottom

enhance(curriculum): improve design #11064

Merged
merged 12 commits into from
Jul 8, 2024
Merged

enhance(curriculum): improve design #11064

merged 12 commits into from
Jul 8, 2024

Conversation

caugner
Copy link
Contributor

@caugner caugner commented May 3, 2024 •
edited
Loading

Summary

(MP-1106)

  1. On the landing page, use a gray border for the modules on hover.
Before After
image image
  1. Add a margin above the "Resources:" section.
Before After
image image
  1. Reduce the margin below lists.
Before After
image image
  1. Use a consistent padding inside the "Notes:" boxes.
Before After
image image
  1. Reuse the module label background color for the sidebar/TOC highlighting.
Before After
image image
image image
  1. Update the color of the "Notes:" boxes to match the hue of the sidebar/TOC highlighting (only dark theme).
Before After
image image
  1. Add consistent margin between lists and paragraphs in "Notes:" boxes.
Before After
image image
  1. Reduce the left padding of lists in "Notes:" boxes.
Before After
image image

Screenshots

(See above.)

How did you test this change?

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

@caugner caugner force-pushed the curriculum-design-nits branch from 47d338e to 1de0420 Compare May 3, 2024 13:21
@caugner caugner added ux make the user experience awesome curriculum labels May 3, 2024
@github-actions github-actions bot added the idle label Jun 2, 2024
@caugner caugner marked this pull request as ready for review June 14, 2024 22:09
@caugner caugner requested a review from a team as a code owner June 14, 2024 22:09
@caugner caugner requested a review from AnujaRajput727 June 14, 2024 22:10
@github-actions github-actions bot removed the idle label Jun 14, 2024
fiji-flo
fiji-flo approved these changes Jul 8, 2024
View reviewed changes
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.

Looks good

@fiji-flo fiji-flo merged commit 702afab into main Jul 8, 2024
15 checks passed
@fiji-flo fiji-flo deleted the curriculum-design-nits branch July 8, 2024 12:05
@github-actions github-actions bot mentioned this pull request Jul 8, 2024
Merged
ferdnyc pushed a commit to ferdnyc/yari that referenced this pull request Jul 13, 2024
@caugner @ferdnyc
enhance(curriculum): improve design (mdn#11064)
2a813ef 
* enhance(curriculum): add margin above "Resources:"

* enhance(curriculum): use grey border on module hover

* enhance(curriculum): update notes background-color in dark theme

* enhance(curriculum): use same padding around notes

* enhance(curriculum): adjust ul/ol/p spacing in notes

* enhance(curricullum): reduce margin below list

* chore(curriculum): update background color

* chore(curriculum): use bg color from label bg

* chore(curriculum): sync notes hue with bg-color

* fixup! chore(curriculum): use bg color from label bg

* fix(curriculum): revert --curiculum-bg-color in light theme
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@fiji-flo fiji-flo fiji-flo approved these changes

@AnujaRajput727 AnujaRajput727 Awaiting requested review from AnujaRajput727

Assignees
No one assigned
Labels
curriculum ux make the user experience awesome
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@caugner @fiji-flo