From 074057b4810782928eed1b822a5e27b176918821 Mon Sep 17 00:00:00 2001
From: trashtemp <96388163+trashtemp@users.noreply.github.com>
Date: Fri, 21 Jan 2022 09:15:31 +0100
Subject: [PATCH] fix: added animation to jumpbar

---
 .../common/messaging/bars/JumpToBottom.tsx    | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/common/messaging/bars/JumpToBottom.tsx b/src/components/common/messaging/bars/JumpToBottom.tsx
index bb44207a..62a91496 100644
--- a/src/components/common/messaging/bars/JumpToBottom.tsx
+++ b/src/components/common/messaging/bars/JumpToBottom.tsx
@@ -13,7 +13,7 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
     z-index: 1;
     position: relative;
 
-    @keyframes bounce-from-bottom {
+    @keyframes bottomBounce {
         0% {
             transform: translateY(33px);
         }
@@ -22,22 +22,29 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
         }
     }
 
-    animation-name: bounce-from-bottom;
-    animation-duration: 340ms;
-    animation-delay: 0ms;
-    animation-timing-function: cubic-bezier(0.2, 0.9, 0.5, 1.16);
-    animation-fill-mode: forwards;
+    @keyframes topBounce {
+        0% {
+            transform: translateY(-33px);
+        }
+        100% {
+            transform: translateY(0px);
+        }
+    }
 
     ${(props) =>
         props.position === "top" &&
         css`
             top: 0;
+            animation: topBounce 340ms cubic-bezier(0.2, 0.9, 0.5, 1.16)
+                forwards;
         `}
 
     ${(props) =>
         props.position === "bottom" &&
         css`
             top: -28px;
+            animation: bottomBounce 340ms cubic-bezier(0.2, 0.9, 0.5, 1.16)
+                forwards;
 
             ${() =>
                 isTouchscreenDevice &&
@@ -54,7 +61,7 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
         align-items: center;
         cursor: pointer;
         font-size: 12px;
-        font-weight: 500;
+        font-weight: 600;
         padding: 0 8px;
         user-select: none;
         justify-content: space-between;