From e55823e0112291a32886908fd4c63365275106e6 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Thu, 22 Dec 2022 12:00:58 +0100
Subject: [PATCH] :lipstick: Fix router progress bar color for dark mode

---
 .../src/assets/styles/routerProgressBar.css   | 55 +++----------------
 apps/builder/src/pages/_app.tsx               |  2 +-
 2 files changed, 8 insertions(+), 49 deletions(-)

diff --git a/apps/builder/src/assets/styles/routerProgressBar.css b/apps/builder/src/assets/styles/routerProgressBar.css
index 1fea3d76f..681503a53 100644
--- a/apps/builder/src/assets/styles/routerProgressBar.css
+++ b/apps/builder/src/assets/styles/routerProgressBar.css
@@ -4,7 +4,7 @@
 }
 
 #nprogress .bar {
-  background: #0042da;
+  background: var(--chakra-colors-blue-500);
 
   position: fixed;
   z-index: 1031;
@@ -22,7 +22,8 @@
   right: 0px;
   width: 100px;
   height: 100%;
-  box-shadow: 0 0 10px #0042da, 0 0 5px #0042da;
+  box-shadow: 0 0 10px var(--chakra-colors-blue-500),
+    0 0 5px var(--chakra-colors-blue-500);
   opacity: 1;
 
   -webkit-transform: rotate(3deg) translate(0px, -4px);
@@ -30,52 +31,10 @@
   transform: rotate(3deg) translate(0px, -4px);
 }
 
-/* Remove these to get rid of the spinner */
-#nprogress .spinner {
-  display: block;
-  position: fixed;
-  z-index: 1031;
-  top: 15px;
-  right: 15px;
+.chakra-ui-dark #nprogress .bar {
+  background: var(--chakra-colors-blue-300);
 }
 
-#nprogress .spinner-icon {
-  width: 18px;
-  height: 18px;
-  box-sizing: border-box;
-
-  border: solid 2px transparent;
-  border-top-color: #0042da;
-  border-left-color: #0042da;
-  border-radius: 50%;
-
-  -webkit-animation: nprogress-spinner 400ms linear infinite;
-  animation: nprogress-spinner 400ms linear infinite;
-}
-
-.nprogress-custom-parent {
-  overflow: hidden;
-  position: relative;
-}
-
-.nprogress-custom-parent #nprogress .spinner,
-.nprogress-custom-parent #nprogress .bar {
-  position: absolute;
-}
-
-@-webkit-keyframes nprogress-spinner {
-  0% {
-    -webkit-transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-  }
-}
-@keyframes nprogress-spinner {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
+.chakra-ui-dark #nprogress .peg {
+  background: var(--chakra-colors-blue-300);
 }
diff --git a/apps/builder/src/pages/_app.tsx b/apps/builder/src/pages/_app.tsx
index 485079b70..80e7764bb 100644
--- a/apps/builder/src/pages/_app.tsx
+++ b/apps/builder/src/pages/_app.tsx
@@ -41,7 +41,7 @@ const App = ({
         position: 'bottom-right',
         status: 'success',
         title: 'Upgrade success!',
-        description: `Workspace upgraded to ${toTitleCase(status)} 🎉`,
+        description: `Workspace upgraded to ${toTitleCase(newPlan)} 🎉`,
       })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isReady])