From d9a6def0cdc0ec4a4512af112b2d279d36aa9794 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Thu, 6 Jul 2023 22:00:33 +0200
Subject: [PATCH] feat: animated gradient for huge zaps

---
 src/element/live-chat.css | 18 ++++++++++++++++++
 src/element/live-chat.tsx |  3 ++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/element/live-chat.css b/src/element/live-chat.css
index 46165bc..453122d 100644
--- a/src/element/live-chat.css
+++ b/src/element/live-chat.css
@@ -224,6 +224,24 @@
   color: #FF8D2B;
 }
 
+.zap-container.big-zap:before {
+  background: linear-gradient(60deg, #2BD9FF, #8C8DED, #F838D9, #F83838, #FF902B, #DDF838);
+  animation: animatedgradient 3s ease alternate infinite;
+  background-size: 300% 300%;
+}
+
+@keyframes animatedgradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
 .zap-content {
   margin-top: 8px;
 }
diff --git a/src/element/live-chat.tsx b/src/element/live-chat.tsx
index 84bef3d..0e4c376 100644
--- a/src/element/live-chat.tsx
+++ b/src/element/live-chat.tsx
@@ -155,9 +155,10 @@ function ChatZap({ zap }: { zap: ParsedZap }) {
   if (!zap.valid) {
     return null;
   }
+  const isBig = zap.amount >= 1_000_000;
 
   return (
-    <div className="zap-container">
+    <div className={`zap-container ${isBig ? "big-zap" : ""}`}>
       <div className="zap">
         <Icon name="zap-filled" className="zap-icon" />
         <Profile