website: redesign part 31

website_next/wallets/wallet/summary/index.js

@@ -1,5 +1,5 @@
-import { createElement } from "../../dom.js";
-import { formatBtc, formatUsd } from "../../format.js";
+import { createBtcAmount } from "../../amount/index.js";
+import { formatUsd } from "../../format.js";
 import { redaction } from "../../redaction/index.js";
 
 /**
@@ -11,8 +11,8 @@ import { redaction } from "../../redaction/index.js";
  * @param {number} btcUsdPrice
  */
 function createBalanceSummary(balance, btcUsdPrice) {
-  const element = createElement("p", "wallets__balance");
-  const btc = redaction.createValue("strong", formatBtc(balance), "fixed");
+  const element = document.createElement("p");
+  const btc = createBtcAmount("strong", balance);
   const usd = redaction.createValue(
     "span",
     formatUsd((balance / 100_000_000) * btcUsdPrice),

website_next/wallets/wallet/summary/style.css

@@ -1,35 +1,26 @@
 main.wallets {
   .wallets__summary {
     min-height: 5rem;
-  }
 
-  .wallets__balance {
-    display: grid;
-    gap: 0.5rem;
-    margin: 0;
+    > p {
+      display: grid;
+      gap: 0.5rem;
+      margin: 0;
 
-    strong {
-      min-width: 0;
-      overflow-wrap: anywhere;
-      color: var(--white);
-      font-size: 3rem;
-      font-weight: 620;
-      line-height: 1;
-    }
-
-    span {
-      color: var(--gray);
-      font-size: var(--font-size-lg);
-      line-height: var(--line-height-lg);
-    }
-  }
-}
-
-@media (max-width: 34rem) {
-  main.wallets {
-    .wallets__balance {
       strong {
-        font-size: 2.25rem;
+        min-width: 0;
+        overflow-wrap: anywhere;
+        color: var(--white);
+        font-family: var(--font-serif);
+        font-size: 4rem;
+        font-weight: 400;
+        line-height: 1;
+      }
+
+      > span {
+        color: var(--gray);
+        font-size: var(--font-size-lg);
+        line-height: var(--line-height-lg);
       }
     }
   }