From bf73f512e296b0750caeb9343cd45d5926ae3f6d Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Tue, 6 Aug 2024 14:48:06 +0600
Subject: [PATCH] web/donate: move donation options card to own component

- moved reused variables to parent
- added body text
---
 web/i18n/en/donate.json                       |   5 +-
 web/src/components/donate/DonateBanner.svelte |  20 +--
 .../donate/DonateOptionsCard.svelte           | 129 +++++++++++++++
 web/src/routes/donate/+page.svelte            | 151 ++++--------------
 4 files changed, 168 insertions(+), 137 deletions(-)
 create mode 100644 web/src/components/donate/DonateOptionsCard.svelte

diff --git a/web/i18n/en/donate.json b/web/i18n/en/donate.json
index 7cd62c35..a9d93e6d 100644
--- a/web/i18n/en/donate.json
+++ b/web/i18n/en/donate.json
@@ -1,4 +1,7 @@
 {
     "banner.title": "Support a safe\nand open Internet",
-    "banner.subtitle": "donate to imput or share the\njoy of cobalt with a friend"
+    "banner.subtitle": "donate to imput or share the\njoy of cobalt with a friend",
+
+    "body.motivation": "cobalt helps thousands of producers, educators, and other creative people to do what they love. we created cobalt because we believe that internet doesn’t have to be scary. greed and ads have ruined the internet — we are fighting back with friendly and open tools that aren’t made for profit.",
+    "body.keep_going": "you can help us stay motivated & keep creating safe alternatives to unfair and abusive web tools by sharing cobalt with a friend or by donating to us."
 }
diff --git a/web/src/components/donate/DonateBanner.svelte b/web/src/components/donate/DonateBanner.svelte
index 4e522a0c..afc48a27 100644
--- a/web/src/components/donate/DonateBanner.svelte
+++ b/web/src/components/donate/DonateBanner.svelte
@@ -33,24 +33,14 @@
 
 <style>
     #banner {
-        --banner-radius: 28px;
-        --border-opacity: 0.1;
-        --gradient-start: #1a1a1a;
-        --gradient-end: #404040;
         position: relative;
-        border-radius: var(--banner-radius);
+        border-radius: var(--donate-border-radius);
         background: linear-gradient(
             180deg,
-            var(--gradient-start) 30%,
-            var(--gradient-end) 100%
+            var(--donate-gradient-start) 30%,
+            var(--donate-gradient-end) 100%
         );
-        box-shadow: 0 0 0 2px rgba(255, 255, 255, var(--border-opacity)) inset;
-    }
-
-    :global([data-theme="dark"]) #banner {
-        --border-opacity: 0.05;
-        --gradient-start: #101010;
-        --gradient-end: #2d2d2d;
+        box-shadow: 0 0 0 2px rgba(255, 255, 255, var(--donate-border-opacity)) inset;
     }
 
     #banner-contents {
@@ -67,7 +57,7 @@
         height: 100%;
         z-index: 1;
         opacity: 8%;
-        border-radius: var(--banner-radius);
+        border-radius: var(--donate-border-radius);
         mask-image: linear-gradient(
             150deg,
             rgba(0, 0, 0, 0.7) 0%,
diff --git a/web/src/components/donate/DonateOptionsCard.svelte b/web/src/components/donate/DonateOptionsCard.svelte
new file mode 100644
index 00000000..0a5a7f28
--- /dev/null
+++ b/web/src/components/donate/DonateOptionsCard.svelte
@@ -0,0 +1,129 @@
+<script lang="ts">
+    import IconCalendarRepeat from "@tabler/icons-svelte/IconCalendarRepeat.svelte";
+    import IconCup from "@tabler/icons-svelte/IconCup.svelte";
+    import IconArrowRight from "@tabler/icons-svelte/IconArrowRight.svelte";
+
+    import { donate } from "$lib/env";
+
+    let customAmountOnceInput: HTMLInputElement;
+    let customAmountRecurringInput: HTMLInputElement;
+
+    const donateStripe = (amount: number) => {
+        const url = new URL(donate.stripe);
+        url.searchParams.set('__prefilled_amount', amount.toString());
+        window.open(url, '_blank');
+    }
+
+    const donateLibera = (amount: number) => {
+        const url = new URL(donate.liberapay);
+        url.searchParams.set('currency', 'USD');
+        url.searchParams.set('period', 'monthly');
+        url.searchParams.set('amount', (amount / 100).toString());
+        window.open(url, '_blank');
+    }
+
+    const toClipboard = (text: string) => navigator.clipboard.writeText(text);
+</script>
+
+<div class="donation-box">
+    <div class="donation-info">
+        <div class="donation-icon"><IconCalendarRepeat /></div>
+        <div class="donation-title">monthly donation</div>
+        <div class="donation-subtitle">processed by liberapay</div>
+    </div>
+    <div class="donation-scrollbox">
+        {#each { length: 4 } as _}
+            <!-- TODO: maybe move this also into a component -->
+            <button class="donation-option">
+                <div class="donation-amount"><IconCup /> $5</div>
+                <div class="donation-subtitle">cup of coffee</div>
+            </button>
+        {/each}
+    </div>
+    <div class="donation-custom">
+        <input type="number" placeholder="custom amount (from $2)" />
+        <button><IconArrowRight /></button>
+    </div>
+    <div class="donation-footer donation-subtitle">
+        you will be redirected to liberapay
+    </div>
+</div>
+
+<style>
+    .donation-box {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+
+        padding: var(--donate-border-radius);
+        border-radius: var(--donate-border-radius);
+        gap: calc(var(--donate-border-radius) / 2);
+
+        color: white;
+        background: linear-gradient(
+            180deg,
+            var(--donate-gradient-end) 0%,
+            var(--donate-gradient-start) 80%
+        );
+        box-shadow: 0 0 0 2px rgba(255, 255, 255, var(--donate-border-opacity)) inset;
+    }
+
+    .donation-icon :global(*) {
+        width: 28px;
+        height: 28px;
+    }
+
+    .donation-title {
+        font-size: 14.5px;
+    }
+
+    .donation-subtitle {
+        font-size: 12px;
+        color: #9a9a9a;
+    }
+
+    .donation-scrollbox {
+        display: flex;
+        overflow-x: scroll;
+        width: 384px;
+        gap: 5px;
+    }
+
+    .donation-option {
+        display: flex;
+        flex-direction: column;
+        background: #3b3b3b;
+        color: white;
+        align-items: start;
+        padding: 15px;
+        border-radius: var(--border-radius);
+        width: 128px;
+    }
+
+    .donation-amount {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+    }
+
+    .donation-custom {
+        display: flex;
+        gap: 4px;
+    }
+
+    .donation-custom * {
+        border-radius: var(--border-radius);
+        border: none;
+        background-color: #3b3b3b;
+        color: white;
+    }
+
+    .donation-custom input {
+        flex: 1;
+        padding-left: 12px;
+    }
+
+    .donation-footer {
+        text-align: center;
+    }
+</style>
diff --git a/web/src/routes/donate/+page.svelte b/web/src/routes/donate/+page.svelte
index e36ebef3..7862929e 100644
--- a/web/src/routes/donate/+page.svelte
+++ b/web/src/routes/donate/+page.svelte
@@ -1,31 +1,8 @@
 <script lang="ts">
     import "@fontsource/redaction-10/400.css";
-
     import { t } from "$lib/i18n/translations";
-    import { donate } from "$lib/env";
-    import DonateBanner from "$components/misc/DonateBanner.svelte";
-    import IconCalendarRepeat from "@tabler/icons-svelte/IconCalendarRepeat.svelte";
-    import IconCup from "@tabler/icons-svelte/IconCup.svelte";
-    import IconArrowRight from "@tabler/icons-svelte/IconArrowRight.svelte";
-
-    let customAmountOnceInput: HTMLInputElement;
-    let customAmountRecurringInput: HTMLInputElement;
-
-    const donateStripe = (amount: number) => {
-        const url = new URL(donate.stripe);
-        url.searchParams.set('__prefilled_amount', amount.toString());
-        window.open(url, '_blank');
-    }
-
-    const donateLibera = (amount: number) => {
-        const url = new URL(donate.liberapay);
-        url.searchParams.set('currency', 'USD');
-        url.searchParams.set('period', 'monthly');
-        url.searchParams.set('amount', (amount / 100).toString());
-        window.open(url, '_blank');
-    }
-
-    const toClipboard = (text: string) => navigator.clipboard.writeText(text);
+    import DonateBanner from "$components/donate/DonateBanner.svelte";
+    import DonateOptionsCard from "$components/donate/DonateOptionsCard.svelte";
 </script>
 
 <svelte:head>
@@ -36,120 +13,52 @@
 
 <main id="donate-page">
     <DonateBanner />
-    <section id="donation-options">
-        {#each {length: 2} as _}
-        <!-- TODO: move this whole thing into a component -->
-        <div class="donation-box">
-            <div class="donation-info">
-                <div class="donation-icon"><IconCalendarRepeat /></div>
-                <div class="donation-title">monthly donation</div>
-                <div class="donation-subtitle">processed by liberapay</div>
-            </div>
-            <div class="donation-scrollbox">
-                {#each {length: 4} as _}
-                <!-- TODO: maybe move this also into a component -->
-                <button class="donation-option">
-                    <div class="donation-amount"><IconCup /> $5</div>
-                    <div class="donation-subtitle">cup of coffee</div>
-                </button>
-                {/each}
-            </div>
-            <div class="donation-custom">
-                <input type="number" placeholder="custom amount (from $2)">
-                <button><IconArrowRight /></button>
-            </div>
-            <div class="donation-footer donation-subtitle">
-                you will be redirected to liberapay
-            </div>
-        </div>
-        {/each}
+    <section id="support-options">
+        <DonateOptionsCard />
+        <DonateOptionsCard />
+    </section>
+    <section id="donate-text" class="long-text-noto">
+        <p>
+            {$t("donate.body.motivation")}
+        </p>
+        <p>
+            {$t("donate.body.keep_going")}
+        </p>
     </section>
 </main>
 
 <style>
     #donate-page {
+        --donate-border-radius: 24px;
+        --donate-border-opacity: 0.1;
+        --donate-gradient-start: #1a1a1a;
+        --donate-gradient-end: #404040;
+
         max-width: 950px;
+        width: 900px;
         margin: 0 auto;
         overflow-x: hidden;
         padding: var(--padding);
-    }
 
-    #donation-options {
-        display: flex;
-        justify-content: space-evenly;
-        padding-top: 16px;
-    }
-
-    .donation-box {
         display: flex;
         flex-direction: column;
-        border-radius: calc(3 * var(--border-radius));
-        padding: 32px;
-
-        background: linear-gradient(
-            rgba(65,65,65,1) 5%,
-            rgba(26,26,26,1)
-        );
-        color: white;
-        gap: 8px;
+        gap: 15px;
     }
 
-    .donation-icon :global(*) {
-        width: 28px;
-        height: 28px;
+    :global([data-theme="dark"]) #donate-page {
+        --donate-border-opacity: 0.05;
+        --donate-gradient-start: #101010;
+        --donate-gradient-end: #2d2d2d;
     }
 
-    .donation-title {
-        font-size: 14.5px;
-    }
-
-    .donation-subtitle {
-        font-size: 12px;
-        color: #9a9a9a;
-    }
-
-    .donation-scrollbox {
+    #support-options {
         display: flex;
-        overflow-x: scroll;
-        width: 384px;
-        gap: 5px;
+        flex-direction: row;
+        gap: 15px;
+        width: 100%;
     }
 
-    .donation-option {
-        display: flex;
-        flex-direction: column;
-        background: #3b3b3b;
-        color: white;
-        align-items: start;
-        padding: 15px;
-        border-radius: var(--border-radius);
-        width: 128px;
-    }
-
-    .donation-amount {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-    }
-
-    .donation-custom {
-        display: flex;
-        gap: 4px;
-    }
-
-    .donation-custom * {
-        border-radius: var(--border-radius);
-        border: none;
-        background-color: #3b3b3b;
-        color: white;
-    }
-
-    .donation-custom input {
-        flex: 1;
-        padding-left: 12px;
-    }
-
-    .donation-footer {
-        text-align: center;
+    #donate-text {
+        padding: 0 24px;
     }
 </style>