Day Pips Trial Countdown Navbar Block for React

Edit DAYS_LEFT at the top (and TRIAL_DAYS if your trial isn't fourteen days). The pips, the label and the popover's "used" line all derive from them. Set DAYS_LEFT to 3 or less to see the urgent state: the hourglass takes the warning tone (text-warning, on the icon only, never the text) and the label reads "Last 3 days" (or "Last day"). In your app pass the number from your server, computed from the trial's end date, so the bar and the server agree.

A ticking sentence needs a clock, and a clock makes the server and the browser disagree on the first render. Day pips only change once a day, so a number from the server is enough. For a ticking sentence see the countdown banners.

Enter or Space opens the popover and moves focus into it; Escape or a click outside closes it and puts focus back on the trigger. It isn't modal, so the rest of the bar stays reachable.

The trigger's name is its text ("11 days to go"); the pips are decoration.

The Shine Button is the one primary element in the bar, so the meter uses foreground tones: the used days at full strength, the days to go at 15%. The only status colour is the warning token on the hourglass when it's urgent, so colour is never the only signal: the label changes too.

Below lg the links fold into a menu button that opens a sheet from the top, its header lined up with the bar (the wordmark where it was, the close button where the menu button was), with an Upgrade button in its foot. The trial stays in the bar: below sm the pips go and the hourglass and label stay, and below 368 pixels the label becomes available to screen readers only (the hourglass alone). The bar's Upgrade button appears from sm.

Edit PAGES; the bar and the sheet read it. Every link points at #. Upgrade render the link they're given with render, with nativeButton={false}.