Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[Bug] Course search panel on the Competency Management page doesn't match the Paragon components and tokens in the design

Open
  • Is something wrong?
#836 0 comments 0 reactions 1 assignee View on GitHub

Maintainers usually reply within 1 day

@AShatsila is already working on this.

Since Sep 26, 2026.

Assessment

This issue has not been assessed yet.

Description

Environment: Master Sandbox, https://apps.master.openedx.io/authoring/taxonomy/45/competencies

Design: Figma, "Apply Competencies" frame

The design builds the course search panel from Paragon components with specific properties and spacing tokens. In the points below, the implementation uses the same Paragon components but with different properties, or hard-coded values in place of the tokens. The values from the design were read from the Figma properties panel.

  1. The "Start Date" button uses different Button properties than the design.
    • Design: Paragon Button, color Tertiary, size Small, the date_range icon before the label. The button keeps the same style when a date range is selected.
    • Implementation: variant="outline-primary", which switches to a filled variant="primary" once dates are selected. The button has the default size and the calendar icon after the label (iconAfter={Calendar}).
    • Expected: variant="tertiary", size="sm", iconBefore={Calendar}, with the same variant whether or not dates are selected.
Image
  1. The pagination below the course list uses the default size.
    • Design: Paragon Pagination, size Small, with a 1px gray/100 border above it.
    • Expected: size="small" and a top border using --pgn-color-gray-100.
Image
  1. The gap between the search field and the "Start Date" button is 16px.
    • Design: the gap is 8px.
    • Expected: gap={2} on the toolbar Stack instead of gap={3}.
Image

  1. Several styles in src/taxonomy/competency-management/course-search/CourseSearchBrowse.scss are hard-coded, although Paragon has tokens with exactly the same values. Replacing them doesn't change how the page looks, but keeps the page in sync if the theme changes.

    Where Current value Paragon token
    $block-shadow (line 23), used by the course and section cards (&__group, line 160) and the subsection card (&__subsection, line 204) 0 0 4px rgb(0 0 0 / .15), 0 0 2px rgb(0 0 0 / .15) var(--pgn-elevation-box-shadow-centered-1) (the design uses the "Elevation Level 1 (Centered)" style)
    &__toolbar .pgn__searchfield: border-radius (line 59) and --pgn-size-search-field-border-radius (line 62) 6px var(--pgn-size-border-radius-base)
    &__section-label (line 101) and &__associations-label (line 115) padding: 4px 8px var(--pgn-spacing-spacer-1) var(--pgn-spacing-spacer-2)
    &__toolbar (line 52) padding: 24px 0 var(--pgn-spacing-spacer-4) 0
    $container-padding-x (line 11), used by &__container (line 89) and &__associations (line 129) 16px var(--pgn-spacing-spacer-3)
Dominant language
Python
Stars
10
Forks
33
Avg merge
2d 5h
Merged PRs (30d)
10

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from openedx/openedx-core

All issues in openedx/openedx-core

Similar issues

More Python issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.