From f35005f0465eeecf68c2466d7ed095ac66a355c3 Mon Sep 17 00:00:00 2001
From: Julian Jelfs <julian.jelfs@gmail.com>
Date: Thu, 12 Oct 2023 15:55:51 +0100
Subject: [PATCH] add field for optional caption to prize message (#4567)

---
 frontend/app/src/components/home/PrizeContent.svelte | 12 ++++++------
 .../src/components/home/PrizeContentBuilder.svelte   | 10 ++++++++++
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/frontend/app/src/components/home/PrizeContent.svelte b/frontend/app/src/components/home/PrizeContent.svelte
index d8c304ac81..f41e0a26b1 100644
--- a/frontend/app/src/components/home/PrizeContent.svelte
+++ b/frontend/app/src/components/home/PrizeContent.svelte
@@ -137,6 +137,10 @@
         }
     }
 
+    .prize {
+        max-width: 400px;
+    }
+
     .top {
         position: relative;
         padding: 30px 0 30px 0;
@@ -178,17 +182,13 @@
         }
     }
 
-    .caption {
-        @include font(bold, normal, fs-100);
-        margin-bottom: $sp3;
-    }
-
     .number-claimed {
         @include font(bold, normal, fs-80);
         margin-bottom: $sp3;
     }
 
-    .click {
+    .click,
+    .caption {
         @include font(book, normal, fs-80);
         color: var(--txt);
         margin-bottom: $sp4;
diff --git a/frontend/app/src/components/home/PrizeContentBuilder.svelte b/frontend/app/src/components/home/PrizeContentBuilder.svelte
index d2216b1f83..acd7998277 100644
--- a/frontend/app/src/components/home/PrizeContentBuilder.svelte
+++ b/frontend/app/src/components/home/PrizeContentBuilder.svelte
@@ -22,6 +22,7 @@
     import CryptoSelector from "./CryptoSelector.svelte";
     import EqualDistribution from "../icons/EqualDistribution.svelte";
     import RandomDistribution from "../icons/RandomDistribution.svelte";
+    import TextArea from "../TextArea.svelte";
 
     const ONE_HOUR = 1000 * 60 * 60;
     const ONE_DAY = ONE_HOUR * 24;
@@ -249,6 +250,15 @@
                             maxAmount={maxAmount(cryptoBalance)}
                             bind:amount={draftAmount} />
                     </div>
+                    <div class="message">
+                        <Legend label={$_("tokenTransfer.message")} />
+                        <TextArea
+                            maxlength={200}
+                            rows={3}
+                            autofocus={false}
+                            placeholder={$_("tokenTransfer.messagePlaceholder")}
+                            bind:value={message} />
+                    </div>
                     <div class="winners">
                         <Legend
                             label={$_("prizes.numberOfWinners")}