diff --git a/src/static_src/scss/_tooltips.scss b/src/static_src/scss/_tooltips.scss index c516a21..d7ef600 100644 --- a/src/static_src/scss/_tooltips.scss +++ b/src/static_src/scss/_tooltips.scss @@ -11,6 +11,11 @@ .tt-shoptalk { font-size: 0.75rem; opacity: 0.75; } .tt-expiry { font-size: 1rem; color: rgba(var(--priRd), 1); } .tt-date { font-size: 1rem; color: rgba(var(--priGn), 1); } + // `.tt-price` — wallet Shop tooltip. Same shape as .tt-expiry (size + + // semantics) but --priGn for the "in the green" payment cue. Lives + // inside the `.tt-title` h4 (which is `display: flex; justify-content: + // space-between`) so the price floats top-right opposite the name. + .tt-price { font-size: 1rem; color: rgba(var(--priGn), 1); } } .token-tooltip, diff --git a/src/templates/apps/wallet/_partials/_applet-wallet-shop.html b/src/templates/apps/wallet/_partials/_applet-wallet-shop.html index 164d1fd..c57948a 100644 --- a/src/templates/apps/wallet/_partials/_applet-wallet-shop.html +++ b/src/templates/apps/wallet/_partials/_applet-wallet-shop.html @@ -23,12 +23,17 @@ {# DRY-reuses the Tokens row's 4-slot tooltip pattern — same #} {# `.tt-title/.tt-description/.tt-shoptalk/.tt-expiry` SCSS #} {# classes so shop + token tooltips render as the same widget.#} -

{{ item.name }}

+ {# Price lives inside the h4 (which already has flex space- #} + {# between for `.token-count`-style chips) so it pins top- #} + {# right opposite the name — `.tt-price` styled --priGn. #} +

+ {{ item.name }} + {{ item.price_display }} +

{{ item.description }}

{% if item.shoptalk %}

{{ item.shoptalk }}

{% endif %} -

{{ item.price_display }}

{{ item.tooltip_expiry }}

{% comment %}