From 9dad15b48c36b11b0463694b56777014cbf339b0 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Tue, 6 Aug 2024 13:24:40 +0600
Subject: [PATCH] web/DonateBanner: fix up colors & sizes to match mockup

---
 web/src/components/misc/DonateBanner.svelte | 56 +++++++++++----------
 1 file changed, 29 insertions(+), 27 deletions(-)

diff --git a/web/src/components/misc/DonateBanner.svelte b/web/src/components/misc/DonateBanner.svelte
index 4ad71d3e..92a0bb3b 100644
--- a/web/src/components/misc/DonateBanner.svelte
+++ b/web/src/components/misc/DonateBanner.svelte
@@ -11,8 +11,8 @@
     <div id="banner-contents">
         <div id="banner-left">
             <img id="imput-logo" src="/icons/imput.svg" alt="imput logo" />
-            <div id="banner-title" class="redaction">{$t('donate.title')}</div>
-            <div id="banner-subtitle">{$t('donate.subtitle')}</div>
+            <div id="banner-title" class="redaction">{$t("donate.title")}</div>
+            <div id="banner-subtitle">{$t("donate.subtitle")}</div>
         </div>
         <div id="banner-right">
             <Meowbalt emotion="fast" />
@@ -21,7 +21,7 @@
     <div id="banner-background">
         <div id="banner-background-animation">
             <div id="banner-background-inner">
-                {#each {length: 144} as _}
+                {#each { length: 160 } as _}
                     <IconHeart class="heart-icon" />
                 {/each}
             </div>
@@ -30,14 +30,11 @@
 </header>
 
 <style>
-        #banner {
+    #banner {
+        --banner-radius: 28px;
         position: relative;
-        border-radius: calc(3 * var(--border-radius));
-        background: linear-gradient(
-            190deg,
-            #1a1a1a 30%,
-            #3c3c3c 100%
-        );
+        border-radius: var(--banner-radius);
+        background: linear-gradient(180deg, #1a1a1a 30%, #404040 100%);
     }
 
     #banner-contents {
@@ -53,36 +50,38 @@
         width: 100%;
         height: 100%;
         z-index: 1;
-        opacity: 10%;
+        opacity: 8%;
+        border-radius: var(--banner-radius);
         mask-image: linear-gradient(
-            145deg,
-            rgba(0,0,0,1) 0%,
-            rgba(255,255,255,0) 60%
-        );
+            150deg,
+            rgba(0, 0, 0, 0.7) 0%,
+            rgba(255, 255, 255, 0) 65%
+        )
     }
 
     #banner-background-inner {
         color: white;
-        transform: rotate(-8deg) scale(1.5) translateY(-4em);
+        transform: rotate(-10deg) scale(1.5) translateY(-70px);
     }
 
     #banner-background-inner :global(.heart-icon) {
         height: 48px;
         width: 48px;
         stroke-width: 1.5px;
-        margin: -2.4px;
+        margin: -6px -2.5px;
     }
 
     #banner-right :global(.meowbalt) {
-        height: 40vmin;
-        margin-top: -32px;
-        margin-left: -64px;
+        height: 38vmin;
     }
 
     #banner-right {
-        transform: translate(12px, 48px);
+        transform: translate(12px, 44px);
         display: flex;
         align-items: center;
+        position: absolute;
+        right: 0;
+        bottom: 0;
     }
 
     #imput-logo {
@@ -93,32 +92,35 @@
         display: flex;
         flex-direction: column;
         justify-content: center;
-        padding: 40px 56px;
         color: white;
+        padding: 55px;
+        padding-right: 0;
         gap: 16px;
         white-space: pre-wrap;
+        max-width: 55%;
     }
 
     #banner-title {
         font-family: serif;
-
         font-size: 48px;
         font-weight: 400;
         line-height: 0.95;
     }
 
     #banner-title.redaction {
-        font-family: 'Redaction 10', serif;
+        font-family: "Redaction 10", serif;
         font-smooth: never;
         -webkit-font-smoothing: none;
     }
 
     #banner-subtitle {
         color: var(--gray);
+        line-height: 1.5;
+        font-size: 16px;
     }
 
     #banner-background-animation {
-        animation: heart-move 5s infinite linear;
+        animation: heart-move 6s infinite linear;
     }
 
     @keyframes heart-move {
@@ -127,7 +129,7 @@
         }
 
         to {
-            transform: translate(74px) translateY(61px);
+            transform: translate(85px) translateY(108px);
         }
     }
-</style>
\ No newline at end of file
+</style>