From 21ef35ea20bb2a892fe06b45f39bf801f18e2985 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Fri, 9 Aug 2024 14:35:55 +0600
Subject: [PATCH] web/donate: add a share card with qr and buttons

also:
- fixed more scaling quirks
- fixed thick icons
- fixed icon padding
---
 web/i18n/en/donate.json                       |   4 +-
 .../donate/DonateCardContainer.svelte         |   3 +-
 .../donate/DonateOptionsCard.svelte           |  29 +++-
 .../components/donate/DonateShareCard.svelte  | 164 ++++++++++++++++++
 .../components/donate/DonationOption.svelte   |   1 +
 web/src/lib/env.ts                            |   7 +-
 web/src/lib/icons/CobaltQR.svelte             |   4 +
 web/src/routes/donate/+page.svelte            |   8 +-
 8 files changed, 209 insertions(+), 11 deletions(-)
 create mode 100644 web/src/components/donate/DonateShareCard.svelte
 create mode 100644 web/src/lib/icons/CobaltQR.svelte

diff --git a/web/i18n/en/donate.json b/web/i18n/en/donate.json
index 09e27130..ef4c6033 100644
--- a/web/i18n/en/donate.json
+++ b/web/i18n/en/donate.json
@@ -17,5 +17,7 @@
     "card.option.15": "full lunch",
     "card.option.30": "lunch for two",
 
-    "card.custom.submit": "donate custom amount"
+    "card.custom.submit": "donate custom amount",
+
+    "share.title": "share cobalt with a friend"
 }
diff --git a/web/src/components/donate/DonateCardContainer.svelte b/web/src/components/donate/DonateCardContainer.svelte
index e69a0da6..1042e6f8 100644
--- a/web/src/components/donate/DonateCardContainer.svelte
+++ b/web/src/components/donate/DonateCardContainer.svelte
@@ -75,9 +75,10 @@
         align-items: center;
         font-size: 16px;
         gap: 4px;
+        font-weight: 500;
     }
 
-    @media screen and (max-width: 550px) {
+    @media screen and (max-width: 865px) {
         :global(.donate-card) {
             --donate-card-main-padding: 18px;
         }
diff --git a/web/src/components/donate/DonateOptionsCard.svelte b/web/src/components/donate/DonateOptionsCard.svelte
index 3b3609c7..1b2e5fda 100644
--- a/web/src/components/donate/DonateOptionsCard.svelte
+++ b/web/src/components/donate/DonateOptionsCard.svelte
@@ -62,9 +62,11 @@
             role="tab"
         >
             <div class="donation-type-icon"><IconCoin /></div>
-            <div class="donate-card-title">{$t("donate.card.once")}</div>
-            <div class="donate-card-subtitle">
-                {$t("donate.card.processor.stripe")}
+            <div class="donation-type-text">
+                <div class="donate-card-title">{$t("donate.card.once")}</div>
+                <div class="donate-card-subtitle">
+                    {$t("donate.card.processor.stripe")}
+                </div>
             </div>
         </button>
         <button
@@ -76,9 +78,11 @@
             role="tab"
         >
             <div class="donation-type-icon"><IconCalendarRepeat /></div>
-            <div class="donate-card-title">{$t("donate.card.monthly")}</div>
-            <div class="donate-card-subtitle">
-                {$t("donate.card.processor.liberapay")}
+            <div class="donation-type-text">
+                <div class="donate-card-title">{$t("donate.card.monthly")}</div>
+                <div class="donate-card-subtitle">
+                    {$t("donate.card.processor.liberapay")}
+                </div>
             </div>
         </button>
     </div>
@@ -133,7 +137,7 @@
 
 <style>
     :global(#donation-box) {
-        max-width: 480px;
+        min-width: 350px;
         padding: var(--donate-card-main-padding) 0;
     }
 
@@ -153,11 +157,22 @@
     .donation-type {
         width: 100%;
         overflow: hidden;
+        gap: 2px;
+    }
+
+    .donation-type-icon {
+        display: flex;
     }
 
     .donation-type-icon :global(svg) {
         width: 28px;
         height: 28px;
+        stroke-width: 1.8px;
+    }
+
+    .donation-type-text {
+        display: flex;
+        flex-direction: column;
     }
 
     #donation-options {
diff --git a/web/src/components/donate/DonateShareCard.svelte b/web/src/components/donate/DonateShareCard.svelte
new file mode 100644
index 00000000..cb4c413c
--- /dev/null
+++ b/web/src/components/donate/DonateShareCard.svelte
@@ -0,0 +1,164 @@
+<script lang="ts">
+    import { contacts } from "$lib/env";
+    import { t } from "$lib/i18n/translations";
+
+    import { openURL, copyURL, shareURL } from "$lib/download";
+
+    import DonateCardContainer from "$components/donate/DonateCardContainer.svelte";
+
+    import IconShare2 from "@tabler/icons-svelte/IconShare2.svelte";
+    import IconBrandGithub from "@tabler/icons-svelte/IconBrandGithub.svelte";
+    import IconBrandTwitter from "@tabler/icons-svelte/IconBrandTwitter.svelte";
+    import IconMoodSmileBeam from "@tabler/icons-svelte/IconMoodSmileBeam.svelte";
+
+    import CobaltQr from "$lib/icons/CobaltQR.svelte";
+    import CopyIcon from "$components/misc/CopyIcon.svelte";
+
+    const cobaltUrl = "https://cobalt.tools/";
+
+    let copied = false;
+
+    $: if (copied) {
+        setTimeout(() => {
+            copied = false;
+        }, 1500);
+    }
+</script>
+
+<DonateCardContainer id="share-box">
+    <div id="share-card-header">
+        <div class="share-header-icon"><IconMoodSmileBeam /></div>
+        <div class="donate-card-title">{$t("donate.share.title")}</div>
+    </div>
+    <div id="share-card-body">
+        <div id="share-qr">
+            <CobaltQr />
+        </div>
+        <div id="share-buttons">
+            <button
+                id="share-button-copy"
+                class="share-button"
+                on:click={async () => {
+                    copyURL(cobaltUrl);
+                    copied = true;
+                }}
+                aria-label={copied ? $t("a11y.dialog.saving.copied") : ""}
+            >
+                <div class="share-button-icon">
+                    <CopyIcon check={copied} />
+                </div>
+                copy
+            </button>
+
+            <button
+                id="share-button-share"
+                class="share-button"
+                on:click={async () => shareURL(cobaltUrl)}
+            >
+                <div class="share-button-icon">
+                    <IconShare2 />
+                </div>
+                share
+            </button>
+
+            <button
+                id="share-button-github"
+                class="share-button"
+                on:click={async () => {
+                    openURL(contacts.github);
+                    copied = true;
+                }}
+            >
+                <div class="share-button-icon">
+                    <IconBrandGithub />
+                </div>
+                star
+            </button>
+
+            <button
+                id="share-button-twitter"
+                class="share-button"
+                on:click={async () => {
+                    openURL(contacts.twitter);
+                    copied = true;
+                }}
+            >
+                <div class="share-button-icon">
+                    <IconBrandTwitter />
+                </div>
+                follow
+            </button>
+        </div>
+    </div>
+    <div class="donate-card-subtitle share-footer-link">cobalt.tools</div>
+</DonateCardContainer>
+
+<style>
+    :global(#share-box) {
+        padding: var(--donate-card-main-padding);
+        min-width: 300px;
+        width: fit-content;
+    }
+
+    #share-card-header {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+    }
+
+    .share-header-icon {
+        display: flex;
+    }
+
+    .share-header-icon :global(svg) {
+        width: 28px;
+        height: 28px;
+        stroke-width: 1.8px;
+    }
+
+    #share-card-body {
+        display: flex;
+        flex-direction: row;
+        gap: 12px;
+        max-height: 140px;
+    }
+
+    #share-qr :global(svg) {
+        width: 140px;
+        height: 140px;
+        border-radius: 12px;
+    }
+
+    #share-buttons {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        width: 100%;
+        gap: 6px;
+    }
+
+    .share-button {
+        align-items: center;
+        width: 100%;
+        padding: 0 10px;
+        font-size: 13px;
+        gap: 2px;
+    }
+
+    .share-button-icon {
+        width: 21px;
+        height: 21px;
+        display: flex;
+    }
+
+    .share-button-icon :global(svg) {
+        width: 21px;
+        height: 21px;
+        stroke-width: 1.8px;
+    }
+
+    @media screen and (max-width: 550px) {
+        :global(#share-box) {
+            width: calc(100% - var(--donate-card-main-padding) * 2);
+        }
+    }
+</style>
diff --git a/web/src/components/donate/DonationOption.svelte b/web/src/components/donate/DonationOption.svelte
index 0e2b262e..3486e7b0 100644
--- a/web/src/components/donate/DonationOption.svelte
+++ b/web/src/components/donate/DonationOption.svelte
@@ -22,6 +22,7 @@
     .donation-option :global(svg) {
         width: 20px;
         height: 20px;
+        stroke-width: 1.8px;
     }
 
     @media screen and (max-width: 550px) {
diff --git a/web/src/lib/env.ts b/web/src/lib/env.ts
index 3334ebf3..26cc1fff 100644
--- a/web/src/lib/env.ts
+++ b/web/src/lib/env.ts
@@ -7,6 +7,11 @@ const variables = {
     DEFAULT_API: env.PUBLIC_DEFAULT_API,
 }
 
+const contacts = {
+    github: "https://github.com/imputnet/cobalt",
+    twitter: "https://x.com/justusecobalt",
+}
+
 const donate = {
     stripe: 'https://donate.stripe.com/3cs2cc6ew1Qda4wbII',
     liberapay: 'https://liberapay.com/imput/donate',
@@ -23,5 +28,5 @@ const donate = {
 
 const apiURL = "https://api.cobalt.tools";
 
-export { donate, apiURL };
+export { donate, apiURL, contacts };
 export default variables;
diff --git a/web/src/lib/icons/CobaltQR.svelte b/web/src/lib/icons/CobaltQR.svelte
new file mode 100644
index 00000000..e1c90e39
--- /dev/null
+++ b/web/src/lib/icons/CobaltQR.svelte
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="378" height="378" viewBox="0 0 29 29">
+  <rect width="100%" height="100%" style="fill:#fff"/>
+  <path d="M4 4h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9zm1 0h1v1h-1zm3 0h1v1h-1zm1 0h1v1h-1zm4 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zM4 5h1v1H4zm6 0h1v1h-1zm2 0h1v1h-1zm1 0h1v1h-1zm5 0h1v1h-1zm6 0h1v1h-1zM4 6h1v1H4zm2 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm2 0h1v1h-1zm3 0h1v1h-1zm2 0h1v1h-1zm1 0h1v1h-1zm2 0h1v1h-1zm2 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm2 0h1v1h-1zM4 7h1v1H4zm2 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm2 0h1v1h-1zm5 0h1v1h-1zm3 0h1v1h-1zm2 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm2 0h1v1h-1zM4 8h1v1H4zm2 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm2 0h1v1h-1zm2 0h1v1h-1zm2 0h1v1h-1zm2 0h1v1h-1zm2 0h1v1h-1zm2 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm2 0h1v1h-1zM4 9h1v1H4zm6 0h1v1h-1zm5 0h1v1h-1zm3 0h1v1h-1zm6 0h1v1h-1zM4 10h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9zm1 0h1v1h-1zm2 0h1v1h-1zm2 0h1v1h-1zm2 0h1v1h-1zm2 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm-9 1h1v1h-1zm1 0h1v1h-1zM4 12h1v1H4zm2 0h1v1H6zm2 0h1v1H8zm2 0h1v1h-1zm3 0h1v1h-1zm7 0h1v1h-1zm3 0h1v1h-1zM6 13h1v1H6zm5 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm5 0h1v1h-1zm2 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zM4 14h1v1H4zm1 0h1v1H5zm2 0h1v1H7zm1 0h1v1H8zm2 0h1v1h-1zm2 0h1v1h-1zm2 0h1v1h-1zm3 0h1v1h-1zm3 0h1v1h-1zM4 15h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm5 0h1v1h-1zm1 0h1v1h-1zm2 0h1v1h-1zm2 0h1v1h-1zm1 0h1v1h-1zm2 0h1v1h-1zM4 16h1v1H4zm2 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9zm1 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm3 0h1v1h-1zm1 0h1v1h-1zm3 0h1v1h-1zm1 0h1v1h-1zm4 0h1v1h-1zm-12 1h1v1h-1zm3 0h1v1h-1zm3 0h1v1h-1zm2 0h1v1h-1zm4 0h1v1h-1zM4 18h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9zm1 0h1v1h-1zm4 0h1v1h-1zm2 0h1v1h-1zm1 0h1v1h-1zm3 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm2 0h1v1h-1zM4 19h1v1H4zm6 0h1v1h-1zm3 0h1v1h-1zm4 0h1v1h-1zm2 0h1v1h-1zm1 0h1v1h-1zm3 0h1v1h-1zm1 0h1v1h-1zM4 20h1v1H4zm2 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm2 0h1v1h-1zm2 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm3 0h1v1h-1zm2 0h1v1h-1zM4 21h1v1H4zm2 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm2 0h1v1h-1zm3 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm2 0h1v1h-1zm1 0h1v1h-1zm5 0h1v1h-1zM4 22h1v1H4zm2 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm2 0h1v1h-1zm2 0h1v1h-1zm2 0h1v1h-1zm1 0h1v1h-1zm2 0h1v1h-1zm2 0h1v1h-1zm5 0h1v1h-1zM4 23h1v1H4zm6 0h1v1h-1zm3 0h1v1h-1zm1 0h1v1h-1zm2 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm3 0h1v1h-1zm2 0h1v1h-1zm1 0h1v1h-1zM4 24h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9zm1 0h1v1h-1zm2 0h1v1h-1zm3 0h1v1h-1zm2 0h1v1h-1zm2 0h1v1h-1zm2 0h1v1h-1zm3 0h1v1h-1z"/>
+</svg>
diff --git a/web/src/routes/donate/+page.svelte b/web/src/routes/donate/+page.svelte
index dbe61fc7..5c5c6325 100644
--- a/web/src/routes/donate/+page.svelte
+++ b/web/src/routes/donate/+page.svelte
@@ -5,6 +5,7 @@
 
     import DonateBanner from "$components/donate/DonateBanner.svelte";
     import DonateOptionsCard from "$components/donate/DonateOptionsCard.svelte";
+    import DonateShareCard from "$components/donate/DonateShareCard.svelte";
 </script>
 
 <svelte:head>
@@ -17,6 +18,7 @@
     <DonateBanner />
     <section id="support-options">
         <DonateOptionsCard />
+        <DonateShareCard />
     </section>
     <section id="donate-text" class="long-text-noto">
         <p>
@@ -63,7 +65,11 @@
         padding: 0 24px;
     }
 
-    @media screen and (max-width: 535px) {
+    @media screen and (max-width: 550px) {
+        #support-options {
+            flex-direction: column;
+        }
+
         #donate-text {
             padding: 0 6px;
         }