From d2bb168a5c1d5f45f97532b45e7ede10020b8871 Mon Sep 17 00:00:00 2001
From: deriv <nikita.kolesnik@regentmarkets.com>
Date: Wed, 13 Sep 2023 11:06:06 +0300
Subject: [PATCH] refactor: wizard

---
 src/pages/signup-affiliates/components/wizard/footer.tsx | 8 ++++++--
 src/pages/signup-affiliates/components/wizard/header.tsx | 2 +-
 src/pages/signup-affiliates/components/wizard/index.tsx  | 4 ++--
 src/pages/signup-affiliates/index.tsx                    | 3 ++-
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/pages/signup-affiliates/components/wizard/footer.tsx b/src/pages/signup-affiliates/components/wizard/footer.tsx
index 7fc03b8256c..daeaf0b3e51 100644
--- a/src/pages/signup-affiliates/components/wizard/footer.tsx
+++ b/src/pages/signup-affiliates/components/wizard/footer.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import { WizardProps } from './index'
 import Button from 'components/form/button'
-import { localize } from 'components/localization'
+import { Localize, localize } from 'components/localization'
 
 const StyledFooter = styled.div`
     display: flex;
@@ -59,7 +59,11 @@ const Footer = ({
                 disabled={disabled}
                 onClick={() => (max_step === step ? onSubmit() : buttonHandler(ButtonType.Next))}
             >
-                {max_step === step ? localize('_t_Submit_t_') : localize('_t_Next_t_')}
+                {max_step === step ? (
+                    <Localize translate_text="_t_Submit_t_" />
+                ) : (
+                    <Localize translate_text="_t_Next_t_" />
+                )}
             </Button>
         </StyledFooter>
     )
diff --git a/src/pages/signup-affiliates/components/wizard/header.tsx b/src/pages/signup-affiliates/components/wizard/header.tsx
index b521bc76972..f04a2cf5529 100644
--- a/src/pages/signup-affiliates/components/wizard/header.tsx
+++ b/src/pages/signup-affiliates/components/wizard/header.tsx
@@ -22,7 +22,7 @@ const Title = styled.h2`
     font-size: 16px;
     font-weight: 700;
     padding-top: 4px;
-    color: '#333333';
+    color: var(--color-black-3);
 `
 
 type HeaderProps = {
diff --git a/src/pages/signup-affiliates/components/wizard/index.tsx b/src/pages/signup-affiliates/components/wizard/index.tsx
index 1afe777a99b..5ea3a2b8ef6 100644
--- a/src/pages/signup-affiliates/components/wizard/index.tsx
+++ b/src/pages/signup-affiliates/components/wizard/index.tsx
@@ -94,12 +94,12 @@ const Wizard = ({
                     ))}
                 </Wrapper>
                 <Footer
+                    disabled={!next_btn_enabled}
                     step={step}
-                    setStep={setStep}
                     max_step={children.length}
+                    setStep={setStep}
                     setNextBtnEnabled={setNextBtnEnabled}
                     onSubmit={onSubmit}
-                    disabled={!next_btn_enabled}
                 />
             </Modal>
             <Background />
diff --git a/src/pages/signup-affiliates/index.tsx b/src/pages/signup-affiliates/index.tsx
index d807e8055c1..2e1b6b2bd1b 100644
--- a/src/pages/signup-affiliates/index.tsx
+++ b/src/pages/signup-affiliates/index.tsx
@@ -4,6 +4,7 @@ import AffiliateSignupForm from './components/_signup-form'
 import { isBrowser } from 'common/utility'
 import { WithIntl } from 'components/localization'
 import { Container } from 'components/containers'
+import InitialLoader from 'components/elements/dot-loader'
 import useWS from 'components/hooks/useWS'
 import Link from 'features/components/atoms/link'
 import Image from 'features/components/atoms/image'
@@ -207,7 +208,7 @@ const AffiliateSignup = () => {
                         setAffiliateAccount={setAffiliateAccount}
                         setShowWizard={setShowWizard}
                     />
-                    <Suspense fallback={<div>Loading</div>}>
+                    <Suspense fallback={<InitialLoader />}>
                         {show_wizard && (
                             <WizardComponent
                                 show_wizard={show_wizard}