From 425a4cd885bba8104a1a08bf99426dd18b9b00a5 Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Tue, 11 May 2021 22:33:01 -0300
Subject: [PATCH] Fix animations

---
 src/transitions/TransitionAnimationStyles.ts |  7 ++++++
 src/views/purse/currency/CurrencyView.tsx    | 25 ++++----------------
 src/views/toolbar/ToolbarView.tsx            |  2 +-
 src/views/toolbar/me/ToolbarMeView.scss      |  2 +-
 4 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/src/transitions/TransitionAnimationStyles.ts b/src/transitions/TransitionAnimationStyles.ts
index 524a4d9d..afd3cadb 100644
--- a/src/transitions/TransitionAnimationStyles.ts
+++ b/src/transitions/TransitionAnimationStyles.ts
@@ -11,6 +11,7 @@ export function getTransitionAnimationStyle(type: string, transition: Transition
             switch(transition)
             {
                 default:
+                    return {}
                 case ENTERING:
                     return {
                         animationName: `bounceIn`,
@@ -26,6 +27,7 @@ export function getTransitionAnimationStyle(type: string, transition: Transition
             switch(transition)
             {
                 default:
+                    return {}
                 case ENTERING:
                     return {
                         animationName: `slideInLeft`,
@@ -41,6 +43,7 @@ export function getTransitionAnimationStyle(type: string, transition: Transition
             switch(transition)
             {
                 default:
+                    return {}
                 case ENTERING:
                     return {
                         animationName: `flipInX`,
@@ -56,6 +59,7 @@ export function getTransitionAnimationStyle(type: string, transition: Transition
             switch(transition)
             {
                 default:
+                    return {}
                 case ENTERING:
                     return {
                         animationName: `fadeInUp`,
@@ -71,6 +75,7 @@ export function getTransitionAnimationStyle(type: string, transition: Transition
             switch(transition)
             {
                 default:
+                    return {}
                 case ENTERING:
                     return {
                         animationName: `fadeIn`,
@@ -86,6 +91,7 @@ export function getTransitionAnimationStyle(type: string, transition: Transition
             switch(transition)
             {
                 default:
+                    return {}
                 case ENTERING:
                     return {
                         animationName: `fadeInDown`,
@@ -101,6 +107,7 @@ export function getTransitionAnimationStyle(type: string, transition: Transition
             switch(transition)
             {
                 default:
+                    return {}
                 case ENTERING:
                     return {
                         animationName: `headShake`,
diff --git a/src/views/purse/currency/CurrencyView.tsx b/src/views/purse/currency/CurrencyView.tsx
index 9fdd6a06..16df5e75 100644
--- a/src/views/purse/currency/CurrencyView.tsx
+++ b/src/views/purse/currency/CurrencyView.tsx
@@ -8,33 +8,18 @@ export function CurrencyView(props: CurrencyViewProps): JSX.Element
 {
     const { currency = null } = props;
 
-    const [ firstRender, setFirstRender ] = useState(true);
-    const [ isAnimating, setIsAnimating ] = useState(false);
+    const [ showUp, setShowUp ] = useState(false);
 
     useEffect(() =>
     {
-        if(firstRender)
-        {
-            setFirstRender(false);
-
-            return;
-        }
-
-        setIsAnimating(true);
-
-        const timeout = setTimeout(() => setIsAnimating(false), 305);
-
-        return () =>
-        {
-            clearTimeout(timeout);
-        }
-    }, [ firstRender, currency ]);
+        setShowUp(true);
+    }, [ currency ])
 
     return (
-        <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ isAnimating }>
+        <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ showUp }>
             <div className="col pe-1 pb-1">
                 <div className="d-flex bg-primary rounded border overflow-hidden">
-                    <div className="d-flex flex-grow-1 align-items-center justify-content-end pe-1">{ !isAnimating && currency.amount }</div>
+                    <div className="d-flex flex-grow-1 align-items-center justify-content-end pe-1">{ currency.amount }</div>
                     <div className="bg-secondary"><CurrencyIcon type={ currency.type } /></div>
                 </div>
             </div>
diff --git a/src/views/toolbar/ToolbarView.tsx b/src/views/toolbar/ToolbarView.tsx
index 881cfbf4..68ed82f4 100644
--- a/src/views/toolbar/ToolbarView.tsx
+++ b/src/views/toolbar/ToolbarView.tsx
@@ -59,7 +59,7 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element
 
     return (
         <>
-            { <TransitionAnimation className="" type={ TransitionAnimationTypes.FADE_UP } inProp={ expandMeToolbar } timeout={ 300 }>
+            { <TransitionAnimation className="" type={ TransitionAnimationTypes.FADE_IN } inProp={ expandMeToolbar } timeout={ 300 }>
                 <ToolbarMeView />
             </TransitionAnimation> }
             <div className="d-flex nitro-toolbar py-1 px-3">
diff --git a/src/views/toolbar/me/ToolbarMeView.scss b/src/views/toolbar/me/ToolbarMeView.scss
index 0815a72a..f52a4e56 100644
--- a/src/views/toolbar/me/ToolbarMeView.scss
+++ b/src/views/toolbar/me/ToolbarMeView.scss
@@ -1,6 +1,6 @@
 .nitro-toolbar-me {
     position: absolute;
-    bottom: 10px;
+    bottom: 65px;
     left: 15px;
     z-index: $toolbar-zindex;
     background: rgba(20, 20, 20, .95);