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

Roles & Permissions tab: selector spacing, button size/color, unified card, header font

Open Beginner friendly
  • Is something wrong?
#239 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
typescript
Domain
design, frontend

Research direction

Start with src/authz-module/roles-permissions/RolesPermissions.tsx, src/authz-module/components/PermissionTable.tsx, and src/authz-module/index.scss to trace the selector, table card, and affected surface styles. Verify the desktop view and the existing max-width-xs scroll case; done means the selector and table form one white card, the selector is smaller, and table headers use a reduced font size.

Written by the indexing model from the issue text.

Description

enhancement

Part of #237.

Problem

The courses/libraries selector and permission table need spacing and
visual-unification adjustments.

Figma design TBD

Scope

  • Adjust spacing around the courses/libraries selector.
  • Reduce the courses/libraries selector button size (currently lg — evaluate md or sm).
  • Change the background from light-gray to white.
  • Wrap the table and selector together in a single Card for a unified look.
  • Reduce the permission table header font size.

Files

  • src/authz-module/roles-permissions/RolesPermissions.tsx — ButtonGroup size="lg",
    Container className="pb-5".
  • src/authz-module/components/PermissionTable.tsx — already wraps the table in a Card;
    headers are th ... py-3.
  • src/authz-module/index.scss — layout body is bg-light-200; adjust to white where required.

Notes

  • ButtonGroup size="lg" → md or sm per Figma.
  • Background: the layout body uses bg-light-200; move the affected surface to white.
  • Unified card: the selector sits in a Container and the table renders its own Card.
    Wrap both so they read as one surface.
  • Header font: reduce on the th cells in PermissionTable.

Acceptance criteria

  • Selector + table read as one unified card on white background.
  • Selector button is smaller; header font reduced.
  • Verified on desktop and the max-width-xs scroll case already handled in SCSS.
Dominant language
TypeScript
Stars
1
Forks
13
Avg merge
7h 23m
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/frontend-app-admin-console

All issues in openedx/frontend-app-admin-console

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.