change style & add space & validation number in register page

app/component/element/Field.js

@@ -1,16 +1,21 @@
 import { TextField } from "@mui/material";
 import { styleTextSelectRight } from "@/mui";
 
-function Field({ title, type, dir, value, updateState }) {
+function Field({ title, error, inputProps, type, dir, value, updateState }) {
   return (
     <TextField
       label={title}
+      error={error}
       dir={dir || "rtl"}
       type={type || "text"}
       value={value}
       onChange={(e) => updateState(e.target.value)}
       className="!w-full !mx-auto !bg-[#FFF]"
+      InputProps={inputProps}
       sx={{
+        '.MuiOutlinedInput-notchedOutline.muirtl-1d3z3hw-MuiOutlinedInput-notchedOutline': {
+          border: error && '1px solid red !important'
+        },
         ...styleTextSelectRight,
         // Hide Icon Number
         "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
@@ -20,8 +25,7 @@ function Field({ title, type, dir, value, updateState }) {
         "& input[type=number]": {
           MozAppearance: "textfield",
         },
-        // "& .MuiFormLabel-root": { top: "-7px !important" },
-        "& .MuiInputBase-input": { padding: "12.5px 14px" },
+        "& .MuiInputBase-input": { padding: "12.5px 0" },
         "& .MuiInputBase-root": { borderRadius: "6px !important" },
         "& .MuiOutlinedInput-notchedOutline": {
           border: "1px solid #E9ECEF !important",