From 48a0166f00cd5db993ca761446a7e093681a98f2 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 22:33:52 +0200
Subject: [PATCH] feat: use new hook to make stepper responsive

---
 .../FormStepper/FormStepper.tsx               | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
index 3b51e8c2..5b666dd4 100644
--- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
+++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
@@ -3,6 +3,7 @@ import { useDispatch } from 'react-redux'
 
 import { setActiveStep } from '../../../redux/ValidatorOnboarding/slice'
 import { FORM_STEPS } from '../../../constants'
+import { useWindowSize } from '../../../hooks/useWindowSize'
 import './FormStepper.css'
 
 type FormStepperProps = {
@@ -11,15 +12,28 @@ type FormStepperProps = {
 
 const FormStepper = ({ activeStep }: FormStepperProps) => {
   const dispatch = useDispatch()
+  const windowSize = useWindowSize()
 
   const isStepVisible = (index: number) => {
-    // if (windowWidth < 1025) {
-    //   const start = activeStep - 1
-    //   const end = Math.min(FORM_STEPS.length - 1, activeStep + 1)
-    //   return index >= start && index <= end
-    // } else {
-    return true
-    // }
+    if (windowSize.width < 774) {
+      const start = Math.min(3, activeStep - 1)
+      const end = Math.max(FORM_STEPS.length - 5, activeStep + 1)
+      return index >= start && index <= end
+    } else if (windowSize.width < 963) {
+      const start = Math.min(2, activeStep - 1)
+      const end = Math.max(FORM_STEPS.length - 4, activeStep + 1)
+      return index >= start && index <= end
+    } else if (windowSize.width < 1152) {
+      const start = Math.min(1, activeStep - 1)
+      const end = Math.max(FORM_STEPS.length - 3, activeStep + 1)
+      return index >= start && index <= end
+    } else if (windowSize.width < 1300) {
+      const start = Math.min(0, activeStep - 1)
+      const end = Math.max(FORM_STEPS.length - 2, activeStep + 1)
+      return index >= start && index <= end
+    } else {
+      return true
+    }
   }
 
   const changeStepOnClickHandler = (index: number) => {