From fa766b123df4a54f08f4b28a4db0b2a193a2efbd Mon Sep 17 00:00:00 2001
From: Reza_ashrafi <reza@Rezas-MacBook-Pro.local>
Date: Sat, 20 Nov 2021 14:41:47 +0330
Subject: [PATCH] reza added dark mode switch

---
 src/components/JolPlayer/index.js     |   2 +-
 src/components/Navbar/index.tsx       |   2 +
 src/components/ThemeSwitch/index.scss | 187 ++++++++++++++++++++++++++
 src/components/ThemeSwitch/index.tsx  |  27 ++++
 src/custom.scss                       |   1 +
 src/views/VideoTube/index.scss        |   2 +-
 src/views/VideoTube/index.tsx         |  25 ++--
 7 files changed, 233 insertions(+), 13 deletions(-)
 create mode 100644 src/components/ThemeSwitch/index.scss
 create mode 100644 src/components/ThemeSwitch/index.tsx

diff --git a/src/components/JolPlayer/index.js b/src/components/JolPlayer/index.js
index b723352..ad53604 100644
--- a/src/components/JolPlayer/index.js
+++ b/src/components/JolPlayer/index.js
@@ -7,7 +7,7 @@ const Video = ({ fileIds, posterId }) => {
         option={{
           videoSrc: `https://dnvn.ir/api/v1/file/${fileIds}`,
           width: "100%",
-          height: window.innerWidth > 1000 ? 450 : 250,
+          height: window.innerWidth > 1000 ? window.innerHeight - 300 : 250,
           theme: "#4dd35b",
           language: "en",
           isShowMultiple: window.innerWidth > 700,
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 26242bf..8d3fa7c 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -12,6 +12,7 @@ import { connect } from "react-redux";
 import _ from "lodash";
 import searchIcon from "../../assets/icons/search.png";
 import searchBlackIcon from "../../assets/icons/searchBlack.svg";
+import ThemeSwitch from "../ThemeSwitch";
 
 const useStyles = makeStyles({
   list: {
@@ -95,6 +96,7 @@ function Navbar(props: any) {
           onClick={toggleDrawer("right", true)}
         />
         <ul className="nav__container--buttons d-flex align-items-center">
+          <li><ThemeSwitch /></li>
           <li className="nav__search">
             <Link to="/search">
               {theme === "dark" ? (
diff --git a/src/components/ThemeSwitch/index.scss b/src/components/ThemeSwitch/index.scss
new file mode 100644
index 0000000..329fa54
--- /dev/null
+++ b/src/components/ThemeSwitch/index.scss
@@ -0,0 +1,187 @@
+:root {
+  /** sunny side **/
+  --blue-background: #C2E9F6;
+  --blue-border: #72cce3;
+  --blue-color: #96dcee;
+  --yellow-background: #fffaa8;
+  --yellow-border: #f5eb71;
+  /** dark side **/
+  --indigo-background: #808fc7;
+  --indigo-border: #5d6baa;
+  --indigo-color: #6b7abb;
+  --gray-border: #e8e8ea;
+  --gray-dots: #e8e8ea;
+  /** general **/
+  --white: #fff;
+}
+
+// * {
+//   margin: 0;
+//   padding: 0;
+// }
+
+// body {
+//   display: grid;
+//   place-items: center;
+//   min-height: 100vh;
+//   position: relative;
+// }
+
+.background {
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: var(--blue-background);
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  transition: all 250ms ease-in;
+}
+
+.toggle--checkbox {
+  display: none;
+}
+.toggle--checkbox:checked {
+  /** This will all flip from sun to moon **/
+  /** Change the label color **/
+}
+.toggle--checkbox:checked ~ .background {
+  background: var(--indigo-background);
+}
+.toggle--checkbox:checked + .toggle--label {
+  background: var(--indigo-color);
+  border-color: var(--indigo-border);
+  /** Change the cloud to stars **/
+  /** Change the sun into the moon **/
+  /** Show the dimples on the moon **/
+}
+.toggle--checkbox:checked + .toggle--label .toggle--label-background {
+  left: 60px;
+  width: 5px;
+}
+.toggle--checkbox:checked + .toggle--label .toggle--label-background:before {
+  width: 5px;
+  height: 5px;
+  top: -25px;
+}
+.toggle--checkbox:checked + .toggle--label .toggle--label-background:after {
+  width: 5px;
+  height: 5px;
+  left: -30px;
+  top: 20px;
+}
+.toggle--checkbox:checked + .toggle--label:before {
+  background: var(--white);
+  border-color: var(--gray-border);
+  animation-name: switch;
+  animation-duration: 350ms;
+  animation-fill-mode: forwards;
+}
+.toggle--checkbox:checked + .toggle--label:after {
+  transition-delay: 350ms;
+  opacity: 0;
+}
+.toggle--label {
+  /** Placeholder element, starting at blue **/
+  width: 70px;
+  height: 35px;
+  margin-right: 60px;
+  background: var(--blue-color);
+  border-radius: 100px;
+  border: 5px solid var(--blue-border);
+  display: flex;
+  position: relative;
+  transition: all 350ms ease-in;
+  /** The sun cloud and moon stars **/
+  /** Sun/Moon element **/
+  /** Gray dots on the moon **/
+}
+.toggle--label-background {
+  opacity: 0;
+  width: 10px;
+  height: 5px;
+  border-radius: 5px;
+  position: relative;
+  background: var(--white);
+  left: 5px;
+  top: 12px;
+  transition: all 150ms ease-in;
+}
+// .toggle--label-background:before {
+//   content: "";
+//   position: absolute;
+//   top: -5px;
+//   width: 40px;
+//   height: 5px;
+//   border-radius: 5px;
+//   background: var(--white);
+//   left: -20px;
+//   transition: all 150ms ease-in;
+// }
+// .toggle--label-background:after {
+//   content: "";
+//   position: absolute;
+//   top: 2px;
+//   width: 40px;
+//   height: 5px;
+//   border-radius: 5px;
+//   background: var(--white);
+//   left: -10px;
+//   transition: all 150ms ease-in;
+// }
+.toggle--label:before {
+  animation-name: reverse;
+  animation-duration: 350ms;
+  animation-fill-mode: forwards;
+  transition: all 350ms ease-in;
+  content: "";
+  width: 25px;
+  height: 25px;
+  border: 5px solid var(--yellow-border);
+  top: 1px;
+  left: 0px;
+  position: absolute;
+  border-radius: 82px;
+  background: var(--yellow-background);
+}
+.toggle--label:after {
+  transition-delay: 0ms;
+  transition: all 250ms ease-in;
+  position: absolute;
+  content: "";
+  box-shadow: var(--gray-dots) -13px 0 0 2px, var(--gray-dots) -24px 14px 0 -2px;
+  left: 30px;
+  top: 12px;
+  width: 6px;
+  height: 6px;
+  background: transparent;
+  border-radius: 50%;
+  opacity: 0;
+}
+
+@keyframes switch {
+  0% {
+    left: 0px;
+  }
+  60% {
+    left: 0px;
+    width: 62px;
+  }
+  100% {
+    left: 33px;
+    width: 25px;
+  }
+}
+@keyframes reverse {
+  0% {
+    left: 33px;
+    width: 38px;
+  }
+  60% {
+    left: 2px;
+    width: 62px;
+  }
+  100% {
+    left: 2px;
+  }
+}
\ No newline at end of file
diff --git a/src/components/ThemeSwitch/index.tsx b/src/components/ThemeSwitch/index.tsx
new file mode 100644
index 0000000..c5c3956
--- /dev/null
+++ b/src/components/ThemeSwitch/index.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { connect } from "react-redux";
+import { publicApi } from "../../redux/actions";
+
+function ThemeSwitch({ theme, setTheme }: any) {
+  return (
+    <div className="desktop">
+      <input
+        type="checkbox"
+        id="toggle"
+        checked={theme === 'dark'}
+        className="toggle--checkbox"
+        onChange={() => setTheme(theme === "light" ? "dark" : "light")}
+      />
+      <label htmlFor="toggle" className="toggle--label">
+        <span className="toggle--label-background"></span>
+      </label>
+    </div>
+  );
+}
+
+export default connect(
+  (state: any) => ({
+    theme: state.publicApi.theme,
+  }),
+  { setTheme: publicApi.setTheme }
+)(ThemeSwitch);
diff --git a/src/custom.scss b/src/custom.scss
index ba8a284..97ceacf 100644
--- a/src/custom.scss
+++ b/src/custom.scss
@@ -9,6 +9,7 @@
 @import "./components/Textarea/index.scss";
 @import "./components/Timer/index.scss";
 @import "./components/Vocal/Vocal.scss";
+@import "./components/ThemeSwitch/index.scss";
 @import "./views/Auth/index.scss";
 @import "./views/About/index.scss";
 @import "./views/Contact/index.scss";
diff --git a/src/views/VideoTube/index.scss b/src/views/VideoTube/index.scss
index 091fc06..812da7c 100644
--- a/src/views/VideoTube/index.scss
+++ b/src/views/VideoTube/index.scss
@@ -263,6 +263,7 @@
       }
     }
     &--suggests {
+      background-color: inherit;
       header {
         width: 100%;
         h2 {
@@ -347,7 +348,6 @@
         }
       }
       &--suggests {
-        background-color: #001702;
         header {
           padding: 20px 12px;
           // background-color: #8bd09746;
diff --git a/src/views/VideoTube/index.tsx b/src/views/VideoTube/index.tsx
index 858f0ba..44415be 100644
--- a/src/views/VideoTube/index.tsx
+++ b/src/views/VideoTube/index.tsx
@@ -129,17 +129,20 @@ function VodTube({
                 </div>
               </section>
             )}
-            <section className="video-tube__sidebar--suggests d-flex flex-column">
-              <header className="d-flex justify-content-between align-items-center">
-                <h2>پیشنهاد دانوین برای شما</h2>
-                <span>تا 50% تخفیف </span>
-              </header>
-              <div className="video-tube__sidebar--suggests___list d-flex justify-content-between align-items-center">
-                {info?.related.slice(0, 3).map((item: any, i: any) => (
-                  <Book data={item} key={i} />
-                ))}
-              </div>
-            </section>
+            {info?.related && (
+              <section className="video-tube__sidebar--suggests d-flex flex-column">
+                <header className="d-flex justify-content-between align-items-center">
+                  <h2>پیشنهاد دانوین برای شما</h2>
+                  <span>تا 50% تخفیف </span>
+                </header>
+                <div className="video-tube__sidebar--suggests___list d-flex justify-content-between align-items-center">
+                  {info?.related.slice(0, 3).map((item: any, i: any) => (
+                    <Book data={item} key={i} />
+                  ))}
+                </div>
+              </section>
+            )}
+
             <section className="mobile video-tube__content--comments flex-column">
               <header className="d-flex justify-content-between align-items-center">
                 <h2>نظرات</h2>