reza fixed login and search box

src/components/HomeSearchBox/index.scss

@@ -27,6 +27,18 @@
       }
     }
   }
+  footer{
+    ul{
+      li{
+        cursor: pointer;
+      }
+    }
+    strong{
+      color: #9cdf52;
+      font-weight: 300;
+      margin-left: 20px;
+    }
+  }
 }
 
 @media screen and (min-width: 1441px) {
@@ -39,7 +51,7 @@
     }
     
     form {
-      width: 1000px;
+      width: 900px;
       input {
         font-size: 16px;
         padding-right: 20px;
@@ -55,9 +67,13 @@
         }
       }
     }
-    ul {
-      width: 1000px;
+    footer {
+      width: 900px;
       padding: 10px 0px !important;
+      strong{
+        font-size: 14px;
+      }
+      ul{
         li {
           color: #a2b4cb;
           margin-left: 25px;
@@ -66,6 +82,7 @@
       }
     }
   }
+}
 
 @media screen and (min-width: 1008px) and (max-width: 1440px) {
   .home-search-box {

src/components/HomeSearchBox/index.tsx

@@ -34,34 +34,39 @@ function HomeSearchBox({
           type="submit"
           onClick={() => sortFilter({ search: inputValue, sort: selectedSort })}
         >
-          <img src={search} />
+          <img src={search} alt="" />
         </button>
 
         <img
           className="mobile home-search-box__searchIcon"
           src={search}
           onClick={() => sortFilter({ search: inputValue, sort: selectedSort })}
+          alt=""
         />
 
         <button
           className="home-search-box__voice"
           onClick={() => setVocal(true)}
         >
-          <img src={voice} />
+          <img src={voice} alt="" />
         </button>
       </form>
-
+      <footer className="d-flex">
+        <strong>جدیدترین‌ها</strong>
         <ul className="d-flex">
           {lastItems.map((item: any, i: any) => (
             <li
               key={i}
-            style={{ color: selectedSort === item.name ? "#9CDF52" : "" }}
-            onClick={() => sortFilter({ search: inputValue, sort: item.name })}
+              onClick={() =>
+                // sortFilter({ search: inputValue, sort: item.name })
+                setInputValue(item.name)
+              }
             >
               {item.name}
             </li>
           ))}
         </ul>
+      </footer>
     </section>
   );
 }
@@ -76,12 +81,10 @@ export default connect(
 HomeSearchBox.defaultProps = {
   lastItems: [
     {
-      name: "تمامی دوره‌ها",
-      icon: "",
+      name: "علوم",
     },
     {
-      name: "جدیدترین‌ها",
-      icon: "",
+      name: "ریاضی",
     },
   ],
 };

src/components/Navbar/index.scss

@@ -28,7 +28,7 @@
     }
   }
   &___share{
-    background-color: #46454A;
+    border: 2px solid #46454A;
   }
   &___login{
     background-color: #81C342;

src/components/PrivateRouter/index.js

@@ -6,16 +6,17 @@ const PrivateRouter = ({
   component: Component,
   restricted,
   status,
+  customPage,
   ...rest
 }) => {
   return (
     <Route
       {...rest}
       render={(props) =>
-        status  ? (
+        restricted  ? (
           <Redirect to="/" />
         ) : (
-          <Component {...props} />
+          <Component page={customPage} />
 
         )
       }

src/custom.scss

@@ -1,8 +1,9 @@
 .submit {
   background-color: #4dd35b;
   color: white;
-  border-radius: 10px;
+  border-radius: 6px;
   border: 0px;
+  font-weight: 300;
 }
 
 .mobile,

src/redux/reducers/user.tsx

@@ -1,6 +1,7 @@
 import proxy from "../proxy";
 import { toast } from "react-toastify";
 import { UserAction} from '../actions-type'
+import { error } from "console";
 const initialState = {
   status: proxy.status(),
   loading: false,
@@ -10,6 +11,7 @@ const initialState = {
   mothers: [],
   profileStatus: false,
   setDone: false,
+  setLogin : false, 
 };
 export default function user(state = initialState, action : UserAction) {
   let { type, data } = action;
@@ -26,6 +28,7 @@ export default function user(state = initialState, action : UserAction) {
         loading: false,
         status: data.profile,
         error: null,
+        setLogin: !state.setLogin,
       };
     case "user/getProfile":
       localStorage.setItem("userData", JSON.stringify(data));

src/router.js

@@ -1,9 +1,5 @@
 import "./App.css";
-import {
-  BrowserRouter as Router,
-  Route,
-  Switch,
-} from "react-router-dom";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import { connect } from "react-redux";
 
 import Auth from "./views/Auth";
@@ -15,7 +11,7 @@ import Contact from "./views/Contact";
 import Faq from "./views/Faq";
 import PrivateRouter from "./components/PrivateRouter";
 import Courses from "./views/Courses";
-import About from './views/About';
+import About from "./views/About";
 // import proxy from "./redux/proxy";
 
 function router({ status }) {
@@ -25,8 +21,20 @@ function router({ status }) {
         <Route exact path="/">
           <Home />
         </Route>
-        <PrivateRouter restricted={false} component={Auth} path="/signup" exact />
-        <PrivateRouter restricted={false} component={Auth} path="/login" exact />
+        <PrivateRouter
+          restricted={false}
+          component={Auth}
+          path="/sign-up"
+          exact
+          customPage="signup"
+        />
+        <PrivateRouter
+          restricted={false}
+          component={Auth}
+          path="/login"
+          exact
+          customPage="login"
+        />
         <Route exact path={"/profile"}>
           <Auth page="profile" />
         </Route>
@@ -51,6 +59,9 @@ function router({ status }) {
         <Route exact path={"/faq"}>
           <Faq />
         </Route>
+        {/* <Route exact path={"/login"}>
+          <Auth page="login" />
+        </Route> */}
       </Switch>
     </Router>
   );

src/views/Auth/Login/index.scss

@@ -9,7 +9,7 @@
       color: #84de56;
     }
   }
-  button {
+  button[type="submit"] {
     margin-top: 25px;
     background-color: #84de56;
     color: white;

src/views/Auth/SignUp/index.scss

@@ -12,7 +12,7 @@
     bottom: 0px;
     left: 0px;
   }
-  button {
+  button[type="submit"] {
     margin-top: 25px;
     background-color: #84de56;
     color: white;

src/views/Auth/SignUp/index.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
+import {useHistory} from 'react-router-dom';
 import Navbar from "../../../components/Navbar";
 import Footer from "../../Home/Footer";
 import Timer from "../../../components/Timer";
@@ -17,13 +18,14 @@ interface SignUpFields {
   otp?: String;
 }
 
-function SignUp({ sendOtp, sendPhoneNumber }: any) {
+function SignUp({ sendOtp, sendPhoneNumber, loginFlag }: any) {
   const [level, setLevel] = useState("phonenumber");
   const [signUpFields, setSignUpFiels] = useState<SignUpFields | undefined>(
     undefined
   );
   const [error, setError] = useState<string | undefined>(undefined);
   const [resend, setResend] = useState(false);
+  const history = useHistory();
 
   const onChange = (name: string, value: string) => {
     setSignUpFiels({ ...signUpFields, [name]: value });
@@ -83,6 +85,12 @@ function SignUp({ sendOtp, sendPhoneNumber }: any) {
     }
   }, [level]);
 
+  useEffect(() => {
+    if(loginFlag){
+          history.push('/');
+    }
+  },[loginFlag]);
+
   return (
     <div className="signup d-flex flex-column align-items-center justify-content-center">
       <Navbar />
@@ -171,7 +179,9 @@ function SignUp({ sendOtp, sendPhoneNumber }: any) {
   );
 }
 
-export default connect(() => ({}), {
+export default connect((state : any) => ({
+  loginFlag : state.user.setLogin,
+}), {
   sendOtp: user.otp_login,
   sendPhoneNumber: user.otp,
 })(SignUp);

src/views/Home/Courses/index.tsx

@@ -11,7 +11,7 @@ function Courses({number, courses, selectedSort} : any) {
     if (window.innerWidth >= 1440) {
       return 5;
     } else if (window.innerWidth >= 1008 && window.innerWidth < 1440) {
-      return 5;
+      return 4;
     } else if (window.innerWidth > 640 && window.innerWidth < 1008) {
       return 3;
     } else {

src/views/Subscription/DiscountCode/index.scss

@@ -16,8 +16,8 @@
   }
   input{
     background-color : rgba(255, 255, 255, 0.06);
-    border-top-right-radius: 10px;
-    border-bottom-right-radius: 10px;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
     border: 0px;
     color: #aaa;
     &::placeholder{
@@ -26,9 +26,9 @@
   }
   button{
     background-color : #81C342;
-    border-top-left-radius: 10px;
+    border-top-left-radius: 6px;
     color: white;
-    border-bottom-left-radius: 10px;
+    border-bottom-left-radius: 6px;
     border: none;
   }
 }

src/views/Subscription/SubscribeRadio/index.scss

@@ -4,6 +4,7 @@
   margin-bottom: 15px;
   border-radius: 10px;
   cursor: pointer;
+  transition: all 0.5s;
   &__name{
     border-top-right-radius: 10px;
     border-bottom-right-radius: 10px;
@@ -16,7 +17,6 @@
     border-top-left-radius: 10px;
     border-bottom-left-radius: 10px;
     background-color: rgba(255, 255, 255, 0.18);
-    padding : 10px 20px 10px 0px;
 
     strong, b{
       color: white;
@@ -78,7 +78,6 @@
     }
     &__factor{
       flex: 3;
-      padding-right: 65px;
       &--tag{
         font-size: 11px;
       }
@@ -114,7 +113,6 @@
     }
     &__factor{
       flex: 3;
-      padding-right: 70px;
       &--tag{
         font-size: calc(100vw / 130);
       }

src/views/Subscription/SubscribeRadio/index.tsx

@@ -36,7 +36,7 @@ function SubscribeRadio({ data, selectedVOD, selectVOD }: any) {
         />
         <h2>{data.name}</h2>
       </div>
-      <div className="subscribe-radio__factor d-flex flex-column justify-content-center">
+      <div className="subscribe-radio__factor d-flex flex-column justify-content-center align-items-center">
         {/* {data.offPercent !== 0 && ( */}
           <div className="subscribe-radio__factor--off d-flex align-items-center">
             <b>

src/views/Subscription/index.scss

@@ -19,7 +19,7 @@
         font-size: 24px;
       }
       p{
-        font-size: 16px;
+        font-size: 14px;
       }
     }
   }