fix: recent timer button removed

src/features/authentication/components/AuthenticationSteps/OtpVerifyForm.tsx

@@ -213,20 +213,28 @@ export function OtpVerifyForm({
         sx={{
           justifyContent: 'center',
           alignItems: 'center',
-          mt: 1.5,
+          mt: 2.5,
         }}
       >
         <Typography variant="body1">{t('verify.resendCodeIn')}</Typography>
 
-        <Button
+        <Typography
-          variant="text"
+          variant="body1"
-          loading={smsResendLoading || emailResendLoading}
+          sx={{ color: 'primary.main', marginInlineStart: 1 }}
-          sx={{ width: 'auto' }}
-          onClick={canResend ? handleResendOTPCode : undefined}
         >
-          {canResend && t('verify.resendCode')}
           {!canResend && `${formatTime(resendTimer)} ${t('verify.moreMinute')}`}
-        </Button>
+        </Typography>
+
+        {canResend && (
+          <Button
+            variant="text"
+            loading={smsResendLoading || emailResendLoading}
+            sx={{ width: 'auto', p: 0 }}
+            onClick={canResend ? handleResendOTPCode : undefined}
+          >
+            {t('verify.resendCode')}
+          </Button>
+        )}
       </Stack>
     </Stack>
   );

src/features/authentication/components/AuthenticationSteps/VerifyPhoneNumber.tsx

@@ -140,20 +140,28 @@ export function VerifyPhoneNumber({
         sx={{
           justifyContent: 'center',
           alignItems: 'center',
-          mt: 1.5,
+          mt: 2.5,
         }}
       >
         <Typography variant="body1">{t('verify.resendCodeIn')}</Typography>
 
-        <Button
+        <Typography
-          variant="text"
+          variant="body1"
-          loading={smsResendLoading}
+          sx={{ color: 'primary.main', marginInlineStart: 1 }}
-          sx={{ width: 'auto' }}
-          onClick={canResend ? handleResendOTPCode : undefined}
         >
-          {canResend && t('verify.resendCode')}
           {!canResend && `${formatTime(resendTimer)} ${t('verify.moreMinute')}`}
-        </Button>
+        </Typography>
+
+        {canResend && (
+          <Button
+            variant="text"
+            loading={smsResendLoading}
+            sx={{ width: 'auto', p: 0 }}
+            onClick={canResend ? handleResendOTPCode : undefined}
+          >
+            {t('verify.resendCode')}
+          </Button>
+        )}
       </Stack>
     </Stack>
   );

src/features/authentication/components/ForgetPassword/ForgetPasswordOtp.tsx

@@ -171,20 +171,28 @@ export function ForgetPasswordOtp({
         sx={{
           justifyContent: 'center',
           alignItems: 'center',
-          mt: 1.5,
+          mt: 2.5,
         }}
       >
         <Typography variant="body1">{t('verify.resendCodeIn')}</Typography>
 
-        <Button
+        <Typography
-          variant="text"
+          variant="body1"
-          loading={sendForgetPassCodeLoading}
+          sx={{ color: 'primary.main', marginInlineStart: 1 }}
-          sx={{ width: 'auto' }}
-          onClick={canResend ? handleResendOTPCode : undefined}
         >
-          {canResend && t('verify.resendCode')}
           {!canResend && `${formatTime(resendTimer)} ${t('verify.moreMinute')}`}
-        </Button>
+        </Typography>
+
+        {canResend && (
+          <Button
+            variant="text"
+            loading={sendForgetPassCodeLoading}
+            sx={{ width: 'auto', p: 0 }}
+            onClick={canResend ? handleResendOTPCode : undefined}
+          >
+            {t('verify.resendCode')}
+          </Button>
+        )}
       </Stack>
     </Stack>
   );