From 70d301fbb9f3a0983dc08b25fb7864b0a6e1cc3a Mon Sep 17 00:00:00 2001 From: Ryan <7389646+ryanbarlow97@users.noreply.github.com> Date: Thu, 9 Jul 2026 20:37:46 +0100 Subject: [PATCH] custom amount ui prettier (#4556) ## Description: fixed font, sizing, back box wrapping, remove "buy for" centre the text by removing the ^ v arrows before: image after: image ## Please complete the following: - [x] I have added screenshots for all UI updates - [x] I process any text displayed to the user through translateText() and I've added it to the en.json file - [x] I have added relevant tests to the test directory ## Please put your Discord username so you can be contacted if a bug or regression is found: w.o.n --- resources/lang/en.json | 4 +- src/client/components/CustomCurrencyCard.ts | 85 +++++++++------------ src/client/components/PurchaseButton.ts | 12 ++- src/client/styles.css | 11 +++ 4 files changed, 60 insertions(+), 52 deletions(-) diff --git a/resources/lang/en.json b/resources/lang/en.json index 9a226b7e0..05c6f7888 100644 --- a/resources/lang/en.json +++ b/resources/lang/en.json @@ -1310,7 +1310,6 @@ }, "store": { "already_subscribed": "Already subscribed.", - "buy_for": "Buy for {price}", "change_tier_failed": "Couldn't update your subscription. Please try again.", "change_tier_success": "Switched to {tier}.", "checkout_failed": "Failed to create checkout session.", @@ -1319,7 +1318,7 @@ "confirm_purchase_title": "Confirm Purchase", "confirm_upgrade": "Upgrade to {tier}? You'll be charged the prorated difference now.", "currency_pack_purchase_success": "Currency pack purchase successful!", - "custom_amount": "Custom Amount", + "custom_amount": "Choose Amount", "custom_currency_purchase_success": "Plutonium purchase successful!", "effects": "Effects", "flags": "Flags", @@ -1332,6 +1331,7 @@ "no_subscriptions": "No subscriptions available. Check back later for new items.", "packs": "Packs", "patterns": "Skins", + "plutonium_amount": "Plutonium amount", "price_per_month": "/mo", "purchase_currency": "Purchase {currency}", "purchase_failed": "Purchase failed. Please try again.", diff --git a/src/client/components/CustomCurrencyCard.ts b/src/client/components/CustomCurrencyCard.ts index 10412dfab..7e6e533eb 100644 --- a/src/client/components/CustomCurrencyCard.ts +++ b/src/client/components/CustomCurrencyCard.ts @@ -2,7 +2,9 @@ import { html, LitElement } from "lit"; import { customElement, state } from "lit/decorators.js"; import { createCustomCurrencyCheckout } from "../Api"; import { translateText } from "../Utils"; +import "./CosmeticContainer"; import "./PlutoniumIcon"; +import "./PurchaseButton"; // Fixed rate: 20 plutonium = $1.00 (5 cents each). Bounds and rate are // enforced server-side; these are for UX only. @@ -13,7 +15,6 @@ const MAX_PLUTONIUM = 2000; export class CustomCurrencyCard extends LitElement { /** Always a clamped integer in [MIN_PLUTONIUM, MAX_PLUTONIUM]. */ @state() private amount = 100; - @state() private busy = false; createRenderRoot() { return this; @@ -36,73 +37,61 @@ export class CustomCurrencyCard extends LitElement { this.amount = this.clamp(Number((e.target as HTMLInputElement).value)); } - private async buy() { - if (this.busy) return; - this.busy = true; - try { - const url = await createCustomCurrencyCheckout(this.amount); - if (url === false) { - alert(translateText("store.checkout_failed")); - return; - } - window.location.href = url; - } finally { - this.busy = false; + private buy = async () => { + const url = await createCustomCurrencyCheckout(this.amount); + if (url === false) { + alert(translateText("store.checkout_failed")); + return; } - } + window.location.href = url; + }; render() { const price = `$${this.priceDollars}`; return html` -
- ${translateText("store.custom_amount")} -
- -
- ${this.amount.toLocaleString()}${translateText("store.plutonium_amount")} - ${translateText("cosmetics.hard")} - - - + ${translateText("cosmetics.hard")} +
- -
+ + `; } } diff --git a/src/client/components/PurchaseButton.ts b/src/client/components/PurchaseButton.ts index 19bea97c9..d04caca92 100644 --- a/src/client/components/PurchaseButton.ts +++ b/src/client/components/PurchaseButton.ts @@ -184,6 +184,10 @@ export class PurchaseButton extends LitElement { @property({ type: Object }) product: Product | null = null; + /** Price shown for a direct dollar checkout without a catalog product. */ + @property({ type: String }) + dollarPrice: string = ""; + @property({ type: Number }) priceHard: number | null = null; @@ -263,6 +267,9 @@ export class PurchaseButton extends LitElement { } private renderDollarButton() { + const price = this.dollarPrice || this.product?.price; + if (!price) return nothing; + return html` `; } @@ -310,7 +317,8 @@ export class PurchaseButton extends LitElement { } render() { - const hasDollar = this.product && this.onPurchaseDollar; + const hasDollar = + (this.product ?? this.dollarPrice) && this.onPurchaseDollar; const hasHard = this.priceHard !== null && this.onPurchaseHard; const hasSoft = this.priceSoft !== null && this.onPurchaseSoft; diff --git a/src/client/styles.css b/src/client/styles.css index 234d2aece..aa1351b60 100644 --- a/src/client/styles.css +++ b/src/client/styles.css @@ -58,6 +58,17 @@ color: var(--color-gray-400); } + .custom-plutonium-input { + appearance: textfield; + -moz-appearance: textfield; + } + + .custom-plutonium-input::-webkit-outer-spin-button, + .custom-plutonium-input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; + } + button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer;