Skip to content

Configuration modal UI#84

Open
javiert-okta wants to merge 5 commits intovalidate-token-logicfrom
configuration-modal-ui
Open

Configuration modal UI#84
javiert-okta wants to merge 5 commits intovalidate-token-logicfrom
configuration-modal-ui

Conversation

@javiert-okta
Copy link
Contributor

@javiert-okta javiert-okta commented Feb 5, 2026

By submitting a PR to this repository, you agree to the terms within the Auth0 Code of Conduct. Please see the contributing guidelines for how to create and submit a high-quality PR for this repo.

Description

The following PR adds the configuration modal component, which shows the form to update the settings for the debugger. The changes include:

  • Add alert icon
  • Add prop to show or hide icon in button
  • Add configuration modal component and render when clicking config icon

Screenshots

  • Dark theme

Desktop

image

Mobile

image
  • Light Theme

Desktop

image

Mobile

image

References

Link to Figma design

Testing

  • Verify that the configuration modal matches the design on the figma file (dark/light mode, desktop, tablet and mobile)
  • Verify the form is accessible and has the correct tags

Checklist

  • I have added documentation for new/changed functionality in this PR or in auth0.com/docs
  • All active GitHub checks for tests, formatting, and security are passing
  • The correct base branch is being used, if not the default branch

@github-actions
Copy link

github-actions bot commented Feb 5, 2026

<p>
Note. We store stuff like your keys in LocalStorage so that when
you redirect to authenticate, you don’t lose them. You can clear
them by clicking here: <strong>Clear Localstorage</strong>
Copy link
Contributor

Choose a reason for hiding this comment

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

This doesn't seem to be clickable (to clear localstorage)

width: 100%;
border-bottom: 1px solid var(--background-Stroke-dark-2, rgba(220, 221, 225, 0.16));
& .title {
font-family: Aeonik;
Copy link
Contributor

Choose a reason for hiding this comment

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

--font-mono

gap: 8px;
align-self: stretch;
label {
font-family: Aeonik;
Copy link
Contributor

Choose a reason for hiding this comment

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

--font-mono

min-width: 18px;
}
p {
font-family: Aeonik;
Copy link
Contributor

Choose a reason for hiding this comment

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

--font-mono

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants