From 937d12ddff0299f3f702875efab221a0fa41067a Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Fri, 9 Aug 2024 13:13:48 +0600
Subject: [PATCH] web/donate: bring up repeated card css to container

also fixed some scaling quirks on mobile
---
 .../donate/DonateCardContainer.svelte         |  85 +++++++++++++
 .../donate/DonateOptionsCard.svelte           | 113 ++++--------------
 .../components/donate/DonationOption.svelte   |  13 +-
 web/src/routes/donate/+page.svelte            |   2 +
 4 files changed, 121 insertions(+), 92 deletions(-)
 create mode 100644 web/src/components/donate/DonateCardContainer.svelte

diff --git a/web/src/components/donate/DonateCardContainer.svelte b/web/src/components/donate/DonateCardContainer.svelte
new file mode 100644
index 00000000..e69a0da6
--- /dev/null
+++ b/web/src/components/donate/DonateCardContainer.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+    export let id: string;
+</script>
+
+<div {id} class="donate-card">
+    <slot></slot>
+</div>
+
+<style>
+    :global(.donate-card) {
+        --donate-card-main-padding: var(--donate-border-radius);
+        --donate-card-padding: 12px;
+
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+
+        border-radius: var(--donate-border-radius);
+        gap: calc(var(--donate-card-main-padding) / 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;
+    }
+
+    :global(.donate-card button) {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        text-align: left;
+        border-radius: var(--donate-card-padding);
+        background: rgba(255, 255, 255, 0.05);
+        padding: 14px 18px;
+        color: var(--white);
+        gap: 0;
+        letter-spacing: -0.3px;
+    }
+
+    :global(.donate-card button:not(:focus-visible)) {
+        box-shadow: none;
+    }
+
+    :global(.donate-card button:active) {
+        background: rgba(255, 255, 255, 0.1);
+    }
+
+    @media (hover: hover) {
+        :global(.donate-card button:hover) {
+            background: rgba(255, 255, 255, 0.1);
+        }
+    }
+
+    :global(.donate-card button.selected) {
+        background: rgba(255, 255, 255, 0.15);
+    }
+
+    :global(.donate-card button.selected:not(:focus-visible)) {
+        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) inset !important;
+    }
+
+    :global(.donate-card-subtitle) {
+        font-size: 13px;
+        color: var(--white);
+        opacity: 0.5;
+        line-height: 1.5;
+    }
+
+    :global(.donate-card-title) {
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+        gap: 4px;
+    }
+
+    @media screen and (max-width: 550px) {
+        :global(.donate-card) {
+            --donate-card-main-padding: 18px;
+        }
+    }
+</style>
diff --git a/web/src/components/donate/DonateOptionsCard.svelte b/web/src/components/donate/DonateOptionsCard.svelte
index 2b7b0a4e..3b3609c7 100644
--- a/web/src/components/donate/DonateOptionsCard.svelte
+++ b/web/src/components/donate/DonateOptionsCard.svelte
@@ -5,6 +5,8 @@
     import IconCoin from "@tabler/icons-svelte/IconCoin.svelte";
     import IconCalendarRepeat from "@tabler/icons-svelte/IconCalendarRepeat.svelte";
 
+    import DonateCardContainer from "$components/donate/DonateCardContainer.svelte";
+
     import DonationOption from "$components/donate/DonationOption.svelte";
 
     import IconCup from "@tabler/icons-svelte/IconCup.svelte";
@@ -49,7 +51,7 @@
     };
 </script>
 
-<div id="donation-box">
+<DonateCardContainer id="donation-box">
     <div id="donation-types" role="tablist" aria-orientation="horizontal">
         <button
             id="donation-type-once"
@@ -60,8 +62,8 @@
             role="tab"
         >
             <div class="donation-type-icon"><IconCoin /></div>
-            <div class="donation-title">{$t("donate.card.once")}</div>
-            <div class="donation-subtitle">
+            <div class="donate-card-title">{$t("donate.card.once")}</div>
+            <div class="donate-card-subtitle">
                 {$t("donate.card.processor.stripe")}
             </div>
         </button>
@@ -74,8 +76,8 @@
             role="tab"
         >
             <div class="donation-type-icon"><IconCalendarRepeat /></div>
-            <div class="donation-title">{$t("donate.card.monthly")}</div>
-            <div class="donation-subtitle">
+            <div class="donate-card-title">{$t("donate.card.monthly")}</div>
+            <div class="donate-card-subtitle">
                 {$t("donate.card.processor.liberapay")}
             </div>
         </button>
@@ -124,111 +126,40 @@
             <IconArrowRight />
         </button>
     </div>
-    <div class="donation-subtitle processor-mobile">
+    <div class="donate-card-subtitle processor-mobile">
         {$t(`donate.card.processor.${processor}`)}
     </div>
-</div>
+</DonateCardContainer>
 
 <style>
-    #donation-box {
-        --donation-box-main-padding: var(--donate-border-radius);
-        --donation-box-padding: 12px;
-
-        display: flex;
-        flex-direction: column;
-        width: 100%;
+    :global(#donation-box) {
         max-width: 480px;
-
-        padding: var(--donation-box-main-padding) 0;
-        border-radius: var(--donate-border-radius);
-        gap: calc(var(--donation-box-main-padding) / 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;
+        padding: var(--donate-card-main-padding) 0;
     }
 
     #donation-types,
     #donation-options,
     #donation-custom {
-        padding: 0 var(--donation-box-main-padding);
+        padding: 0 var(--donate-card-main-padding);
     }
 
     #donation-types {
         display: flex;
         flex-direction: row;
-        gap: var(--donation-box-padding);
+        gap: var(--donate-card-padding);
         overflow: scroll;
     }
 
-    .donation-type,
-    :global(.donation-option) {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        text-align: left;
-        border-radius: var(--donation-box-padding);
-        background: rgba(255, 255, 255, 0.05);
-        padding: 14px 18px;
-        color: var(--white);
-        gap: 0;
-        letter-spacing: -0.3px;
-    }
-
     .donation-type {
         width: 100%;
         overflow: hidden;
     }
 
-    :global(#donation-box button:not(:focus-visible)) {
-        box-shadow: none;
-    }
-
-    :global(#donation-box button:active) {
-        background: rgba(255, 255, 255, 0.1);
-    }
-
-    @media (hover: hover) {
-        :global(#donation-box button:hover) {
-            background: rgba(255, 255, 255, 0.1);
-        }
-    }
-
-    .donation-type.selected {
-        background: rgba(255, 255, 255, 0.15);
-    }
-
-    .donation-type.selected:not(:focus-visible) {
-        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) inset !important;
-    }
-
-    .donation-subtitle {
-        line-height: 1.5;
-    }
-
     .donation-type-icon :global(svg) {
         width: 28px;
         height: 28px;
     }
 
-    :global(.donation-title) {
-        display: flex;
-        align-items: center;
-        font-size: 16px;
-        gap: 4px;
-    }
-
-    :global(.donation-subtitle) {
-        font-size: 13px;
-        color: var(--white);
-        opacity: 0.5;
-    }
-
     #donation-options {
         display: flex;
         overflow-x: scroll;
@@ -324,19 +255,23 @@
     .processor-mobile {
         display: none;
         text-align: center;
-        font-size: 13px;
     }
 
     @media screen and (max-width: 550px) {
-        #donation-box {
-            --donation-box-main-padding: 18px;
-        }
-
-        .donation-title {
+        :global(#donation-box .donate-card-title) {
             font-size: 14px;
         }
 
-        .donation-type .donation-subtitle {
+        :global(#donation-box .donate-card-subtitle) {
+            font-size: 12px;
+        }
+
+        .donation-type-icon :global(svg) {
+            width: 26px;
+            height: 26px;
+        }
+
+        .donation-type .donate-card-subtitle {
             display: none;
         }
 
diff --git a/web/src/components/donate/DonationOption.svelte b/web/src/components/donate/DonationOption.svelte
index 9692ee91..0e2b262e 100644
--- a/web/src/components/donate/DonationOption.svelte
+++ b/web/src/components/donate/DonationOption.svelte
@@ -7,15 +7,15 @@
 </script>
 
 <button class="donation-option" on:click={click}>
-    <div class="donation-title">
+    <div class="donate-card-title">
         <slot></slot>
         ${price}
     </div>
-    <div class="donation-subtitle">{desc}</div>
+    <div class="donate-card-subtitle">{desc}</div>
 </button>
 
 <style>
-    .donation-option .donation-subtitle {
+    .donation-option .donate-card-subtitle {
         white-space: nowrap;
     }
 
@@ -23,4 +23,11 @@
         width: 20px;
         height: 20px;
     }
+
+    @media screen and (max-width: 550px) {
+        .donation-option :global(svg) {
+            width: 18px;
+            height: 18px;
+        }
+    }
 </style>
diff --git a/web/src/routes/donate/+page.svelte b/web/src/routes/donate/+page.svelte
index a0a60a32..dbe61fc7 100644
--- a/web/src/routes/donate/+page.svelte
+++ b/web/src/routes/donate/+page.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
     import "@fontsource/redaction-10/400.css";
+
     import { t } from "$lib/i18n/translations";
+
     import DonateBanner from "$components/donate/DonateBanner.svelte";
     import DonateOptionsCard from "$components/donate/DonateOptionsCard.svelte";
 </script>