💄 Fix router progress bar color for dark mode

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,60 +22,19 @@
   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);
   -ms-transform: rotate(3deg) translate(0px, -4px);
   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;
-}
-
-#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;
+.chakra-ui-dark #nprogress .bar {
+  background: var(--chakra-colors-blue-300);
 }
 
-.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);
 }

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])