refactor: redesign the options UI#19
Merged
Merged
Conversation
Add a top brand row showing the extension icon, name, and a green "It's open sourced!" link wrapping the GitHub icon. Rename the form heading from "Better GitHub Settings" to "Settings" and tighten the top spacing so the popup feels less hollow. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Chrome's popup chrome already shows "Better GitHub" at the top, so fold the Settings heading into the brand row alongside the icon instead of stacking another row below. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Split the token hint into two paths joined by "Or": classic with the repo scope, and fine-grained with Contents/Pull requests/Metadata permissions. Each has its own deep link to the correct GitHub page. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Drop the brand-row bottom border so Settings sits flush with the form - Move Save button right below the input, push hints below the button - Replace inline code permission tags with a bullet list under each token type for a calmer scan Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Wrap the Save button and status text in a flex row so the success or failure message appears beside the button instead of pushing the rest of the page down. Also wire up an error branch using chrome.runtime.lastError so save failures are surfaced in red. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Switch body to box-sizing: border-box so width/height describe the popup's outer dimensions instead of being inflated by padding (popup no longer grows to 544px). Drop body padding-bottom and put the breathing room on .footer's margin-bottom — Chrome reliably renders last-child margin in a scroll container, unlike the parent's padding-bottom which can be eaten when the content overflows. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Drop box-sizing: border-box on body — that was shrinking the popup from 392px to 360px wide and causing the left-shifted layout. Move the bottom breathing room from .footer's margin-bottom to a body::after pseudo so it renders reliably as the last scrollable element when content overflows. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replace the bullet-list hint block with two option cards (classic / fine-grained) separated by a hairline OR divider. Each card has a clickable header link and a label-value grid for required scopes / permissions, with hover states that lift the border to GitHub blue. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
rrbe
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Test plan