change design modal & components & home and login page

app/component/element/AutoCompleteSelect.js

@@ -25,6 +25,12 @@ function AutoCompleteSelect({ list, isError, updateData, name, label }) {
         "& .MuiInputBase-root": {
           borderRadius: 2,
           padding: "0 !important",
+          height: {
+            xs: "43px !important",
+            sm: "43px !important",
+            md: "46px !important",
+            lg: "48px !important",
+          },
         },
         "& .MuiOutlinedInput-notchedOutline": {
           border: "1px solid #D7D7D7",

app/component/element/Field.js

@@ -1,11 +1,16 @@
 import { TextField } from "@mui/material";
 import { styleTextSelectRight } from "@/mui";
 
-function Field({ title, type, isPlaceHolder }) {
+function Field({
+  title,
+  type,
+  dir,
+  // isPlaceHolder
+}) {
   return (
     <TextField
       label={title}
-      dir="rtl"
+      dir={dir || "rtl"}
       type={type || "text"}
       className="!w-full !mx-auto !bg-[#FFF]"
       sx={{
@@ -18,7 +23,7 @@ function Field({ title, type, isPlaceHolder }) {
         "& input[type=number]": {
           MozAppearance: "textfield",
         },
-        "& .MuiFormLabel-root": { top: "-7px !important" },
+        // "& .MuiFormLabel-root": { top: "-7px !important" },
         "& .MuiInputBase-input": { padding: "12.5px 14px" },
         "& .MuiInputBase-root": { borderRadius: "6px !important" },
         "& .MuiOutlinedInput-notchedOutline": {
@@ -26,7 +31,7 @@ function Field({ title, type, isPlaceHolder }) {
         },
         ".Mui-focused": {
           "& .MuiOutlinedInput-notchedOutline": {
-            border: "1px solid #0FA1B3 !important",
+            border: "1px solid #5559CE !important",
             transition: "0.5s all",
           },
         },

app/globals.css

@@ -285,6 +285,10 @@ html {
     padding-top: 10px;
     padding-bottom: 10px;
   }
+
+  .MuiModal-root div:nth-child(3) {
+    border-radius: 0 !important;
+  }
 }
 
 /* Hidden Scroll */

components/home/index.js

@@ -8,7 +8,7 @@ import FrequentSearches from "./FrequentSearches";
 function HomePage() {
   return (
     <div className="bg-banner-home after:z-[2] !bg-bottom !bg-no-repeat !bg-cover md:!min-h-[115vh]">
-      <div className="padding-responsive z-20 min-h-screen py-[120px] flex items-center justify-center flex-col gap-[50px]">
+      <div className="padding-responsive z-20 min-h-screen py-[120px] flex items-center justify-center flex-col gap-[40px]">
         <div className="">
           <p className="text-[#F17732] text-center font-kalame text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-bold">
             با نوبت724

components/home/search/index.js

@@ -9,7 +9,7 @@ function SearchBar() {
       variant="contained"
       className="
             !py-[4px] sm:!py-[7px] md:!py-[10px] lg:!py-[12px] !gap-3
-            !px-[4px] sm:!px-[8px] md:!px-[12px] lg:!px-[16px] !mt-[50px]
+            !px-[4px] sm:!px-[8px] md:!px-[12px] lg:!px-[16px] !mt-[22px] sm:!mt-[34px] md:!mt-[46px] lg:!mt-[60px]
             !bg-[#FAFAFA] !transition-all !duration-500 !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full lg:w-fit
             "
     >

components/register/LogInPage.js

@@ -15,7 +15,7 @@ function LogInPage({ setIsSendMsg, setStep }) {
         شماره همراه خود را وارد نمایید.
       </p>
       <div className="mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px] mb-[40px] sm:mb-[37px] md:mb-[36px] lg:mb-[32px]">
-        <Field type="number" title="شماره همراه" />
+        <Field type="number" title="شماره همراه" dir="ltr" />
       </div>
       <Button
         fullWidth

components/register/SetCodePage.js

@@ -54,7 +54,7 @@ function SetCodePage({ setIsSendMsg, link, setStep }) {
       </p>
       <div className="mt-[26px] sm:mt-[28px] md:mt-[30px] lg:mt-[32px] mb-[56px] sm:mb-[47px] md:mb-[38px] lg:mb-[30px]">
         <div
-          className="w-full mb-[27px] flex items-center justify-center gap-2 sm:gap-6"
+          className="w-full mb-[27px] flex items-center justify-center gap-6 sm:gap-6"
           dir="ltr"
         >
           <OTPForm handleOTP={handleOTP} />

components/register/element/OTPForm.js

@@ -6,6 +6,7 @@ function OTPForm({ handleOTP }) {
   return (
     <input
       value={code}
+      type="number"
       onChange={(e) => {
         const value = e.target.value;
 

components/register/index.js

@@ -6,7 +6,7 @@ const about = ["سوالات متداول", "تماس با ما", "درباره
 function RegisterPage({ children }) {
   return (
     <div
-      className="flex padding-responsive items-center justify-start sm:justify-start pt-[32px] 
+      className="flex padding-responsive items-center justify-center pt-[32px] 
         overflow-auto flex-col h-screen w-full bg-banner-stroke !bg-bottom !bg-no-repeat !bg-cover
         !pb-[calc(108px_+_40px)] md:!pb-[calc(111px_+_40px)]"
     >