ignore: cloud balance section

This commit is contained in:
Jay V
2025-08-29 19:20:12 -04:00
parent 058163333d
commit b40c02e258
2 changed files with 52 additions and 15 deletions

View File

@@ -130,7 +130,7 @@ const dummyPaymentData = [
}, },
] ]
export default function () { export default function() {
const actor = createAsync(() => getActor()) const actor = createAsync(() => getActor())
onMount(() => { onMount(() => {
console.log("MOUNTED", actor()) console.log("MOUNTED", actor())
@@ -366,15 +366,26 @@ export default function () {
<section data-slot="balance-section"> <section data-slot="balance-section">
<div data-slot="section-title"> <div data-slot="section-title">
<h2>Balance</h2> <h2>Balance</h2>
<p>Manage your billing and add credits to your account.</p> <p>Add credits to your account.</p>
</div> </div>
<div data-slot="balance"> <div data-slot="balance">
<p> <div
{(() => { data-slot="amount"
const balanceStr = ((billingInfo()?.billing?.balance ?? 0) / 100000000).toFixed(2) classList={{
return `$${balanceStr === "-0.00" ? "0.00" : balanceStr}` danger: (() => {
})()} const balanceStr = ((billingInfo()?.billing?.balance ?? 0) / 100000000).toFixed(2)
</p> return balanceStr === "0.00" || balanceStr === "-0.00"
})(),
}}
>
<span data-slot="currency">$</span>
<span data-slot="value">
{(() => {
const balanceStr = ((billingInfo()?.billing?.balance ?? 0) / 100000000).toFixed(2)
return balanceStr === "-0.00" ? "0.00" : balanceStr
})()}
</span>
</div>
<button color="primary" disabled={isLoading()} onClick={handleBuyCredits}> <button color="primary" disabled={isLoading()} onClick={handleBuyCredits}>
{isLoading() ? "Loading..." : "Buy Credits"} {isLoading() ? "Loading..." : "Buy Credits"}
</button> </button>

View File

@@ -27,13 +27,15 @@
/* Common elements */ /* Common elements */
button { button {
padding: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--border-radius-sm); border-radius: var(--border-radius-sm);
background-color: var(--color-bg); background-color: var(--color-bg);
color: var(--color-text); color: var(--color-text);
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
font-family: var(--font-sans); font-family: var(--font-sans);
font-weight: 500;
text-transform: uppercase;
cursor: pointer; cursor: pointer;
transition: all 0.15s ease; transition: all 0.15s ease;
@@ -264,15 +266,39 @@ a {
flex-direction: column; flex-direction: column;
gap: var(--space-3); gap: var(--space-3);
padding: var(--space-4); padding: var(--space-4);
background-color: var(--color-bg-surface);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--border-radius-sm); border-radius: var(--border-radius-sm);
max-width: 32rem; min-width: 14.5rem;
width: fit-content;
p { [data-slot="amount"] {
font-size: var(--font-size-2xl); padding: var(--space-3-5) var(--space-4);
font-weight: 500; background-color: var(--color-bg-surface);
color: var(--color-text); border-radius: var(--border-radius-sm);
display: flex;
align-items: baseline;
gap: var(--space-1);
justify-content: flex-end;
&.danger {
[data-slot="value"] {
color: var(--color-danger);
}
}
[data-slot="currency"] {
position: relative;
bottom: 2px;
font-size: var(--font-size-lg);
color: var(--color-text-muted);
font-weight: 400;
}
[data-slot="value"] {
font-size: var(--font-size-3xl);
font-weight: 500;
color: var(--color-text);
}
} }
} }
} }