add field for optional caption to prize message (#4567)

open-chat-labs · Oct 12, 2023 · f35005f · f35005f
1 parent 9f46295
commit f35005f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git 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
@@ -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")}