website: redesign part 31

This commit is contained in:
nym21
2026-06-18 22:39:28 +02:00
parent 408d83c350
commit 00f7d69ea6
37 changed files with 811 additions and 703 deletions
+3 -5
View File
@@ -46,7 +46,6 @@ function createReceiveQr(receiveAddress) {
const image = document.createElement("img");
const uri = `bitcoin:${receiveAddress.address}`;
image.className = "wallets__receive-qr";
image.alt = `QR code for ${receiveAddress.address}`;
image.src = createQrDataUrl(uri);
@@ -57,7 +56,7 @@ function createReceiveQr(receiveAddress) {
* @param {ReceiveAddress} receiveAddress
*/
function createReceiveAddress(receiveAddress) {
const element = createElement("div", "wallets__receive-address");
const element = document.createElement("div");
element.append(createGroupedAddress(receiveAddress.address));
@@ -82,8 +81,8 @@ function openReceiveDialog(receiveAddress) {
"dialog",
"wallets__dialog wallets__receive-dialog",
);
const content = createElement("div", "wallets__receive-card");
const actions = createElement("div", "wallets__receive-actions");
const content = document.createElement("div");
const actions = document.createElement("div");
const copy = document.createElement("button");
const close = document.createElement("button");
@@ -128,7 +127,6 @@ export function renderReceiveButton(element, receiveAddress) {
const button = document.createElement("button");
button.type = "button";
button.className = "wallets__receive-button";
button.disabled = !receiveAddress;
button.append("Receive");
button.addEventListener("click", () => {
+37 -38
View File
@@ -1,46 +1,45 @@
main.wallets {
.wallets__receive-button:disabled {
border-color: color-mix(in oklch, var(--gray) 35%, transparent);
color: var(--gray);
background: transparent;
cursor: default;
}
.wallets__receive-dialog {
width: min(100% - 2rem, 32rem);
}
.wallets__receive-card {
display: grid;
gap: 1rem;
> div {
display: grid;
gap: 1rem;
h2 {
margin: 0;
font-size: var(--font-size-lg);
font-weight: 400;
line-height: var(--line-height-lg);
h2 {
margin: 0;
font-size: var(--font-size-lg);
font-weight: 400;
line-height: var(--line-height-lg);
}
> img {
justify-self: center;
width: min(100%, 18rem);
aspect-ratio: 1;
padding: 1rem;
background: var(--white);
image-rendering: pixelated;
}
> div:first-of-type {
color: var(--white);
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
}
> div:last-of-type {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: end;
> button:first-child {
border-color: var(--orange);
color: var(--black);
background: var(--orange);
}
}
}
}
.wallets__receive-qr {
justify-self: center;
width: min(100%, 18rem);
aspect-ratio: 1;
padding: 1rem;
background: var(--white);
image-rendering: pixelated;
}
.wallets__receive-address {
color: var(--white);
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
}
.wallets__receive-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: end;
}
}