reza added dialog

src/components/BookToggle/index.scss

@@ -19,8 +19,6 @@
     padding: 10px 35px;
     align-self: end;
     margin-top: 60px;
-    border: 1px solid white;
-    color: white;
     &:hover{
       border-color: $green;
       color: $green;
@@ -31,12 +29,20 @@
     p {
       color: $gray5;
     }
+    a {
+      box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
+      color: $gray7;
+    }
   }
   &-dark {
     strong,
     p {
       color: $gray12;
     }
+    a{
+      border: 1px solid white;
+      color: white;
+    }
   }
 }
 

src/components/Dialog/index.js

@@ -0,0 +1,39 @@
+import * as React from "react";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+
+export default function AlertDialog({ open, setOpen, text }) {
+  return (
+    <div className="dialog">
+      <Dialog
+        open={open}
+        onClose={() => setOpen(false)}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+      >
+        {/* <DialogTitle id="alert-dialog-title">
+        {"Use Google's location service?"}
+      </DialogTitle> */}
+        <div className='dialog-box'>
+          <DialogContent>
+            <DialogContentText id="alert-dialog-description">
+              <p className="dialog-text">{text}</p>
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <button
+              className="dialog-submit"
+              onClick={() => setOpen(false)}
+              autoFocus
+            >
+              متوجه شدم!
+            </button>
+          </DialogActions>
+        </div>
+      </Dialog>
+    </div>
+  );
+}

src/components/Dialog/index.scss

@@ -0,0 +1,15 @@
+.dialog{
+  &-text{
+    color: white;
+    font-family: numeralLight;
+  }
+  &-submit{
+    background-color: inherit;
+    border: none;
+    color: $green;
+    font-family: numeralLight;
+  }
+  &-box{
+    background-color: rgba($red, 0.2);
+  }
+}

src/components/Navbar/index.scss

@@ -8,8 +8,10 @@
   z-index: 150;
   &-light{
     .nav___share{
+      box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
       background-color: inherit !important;
-      border: 1px solid $green1 !important;
+      border: none;
+      // border: 1px solid $green1 !important;
       a{
         color: $green1 !important;
 
@@ -41,6 +43,7 @@
     border: 2px solid $gray5;
   }
   &___login{
+    box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
     background-color: $green1;
   }
   &___logo{

src/custom.scss

@@ -1,5 +1,6 @@
 @import "./constants/colors.scss";
 @import "./constants/width.scss";
+@import "./components/Dialog/index.scss";
 @import "./components/BookToggle/index.scss";
 @import "./components/BreadCrumbs/index.scss";
 @import "./components/GradeFilter/index.scss";
@@ -29,6 +30,10 @@
   font-weight: 300;
 }
 
+button{
+  box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1) !important;
+}
+
 .mobile,
 .desktop {
   display: flex;
@@ -500,3 +505,4 @@ p {
     line-height: 1.5 !important;
   }
 }
+

src/views/VideoTube/LessonPlayList/index.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { publicApi } from "../../../redux/actions";
 import { Link } from "react-router-dom";
 import _ from "lodash";
+import Dialog from "../../../components/Dialog";
 
 function LessonPlayList({
   category,
@@ -14,6 +15,7 @@ function LessonPlayList({
   theme,
 }: any) {
   const bookId = localStorage.getItem("bookId");
+  const [open, setOpen] = useState(false);
   useEffect(() => {
     if (localStorage.getItem("scroll-list") && vods) {
       const list: HTMLElement = document.getElementById("list") as HTMLElement;
@@ -25,8 +27,6 @@ function LessonPlayList({
       const index = vods?.findIndex(
         (item: any) => item?.name === selectedVideo?.name
       );
-      console.log(index);
-      console.log(listHeight, elementHeight * (Number(index) + 1));
 
       if (elementHeight * (Number(index) + 1) > listHeight) {
         list.scrollTo(0, elementHeight * (Number(index) + 1) + elementHeight);
@@ -37,8 +37,6 @@ function LessonPlayList({
 
   const light = theme === "light";
   return (
-    <>
-      {
     <div
       className={_.join(
         [
@@ -64,7 +62,7 @@ function LessonPlayList({
       {bookId ? (
         category.map((video: any, i: any) => (
           <Link
-                to={"/video/" + video.id}
+            to={video.isFreeVod ? "/video/" + video.id : "#"}
             className={
               "lesson-playlist__item d-flex align-items-center" +
               " " +
@@ -73,7 +71,9 @@ function LessonPlayList({
             }
             key={i}
             id={"listItem" + video.id}
-                onClick={() => video.isFreeVod ? setVideoActive(video) : {}}
+            onClick={() =>
+              video.isFreeVod ? setVideoActive(video) : setOpen(true)
+            }
           >
             <span className="lesson-playlist__item--count">
               {Number(i) + 1}
@@ -98,14 +98,16 @@ function LessonPlayList({
         ))
       ) : (
         <Link
-              to={"/video/" + category.id}
+          to={category.isFreeVod ? "/video/" + category.id : "#"}
           className={
             "lesson-playlist__item d-flex align-items-center" +
             " " +
             (category?.id === selectedVideo?.id &&
               "lesson-playlist__item--active")
           }
-              onClick={() => category.isFreeVod ? setVideoActive(category) : ''}
+          onClick={() =>
+            category.isFreeVod ? setVideoActive(category) : setOpen(true)
+          }
           id={"listItem" + category.id}
         >
           <span className="lesson-playlist__item--count"></span>
@@ -127,9 +129,12 @@ function LessonPlayList({
           </div>
         </Link>
       )}
+      <Dialog
+        open={open}
+        setOpen={setOpen}
+        text="برای مشاهده این فیلم باید دوره را خریداری کنید."
+      />
     </div>
-      }
-    </>
   );
 }