fix(ai): account modal — un-clip the chevron, highlight Manage account#52
Merged
Conversation
…unt (PR #51 feedback) - Hero: shrink the mark 212->182px and absolutely position it 12px from the top so the chevron peak clears the modal's rounded edge; only the lower soft circles bleed now, never the chevron. - Manage account is the accent-filled primary CTA on paid plans (stays quiet on free tier, where the Upgrade button owns the accent). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Adjusts the signed-in “classic” account modal in levelcode-ai based on live feedback, improving the hero’s chevron rendering and clarifying the primary call-to-action depending on plan state.
Changes:
- Unclips the chevron by resizing and absolutely positioning the portal SVG inside the hero.
- Makes “Manage account” the accent-filled CTA on paid plans while keeping “Upgrade” primary on free-tier gateway plans.
Comments suppressed due to low confidence (2)
extensions/levelcode-ai/media/chat.html:2823
- openAccount() currently focuses
[data-act="manage"]before other actions. With Manage account no longer the primary CTA on free tier (when Upgrade is present), initial focus will still land on Manage rather than the highlighted/primary action, which is inconsistent with the intent and the nearby comment “Focus the primary action”.
const manageClass = upgradeBtn ? 'abtn' : 'abtn primary';
extensions/levelcode-ai/media/chat.html:2823
- The new CTA-priority logic (Upgrade vs Manage account) isn’t covered by existing unit tests. Given the repo’s pattern of compiling/extracting chat.html logic in Node tests, add a small test that renderAccount() produces the expected button classes for (1) gateway+free (Upgrade primary, Manage quiet) and (2) paid/BYOK (Manage primary, no Upgrade).
const manageClass = upgradeBtn ? 'abtn' : 'abtn primary';
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+2821
to
+2823
| // Highlight Manage account as the primary CTA — EXCEPT on free tier, where the accent belongs to the | ||
| // Upgrade button (two accent buttons would compete), so Manage stays quiet there. | ||
| const manageClass = upgradeBtn ? 'abtn' : 'abtn primary'; |
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
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.
Two small follow-ups on the merged chevron-hero modal (#51), from live feedback.
212 → 182pxand absolutely positioned it12pxfrom the top of the hero, so the chevron's peak clears the modal's rounded top edge. The SVG is still taller than the hero, so only the lower soft circles bleed off — the chevron itself is never cut.manageClass = upgradeBtn ? 'abtn' : 'abtn primary').Motion/a11y unchanged (hero still
aria-hidden,prefers-reduced-motionrespected, HC defers to editor tokens).Preview (updated): https://claude.ai/code/artifact/0c955831-6ce9-444f-95b2-c211b8706e88
Verified:
chat.htmlscripts parse;webviewCss/creditFormat+ full gate green. One file, +8/-3.🤖 Generated with Claude Code