web/DonationOptionsCard: move href inside the option button

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">

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">

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>