reza added search root

src/assets/icons/searchBlack.svg

@@ -0,0 +1,7 @@
+<svg id="vuesax_linear_search-normal" data-name="vuesax/linear/search-normal" xmlns="http://www.w3.org/2000/svg" width="23.526" height="23.526" viewBox="0 0 23.526 23.526">
+  <g id="search-normal" transform="translate(0 0)">
+    <path id="Vector" d="M18.625,9.312A9.312,9.312,0,1,1,9.312,0,9.312,9.312,0,0,1,18.625,9.312Z" transform="translate(1.96 1.96)" fill="none" stroke="#b3b3b3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Vector-2" data-name="Vector" d="M1.96,1.96,0,0" transform="translate(19.605 19.605)" fill="none" stroke="#b3b3b3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Vector-3" data-name="Vector" d="M0,0H23.526V23.526H0Z" fill="none" opacity="0"/>
+  </g>
+</svg>

src/components/HomeSearchBox/index.scss

@@ -63,6 +63,7 @@
     }
   }
   footer{
+    padding: 15px 10px;
     ul{
       li{
         cursor: pointer;
@@ -70,7 +71,7 @@
     }
     strong{
       color: $green;
-      font-weight: 300;
+      font-weight: 600;
       margin-left: 20px;
     }
   }
@@ -104,7 +105,6 @@
     }
     footer {
       width: 900px;
-      padding: 10px 0px !important;
       strong{
         font-size: 14px;
       }
@@ -143,9 +143,12 @@
         }
       }
     }
-    ul {
+    footer {
       width: 850px;
-      padding: 10px 0px !important;
+      strong{
+        font-size: 14px;
+      }
+      ul{
         li {
           color: $blue;
           margin-left: 25px;
@@ -154,6 +157,7 @@
       }
     }
   }
+}
 
 @media screen and (min-width: 641px) and (max-width: 1007px) {
   .home-search-box {

src/components/HomeSearchBox/index.tsx

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import _ from "lodash";
 import { book } from "../../redux/actions";
 import search from "../../assets/icons/search.png";
-import searchBlack from "../../assets/icons/searchBlack.png";
+import searchBlack from "../../assets/icons/searchBlack.svg";
 import voice from "../../assets/icons/voice.png";
 import voiceBlack from "../../assets/icons/voice-black.png";
 
@@ -76,8 +76,8 @@ function HomeSearchBox({
           {light ? <img src={voiceBlack} alt="" /> : <img src={voice} alt="" />}
         </button>
       </form>
-      <footer className="desktop">
+      <footer className="desktop align-items-center">
-        {/* <strong>جدیدترین‌ها</strong> */}
+        <strong>جدیدترین‌ها</strong>
         <ul className="d-flex">
           {lastItems.map((item: any, i: any) => (
             <li

src/components/Navbar/index.scss

@@ -44,10 +44,18 @@
     background-color: $green1;
   }
   &___logo{
+    margin-left: 20px;
     img{
       height: 50px;
     }
   }
+  &__search{
+    min-width: 60px !important;
+    img{
+      transform: translateY(2px);
+      width : 25px;
+    }
+  }
 }
 
 @media screen and (min-width: 1441px){
@@ -56,7 +64,7 @@
       max-width: 1350px;
       &--links{
         li{
-          padding: 0px 20px;
+          padding: 0px;
           font-size: 14px;
         }
       }
@@ -80,7 +88,7 @@
       }
     }
     &___login{
-      margin-right: 20px;
+      margin-right: 15px;
     }
 
   }

src/components/Navbar/index.tsx

@@ -10,6 +10,8 @@ import Menu from "../Menu/index";
 import logoIcon from "../../assets/icons/logo.png";
 import { connect } from "react-redux";
 import _ from "lodash";
+import searchIcon from "../../assets/icons/search.png";
+import searchBlackIcon from "../../assets/icons/searchBlack.svg";
 
 const useStyles = makeStyles({
   list: {
@@ -93,6 +95,15 @@ function Navbar(props: any) {
           onClick={toggleDrawer("right", true)}
         />
         <ul className="nav__container--buttons d-flex align-items-center">
+          <li className="nav__search">
+            <Link to="/search">
+              {theme === "dark" ? (
+                <img src={searchIcon} alt="" />
+              ) : (
+                <img src={searchBlackIcon} alt="" />
+              )}
+            </Link>
+          </li>
           <li className="nav___share desktop">
             <Link to="/subscribe">خرید اشتراک</Link>
           </li>

src/custom.scss

@@ -1,22 +1,22 @@
-@import './constants/colors.scss';
+@import "./constants/colors.scss";
-@import './components/BreadCrumbs/index.scss';
+@import "./components/BreadCrumbs/index.scss";
-@import './components/GradeFilter/index.scss';
+@import "./components/GradeFilter/index.scss";
-@import './components/HomeSearchBox/index.scss';
+@import "./components/HomeSearchBox/index.scss";
-@import './components/Location/index.scss';
+@import "./components/Location/index.scss";
-@import './components/Navbar/index.scss';
+@import "./components/Navbar/index.scss";
-@import './components/NavbarDrawer/NavbarDrawer.scss';
+@import "./components/NavbarDrawer/NavbarDrawer.scss";
-@import './components/Textarea/index.scss';
+@import "./components/Textarea/index.scss";
-@import './components/Timer/index.scss';
+@import "./components/Timer/index.scss";
-@import './components/Vocal/Vocal.scss';
+@import "./components/Vocal/Vocal.scss";
-@import './views/Auth/index.scss';
+@import "./views/Auth/index.scss";
-@import './views/About/index.scss';
+@import "./views/About/index.scss";
-@import './views/Contact/index.scss';
+@import "./views/Contact/index.scss";
-@import './views/Course/index.scss';
+@import "./views/Course/index.scss";
-@import './views/Courses/index.scss';
+@import "./views/Courses/index.scss";
-@import './views/Faq/index.scss';
+@import "./views/Faq/index.scss";
-@import './views/Home/index.scss';
+@import "./views/Home/index.scss";
-@import './views/Subscription/index.scss';
+@import "./views/Subscription/index.scss";
-@import './views/VideoTube/index.scss';
+@import "./views/VideoTube/index.scss";
 
 .submit {
   background-color: $green;
@@ -33,6 +33,9 @@
 
 .bg-black {
   background-color: black !important;
+  .MuiButton-root {
+    color: white !important;
+  }
   .MuiFormControl-root {
     color: $gray7 !important;
     label {
@@ -52,7 +55,6 @@
     }
   }
 
-  
   .MuiInputLabel-shrink {
     background-color: black !important;
     color: $green4 !important;
@@ -63,11 +65,13 @@
     border-color: $green4 !important;
     color: $green4 !important;
   }
-
 }
 
 .bg-white {
   background-color: white !important;
+  .MuiButton-root {
+    color: $gray5 !important;
+  }
   .MuiFormControl-root {
     color: $gray7 !important;
     label {
@@ -88,7 +92,6 @@
     }
   }
 
-  
   .MuiInputLabel-shrink {
     background-color: black !important;
     color: $green4 !important;
@@ -311,11 +314,7 @@ p {
 }
 
 //Menu
-.bg-black{
+
-  .MuiButton-root {
-    color: white !important;
-  }
-}
 .MuiButton-root {
   font-family: numeralLight !important;
   span {
@@ -352,7 +351,6 @@ p {
   }
 }
 
-
 //Toastify
 .Toastify {
   * {
@@ -379,7 +377,6 @@ p {
   filter: blur(8px);
 }
 
-
 @media screen and (min-width: 1441px) {
   .submit {
     font-size: 16px;

src/router.js

@@ -39,7 +39,10 @@ function router({ status }) {
           <Auth page="profile" />
         </Route>
         <Route exact path={"/grades/:id"}>
-          <Courses />
+          <Courses page="grades" />
+        </Route>
+        <Route exact path={"/search"}>
+          <Courses page="search" />
         </Route>
         <Route exact path={"/about"}>
           <About />

src/views/Courses/Course/index.scss

@@ -1,13 +1,58 @@
 .courses-course {
   margin-top: 40px;
   padding: 10px;
-  border-bottom: 1px solid $gray8;
   transition: all 0.5s;
   position: relative;
   * {
     transition: all 0.5s;
+  }
+  &:hover {
+    border-radius: 10px;
+    img {
+      transform: translateX(10px) scale(1.14);
+    }
+  }
+  &-dark{
+    border-bottom: 1px solid $gray8;
+    &:hover {
+      background-color: $gray6;
+      box-shadow: 0px 0px 10px rgba(146, 146, 146, 0.6);
+      img {
+        transform: translateX(10px) scale(1.14);
+      }
+      h1 {
+        color: $green4;
+      }
+      p {
+        color: #cececefa;
+      }
+    }
+    * {
       color: $gray;
     }
+  }
+  &-light{
+    border-bottom: 1px solid $gray6;
+    &:hover {
+      background-color: $gray7;
+      box-shadow: 0px 0px 10px rgba(70, 70, 70, 0.6);
+      img {
+        transform: translateX(10px) scale(1.14);
+      }
+      h1 {
+        color: $green4;
+      }
+      p {
+        color: #fffffffa;
+      }
+      *{
+        color: $gray13;
+      }
+    }
+    * {
+      color: $gray5;
+    }
+  }
   img {
     border-radius: 10px;
   }
@@ -26,20 +71,6 @@
 
 @media screen and (min-width: 1441px) {
   .courses-course {
-    &:hover {
-      background-color: $gray6;
-      border-radius: 10px;
-      box-shadow: 0px 0px 10px rgba(146, 146, 146, 0.6);
-      img {
-        transform: translateX(10px) scale(1.14);
-      }
-      h1 {
-        color: $green4;
-      }
-      p {
-        color: #cececefa;
-      }
-    }
     img {
       height: 150px;
     }
@@ -58,20 +89,6 @@
 
 @media screen and (min-width: 1008px) and (max-width: 1440px) {
   .courses-course {
-    &:hover {
-      background-color: $gray6;
-      border-radius: 10px;
-      box-shadow: 0px 0px 10px rgba(146, 146, 146, 0.6);
-      img {
-        transform: translateX(10px) scale(1.14);
-      }
-      h1 {
-        color: $green4;
-      }
-      p {
-        color: #cececefa;
-      }
-    }
     img {
       height: 150px;
     }

src/views/Courses/Course/index.tsx

@@ -1,15 +1,26 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import location from "../../../util/location";
+import _ from "lodash";
 
-export default function Course({ data }: any) {
+export default function Course({ data, theme }: any) {
   const duration = () => {
     const minute = data.vodDuration % 60;
     const hour = Math.round(data.vodDuration / 60);
-    return (hour > 0 ? (hour + ' ' + 'ساعت') : '') + ' ' + minute + ' ' + 'دقیقه';
+    return (hour > 0 ? hour + " " + "ساعت" : "") + " " + minute + " " + "دقیقه";
-  }
+  };
+  const light = theme === "light";
   return (
-    <Link to={"/courses/" + location.getId()} className="courses-course d-flex">
+    <Link
+      to={"/courses/" + location.getId()}
+      className={_.join(
+        [
+          "courses-course d-flex",
+          light ? "courses-course-light" : "courses-course-dark",
+        ],
+        " "
+      )}
+    >
       <img src={`https://dnvn.ir/api/v1/file/${data.fileIds}`} alt="" />
       <div className="d-flex flex-column justify-content-between px-3">
         <div className="d-flex flex-column">

src/views/Courses/index.scss

@@ -4,14 +4,29 @@
   position: relative;
   main {
     margin-top: 30px;
+    h3{
+      margin-top : 100px;
+      text-align: center;
+      color: $gray5;
+      transition: all 0.5s;
+      opacity: 0;
+      transform : translateY(-50px);
+    }
     header {
     }
   }
+  &-notFound{
+    opacity: 1 !important;
+    transform: translateY(0px) !important;
+  }
 }
 
 @media screen and (min-width: 1441px) {
   .courses {
     main {
+      h3{
+        font-size: 21px;
+      }
       max-width: 700px;
     }
   }
@@ -20,6 +35,9 @@
 @media screen and (min-width: 1008px) and (max-width: 1440px) {
   .courses {
     main {
+      h3{
+        font-size: calc(100vw / 70);
+      }
       max-width: 700px;
     }
   }
@@ -28,6 +46,11 @@
 @media screen and (min-width: 641px) and (max-width: 1007px) {
   .courses {
     main {
+      h3{
+        margin-top : 100px;
+        text-align: center;
+        font-size: calc(100vw / 45);
+      }
       max-width: 500px;
       margin-top: 10px;
     }
@@ -37,6 +60,11 @@
 @media screen and (max-width: 640px) {
   .courses {
     main {
+      h3{
+        margin-top : 100px;
+        text-align: center;
+        font-size: calc(100vw / 27);
+      }
       max-width: 500px;
       margin-top: 10px;
       padding: 0px 10px;

src/views/Courses/index.tsx

@@ -5,42 +5,86 @@ import { book } from "../../redux/actions";
 import { connect } from "react-redux";
 import location from "../../util/location";
 import Course from "./Course";
+import HomeSearchBox from "../../components/HomeSearchBox";
 import BreadCrumbs from "../../components/BreadCrumbs";
 import Loader from "../../components/Loader";
+import Vocal from "../../components/Vocal/Vocal";
+import { info } from "console";
 
-function Courses({ getList, list, selectedMenu, loading }: any) {
+function Courses({
+  getList,
+  list,
+  selectedMenu,
+  loading,
+  page,
+  theme,
+  selectedSort,
+  sortFilter,
+  sortFilterCourse,
+}: any) {
   const [links, setLinks] = useState([
     { link: "/", name: "صفحه اصلی" },
     { link: "/courses", name: "دوره‌ها" },
     { link: "/courses/2", name: "نام کتاب" },
   ]);
+  const [vocal, setVocal] = useState(false);
+  const [inputValue, setInputValue] = useState("");
   useEffect(() => {
     getList();
   }, []);
 
+  useEffect(() => {
+    if (inputValue) {
+      sortFilter({ search: inputValue, sort: selectedSort });
+      setVocal(false);
+    }
+  }, [inputValue]);
+
   return (
-    <div className="courses main d-flex flex-column" style={{ filter: (loading)  ? "blur(8px)" : "" }}>
+    <div
+      className="courses main d-flex flex-column"
+      style={{ filter: loading ? "blur(8px)" : "" }}
+    >
       <Navbar />
       <main className="d-flex flex-column">
+        {page === "grades" && (
           <header className="d-flex">
             <BreadCrumbs links={links} />
           </header>
-        {list
+        )}
+        {page === "search" && (
+          <HomeSearchBox
+            setVocal={setVocal}
+            inputValue={inputValue}
+            setInputValue={setInputValue}
+            theme={theme}
+          />
+        )}
+        {page === "search" &&
+          inputValue &&
+          sortFilterCourse?.map((item: any, i: any) => (
+            <Course data={item} key={i} theme={theme} />
+          ))}
+        {page === "grades" &&
+          list
             ?.filter(
               (item: any) =>
                 item.gradeId ===
                 (selectedMenu || Number(localStorage.getItem("selectedGrade")))
             )
-          .map((item: any, i: any) => (
+            .map((item: any, i: any) => <Course data={item} key={i} theme={theme} />)}
-            <Course data={item} key={i} />
+
-          ))}
+        <h3 className={(inputValue && sortFilterCourse.length === 0 ) ? "courses-notFound" : ""}>محصولی یافت نشد.</h3>
+        {page === "search" && vocal ? (
+          <Vocal setVocal={setVocal} setInputValue={setInputValue} />
+        ) : null}
       </main>
       <Footer />
-      {
+      {loading && (
-        loading && <div className="full-loader">
+        <div className="full-loader">
           <Loader size={50} />
         </div>
-      }
+      )}
     </div>
   );
 }
@@ -49,7 +93,10 @@ export default connect(
   (state: any) => ({
     list: state.book.list,
     selectedMenu: state.publicApi.selectedMenu,
-    loading : state.book.loading
+    loading: state.book.loading,
+    theme: state.publicApi.theme,
+    selectedSort: state.book.selectedSort,
+    sortFilterCourse: state.book.sortFilterCourse,
   }),
-  { getList: book.list }
+  { getList: book.list, sortFilter: book.sortFilter }
 )(Courses);

src/views/Home/Header/index.scss

@@ -119,7 +119,7 @@
 
 @media screen and (min-width: 1441px) {
   .home-slider {
-    max-width: 1440px;
+    max-width: 1340px;
     width: 100%;
     justify-content: flex-end;
   }

src/views/Home/index.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from "react";
 import Navbar from "../../components/Navbar";
-import HomeSearchBox from "../../components/HomeSearchBox";
 import Courses from "./Courses";
 import GradeFilter from "../../components/GradeFilter";
 import Books from "./Books";
@@ -22,25 +21,14 @@ function Home({
   headerData,
   blogs,
   gradeFilterBooks,
-  sortFilterCourse,
-  selectedSort,
-  sortFilter,
   getHeader,
   bookLoading,
   publicLoading,
   theme,
 }: any) {
   const [grade, setGrade] = useState(null);
-  const [vocal, setVocal] = useState(false);
-  const [inputValue, setInputValue] = useState("");
   const [gradeDropdown, setGradeDropdown] = useState(false);
 
-  useEffect(() => {
-    if (inputValue) {
-      sortFilter({ search: inputValue, sort: selectedSort });
-      setVocal(false);
-    }
-  }, [inputValue]);
   useEffect(() => {
     getCourseList();
     scroll.goToTop();
@@ -57,7 +45,7 @@ function Home({
           " "
         )}
         style={{
-          filter: vocal || bookLoading || publicLoading ? "blur(8px)" : "",
+          filter:  bookLoading || publicLoading ? "blur(8px)" : "",
         }}
         onClick={() => setGradeDropdown(false)}
       >
@@ -65,14 +53,8 @@ function Home({
         <div className="desktop">
           <Header headerData={headerData} theme={theme} />
         </div>
-        <HomeSearchBox
-          setVocal={setVocal}
-          inputValue={inputValue}
-          setInputValue={setInputValue}
-          theme={theme}
-        />
         <Courses
-          courses={sortFilterCourse ? sortFilterCourse : courseList}
+          courses={courseList}
           theme={theme}
         />
         <GradeFilter
@@ -91,9 +73,7 @@ function Home({
         <AppDownload theme={theme} />
         <Footer />
       </div>
-      {vocal ? (
+
-        <Vocal setVocal={setVocal} setInputValue={setInputValue} />
-      ) : null}
       {(bookLoading || publicLoading) && (
         <div className="full-loader">
           <Loader size={50} />
@@ -107,8 +87,6 @@ export default connect(
   (state: any) => ({
     courseList: state.book.list,
     gradeFilterBooks: state.book.gradeFilterBooks,
-    sortFilterCourse: state.book.sortFilterCourse,
-    selectedSort: state.book.selectedSort,
     headerData: state.publicApi.header,
     bookLoading: state.book.loading,
     publicLoading: state.publicApi.loading,
@@ -116,7 +94,6 @@ export default connect(
   }),
   {
     getCourseList: book.list,
-    sortFilter: book.sortFilter,
     getHeader: publicApi.getHeader,
   }
 )(Home);