ignore: cloud balance section

2 files changed, 52 insertions, 15 deletions

diff --git a/cloud/app/src/routes/workspace/[id].tsx b/cloud/app/src/routes/workspace/[id].tsx
index 8e6a0ee65..e3eac121b 100644
--- a/cloud/app/src/routes/workspace/[id].tsx
+++ b/cloud/app/src/routes/workspace/[id].tsx
@@ -130,7 +130,7 @@ const dummyPaymentData = [
   },
 ]
 
-export default function () {
+export default function() {
   const actor = createAsync(() => getActor())
   onMount(() => {
     console.log("MOUNTED", actor())
@@ -366,15 +366,26 @@ export default function () {
         <section data-slot="balance-section">
           <div data-slot="section-title">
             <h2>Balance</h2>
-            <p>Manage your billing and add credits to your account.</p>
+            <p>Add credits to your account.</p>
           </div>
           <div data-slot="balance">
-            <p>
-              {(() => {
-                const balanceStr = ((billingInfo()?.billing?.balance ?? 0) / 100000000).toFixed(2)
-                return `$${balanceStr === "-0.00" ? "0.00" : balanceStr}`
-              })()}
-            </p>
+            <div
+              data-slot="amount"
+              classList={{
+                danger: (() => {
+                  const balanceStr = ((billingInfo()?.billing?.balance ?? 0) / 100000000).toFixed(2)
+                  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}>
               {isLoading() ? "Loading..." : "Buy Credits"}
             </button>
diff --git a/cloud/app/src/routes/workspace/index.css b/cloud/app/src/routes/workspace/index.css
index 6746313e3..0d04ea25b 100644
--- a/cloud/app/src/routes/workspace/index.css
+++ b/cloud/app/src/routes/workspace/index.css
@@ -27,13 +27,15 @@
 
 /* Common elements */
 button {
-  padding: var(--space-2) var(--space-4);
+  padding: var(--space-3) var(--space-4);
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-sm);
   background-color: var(--color-bg);
   color: var(--color-text);
   font-size: var(--font-size-sm);
   font-family: var(--font-sans);
+  font-weight: 500;
+  text-transform: uppercase;
   cursor: pointer;
   transition: all 0.15s ease;
 
@@ -264,15 +266,39 @@ a {
     flex-direction: column;
     gap: var(--space-3);
     padding: var(--space-4);
-    background-color: var(--color-bg-surface);
     border: 1px solid var(--color-border);
     border-radius: var(--border-radius-sm);
-    max-width: 32rem;
+    min-width: 14.5rem;
+    width: fit-content;
 
-    p {
-      font-size: var(--font-size-2xl);
-      font-weight: 500;
-      color: var(--color-text);
+    [data-slot="amount"] {
+      padding: var(--space-3-5) var(--space-4);
+      background-color: var(--color-bg-surface);
+      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);
+      }
     }
   }
 }