From b5b043152cf801c0a2e23cf29df2bae210d718b2 Mon Sep 17 00:00:00 2001
From: Bojan Mojsilovic <bmojsilovic@itekako.com>
Date: Tue, 30 Apr 2024 12:18:27 +0200
Subject: [PATCH] Fix top zaps z-axis stacking for better animation

---
 src/components/Note/Note.module.scss | 3 ++-
 src/components/Note/NoteTopZaps.tsx  | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Note/Note.module.scss b/src/components/Note/Note.module.scss
index 6edeb29..d28a480 100644
--- a/src/components/Note/Note.module.scss
+++ b/src/components/Note/Note.module.scss
@@ -352,6 +352,7 @@
       }
 
       .topZap {
+        position: relative;
         display: flex;
         align-items: center;
         gap: 8px;
@@ -430,7 +431,7 @@
 
 .topZapExitTransition {
   opacity: 0;
-  transform: translateY(30px);
+  transform: translateY(3px);
 }
 
 .noteNotificationLink {
diff --git a/src/components/Note/NoteTopZaps.tsx b/src/components/Note/NoteTopZaps.tsx
index f28d464..4c595db 100644
--- a/src/components/Note/NoteTopZaps.tsx
+++ b/src/components/Note/NoteTopZaps.tsx
@@ -74,6 +74,7 @@ const NoteTopZaps: Component<{
               <button
                 class={`${styles.topZap}`}
                 onClick={() => props.action()}
+                style={`z-index: ${12 - index()};`}
               >
                 <Avatar user={zapSender(zap)} size="micro" />
                 <div class={styles.amount}>