refactor: wizard

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

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 = {

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 />

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}