From 933bfe27527a6980d160ef2065779e701710c19e Mon Sep 17 00:00:00 2001
From: Jason Chuang <jchuang@2fi-solutions.com.hk>
Date: Fri, 27 Feb 2026 07:48:02 +0800
Subject: [PATCH] update reset button in FormWizard

---
 .../auth-forms/BusCustomFormWizard.js         | 29 ++++++++++++++++---
 .../auth-forms/CustomFormWizard.js            | 25 ++++++++++++++--
 .../auth-forms/IAmSmartFormWizard.js          | 13 +++++++--
 3 files changed, 58 insertions(+), 9 deletions(-)

diff --git a/src/pages/authentication/auth-forms/BusCustomFormWizard.js b/src/pages/authentication/auth-forms/BusCustomFormWizard.js
index 28a3303..01a8c2e 100644
--- a/src/pages/authentication/auth-forms/BusCustomFormWizard.js
+++ b/src/pages/authentication/auth-forms/BusCustomFormWizard.js
@@ -651,9 +651,21 @@ const BusCustomFormWizard = (props) => {
                     <Grid container spacing={3}>
                         <Grid item xs={12} md={12}>
                             <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                <Button variant="outlined" type="reset" onClick={handleReset.bind(null, formik.resetForm)} sx={{ height: '40px' }}><Typography variant="pnspsFormHeader">
+                                <Button
+                                variant="outlined"
+                                type="reset"
+                                onClick={handleReset.bind(null, formik.resetForm)}
+                                sx={{
+                                    height: '40px',
+                                    borderColor: '#616161',
+                                    color: '#424242',
+                                    '&:hover': { borderColor: '#424242', backgroundColor: 'rgba(97,97,97,0.08)' },
+                                }}
+                            >
+                                <Typography variant="pnspsFormHeader">
                                     <FormattedMessage id="reset"/>
-                                </Typography></Button>
+                                </Typography>
+                            </Button>
                                 <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
                                     <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>
                                         <FormattedMessage id="becomeNewBusinessUser"/>
@@ -1599,8 +1611,17 @@ const BusCustomFormWizard = (props) => {
                                                 {formik.errors.captchaField}
                                             </FormHelperText>
                                         )}
-                                        <Stack spacing={1} direction="row">
-                                            <Button onClick={playCaptchaAudio} aria-label={intl.formatMessage({id:"captchaPlayAudioAria"})}>
+                                        <Stack spacing={1} direction="row" sx={{ mt: 0.25 }}>
+                                            <Button
+                                                variant="contained"
+                                                onClick={playCaptchaAudio}
+                                                aria-label={intl.formatMessage({ id: "captchaPlayAudioAria" })}
+                                                sx={{
+                                                    backgroundColor: '#0C489E',
+                                                    color: '#FFFFFF',
+                                                    '&:hover': { backgroundColor: '#093A7A' },
+                                                }}
+                                            >
                                                 <FormattedMessage id="captchaPlayAudio" />
                                             </Button>
                                         </Stack>
diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js
index f423115..f63cd57 100644
--- a/src/pages/authentication/auth-forms/CustomFormWizard.js
+++ b/src/pages/authentication/auth-forms/CustomFormWizard.js
@@ -881,7 +881,17 @@ const CustomFormWizard = (props) => {
                     <Grid container spacing={3}>
                         <Grid item xs={12} md={12}>
                             <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                <Button variant="outlined" type="reset" onClick={handleReset.bind(null, formik.resetForm)} sx={{ height: '40px' }}>
+                                <Button
+                                    variant="outlined"
+                                    type="reset"
+                                    onClick={handleReset.bind(null, formik.resetForm)}
+                                    sx={{
+                                        height: '40px',
+                                        borderColor: '#616161',
+                                        color: '#424242',
+                                        '&:hover': { borderColor: '#424242', backgroundColor: 'rgba(97,97,97,0.08)' },
+                                    }}
+                                >
                                     <Typography variant="pnspsFormHeader">
                                         <FormattedMessage id="reset" />
                                     </Typography>
@@ -1938,8 +1948,17 @@ const CustomFormWizard = (props) => {
                                                 {formik.errors.captchaField}
                                             </FormHelperText>
                                         )}
-                                        <Stack spacing={1} direction="row">
-                                            <Button onClick={playCaptchaAudio} aria-label={intl.formatMessage({id:"captchaPlayAudioAria"})}>
+                                        <Stack spacing={1} direction="row" sx={{ mt: 0.25 }}>
+                                            <Button
+                                                variant="contained"
+                                                onClick={playCaptchaAudio}
+                                                aria-label={intl.formatMessage({ id: "captchaPlayAudioAria" })}
+                                                sx={{
+                                                    backgroundColor: '#0C489E',
+                                                    color: '#FFFFFF',
+                                                    '&:hover': { backgroundColor: '#093A7A' },
+                                                }}
+                                            >
                                                 <FormattedMessage id="captchaPlayAudio" />
                                             </Button>
                                         </Stack>
diff --git a/src/pages/authentication/auth-forms/IAmSmartFormWizard.js b/src/pages/authentication/auth-forms/IAmSmartFormWizard.js
index d0a9a14..9159f75 100644
--- a/src/pages/authentication/auth-forms/IAmSmartFormWizard.js
+++ b/src/pages/authentication/auth-forms/IAmSmartFormWizard.js
@@ -1062,8 +1062,17 @@ const CustomFormWizard = (props) => {
                                                     {formik.errors.captchaField}
                                                 </FormHelperText>
                                             )}
-                                            <Stack spacing={1} direction="row">
-                                                <Button onClick={playCaptchaAudio} aria-label={intl.formatMessage({id:"captchaPlayAudioAria"})}>
+                                            <Stack spacing={1} direction="row" sx={{ mt: 0.25 }}>
+                                                <Button
+                                                    variant="contained"
+                                                    onClick={playCaptchaAudio}
+                                                    aria-label={intl.formatMessage({ id: "captchaPlayAudioAria" })}
+                                                    sx={{
+                                                        backgroundColor: '#0C489E',
+                                                        color: '#FFFFFF',
+                                                        '&:hover': { backgroundColor: '#093A7A' },
+                                                    }}
+                                                >
                                                     <FormattedMessage id="captchaPlayAudio" />
                                                 </Button>
                                             </Stack>