redesign and make more flexible login register system

src/core/components/ResendToken.jsx

@@ -1,10 +1,10 @@
 import Notifications from "@/core/components/notifications";
 import useDirection from "@/lib/app/hooks/useDirection";
-import { Typography } from "@mui/material";
+import { Button, Typography } from "@mui/material";
 import axios from "axios";
 import { useTranslations } from "next-intl";
 import { useEffect } from "react";
-import { LOGIN_SEND_OTP_TOKEN } from "../data/apiRoutes";
+import { SEND_OTP_TOKEN } from "../data/apiRoutes";
 
 const ResendToken = ({ initialTimerValue, timer, setTimer, PhoneNumber }) => {
   const t = useTranslations();
@@ -31,7 +31,7 @@ const ResendToken = ({ initialTimerValue, timer, setTimer, PhoneNumber }) => {
     if (timer != 0) return;
     Notifications(directionApp, t, undefined);
     await axios
-      .post(LOGIN_SEND_OTP_TOKEN, {
+      .post(SEND_OTP_TOKEN, {
         phone_number: PhoneNumber,
       })
       .then(function (response) {
@@ -47,19 +47,23 @@ const ResendToken = ({ initialTimerValue, timer, setTimer, PhoneNumber }) => {
   return (
     <>
       {timer > 0 ? (
-        <Typography variant={"button"} sx={{ textAlign: "center" }}>
-          {t("LoginPage.Resend_code_in")}: {timer}
-          {t("LoginPage.seconds_later")}
-        </Typography>
-      ) : (
-        <Typography
-          variant={"button"}
-          sx={{ cursor: "pointer", textAlign: "center" }}
+        <Button
+          color="success"
+          disabled
+          sx={{ width: "auto", alignSelf: "center", mt: 0 }}
           onClick={handleResendClick}
-          underline="hover"
         >
-          {t("LoginPage.resend_code")}
-        </Typography>
+          {t("Resend_code_in")} {timer} {" "}
+          {t("seconds_later")}
+        </Button>
+      ) : (
+        <Button
+          color="success"
+          sx={{ width: "120px", alignSelf: "center", mt: 0 }}
+          onClick={handleResendClick}
+        >
+          {t("resend_code")}
+        </Button>
       )}
     </>
   );
@@ -67,7 +71,6 @@ const ResendToken = ({ initialTimerValue, timer, setTimer, PhoneNumber }) => {
 
 export default ResendToken;
 
-
 //////****** usage document ******/////////
 // 1.) use <ResendToken /> component inside your page
 // 2.) list of props that you need to send is down below