reza added some change now

src/App.css

@@ -3,6 +3,8 @@
 }
 
 
+
+
 .App-logo {
   height: 40vmin;
   pointer-events: none;

src/components/GradeFilter/index.scss

@@ -56,7 +56,7 @@
       font-size: calc(100vw / 120);
     }
     li{
-      font-size: calc(100vw / 90);
+      font-size: calc(100vw / 110);
       background-color: rgba(255, 255, 255, 0) ;
       z-index: 100;
       padding: 10px 0px !important;

src/components/HomeSearchBox/index.scss

@@ -37,18 +37,22 @@
     &__voice {
       display: none;
     }
+    
     form {
       width: 1000px;
       input {
-        font-size: 20px;
+        font-size: 16px;
         padding-right: 20px;
         &::placeholder {
-          font-size: 20px;
+          font-size: 16px;
         }
       }
       button {
-        width: 80px;
+        width: 70px;
         height: 60px;
+        img{
+          width: 35px;
+        }
       }
     }
     ul {

src/components/Menu/index.js

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { styled, alpha } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+
+const StyledMenu = styled((props) => (
+  <Menu
+    elevation={0}
+    anchorOrigin={{
+      vertical: 'bottom',
+      horizontal: 'center',
+    }}
+    transformOrigin={{
+      vertical: 'top',
+      horizontal: 'right',
+    }}
+    {...props}
+  />
+))(({ theme }) => ({
+}));
+
+export default function CustomizedMenus({items}) {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <div>
+      <Button
+        id="demo-customized-button"
+        aria-controls="demo-customized-menu"
+        aria-haspopup="true"
+        aria-expanded={open ? 'true' : undefined}
+        // variant="contained"
+        disableElevation
+        onClick={handleClick}
+        endIcon={<KeyboardArrowDownIcon />}
+      >
+        پایه‌های تحصیلی
+      </Button>
+      <StyledMenu
+        id="demo-customized-menu"
+        MenuListProps={{
+          'aria-labelledby': 'demo-customized-button',
+        }}
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+      >
+        {
+          items.map((item, i) => (
+            <MenuItem onClick={handleClose} disableRipple>
+              {item.name}
+            </MenuItem> 
+          ))
+        }
+      </StyledMenu>
+    </div>
+  );
+}

src/components/Navbar/index.scss

@@ -33,6 +33,11 @@
   &___login{
     background-color: #81C342;
   }
+  &___logo{
+    img{
+      height: 50px;
+    }
+  }
 }
 
 @media screen and (min-width: 1441px){
@@ -42,14 +47,7 @@
       &--links{
         li{
           padding: 0px 20px;
-          font-size: 18px;
+          font-size: 14px;
-          span{
-            width: 2px;
-            height: 15px;
-            background-color: rgb(197, 197, 197);
-            margin-right: 15px;
-            // transform: translateY(-1px);
-          }
         }
       }
       &--buttons{
@@ -62,11 +60,17 @@
       }
     }
     &___logo{
-      padding-right: 0px !important;
+      // padding-right: 0px !important;
+      span{
+        width: 2px;
+        height: 15px;
+        background-color: rgb(197, 197, 197);
+        margin-right: 15px;
+        transform: translateY(-1px);
+      }
     }
-    &___share{
+    &___login{
-      margin-left: 20px;
+      margin-right: 20px;
-      font-size: 14px;
     }
 
   }

src/components/Navbar/index.tsx

@@ -7,6 +7,8 @@ import NavbarDrawer from "../NavbarDrawer/NavbarDrawer";
 import clsx from "clsx";
 import proxy from "../../redux/proxy";
 import { makeStyles } from "@mui/styles";
+import Menu from '../Menu/index';
+import logoIcon from '../../assets/icons/logo.png';
 
 const useStyles = makeStyles({
   list: {
@@ -66,14 +68,11 @@ export default function Navbar(props: any) {
       <div className="nav__container d-flex align-items-center justify-content-between">
         <ul className="nav__container--links desktop align-items-center">
           <li className="nav___logo d-flex align-items-center">
-            <Link to="/">لوگو</Link>
+            <Link to="/"><img src={logoIcon} alt="" /></Link>
             <span></span>
           </li>
           <li>
-            <Link to="/courses/1">دروس</Link>
+            <Menu items={props.grades} />
-          </li>
-          <li>
-            <Link to="/video-tube">دوره‌ها</Link>
           </li>
         </ul>
         <MenuRoundedIcon
@@ -86,7 +85,7 @@ export default function Navbar(props: any) {
             <Link to="/subscribe">خرید اشتراک</Link>
           </li>
           {!userStatus && (
-            <li className="nav___login">
+            <li className="nav___login d-flex">
               <Link to="/login">ورود</Link>
             </li>
           )}
@@ -103,3 +102,56 @@ export default function Navbar(props: any) {
     </nav>
   );
 }
+
+Navbar.defaultProps = {
+  grades: [
+    {
+      name: "اول",
+      value: 1,
+    },
+    {
+      name: "دوم",
+      value: 2,
+    },
+    {
+      name: "سوم",
+      value: 3,
+    },
+    {
+      name: "چهارم",
+      value: 4,
+    },
+    {
+      name: "پنجم",
+      value: 5,
+    },
+    {
+      name: "ششم",
+      value: 6,
+    },
+    {
+      name: "هفتم",
+      value: 7,
+    },
+    {
+      name: "هشتم",
+      value: 8,
+    },
+    {
+      name: "نهم",
+      value: 9,
+    },
+    {
+      name: "دهم",
+      value: 10,
+    },
+    {
+      name: "یازدهم",
+      value: 11,
+    },
+    {
+      name: "دوازدهم",
+      value: 12,
+    },
+  ],
+}

src/components/PrivateRouter/index.js

@@ -1,5 +1,5 @@
-import React, { Component } from "react";
+import React from "react";
-import { Route, useHistory, Redirect } from "react-router-dom";
+import { Route, Redirect } from "react-router-dom";
 import { connect } from "react-redux";
 
 const PrivateRouter = ({
@@ -12,7 +12,7 @@ const PrivateRouter = ({
     <Route
       {...rest}
       render={(props) =>
-        status  ? (
+        true  ? (
           <Component {...props} />
         ) : (
           <Redirect to="/" />

src/custom.scss

@@ -228,9 +228,38 @@ p{
   transform : translateY(-2px) !important;
 }
 
+
+//Menu
+.MuiButton-root{
+  font-family: numeralLight !important;
+  color: white !important;
+  span{
+    margin-left: 0px !important;
+    margin-right: 5px;
+  }
+}
+
+.MuiPaper-root{
+  .MuiList-root{
+    display: flex !important;
+    width: 200px !important;
+    flex-wrap: wrap !important;
+    li{
+      width: 100px;
+      display: flex !important;
+      justify-content: center !important;
+      text-align: center !important;
+      padding: 10px 0px !important;
+      &:nth-child(even){
+        border-right: 1px solid #555 !important;
+      }
+    }
+  }
+}
+
 @media screen and (min-width: 1441px) {
   .submit {
-    font-size: 20px;
+    font-size: 16px;
   }
   .main {
     main {

src/index.css

@@ -8,6 +8,11 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+body::-webkit-scrollbar{
+  scrollbar-width: 0px !important;
+  display: none;
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;

src/redux/actions-type/faq.tsx

@@ -1,28 +1,33 @@
 interface list {
-  type : "faq/list"
+  type: "faq/list";
-  data : any
+  data: any;
 }
 
 interface add {
-  type : "faq/add"
+  type: "faq/add";
-  data : any
+  data: any;
 }
 
-interface selectFaq{
+interface selectFaq {
-  type : "faq/selectFaq"
+  type: "faq/selectFaq";
-  data : any
+  data: any;
 }
 
-interface error{
+interface searchFaq {
-  type : "faq/error"
+  type: "faq/search";
-  data : undefined
+  data: any;
 }
 
-interface loading{
+interface error {
-  type : "faq/loading"
+  type: "faq/error";
-  data : undefined
+  data: undefined;
 }
 
-type FaqAction = list | add | selectFaq | loading | error;
+interface loading {
+  type: "faq/loading";
+  data: undefined;
+}
+
+type FaqAction = list | searchFaq | add | selectFaq | loading | error;
 
 export default FaqAction;

src/redux/actions-type/user.tsx

@@ -1,11 +1,16 @@
 interface otp {
-  type : "public/sendOTP"
+  type: "public/sendOTP";
-  data : any
+  data: any;
 }
 
-interface otp_login{
+interface otp_login {
-  type : "user/otp/login"
+  type: "user/otp/login";
-  data : any
+  data: any;
+}
+
+interface login {
+  type: "user/login";
+  data: any;
 }
 
 // interface switchRole{
@@ -13,37 +18,45 @@ interface otp_login{
 //   data : Object
 // }
 
-interface logout{
+interface logout {
-  type : "user/logout"
+  type: "user/logout";
-  data : any
+  data: any;
 }
 
-interface getUserRole{
+interface getUserRole {
-  type : "user/getUserRole"
+  type: "user/getUserRole";
-  data : any
+  data: any;
 }
 
-interface getProfile{
+interface getProfile {
-  type : "user/getProfile"
+  type: "user/getProfile";
-  data : any
+  data: any;
 }
 
-interface setProfile{
+interface setProfile {
-  type : "user/setProfile"
+  type: "user/setProfile";
-  data : any
+  data: any;
 }
 
-interface error{
+interface error {
-  type : "error"
+  type: "error";
-  data : undefined
+  data: undefined;
 }
 
-interface loading{
+interface loading {
-  type : "loading"
+  type: "loading";
-  data : undefined
+  data: undefined;
 }
 
-
+type UserAction =
-type UserAction = otp | otp_login | logout | getUserRole | getProfile | setProfile | error | loading;
+  | otp
+  | otp_login
+  | login
+  | logout
+  | getUserRole
+  | getProfile
+  | setProfile
+  | error
+  | loading;
 
 export default UserAction;

src/redux/actions/faq.tsx

@@ -13,6 +13,8 @@ const faq = {
     (data = {}) =>
     async (dispatch: Dispatch) =>
       await dispatch({ type: "faq/selectFaq", data: data }),
+  searchFaq: (data: String) => async (dispatch: Dispatch) =>
+    await dispatch({ type: "faq/search", data: data }),
 };
 
 export default faq;

src/redux/actions/public.tsx

@@ -4,36 +4,29 @@ const publicApi = {
   getHomeData: (data: undefined) => async (dispatch: Dispatch) =>
     await proxy.get("public/homePage", data, { dispatch }),
 
-  // getFaqList: (data: undefined) => async (dispatch: Dispatch) =>
-  //   await proxy.get("faq/list", data, { dispatch }),
-
   setFaqActive: (data: {}) => async (dispatch: Dispatch) =>
     await dispatch({ type: "public/faq/activate", data: data }),
 
-  // searchFaq: (data: String) => async (dispatch: Dispatch) =>
-  //   await dispatch({ type: "public/faq/search", data: data }),
-
   getContactData:
     (data = {}) =>
     async (dispatch: Dispatch) =>
       await proxy.get("public/contact", data, { dispatch }),
 
-  // getArList: (data: undefined) => async (dispatch: Dispatch) =>
-  //   await proxy.get("public/ar", data, { dispatch }),
-
   getBlogList: (data: undefined) => async (dispatch: Dispatch) =>
     await proxy.get("public/blogList", data, { dispatch }),
 
   getBlogInfo: (data: String) => async (dispatch: Dispatch) =>
     await proxy.get("public/blogInfo", data, { dispatch }),
-  setSubscribe : (data: Object) => async (dispatch: Dispatch) =>
+  setSubscribe: (data: Object) => async (dispatch: Dispatch) =>
-  await dispatch({type : "public/setSubscribe", data : data}),
+    await dispatch({ type: "public/setSubscribe", data: data }),
-  getProvince: (data = {}) => async (dispatch : Dispatch) =>
+  getProvince:
-    await proxy.get("public/province", data, { dispatch }),
+    (data = {}) =>
-  getCity: (data = {}) => async (dispatch : Dispatch) =>
+    async (dispatch: Dispatch) =>
-    await proxy.get("public/city", data, { dispatch }),
+      await proxy.get("public/province", data, { dispatch }),
-  // filterNewProducts: (data: Object) => async (dispatch: Dispatch) =>
+  getCity:
-  //   await dispatch({ type: "public/filter", data: data }),
+    (data = {}) =>
+    async (dispatch: Dispatch) =>
+      await proxy.get("public/city", data, { dispatch }),
 };
 
 export default publicApi;

src/redux/actions/user.tsx

@@ -1,12 +1,15 @@
 import proxy from "../proxy";
-import {Dispatch} from 'redux';
+import { Dispatch } from "redux";
 
 const user = {
-  otp: (data : String) => async (dispatch : Dispatch) =>
+  otp: (data: String) => async (dispatch: Dispatch) =>
-    await proxy.post("public/sendOTP", data, {  dispatch }),
+    await proxy.post("public/sendOTP", data, { dispatch }),
 
-  otp_login: (data : Object) => async (dispatch : Dispatch) =>
+  otp_login: (data: Object) => async (dispatch: Dispatch) =>
-    await proxy.login("user/otp/login", data, {  dispatch }),
+    await proxy.login("user/otp/login", data, { dispatch }),
+
+  login: (data: Object) => async (dispatch: Dispatch) =>
+    await proxy.login("user/login", data, { dispatch }),
 
   // register: (data : undefined) => async (dispatch : Dispatch) =>
   //   await proxy.login("user/register", data, {  dispatch }),
@@ -14,10 +17,10 @@ const user = {
   // switchRole: (data : String) => async (dispatch : Dispatch) =>
   //   await proxy.login("user/switchRole", data, {  dispatch }),
 
-  logout: (data : String) => async (dispatch : Dispatch) =>
+  logout: (data: String) => async (dispatch: Dispatch) =>
-    await proxy.logout("user/logout", data, {  dispatch }),
+    await proxy.logout("user/logout", data, { dispatch }),
 
-  getUserRole: (data : String) => async (dispatch : Dispatch) =>
+  getUserRole: (data: String) => async (dispatch: Dispatch) =>
     await proxy.get("user/getUserRole", data, { dispatch }),
 
   // list:
@@ -36,23 +39,23 @@ const user = {
   //     }),
   getProfile:
     (data = {}) =>
-    async (dispatch : Dispatch) =>
+    async (dispatch: Dispatch) =>
       await proxy.get("user/getProfile", data, { dispatch }),
   setProfile:
     (data = {}, data2 = {}) =>
-    async (dispatch : Dispatch) => {
+    async (dispatch: Dispatch) => {
       await proxy.put("user/setProfile", data, { dispatch });
       await proxy.get("user/getProfile", data2, { dispatch });
     },
   add:
     (data = {}, data2 = {}) =>
-    async (dispatch : Dispatch) => {
+    async (dispatch: Dispatch) => {
       await proxy.post("user/add", data);
       await proxy.get("user/list", data2, { dispatch });
     },
   del:
     (data = {}, data2 = {}) =>
-    async (dispatch : Dispatch) => {
+    async (dispatch: Dispatch) => {
       await proxy.delete("user/delete", data);
       await proxy.get("user/list", data2, { dispatch });
     },

src/redux/reducers/faq.tsx

@@ -5,6 +5,8 @@ const initialState = {
   loading: false,
   error: null,
   list: [],
+  searchResult: [],
+  search: null,
 };
 export default function faq(state = initialState, action: FaqAction) {
   let { type, data } = action;
@@ -18,10 +20,31 @@ export default function faq(state = initialState, action: FaqAction) {
         ...state,
         loading: false,
         error: null,
-        list: state.list.map((item: any) =>
+        list: !state.search
-          item.id === data
+          ? state.list.map((item: any) =>
-            ? { ...item, active: !item.active }
+              item.id === data
-            : { ...item, active: false }
+                ? { ...item, active: !item.active }
+                : { ...item, active: false }
+            )
+          : state.list,
+        searchResult: state.search
+          ? state.searchResult.map((item: any) =>
+              item.id === data
+                ? { ...item, active: !item.active }
+                : { ...item, active: false }
+            )
+          : state.searchResult,
+      };
+    case "faq/search":
+      return {
+        ...state,
+        loading: false,
+        error: null,
+        search: data,
+        searchResult: state.list.filter(
+          (item: any) =>
+            item.title.indexOf(data) !== -1 ||
+            item.description.indexOf(data) !== -1
         ),
       };
     case "faq/loading":

src/redux/reducers/user.tsx

@@ -18,10 +18,9 @@ export default function user(state = initialState, action : UserAction) {
     // case "user/register":
     // case "user/switchRole":
     case "public/sendOTP":
-      toast.success("کد به شماره شما ارسال گردید.");
       return { ...state, loading: false, status: data.profile, error: null };
+    case "user/login":
     case "user/otp/login":
-      toast.success("به دانوین خوش آمدید.");
       return {
         ...state,
         loading: false,
@@ -35,19 +34,12 @@ export default function user(state = initialState, action : UserAction) {
       return { ...state, loading: false, status: proxy.status(), error: null };
     case "user/getUserRole":
       return { ...state, loading: false, userRoles: data, error: null };
-    // case "user/list":
-    //   return { ...state, loading: false, list: data, error: null };
-    // case "user/domains":
-    //   return { ...state, loading: false, domains: data, error: null };
-    // case "mothers/list":
-    //   return { ...state, loading: false, mothers: data, error: null };
     case "user/setProfile":
       toast.success("تغییرات اعمال شد.");
       return { ...state, loading: false, error: null, setDone : true };
     case "loading":
       return { ...state, loading: true };
     case "error":
-      // toast.error(data.message);
       return { ...state, loading: false, error: data.message };
     default:
       return state;

src/router.js

@@ -19,7 +19,7 @@ import proxy from "./redux/proxy";
 
 function router({ status }) {
   const home = (
-    <Route exact path="/">{status ? <Home /> : <Auth page="signup" />}</Route>
+    <Route exact path="/">{1 ? <Home /> : <Auth page="signup" />}</Route>
   );
   return (
     <Router>
@@ -32,6 +32,9 @@ function router({ status }) {
         <Route exact path={"/profile"}>
           <Auth page="profile" />
         </Route>
+        <Route exact path={"/login"}>
+          <Auth page="login" />
+        </Route>
         <PrivateRouter
           restricted={false}
           component={Course}

src/views/Auth/Login/index.scss

@@ -9,27 +9,21 @@
       color: #84de56;
     }
   }
+  button {
+    margin-top: 25px;
+    background-color: #84de56;
+    color: white;
+    padding: 10px 0px;
+    border: 0px;
+    border-radius: 10px;
+  }
   img {
     // transform: rotate(-90deg);
   }
   .MuiButtonBase-root {
     padding: 0px !important;
   }
-  background: linear-gradient(
+  background: black;
-    135deg,
-    hsla(0, 0%, 31%, 1) 0%,
-    hsla(0, 0%, 0%, 1) 100%
-  );
-  background: -moz-linear-gradient(
-    135deg,
-    hsla(0, 0%, 31%, 1) 0%,
-    hsla(0, 0%, 0%, 1) 100%
-  );
-  background: -webkit-linear-gradient(
-    135deg,
-    hsla(0, 0%, 31%, 1) 0%,
-    hsla(0, 0%, 0%, 1) 100%
-  );
   .footer {
     position: fixed;
     bottom: 0px;
@@ -43,7 +37,7 @@
       width: 410px;
       b {
         color: white;
-        font-size: 20px;
+        font-size: 16px;
         margin-bottom: 30px;
         font-weight: 500;
         p {
@@ -52,13 +46,7 @@
       }
 
       button {
-        margin-top: 25px;
+        font-size: 17px;
-        background-color: #84de56;
-        color: white;
-        font-size: 20px;
-        padding: 10px 0px;
-        border: 0px;
-        border-radius: 10px;
       }
     }
     &__info {
@@ -86,7 +74,7 @@
         font-size: 13px;
       }
       a {
-        font-size: 15px;
+        font-size: 13px;
       }
     }
   }
@@ -105,13 +93,7 @@
       }
 
       button {
-        margin-top: 25px;
-        background-color: #84de56;
-        color: white;
         font-size: calc(100vw / 80);
-        padding: 10px 0px;
-        border: 0px;
-        border-radius: 10px;
       }
     }
     &__info {
@@ -165,15 +147,10 @@
       }
 
       button {
-        background-color: #84de56;
-        color: white;
         font-size: calc(100vw / 30);
         width: 100%;
         max-width: 400px;
         margin: 50px auto 0px;
-        padding: 10px 0px;
-        border: 0px;
-        border-radius: 10px;
       }
     }
     &__info {
@@ -230,16 +207,8 @@
       }
 
       button {
-        // position: absolute;
-        // top: 100px;
-        // left: 20px;
         margin-top: 25px;
-        background-color: #84de56;
-        color: white;
         font-size: calc(100vw / 25);
-        padding: 10px 0px;
-        border: 0px;
-        border-radius: 10px;
       }
     }
     &__info {

src/views/Auth/Login/index.tsx

@@ -20,7 +20,7 @@ interface LoginFields {
   password?: string;
 }
 
-function Login(props: any) {
+function Login({login, ...props}: any) {
   const [loginFields, setSignUpFiels] = useState<LoginFields | undefined>(
     undefined
   );
@@ -41,7 +41,7 @@ function Login(props: any) {
           <Link to="/" className="d-flex align-items-center">
             <div className="desktop align-items-center">
               بازگشت به صفحه قبل
-              <img src={arrow} />
+              <img src={arrow} alt="" />
             </div>
             <img className="mobile" src={arrowLeft} alt="" />
           </Link>
@@ -85,7 +85,7 @@ function Login(props: any) {
           </div>
           <Link to="/forget">رمز عبور خود را فراموش کرده‌اید؟</Link>
         </div>
-        <button type="submit" onClick={() => props.login(loginFields)}>
+        <button type="submit" onClick={() => login(loginFields)}>
           ورود
         </button>
         <p className="login__info" onClick={() => props.setPage("signup")}>
@@ -97,4 +97,4 @@ function Login(props: any) {
   );
 }
 
-export default connect(() => ({}), { login: user.otp_login })(Login);
+export default connect(() => ({}), { login: user.login })(Login);

src/views/Auth/SignUp/index.scss

@@ -6,26 +6,20 @@
   img {
     // transform: rotate(-90deg);
   }
-  background: linear-gradient(
+  background: black;
-    135deg,
-    hsla(0, 0%, 31%, 1) 0%,
-    hsla(0, 0%, 0%, 1) 100%
-  );
-  background: -moz-linear-gradient(
-    135deg,
-    hsla(0, 0%, 31%, 1) 0%,
-    hsla(0, 0%, 0%, 1) 100%
-  );
-  background: -webkit-linear-gradient(
-    135deg,
-    hsla(0, 0%, 31%, 1) 0%,
-    hsla(0, 0%, 0%, 1) 100%
-  );
   .footer {
     position: fixed;
     bottom: 0px;
     left: 0px;
   }
+  button {
+    margin-top: 25px;
+    background-color: #84de56;
+    color: white;
+    padding: 10px 0px;
+    border: 0px;
+    border-radius: 10px;
+  }
 }
 
 @media screen and (min-width: 1441px) {
@@ -34,11 +28,11 @@
       width: 410px;
       b {
         color: white;
-        font-size: 20px;
+        font-size: 16px;
         margin-bottom: 30px;
         font-weight: 500;
+        line-height: 1.7;
         p{
-          font-size: 16px;
         }
       }
       input {
@@ -46,7 +40,7 @@
         background-color: #2a2a2a;
         border: 1px solid #a2a2a2;
         border-radius: 8px;
-        font-size: 23px;
+        font-size: 20px;
         padding: 8px 0px;
         color: white;
         direction: ltr;
@@ -60,17 +54,12 @@
       }
       button {
         margin-top: 25px;
-        background-color: #84de56;
+        font-size: 17px;
-        color: white;
-        font-size: 20px;
-        padding: 10px 0px;
-        border: 0px;
-        border-radius: 10px;
       }
     }
     &__info {
       width: 350px;
-      margin: 20px auto 0px;
+      margin: 30px auto 0px;
       text-align: center;
       color: white;
       font-size: 13px;
@@ -130,12 +119,7 @@
       }
       button {
         margin-top: 25px;
-        background-color: #84de56;
-        color: white;
         font-size: calc(100vw / 80);
-        padding: 10px 0px;
-        border: 0px;
-        border-radius: 10px;
       }
     }
     &__info {
@@ -206,12 +190,7 @@
         }
       }
       button {
-        background-color: #84de56;
-        color: white;
         font-size: calc(100vw / 30);
-        padding: 10px 0px;
-        border: 0px;
-        border-radius: 10px;
         width: 100%;
         max-width: 400px;
         margin: 50px auto 0px;
@@ -284,8 +263,6 @@
       }
       button {
         margin-top: 20px;
-        background-color: #84de56;
-        color: white;
         font-size: calc(100vw / 24);
         padding: 12px 0px;
         border: 0px;

src/views/Course/index.tsx

@@ -26,7 +26,7 @@ function Course({ lessons, getInfo, info }: any) {
   useEffect(() => {
     scroll.goToTop();
     getInfo({
-      bookId: 18
+      bookId: 1
       // window.location.pathname.slice(
       //   window.location.pathname.lastIndexOf("/") + 1,
       //   window.location.pathname.length

src/views/Faq/index.scss

@@ -44,6 +44,7 @@
     &--itemHeader {
       border-top-right-radius: 5px;
       border-top-left-radius: 5px;
+      padding: 10px;
       strong {
         color: #4dd35b;
       }
@@ -54,6 +55,7 @@
     &--itemBody {
       border-bottom-right-radius: 5px;
       border-bottom-left-radius: 5px;
+      padding:0px 10px 30px;
       p {
         color: white;
       }
@@ -66,26 +68,27 @@
     header {
       max-width: 800px;
       h1 {
-        font-size: 44px;
+        font-size: 24px;
       }
       p {
-        font-size: 21px;
+        font-size: 16px;
+        margin-bottom: 30px;
       }
       input {
         padding: 10px 20px 10px 0px;
-        font-size: 21px;
+        font-size: 17px;
       }
       img {
-        width: 35px;
+        width: 30px;
       }
     }
     &__list{
       max-width: 1040px;
-      h2{
+      strong{
-        font-size: 19px;
+        font-size: 16px;
       }
       p{
-        font-size: 21px;
+        font-size: 15px;
       }
     }
   }
@@ -96,18 +99,18 @@
     header {
       max-width: 700px;
       h1 {
-        font-size: calc(100vw / 50);
+        font-size: calc(100vw / 55);
       }
       p {
-        font-size: calc(100vw / 90);
+        font-size: calc(100vw / 95);
         margin-bottom: 20px;
       }
       input {
         padding: 5px 10px 5px 0px;
-        font-size: calc(100vw / 90);
+        font-size: calc(100vw / 95);
       }
       img {
-        width: 35px;
+        width: 30px;
       }
       button{
         width: 60px;
@@ -121,7 +124,7 @@
         font-size: calc(100vw / 95);
       }
       p{
-        font-size: calc(100vw / 90);
+        font-size: calc(100vw / 100);
       }
     }
   }

src/views/Faq/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import Navbar from "../../components/Navbar/index";
 import Footer from "../../views/Home/Footer/index";
-import search from "../../assets/icons/search.png";
+import searchIcon from "../../assets/icons/search.png";
 import dropdown from "../../assets/icons/dropdown.png";
 import whiteDropdown from "../../assets/icons/white-dropdown.png";
 import { connect } from "react-redux";
@@ -9,7 +9,14 @@ import { faq } from "../../redux/actions";
 import scroll from "../../util/scroll.js";
 import "./index.scss";
 
-function Faq({ list, selectFaq, getList }: any) {
+function Faq({
+  list,
+  selectFaq,
+  getList,
+  searchFaq,
+  searchResult,
+  search,
+}: any) {
   useEffect(() => {
     getList();
     scroll.goToTop();
@@ -26,33 +33,59 @@ function Faq({ list, selectFaq, getList }: any) {
             ستون و سطرآنچنان که لازم است و برای شرایط{" "}
           </p>
           <div className="d-flex">
-            <input type="search" placeholder="سوال خود را جستجو کنید" />
+            <input
+              type="search"
+              placeholder="سوال خود را جستجو کنید"
+              onChange={(e) => searchFaq(e.target.value)}
+            />
             <button>
-              <img src={search} alt="جستجو" />
+              <img src={searchIcon} alt="جستجو" />
             </button>
           </div>
         </header>
         <ul className="faq__list d-flex flex-column">
-          {list?.map((item: any, i: any) => (
+          {!search &&
-            <li className="d-flex flex-column" key={i}>
+            list?.map((item: any, i: any) => (
-              <div
+              <li className="d-flex flex-column" key={i}>
-                className="faq__list--itemHeader d-flex align-items-center justify-content-between p-4"
+                <div
-                onClick={() => selectFaq(item.id)}
+                  className="faq__list--itemHeader d-flex align-items-center justify-content-between"
-              >
+                  onClick={() => selectFaq(item.id)}
-                <strong>{item.title}</strong>
+                >
-                {item.active ? (
+                  <strong>{item.title}</strong>
-                  <img src={dropdown} alt="" />
+                  {item.active ? (
-                ) : (
+                    <img src={dropdown} alt="" />
-                  <img src={whiteDropdown} alt="" />
+                  ) : (
+                    <img src={whiteDropdown} alt="" />
+                  )}
+                </div>
+                {item.active && (
+                  <div className="faq__list--itemBody d-flex">
+                    <p>{item.description}</p>
+                  </div>
                 )}
-              </div>
+              </li>
-              {item.active && (
+            ))}
-                <div className="faq__list--itemBody d-flex px-4">
+          {search &&
-                  <p>{item.description}</p>
+            searchResult?.map((item: any, i: any) => (
+              <li className="d-flex flex-column" key={i}>
+                <div
+                  className="faq__list--itemHeader d-flex align-items-center justify-content-between"
+                  onClick={() => selectFaq(item.id)}
+                >
+                  <strong>{item.title}</strong>
+                  {item.active ? (
+                    <img src={dropdown} alt="" />
+                  ) : (
+                    <img src={whiteDropdown} alt="" />
+                  )}
                 </div>
-              )}
+                {item.active && (
-            </li>
+                  <div className="faq__list--itemBody d-flex">
-          ))}
+                    <p>{item.description}</p>
+                  </div>
+                )}
+              </li>
+            ))}
         </ul>
       </main>
       <Footer />
@@ -63,6 +96,8 @@ function Faq({ list, selectFaq, getList }: any) {
 export default connect(
   (state: any) => ({
     list: state.faq.list,
+    searchResult: state.faq.searchResult,
+    search: state.faq.search,
   }),
-  { getList: faq.list, selectFaq: faq.selectFaq }
+  { getList: faq.list, selectFaq: faq.selectFaq, searchFaq: faq.searchFaq }
 )(Faq);

src/views/Home/Courses/index.scss

@@ -12,6 +12,7 @@
     h1{
       font-family: numeralMedium;
       color: white;
+      margin-bottom: 10px;
     }
     span{
       color: #aaa;

src/views/Subscription/DiscountCode/index.scss

@@ -2,7 +2,7 @@
   width: 100%;
   border: 1px solid #707070;
   border-radius: 10px;
-  padding: 20px 30px;
+  padding: 10px 30px;
   h3{
     color: white;
     margin: 0px;
@@ -18,7 +18,7 @@
     }
   }
   button{
-    background-color : #9CDF52;
+    background-color : #81C342;
     border-top-left-radius: 10px;
     color: white;
     border-bottom-left-radius: 10px;
@@ -29,14 +29,14 @@
 @media screen and (min-width : 1441px) {
   .discount-code{
     h3{
-      font-size: 18px;
+      font-size: 14px;
     }
     input{
-      padding: 20px 10px 20px 0px;
+      padding: 10px 10px 10px 0px;
       width: 250px;
       font-size: 14px;
       &::placeholder{
-        font-size: 10px;
+        font-size: 12px;
       }
     }
     button{
@@ -49,14 +49,14 @@
 @media screen and (min-width: 1008px) and (max-width: 1440px) {
   .discount-code{
     h3{
-      font-size: calc(100vw / 82);
+      font-size: calc(100vw / 85);
     }
     input{
-      padding: 20px 10px 20px 0px;
+      padding: 10px 10px 10px 0px;
       width: 240px;
       font-size: calc(100vw / 90);
       &::placeholder{
-        font-size: calc(100vw / 130);
+        font-size: calc(100vw / 120);
       }
     }
     button{

src/views/Subscription/index.scss

@@ -16,7 +16,7 @@
       margin-top: 30px;
       max-width: 700px;
       h1{
-        font-size: 28px;
+        font-size: 24px;
       }
       p{
         font-size: 16px;

src/views/VideoTube/AddComment/index.tsx

@@ -9,7 +9,7 @@ export default function AddComment() {
       <div className="d-flex flex-column" style={{width : '100%'}}>
         <textarea rows={5} placeholder="نظر خود را در این قسمت بنویسید " />
         <div className="d-flex justify-content-end">
-          <button>ارسال نظر</button>
+          <button className="submit submit-small mt-2">ارسال نظر</button>
         </div>
       </div>
     </>

src/views/VideoTube/Attachments/index.scss

@@ -22,10 +22,10 @@
     width: calc(100% - 20px);
     padding: 20px 0px;
     a{
-      font-size: 18px;
+      font-size: 13px;
     }
     h4{
-      font-size: 18px;
+      font-size: 15px;
     }
   }
 }

src/views/VideoTube/Book/index.scss

@@ -17,10 +17,10 @@
       height: 180px;
     }
     h4{
-      font-size: 16px;
+      font-size: 15px;
     }
     p{
-      font-size: 12px;
+      font-size: 11px;
     }
   }
 }

src/views/VideoTube/Comment/index.scss

@@ -11,6 +11,7 @@
   }
   p{
     line-height: 1.5;
+    margin-bottom: 15px;
   }
 }
 
@@ -18,9 +19,9 @@
   .video-tube-comment{
     width: 90%;
     p{
-      font-size: 16px;
+      font-size: 13px;
       strong{
-        font-size: 18px;
+        font-size: 15px;
         margin-left: 5px;
       }
     }

src/views/VideoTube/index.scss

@@ -3,10 +3,10 @@
     margin-left: 15px;
     
     &--display {
-      border-bottom: 1px solid #707070;
+      border-bottom: 1px solid #303030;
       padding-bottom: 30px;
       video{
-        border: 1px solid #707070;
+        border: 1px solid #303030;
       }
       span{
         color: #84DE56;
@@ -22,7 +22,8 @@
     }
     &--comments{
       color: white;
-      border-bottom: 1px solid #707070;
+      border-bottom: 1px solid #303030;
+      padding-bottom: 30px;
       header{
         padding: 20px 0px;
         h2{
@@ -37,14 +38,7 @@
     }
     &--addComment{
       padding: 15px 0px;
-      button{
+
-        background-color: #4DD35B;
-        border: none;
-        color: white;
-        border-radius: 20px;
-        padding: 8px 12px;
-        margin-top: 10px;
-      }
       textarea{
         width: 100%;
         border-radius: 12px;
@@ -62,7 +56,7 @@
   }
   &__sidebar {
     &--playlist {
-      border: 1px solid #707070;
+      border: 1px solid #303030;
       margin-bottom: 30px;
       header {
         width: 100%;
@@ -100,7 +94,7 @@
       }
     }
     &--attachments {
-      border: 1px solid #707070;
+      border: 1px solid #303030;
       margin-bottom: 30px;
       header {
         width: 100%;
@@ -138,7 +132,7 @@
       }
     }
     &--suggests {
-      border: 1px solid #707070;
+      border: 1px solid #303030;
       header {
         width: 100%;
         color: white;
@@ -165,34 +159,31 @@
       flex: 8;
       &--display {
         span{
-          font-size: 21px;
+          font-size: 16px;
         }
         h1{
-          font-size: 36px;
+          font-size: 24px;
         }
         p{
-          font-size: 25px;
+          font-size: 16px;
         }
       }
       &--comments{
         header{
           h2{
-            font-size: 26px;
+            font-size: 20px;
           }
         }
         button{
-          font-size: 19px;
+          font-size: 14px;
         }
       }
       &--addComment{
         width: 60%;
-        button{
-          font-size: 18px;
-        }
         textarea{
-          font-size: 18px;
+          font-size: 14px;
           &::placeholder{
-            font-size: 18px;
+            font-size: 14px;
           }
         }
       }
@@ -202,16 +193,16 @@
       &--playlist {
         max-height: calc(100vh - 140px);
         header {
-          padding: 14px 12px;
+          padding: 12px;
           background-color: #2c2c2c;
           img {
             transform: translateY(-5px);
           }
           h2 {
-            font-size: 18px;
+            font-size: 16px;
           }
           p {
-            font-size: 13px;
+            font-size: 10px;
           }
         }
       }
@@ -221,23 +212,23 @@
           padding: 14px 12px;
           background-color: rgba(#ebebeb, 0.21);
           h2 {
-            font-size: 18px;
+            font-size: 16px;
           }
           p {
-            font-size: 13px;
+            font-size: 10px;
           }
         }
       }
       &--suggests {
         background-color: #001702;
         header {
-          padding: 26px 12px;
+          padding: 20px 12px;
           // background-color: #8bd09746;
           h2 {
-            font-size: 18px;
+            font-size: 16px;
           }
           span{
-            font-size: 13px;
+            font-size: 11px;
           }
         }
         &___list{

src/views/VideoTube/index.tsx

@@ -26,7 +26,7 @@ function VodTube({
   useEffect(() => {
     getBookList();
     getInfo({
-      bookId: 18,
+      bookId: 1,
       // window.location.pathname.slice(
       //   window.location.pathname.lastIndexOf("/") + 1,
       //   window.location.pathname.length