From 643e9775f56aa9ebe0210a0462da3e88d01b43d8 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Sep 2024 20:57:52 +0600
Subject: [PATCH] web/DonationOptionsCard: move href inside the option button

---
 web/src/components/donate/DonateBanner.svelte  |  2 --
 .../components/donate/DonateOptionsCard.svelte | 12 +++++++-----
 .../components/donate/DonationOption.svelte    | 18 ++++++++++++------
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/web/src/components/donate/DonateBanner.svelte b/web/src/components/donate/DonateBanner.svelte
index b9b4a956..91d24203 100644
--- a/web/src/components/donate/DonateBanner.svelte
+++ b/web/src/components/donate/DonateBanner.svelte
@@ -5,8 +5,6 @@
 
     import Imput from "$components/icons/Imput.svelte";
     import Meowbalt from "$components/misc/Meowbalt.svelte";
-
-    import IconHeart from "@tabler/icons-svelte/IconHeart.svelte";
 </script>
 
 <header id="banner">
diff --git a/web/src/components/donate/DonateOptionsCard.svelte b/web/src/components/donate/DonateOptionsCard.svelte
index 66bfe021..4a162519 100644
--- a/web/src/components/donate/DonateOptionsCard.svelte
+++ b/web/src/components/donate/DonateOptionsCard.svelte
@@ -107,11 +107,13 @@
     </div>
     <div id="donation-options">
         {#each Object.entries(PRESET_DONATION_AMOUNTS) as [ amount, component ]}
-            <OuterLink href={donationMethods[processor](+amount * 100)}>
-                <DonationOption price={+amount} desc={$t(`donate.card.option.${amount}`)}>
-                    <svelte:component this={component} />
-                </DonationOption>
-            </OuterLink>
+            <DonationOption
+                price={+amount}
+                desc={$t(`donate.card.option.${amount}`)}
+                href={donationMethods[processor](+amount * 100)}
+            >
+                <svelte:component this={component} />
+            </DonationOption>
         {/each}
     </div>
     <div id="donation-custom">
diff --git a/web/src/components/donate/DonationOption.svelte b/web/src/components/donate/DonationOption.svelte
index 91bcee7b..7e5ca917 100644
--- a/web/src/components/donate/DonationOption.svelte
+++ b/web/src/components/donate/DonationOption.svelte
@@ -1,18 +1,24 @@
 <script lang="ts">
     export let price: number;
     export let desc: string;
+    export let href: string;
 
-    const USD = new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: 'USD',
-        minimumFractionDigits: 0
+    const USD = new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+        minimumFractionDigits: 0,
     });
 </script>
 
-<button class="donation-option">
+<button
+    class="donation-option"
+    on:click={() => {
+        window.open(href, "_blank");
+    }}
+>
     <div class="donate-card-title">
         <slot></slot>
-        { USD.format(price) }
+        {USD.format(price)}
     </div>
     <div class="donate-card-subtitle">{desc}</div>
 </button>