feat(share-pnl): polish meta row, PnL hero, timestamp#159
Merged
Conversation
Drop the colored pill + arrow icon in favor of a compact meta row: small asset icon, then "Long" or "Short" colored by direction (palette positive tone for Long, negative for Short), separator, ticker. Frees vertical space and makes the PnL percent the dominant element of the card — sized up from 72/58 to 96/80 to match. Per-cover PnL palette so the percent and the direction word stay readable on every cover. The orange cover (#3) was the failure case under the prior shared brand red — the wine/forest tones it gets now have real contrast. Replace the manual "Timestamp: YYYY-MM-DD HH:MM" with localized formatting via Intl.DateTimeFormat using the active i18n locale and a 24-hour clock. Drops the "Timestamp:" label entirely; renders as e.g. "May 8, 2026 · 16:52". Force the Garet font into the document's font set up front via document.fonts.load(), called once and memoized. ctx.font assignment does not wait for @font-face loading, which was producing a fallback serif on the first paint after dialog open until the cover was switched. The memoized promise catches load rejections so a 404 or CSP block degrades to the system fallback rather than blanking every subsequent render. Remove now-orphaned i18n keys message.buy-position and message.timestamp from en.json — their only consumers were the deleted pill text and the old timestamp formatter.
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
Follow-up polish on the Share PnL dialog after #158. The colored pill + arrow + separate asset row are replaced with a compact meta row, the PnL percent grows into the dominant element, and the timestamp is localized.
Changes
LongorShortcolored by direction (positive palette tone for Long, negative for Short), separator, ticker. Direction coloring is independent of PnL sign.pnlPositiveandpnlNegative. Cover 3 (orange) gets deeper wine and forest tones — the brand red on bright orange had poor contrast and that was already the failure case before the hero was scaled up. Hero font sizes 72/58 → 96/80.Intl.DateTimeFormat(i18n.locale.value, ...)withmonth: "long"for the date andhour12: falsefor the time. Drops theTimestamp:prefix. Renders as e.g.May 8, 2026 · 16:52and follows the active locale.ctx.font = ...does not wait for@font-faceloading, so the first paint after dialog open silently fell back to the system font. NewensureFonts()awaitsdocument.fonts.load()for every Garet weight/size combo we paint, called once and memoized; the catch on the memoized promise means a load failure degrades to the system fallback rather than blanking every subsequent render.message.buy-positionandmessage.timestampremoved fromen.json— their only consumers were the deleted pill text and the prior timestamp formatter.Verification
npm run lintcleannpm run format:checkcleannpm run buildcleannpm test760/760 passingFollow-ups
/opt/deploy/builds/{app,app-dev}/config/locales/en.jsonto drop the two now-orphaned keys, then restartwebapp-prodandwebapp-devso the in-memory cache reflects the change.