feat: make next button more prominent when enabled

Author: akalogerakisunicorn

src/components/WizardFlowContainer.tsx

@@ -219,6 +219,7 @@ const WizardFlowContainer = ({
                 currentStep !== steps.length - 1 || status !== Status.COMPLETED
                   ? 'visible'
                   : 'hidden',
+              animation: buttonDisabled ? '' : 'pulse 6s ease-in-out 1.5s',
             }}
           >
             <StepArrowButton

src/index.css

@@ -10,3 +10,28 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+@keyframes pulse {
+  0%,
+  100% {
+    transform: scale(1);
+    filter: brightness(1) saturate(1);
+  }
+
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: scale(1.1);
+    filter: brightness(1.2) saturate(1.2);
+  }
+
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: scale(1);
+    filter: brightness(1) saturate(1);
+  }
+}