From 6f61bfeade364bea882a5c2d31a22ff3b013fb89 Mon Sep 17 00:00:00 2001
From: Joachim Robert <joachim.robert@protonmail.com>
Date: Sat, 9 Feb 2019 14:52:35 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=89=20=F0=9F=8E=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Header/index.js | 6 +++++-
 components/Header/style.js | 3 ++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/components/Header/index.js b/components/Header/index.js
index da38203..b166d40 100644
--- a/components/Header/index.js
+++ b/components/Header/index.js
@@ -63,7 +63,11 @@ export default function Header(props: Props) {
         <ProgressLabel
           id="progress_tooltip"
           role="tooltip"
-        >{currentCount} of {totalItemsCount} completed</ProgressLabel>
+        >
+          { currentCount === totalItemsCount && `🎉 `}
+          {currentCount} of {totalItemsCount} completed
+          { currentCount === totalItemsCount && ` 🎉`}
+        </ProgressLabel>
       </Progression>)}
     </Container>
   );
diff --git a/components/Header/style.js b/components/Header/style.js
index a6f0769..ae0d707 100644
--- a/components/Header/style.js
+++ b/components/Header/style.js
@@ -92,6 +92,7 @@ export const ProgressLabel = styled.p`
 
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
+  white-space: nowrap;
 
   ${Progression}:hover &,
   ${Progression}:focus &,
@@ -99,7 +100,7 @@ export const ProgressLabel = styled.p`
    {
     visibility: visible;
     opacity: 1;
-    bottom: calc((100% - 8px) * -1);
+    bottom: -100%;
   }
 
   @media (max-width: 968px) {