reza added some change now

3 years ago · 4eb651a159
parent e01cd1b911
commit 4eb651a159
33 changed files with 451 additions and 277 deletions
--- a/src/App.css
+++ b/src/App.css
@ -3,6 +3,8 @@
 }


+
+
 .App-logo {
  height: 40vmin;
  pointer-events: none;
--- a/src/assets/icons/logo.png
+++ b/src/assets/icons/logo.png
--- a/src/components/GradeFilter/index.scss
+++ b/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;
--- a/src/components/HomeSearchBox/index.scss
+++ b/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 {
--- a/src/components/Menu/index.js
+++ b/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>
+  );
+}
--- a/src/components/Navbar/index.scss
+++ b/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;
-          span{
-            width: 2px;
-            height: 15px;
-            background-color: rgb(197, 197, 197);
-            margin-right: 15px;
-            // transform: translateY(-1px);
-          }
+          font-size: 14px;
        }
      }
      &--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{
-      margin-left: 20px;
-      font-size: 14px;
+    &___login{
+      margin-right: 20px;
    }

  }
--- a/src/components/Navbar/index.tsx
+++ b/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>
-          </li>
-          <li>
-            <Link to="/video-tube">دوره‌ها</Link>
+            <Menu items={props.grades} />
          </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,
+    },
+  ],
+}
--- a/src/components/PrivateRouter/index.js
+++ b/src/components/PrivateRouter/index.js
@ -1,5 +1,5 @@
-import React, { Component } from "react";
-import { Route, useHistory, Redirect } from "react-router-dom";
+import React from "react";
+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="/" />
--- a/src/custom.scss
+++ b/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 {
--- a/src/index.css
+++ b/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;
--- a/src/redux/actions-type/faq.tsx
+++ b/src/redux/actions-type/faq.tsx
@ -1,28 +1,33 @@
 interface list {
-  type : "faq/list"
-  data : any
+  type: "faq/list";
+  data: any;
 }

 interface add {
-  type : "faq/add"
-  data : any
+  type: "faq/add";
+  data: any;
 }

-interface selectFaq{
-  type : "faq/selectFaq"
-  data : any
+interface selectFaq {
+  type: "faq/selectFaq";
+  data: any;
 }

-interface error{
-  type : "faq/error"
-  data : undefined
+interface searchFaq {
+  type: "faq/search";
+  data: any;
 }

-interface loading{
-  type : "faq/loading"
-  data : undefined
+interface error {
+  type: "faq/error";
+  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;
--- a/src/redux/actions-type/user.tsx
+++ b/src/redux/actions-type/user.tsx
@ -1,11 +1,16 @@
 interface otp {
-  type : "public/sendOTP"
-  data : any
+  type: "public/sendOTP";
+  data: any;
 }

-interface otp_login{
-  type : "user/otp/login"
-  data : any
+interface otp_login {
+  type: "user/otp/login";
+  data: any;
+}
+
+interface login {
+  type: "user/login";
+  data: any;
 }

 // interface switchRole{
@ -13,37 +18,45 @@ interface otp_login{
 //   data : Object
 // }

-interface logout{
-  type : "user/logout"
-  data : any
+interface logout {
+  type: "user/logout";
+  data: any;
 }

-interface getUserRole{
-  type : "user/getUserRole"
-  data : any
+interface getUserRole {
+  type: "user/getUserRole";
+  data: any;
 }

-interface getProfile{
-  type : "user/getProfile"
-  data : any
+interface getProfile {
+  type: "user/getProfile";
+  data: any;
 }

-interface setProfile{
-  type : "user/setProfile"
-  data : any
+interface setProfile {
+  type: "user/setProfile";
+  data: any;
 }

-interface error{
-  type : "error"
-  data : undefined
+interface error {
+  type: "error";
+  data: undefined;
 }

-interface loading{
-  type : "loading"
-  data : undefined
+interface loading {
+  type: "loading";
+  data: undefined;
 }

-
-type UserAction = otp | otp_login | logout | getUserRole | getProfile | setProfile | error | loading;
+type UserAction =
+  | otp
+  | otp_login
+  | login
+  | logout
+  | getUserRole
+  | getProfile
+  | setProfile
+  | error
+  | loading;

 export default UserAction;
--- a/src/redux/actions/faq.tsx
+++ b/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;
--- a/src/redux/actions/public.tsx
+++ b/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) =>
-  await dispatch({type : "public/setSubscribe", data : data}),
-  getProvince: (data = {}) => async (dispatch : Dispatch) =>
-    await proxy.get("public/province", data, { dispatch }),
-  getCity: (data = {}) => async (dispatch : Dispatch) =>
-    await proxy.get("public/city", data, { dispatch }),
-  // filterNewProducts: (data: Object) => async (dispatch: Dispatch) =>
-  //   await dispatch({ type: "public/filter", data: data }),
+  setSubscribe: (data: Object) => async (dispatch: Dispatch) =>
+    await dispatch({ type: "public/setSubscribe", data: data }),
+  getProvince:
+    (data = {}) =>
+    async (dispatch: Dispatch) =>
+      await proxy.get("public/province", data, { dispatch }),
+  getCity:
+    (data = {}) =>
+    async (dispatch: Dispatch) =>
+      await proxy.get("public/city", data, { dispatch }),
 };

 export default publicApi;
--- a/src/redux/actions/user.tsx
+++ b/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) =>
-    await proxy.post("public/sendOTP", data, {  dispatch }),
+  otp: (data: String) => async (dispatch: Dispatch) =>
+    await proxy.post("public/sendOTP", data, { dispatch }),

-  otp_login: (data : Object) => async (dispatch : Dispatch) =>
-    await proxy.login("user/otp/login", data, {  dispatch }),
+  otp_login: (data: Object) => async (dispatch: 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) =>
-    await proxy.logout("user/logout", data, {  dispatch }),
+  logout: (data: String) => async (dispatch: 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 });
    },
--- a/src/redux/reducers/faq.tsx
+++ b/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) =>
-          item.id === data
-            ? { ...item, active: !item.active }
-            : { ...item, active: false }
+        list: !state.search
+          ? state.list.map((item: any) =>
+              item.id === data
+                ? { ...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":
--- a/src/redux/reducers/user.tsx
+++ b/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;
--- a/src/router.js
+++ b/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}
--- a/src/views/Auth/Login/index.scss
+++ b/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(
-    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%
-  );
+  background: black;
  .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;
-        background-color: #84de56;
-        color: white;
-        font-size: 20px;
-        padding: 10px 0px;
-        border: 0px;
-        border-radius: 10px;
+        font-size: 17px;
      }
    }
    &__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 {
--- a/src/views/Auth/Login/index.tsx
+++ b/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);
--- a/src/views/Auth/SignUp/index.scss
+++ b/src/views/Auth/SignUp/index.scss
@ -6,26 +6,20 @@
  img {
    // transform: rotate(-90deg);
  }
-  background: linear-gradient(
-    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%
-  );
+  background: black;
  .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;
-        color: white;
-        font-size: 20px;
-        padding: 10px 0px;
-        border: 0px;
-        border-radius: 10px;
+        font-size: 17px;
      }
    }
    &__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;
--- a/src/views/Course/index.tsx
+++ b/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
--- a/src/views/Faq/index.scss
+++ b/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{
-        font-size: 19px;
+      strong{
+        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);
      }
    }
  }
--- a/src/views/Faq/index.tsx
+++ b/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) => (
-            <li className="d-flex flex-column" key={i}>
-              <div
-                className="faq__list--itemHeader d-flex align-items-center justify-content-between p-4"
-                onClick={() => selectFaq(item.id)}
-              >
-                <strong>{item.title}</strong>
-                {item.active ? (
-                  <img src={dropdown} alt="" />
-                ) : (
-                  <img src={whiteDropdown} alt="" />
+          {!search &&
+            list?.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 && (
+                  <div className="faq__list--itemBody d-flex">
+                    <p>{item.description}</p>
+                  </div>
                )}
-              </div>
-              {item.active && (
-                <div className="faq__list--itemBody d-flex px-4">
-                  <p>{item.description}</p>
+              </li>
+            ))}
+          {search &&
+            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>
-              )}
-            </li>
-          ))}
+                {item.active && (
+                  <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);
--- a/src/views/Home/Courses/index.scss
+++ b/src/views/Home/Courses/index.scss
@ -12,6 +12,7 @@
    h1{
      font-family: numeralMedium;
      color: white;
+      margin-bottom: 10px;
    }
    span{
      color: #aaa;
--- a/src/views/Subscription/DiscountCode/index.scss
+++ b/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{
--- a/src/views/Subscription/index.scss
+++ b/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;
--- a/src/views/VideoTube/AddComment/index.tsx
+++ b/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>
    </>
--- a/src/views/VideoTube/Attachments/index.scss
+++ b/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;
    }
  }
 }
--- a/src/views/VideoTube/Book/index.scss
+++ b/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;
    }
  }
 }
--- a/src/views/VideoTube/Comment/index.scss
+++ b/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;
      }
    }
--- a/src/views/VideoTube/index.scss
+++ b/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{
--- a/src/views/VideoTube/index.tsx
+++ b/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