update src/components/Navbar/index.js and src/views/Auth/SignUp/index.js

master
Reza_ashrafi 3 years ago
parent a8d24bf965
commit 3979d86209
  1. 13
      src/components/Navbar/index.js
  2. 43
      src/views/Auth/SignUp/index.js

@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { Link, useNavigate, NavLink } from "react-router-dom";
import { connect } from "react-redux";
import { userProduct, userFavorite } from "../../redux/actions";
import location from "../../utils/location";
@ -99,7 +99,6 @@ function Navbar({
/>
</>
)}
{!title && back ? (
<img
src={isDark ? arrowWhiteIcon : arrowBlueIcon}
@ -222,12 +221,16 @@ function Navbar({
<ul className="flex flex-row list-none items-center relative top-0.5 mr-6">
{pages.map((page, index) => (
<li key={index}>
<Link
<NavLink
to={page.link}
className="text-tiny font-semibold text-green7B py-2 px-4 mx-4"
className="text-tiny py-2 px-4 mx-4"
style={({ isActive }) => ({
color: isActive ? "rgb(19, 123, 79)" : "#202020",
fontWeight: isActive ? "700" : "200",
})}
>
{page.name}
</Link>
</NavLink>
</li>
))}
</ul>

@ -23,6 +23,7 @@ function SignUp({
loading,
level,
setLevel,
isMobile,
}) {
const [signUpFields, setSignUpFiels] = useState({});
const [error, setError] = useState("");
@ -105,18 +106,21 @@ function SignUp({
}
};
const numberInput = useRef();
useEffect(() => {
// numberInput.current.focus();
setHeaderOptions(headerOptions);
}, []);
useEffect(() => {
if (signUpFields?.otp?.length === 4) {
if (
signUpFields?.otp1 &&
signUpFields?.otp2 &&
signUpFields?.otp3 &&
signUpFields?.otp4
) {
sendOtp({
cellphone: signUpFields?.cellphone,
otp: signUpFields?.otp,
otp: signUpFields?.otp1 + signUpFields?.otp2 + signUpFields?.otp3 + signUpFields?.otp4,
userToken: "2",
applicationToken: "22",
});
@ -137,8 +141,6 @@ function SignUp({
}
}, [loginFlag]);
const light = theme === "light";
return (
<div
className="w-screen overflow-x-hidden flex flex-row transform relative"
@ -153,13 +155,13 @@ function SignUp({
<img src={arrowIcon} className="transform rotate-90" alt="" />
</button>
<div
className={`flex flex-col items-center justify-between h-full w-full px-4 pt-16 transition transform duration-300 absolute top-0 left-0 ${
className={`flex flex-col items-center lg:pb-8 justify-between h-full w-full px-4 pt-16 lg:pt-16 transition transform duration-300 absolute top-0 left-0 ${
level === "phonenumber" ? "translate-x-0" : "-translate-x-full"
}`}
>
<div className="w-full flex flex-col items-center gap-6">
<img src={logoIcon} alt="" className="w-1/5" />
<p className="text-lg align-start">
<img src={logoIcon} alt="" className="w-1/5 lg:w-1/6" />
<p className="text-lg lg:text-base align-start">
{window.t("سلام به ")}
<span className="font-bold text-blueC0">
{window.t(" دانوین خوش ")}
@ -168,7 +170,7 @@ function SignUp({
</p>
</div>
<div className="w-full flex flex-col">
<p className="text-base mt-4">
<p className="text-base lg:text-sm mt-4">
{window.t(
" لطفا جهت ورود یا ثبت نام شماره همراه خود را وارد نمایید."
)}
@ -198,7 +200,7 @@ function SignUp({
</div>
</div>
<div
className={`flex flex-col items-center justify-between w-full h-full px-4 pt-16 transition transform duration-300 absolute top-0 left-0 ${
className={`flex flex-col items-center justify-between w-full lg:pb-8 h-full px-4 pt-16 transition transform duration-300 absolute top-0 left-0 ${
level === "otp" ? "translate-x-0" : "translate-x-full"
}`}
>
@ -218,13 +220,13 @@ function SignUp({
</div>
<div className="w-full flex flex-col">
<div className="w-full flex flex-row-reverse justify-center">
<div className="w-full flex flex-row-reverse justify-between">
<input
inputMode="numeric"
style={{
direction: "ltr",
width: "calc(100% / 4)",
height: "calc((100vw - 32px) / 4.1)",
width: isMobile ? "calc(100% / 4)" : "70px",
height: isMobile ? "calc((100vw - 32px) / 4.1)" : "70px",
}}
name="otp1"
className="bg-grayF9 dark:bg-opacity-10 outline-none rounded-md text-2xl font-bold lg:text-lg text-center text-blueC0 mx-1"
@ -241,8 +243,8 @@ function SignUp({
inputMode="numeric"
style={{
direction: "ltr",
width: "calc(100% / 4)",
height: "calc((100vw - 32px) / 4.1)",
width: isMobile ? "calc(100% / 4)" : "70px",
height: isMobile ? "calc((100vw - 32px) / 4.1)" : "70px",
}}
name="otp2"
className="bg-grayF9 dark:bg-opacity-10 outline-none rounded-md text-2xl font-bold lg:text-lg text-center text-blueC0 mx-1"
@ -259,8 +261,8 @@ function SignUp({
inputMode="numeric"
style={{
direction: "ltr",
width: "calc(100% / 4)",
height: "calc((100vw - 32px) / 4.1)",
width: isMobile ? "calc(100% / 4)" : "70px",
height: isMobile ? "calc((100vw - 32px) / 4.1)" : "70px",
}}
name="otp3"
className="bg-grayF9 dark:bg-opacity-10 outline-none rounded-md text-2xl font-bold lg:text-lg text-center text-blueC0 mx-1"
@ -277,8 +279,8 @@ function SignUp({
inputMode="numeric"
style={{
direction: "ltr",
width: "calc(100% / 4)",
height: "calc((100vw - 32px) / 4.1)",
width: isMobile ? "calc(100% / 4)" : "70px",
height: isMobile ? "calc((100vw - 32px) / 4.1)" : "70px",
}}
name="otp4"
className="bg-grayF9 dark:bg-opacity-10 outline-none rounded-md text-2xl font-bold lg:text-lg text-center text-blueC0 mx-1"
@ -326,6 +328,7 @@ function SignUp({
const mapStateToProps = (state) => ({
loginFlag: state.user.status,
loading: state.user.loading,
isMobile: state.publicApi.isMobile,
});
const mapDispatchToProps = {

Loading…
Cancel
Save