From af393877df709274fc1565d8bbc2974189ef40a5 Mon Sep 17 00:00:00 2001
From: Manan Gouhari <gouhari21@hotmail.com>
Date: Thu, 18 Mar 2021 11:57:51 +0530
Subject: [PATCH] Stepper ui fixed 'transaction' page

---
 src/pages/tezos/claim-transaction.js |  2 +-
 src/pages/tezos/transaction.js       | 23 +++++++++++++++++++----
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/pages/tezos/claim-transaction.js b/src/pages/tezos/claim-transaction.js
index 172b7388..c118dbfd 100644
--- a/src/pages/tezos/claim-transaction.js
+++ b/src/pages/tezos/claim-transaction.js
@@ -292,7 +292,7 @@ function Transaction({ location }) {
               />
               <div
                 className={`flex-auto border-t-2 ${
-                  step == 2 ? 'border-primary-600' : 'border-base-600'
+                  step >= 2 ? 'border-primary-600' : 'border-base-600'
                 }`}
               ></div>
               <Steppers
diff --git a/src/pages/tezos/transaction.js b/src/pages/tezos/transaction.js
index 325c5b23..04fc4399 100644
--- a/src/pages/tezos/transaction.js
+++ b/src/pages/tezos/transaction.js
@@ -19,7 +19,7 @@ import userAtom from 'src/atoms/user-atom';
 import isUserAtom from 'src/atoms/is-user-atom';
 import { useAtom } from 'jotai';
 
-const Steppers = ({ number, name, clickEvent, tick = false }) => {
+const Steppers = ({ number, name, clickEvent, step, tick = false }) => {
   return (
     <div onClick={clickEvent}>
       <div className="flex items-center text-primary-600 relative">
@@ -33,7 +33,11 @@ const Steppers = ({ number, name, clickEvent, tick = false }) => {
             <MdDone size={24} />
           </div>
         ) : (
-          <div className="rounded-full h-12 w-12 py-3 inline-flex items-center justify-center bg-primary-600 text-white">
+          <div
+            className={`rounded-full h-12 w-12 py-3 inline-flex items-center justify-center ${
+              number == step ? 'bg-primary-600' : 'bg-base-600'
+            } text-white`}
+          >
             {number}
           </div>
         )}
@@ -236,26 +240,37 @@ function Transaction({ location }) {
                 number="1"
                 name="Confirm Claim"
                 tick={step >= 2}
+                step={step}
                 clickEvent={e => {
                   e.preventDefault();
                   // setStep(1);
                 }}
               />
-              <div className="flex-auto border-t-2  border-primary-600"></div>
+              <div
+                className={`flex-auto border-t-2 ${
+                  step >= 2 ? 'border-primary-600' : 'border-base-600'
+                }`}
+              ></div>
               <Steppers
                 number="2"
                 name="Transaction"
                 tick={step === 3}
+                step={step}
                 clickEvent={e => {
                   e.preventDefault();
                   // setStep(2);
                 }}
               />
-              <div className="flex-auto border-t-2 border-primary-600"></div>
+              <div
+                className={`flex-auto border-t-2 ${
+                  step == 3 ? 'border-primary-600' : 'border-base-600'
+                }`}
+              ></div>
               <Steppers
                 number="3"
                 name="Finished"
                 tick={step === 3}
+                step={step}
                 clickEvent={e => {
                   e.preventDefault();
                   // setStep(3);