enhnace login styles on desktop and tablet screens

src/pages/otp/otp.module.css

@@ -1,3 +1,93 @@
+/* OTP Page Styles */
+.otpPage {
+  background-color: var(--secondary-background);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  height: 100vh;
+}
+
+:global(.darkApp) .otpPage {
+  background-color: var(--background);
+}
+
+.otpWrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.otpContainer {
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+}
+
+.otpContent {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.otpTitle {
+  margin: 0;
+}
+
+.otpInputContainer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.otpButton {
+  width: 100%;
+  height: 48px;
+  margin-bottom: 16px;
+  color: white;
+  border: none;
+  box-shadow: none;
+}
+
+/* Tablet devices (min-width: 769px and max-width: 1024px) */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .otpPage {
+    padding: 24px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .otpWrapper {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .otpContainer {
+    max-width: 500px;
+    width: 100%;
+    background-color: var(--background);
+    padding: 48px 40px;
+    border-radius: 24px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    margin: 0 auto;
+  }
+}
+
+:global(.darkApp) .otpContainer {
+  background-color: var(--secondary-background);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
 .productContainer :global(.ant-radio-wrapper:last-child) {
   width: 100% !important;
 }

src/pages/otp/page.tsx

@@ -1,4 +1,4 @@
-import { Button, Space, message } from "antd";
+import { Button, Layout, Space, message } from "antd";
 import OtpIcon from "components/Icons/otpIcon.tsx";
 import OtpInput from "components/OtpInput/OtpInput";
 import ProText from "components/ProText";
@@ -10,6 +10,9 @@ import { useNavigate, useParams } from "react-router-dom";
 import { useConfirmOtpMutation, useSendOtpMutation } from "redux/api/auth";
 import { useAppDispatch } from "redux/hooks";
 import { ProGray1 } from "ThemeConstants";
+import styles from "./otp.module.css";
+import ProHeader from "components/ProHeader/ProHeader";
+import useBreakPoint from "hooks/useBreakPoint";
 
 export default function OtpPage() {
   const { subdomain } = useParams();
@@ -18,6 +21,7 @@ export default function OtpPage() {
   const [sendOtp, { isLoading }] = useSendOtpMutation();
   const [confirmOtp, { isLoading: isConfirmLoading }] = useConfirmOtpMutation();
   const [otp, setOtp] = useState<string>("");
+  const { isTablet } = useBreakPoint();
   const handleOtpSave = (otp: string) => {
     try {
       setOtp(otp);
@@ -28,70 +32,61 @@ export default function OtpPage() {
   const navigate = useNavigate();
 
   return (
-    <>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
-          padding: 16,
-          gap: 24,
-          height: "92vh",
-        }}
-      >
-        <OtpIcon />
+    <Layout className={styles.otpPage}>
+      {isTablet ? <ProHeader>{t("otp.verification")}</ProHeader> : null}
 
-        <div>
-          <ProTitle level={4}>{t("otp.verification")}</ProTitle>
-          <ProText style={{ color: ProGray1 }}>
-            {t("otp.enterThe4DigitCodeThatSentToYourPhoneNumber")}
-          </ProText>
-          <br />
-          <ProText style={{ color: ProGray1 }}>
-            {localStorage.getItem("otp")}
-          </ProText>
+      <Layout.Content className={styles.otpWrapper}>
+        <div className={styles.otpContainer}>
+          <OtpIcon />
+
+          <div className={styles.otpContent}>
+            <ProTitle level={4} className={styles.otpTitle}>
+              {t("otp.verification")}
+            </ProTitle>
+            <ProText style={{ color: ProGray1 }}>
+              {t("otp.enterThe4DigitCodeThatSentToYourPhoneNumber")}
+            </ProText>
+            <br />
+            <ProText style={{ color: ProGray1 }}>
+              {localStorage.getItem("otp")}
+            </ProText>
+          </div>
+          <div className={styles.otpInputContainer}>
+            <Space size="small">
+              <OtpInput
+                length={5}
+                onComplete={handleOtpSave}
+                resendOtp={() =>
+                  sendOtp({
+                    phone: localStorage.getItem("userPhone") || "",
+                  })
+                }
+                isLoading={isLoading || isConfirmLoading}
+              />
+            </Space>
+          </div>
+          <Button
+            type="primary"
+            shape="round"
+            className={styles.otpButton}
+            disabled={!otp || otp.length < 5 || isConfirmLoading}
+            onClick={() => {
+              confirmOtp({
+                otp: otp,
+                phone: localStorage.getItem("userPhone"),
+              })
+                .unwrap()
+                .then((response) => {
+                  dispatch(loginSuccess(response));
+                  message.info(t("otp.confirmOTPSuccess"));
+                  navigate(`/${subdomain}/menu`);
+                });
+            }}
+          >
+            {t("otp.continue")}
+          </Button>
         </div>
-        <div>
-          <Space size="small">
-            <OtpInput
-              length={5}
-              onComplete={handleOtpSave}
-              resendOtp={() =>
-                sendOtp({
-                  phone: localStorage.getItem("userPhone") || "",
-                })
-              }
-              isLoading={isLoading || isConfirmLoading}
-            />
-          </Space>
-        </div>
-        <Button
-          type="primary"
-          shape="round"
-          style={{
-            width: "100%",
-            height: 48,
-            marginBottom: 16,
-            color: "white",
-            border: "none",
-            boxShadow: "none",
-          }}
-          disabled={!otp || otp.length < 5 || isConfirmLoading}
-          onClick={() => {
-            confirmOtp({ otp: otp, phone: localStorage.getItem("userPhone") })
-              .unwrap()
-              .then((response) => {
-                dispatch(loginSuccess(response));
-                message.info(t("otp.confirmOTPSuccess"));
-                navigate(`/${subdomain}/menu`);
-              });
-          }}
-        >
-          {t("otp.continue")}
-        </Button>
-      </div>
-    </>
+      </Layout.Content>
+    </Layout>
   );
 }