website: redesign part 33

website_next/wallets/empty/index.js

@@ -3,22 +3,36 @@ import { createElement } from "../dom.js";
 /**
  * @typedef {Object} EmptyOptions
  * @property {() => void} onAdd
+ * @property {() => void} [onClear]
  */
 
 /**
  * @param {EmptyOptions} options
  */
 export function createEmpty(options) {
-  const empty = createElement("section", "wallets__empty");
+  const empty = createElement("section", "empty");
+  const title = document.createElement("h1");
   const text = document.createElement("p");
+  const actions = document.createElement("menu");
   const button = document.createElement("button");
 
-  text.append("No wallet imported yet");
+  title.append("No wallet yet");
+  text.append("Import an xpub or watch-only descriptor to start watching activity.");
   button.type = "button";
-  button.classList.add("primary");
   button.append("Add wallet");
   button.addEventListener("click", options.onAdd);
-  empty.append(text, button);
+  actions.append(button);
+
+  if (options.onClear) {
+    const clear = document.createElement("button");
+
+    clear.type = "button";
+    clear.append("Clear");
+    clear.addEventListener("click", options.onClear);
+    actions.append(clear);
+  }
+
+  empty.append(title, text, actions);
 
   return empty;
 }

website_next/wallets/empty/style.css

@@ -1,13 +1,34 @@
 main.wallets {
-  .wallets__empty {
+  .empty {
     display: grid;
     gap: 1rem;
     place-content: center;
     min-height: calc(100dvh - 2 * var(--offset));
     text-align: center;
 
-    p {
+    h1 {
       margin: 0;
+      font-size: 4rem;
+      font-weight: 400;
+      line-height: 1;
+    }
+
+    p {
+      max-width: 31rem;
+      margin: 0;
+      color: var(--gray);
+      font-size: var(--font-size-base);
+      line-height: var(--line-height-base);
+    }
+
+    > menu {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.75rem;
+      justify-content: center;
+      margin: 0;
+      padding: 0;
+      list-style: none;
     }
   }
 }