website: redesign part 31

website_next/wallets/layout/index.js

@@ -18,14 +18,14 @@ import { createElement } from "../dom.js";
  */
 export function createLayout() {
   const main = createElement("main", "wallets");
-  const header = createElement("header", "wallets__header");
-  const actions = createElement("div", "wallets__actions");
+  const header = document.createElement("header");
+  const actions = document.createElement("div");
   const addButton = document.createElement("button");
   const privacyButton = document.createElement("button");
   const lockButton = document.createElement("button");
   const selector = createElement("section", "wallets__selector");
-  const walletList = createElement("div", "wallets__wallet-list");
-  const content = createElement("section", "wallets__content");
+  const walletList = document.createElement("div");
+  const content = document.createElement("section");
   const addDialog = createElement("dialog", "wallets__dialog");
 
   addButton.type = "button";

website_next/wallets/layout/style.css

@@ -1,32 +1,34 @@
 main.wallets {
-  .wallets__header {
+  > header {
     display: flex;
     gap: 1rem;
     align-items: center;
     justify-content: end;
+
+    @media (max-width: 34rem) {
+      justify-content: start;
+    }
+
+    > div {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      justify-content: end;
+
+      @media (max-width: 34rem) {
+        justify-content: start;
+      }
+
+      > button {
+        border-color: var(--orange);
+        color: var(--black);
+        background: var(--orange);
+      }
+    }
   }
 
-  .wallets__actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    justify-content: end;
-  }
-
-  .wallets__content {
+  > section[aria-live] {
     display: grid;
     gap: 1.5rem;
   }
 }
-
-@media (max-width: 34rem) {
-  main.wallets {
-    .wallets__header {
-      justify-content: start;
-    }
-
-    .wallets__actions {
-      justify-content: start;
-    }
-  }
-}