Skip to content

Commit 8748be4

Browse files
ndemiancclaude
andcommitted
fix(ai): smaller top-anchored chevron (no clip) + primary Manage account (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>
1 parent 65357af commit 8748be4

1 file changed

Lines changed: 8 additions & 3 deletions

File tree

extensions/levelcode-ai/media/chat.html

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -878,8 +878,10 @@
878878
.acctcard.classic .ovclose:hover { color: var(--cc-text); background: color-mix(in srgb, var(--cc-text3) 18%, transparent); }
879879
/* Hero — the landing page's floating chevron over four drifting "portal" circles. Decorative (aria-hidden),
880880
full-bleed at the top of the modal; the motion respects prefers-reduced-motion (guard below). */
881-
.acctcard.classic .hero { position: relative; height: 150px; display: grid; place-items: center; overflow: hidden; }
882-
.acctcard.classic .hero .portalmark { width: 212px; height: auto; display: block; }
881+
.acctcard.classic .hero { position: relative; height: 146px; overflow: hidden; }
882+
/* Absolutely placed with a top gap so the chevron peak clears the modal's rounded top edge; the SVG is
883+
taller than the hero, so only the LOWER soft circles bleed off — the chevron itself is never clipped. */
884+
.acctcard.classic .hero .portalmark { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); width: 182px; height: auto; }
883885
.acctcard.classic .portal-layer { transform-origin: 50% 60%; animation: portalDrift 7s ease-in-out infinite; }
884886
.acctcard.classic .portal-layer:nth-child(2) { animation-delay: -1.4s; }
885887
.acctcard.classic .portal-layer:nth-child(3) { animation-delay: -2.8s; }
@@ -2816,14 +2818,17 @@
28162818
// privacy reassurance, which is genuinely useful there.
28172819
const note = gateway ? '' : '<div class="note">Your keys never leave your machine — requests go direct to your provider.</div>';
28182820
const docsLink = '<a class="docs" data-act="docs" role="link" tabindex="0">Documentation <span class="darrow" aria-hidden="true">↗</span></a>';
2821+
// Highlight Manage account as the primary CTA — EXCEPT on free tier, where the accent belongs to the
2822+
// Upgrade button (two accent buttons would compete), so Manage stays quiet there.
2823+
const manageClass = upgradeBtn ? 'abtn' : 'abtn primary';
28192824
acctBody.innerHTML =
28202825
'<div class="hero">' + LC_PORTAL_SVG + '</div>'
28212826
+ '<div class="acctmain">'
28222827
+ '<h2 id="lcTitle">' + esc(account.name || 'Signed in') + '</h2>'
28232828
+ emailLine
28242829
+ planPill
28252830
+ upgradeBtn
2826-
+ '<button class="abtn" data-act="manage">Manage account</button>'
2831+
+ '<button class="' + manageClass + '" data-act="manage">Manage account</button>'
28272832
+ '<button class="signout" data-act="signout">Sign out</button>'
28282833
+ '<div class="acctfoot">' + docsLink + '<div class="synced">Synced · settings · skills · keymaps</div></div>'
28292834
+ note

0 commit comments

Comments
 (0)