diff --git a/web/i18n/en/donate.json b/web/i18n/en/donate.json index ef4c6033..72464c3b 100644 --- a/web/i18n/en/donate.json +++ b/web/i18n/en/donate.json @@ -19,5 +19,7 @@ "card.custom.submit": "donate custom amount", - "share.title": "share cobalt with a friend" + "share.title": "share cobalt with a friend", + + "alternative.title": "alternative ways to donate" } diff --git a/web/src/components/donate/WalletItem.svelte b/web/src/components/donate/WalletItem.svelte new file mode 100644 index 00000000..1b93648d --- /dev/null +++ b/web/src/components/donate/WalletItem.svelte @@ -0,0 +1,92 @@ + + +
+ +
+ + diff --git a/web/src/routes/donate/+page.svelte b/web/src/routes/donate/+page.svelte index 73a34a98..b7efce7f 100644 --- a/web/src/routes/donate/+page.svelte +++ b/web/src/routes/donate/+page.svelte @@ -1,11 +1,15 @@ @@ -16,17 +20,27 @@
+
-
@@ -61,8 +75,29 @@ width: 100%; } - #donate-text { - padding: 0 24px; + #motivation, + #crypto { + padding: 0 12px; + } + + #crypto-section-header { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 14px; + } + + #crypto-section-header :global(svg) { + width: 22px; + height: 22px; + stroke-width: 1.8px; + } + + #wallet-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; + margin-bottom: 2em; } @media screen and (max-width: 760px) { @@ -70,7 +105,12 @@ flex-direction: column; } - #donate-text { + #wallet-grid { + grid-template-columns: 1fr; + } + + #motivation, + #crypto { padding: 0 6px; } }