From 952355c1cde6810d664dccaa477a42ae7325c298 Mon Sep 17 00:00:00 2001
From: Reza <reza@Rezas-MacBook-Pro.local>
Date: Sat, 6 Nov 2021 13:35:52 +0330
Subject: [PATCH] reza added mobile home light mode

---
 src/assets/icons/searchBlack.png              | Bin 0 -> 619 bytes
 src/assets/icons/voice-black.png              | Bin 0 -> 601 bytes
 src/components/GradeFilter/index.scss         |  18 +++++++--
 src/components/HomeSearchBox/index.tsx        |  36 ++++++++++++------
 src/components/Navbar/index.scss              |   3 +-
 src/components/Navbar/index.tsx               |  14 ++++---
 src/components/NavbarDrawer/NavbarDrawer.scss |  25 +++++++++---
 src/components/NavbarDrawer/NavbarDrawer.tsx  |  23 +++++++----
 src/custom.scss                               |   2 +-
 src/views/Home/Courses/index.tsx              |   2 +-
 10 files changed, 88 insertions(+), 35 deletions(-)
 create mode 100644 src/assets/icons/searchBlack.png
 create mode 100644 src/assets/icons/voice-black.png

diff --git a/src/assets/icons/searchBlack.png b/src/assets/icons/searchBlack.png
new file mode 100644
index 0000000000000000000000000000000000000000..8601f9f8e94844081c5f64b88f4b0f10a65a89ac
GIT binary patch
literal 619
zcmV-x0+juUP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00004b3#c}2nYxW
zd<bNS0006aNkl<ZNK3U<+i}7$5X21s&_PTEm<kd;86Jr%04l(#fKUOUf<Oi4IsCeV
zxPzDu;G2iD>ybUe*upT0W;C3U?sj!|T4}j|9-1ota=CoNdIj^v_kCT{G#$1J+lB2G
z3Wa&SUiVZn5&<@wjea~HzZh8M44@r=K3c8TIBnk*z+$oJV)F=&CH!tNCzuY{dSts^
zuZ`2`WMG}(9TAx8y`<Az05CWl$vg*ka|G&|rnyUFhZGWo1fH<p!~SY~e+0m^91e$X
zGRNj#yWOVa&0*Vi3G5wgWUa<XmnAzz0ATMR_%oR!IE$Nk2y!fZ5l%IL5HJ`4fan$*
z<`%^@RB1^=U9DCY$c>mP5G=<5KJdo?a|m?W4-F9Y>4+FnW&$HjPyBfIq9nx$0ocz)
z6svse;;2Azf={gX5$nC#Y|@TuaCNkM*^63Ur8+FKiw%{0K3{D#8nho8NYM=JU*T+`
z4m0@#6MS^;>Hj1KNYNG1-~?fd!JGoQ`v`rZUq6Xmq`D|s!K4nlAQ|<md{L4#MFk}J
z?%}J;7d0++fm|RMwcgCqvJ8Gcp9eyHFJvMra>!2P(ZM&>QK|I_Z^jTHI|$|^^#lYG
z>d1cXOKEY$D@N%yFm>@uS>Gct#gXp^^~{By)k2WeCsWpXMgFG<W-(Yywj&Vbn;Zrv
z7+4x$OO`G!q?dFdV<3TWW&+6Cs#1zAG|7Zb^5+0?GQZ%_PAHvL?o|K)002ovPDHLk
FV1lvu2(ADC

literal 0
HcmV?d00001

diff --git a/src/assets/icons/voice-black.png b/src/assets/icons/voice-black.png
new file mode 100644
index 0000000000000000000000000000000000000000..32c22167705cf1015ade7566524c07a5278d62dc
GIT binary patch
literal 601
zcmV-f0;c_mP)<h;3K|Lk000e1NJLTq000~S000~a1^@s6at+^<00004b3#c}2nYxW
zd<bNS0006INkl<ZNK4(7T~5M46on~)XW4<c0$>Hg3Ty&Aiz~1@psv8W0`VD$!wQ5Q
zumf=g)@Od|Ib?>^VcJef#l%TSL(`e>-gD2~>y*yCoHO%Exq$tCzZpf*ErM)1juY;7
zJ29P3U-ATP4FoK}!S{y4m+SSqBZLTTz*fLsujeD9VakEa@p#-S42bL){YA!scYuzv
zpqUvWyEd|WiywqKe&F4u_HH(rOx!|&0L?a=%|O))nGXPXmXHN9Y!?j-k(mIvPM6BV
zRaV6V2>^`OU<6<tPdZoC_H-a!3F!h#r`HfbIyS^}CBZdaQYkf^yVNB<GK~V@zz$3>
zH<>1(PKOKu#P-N&qF)0dD5Jz_zz1aLpPC_nPmt8hl$0M(61Bl~-FmfJeb2JH{yik!
z2W$&uu_M*45WpP&uhXFDr&lo93W|6z)uZx&6;Sm~wTV*#8wpKnZ-=&qy>xF0+40&O
zEn{ngj5Wx}jh~3T#p^+7E0s!s=x@|1Y;pK`7*Rr&LQRy!zM9xeyWOr^E|*_%(2w!M
zU;y6F!}vXmsgl}LQ=7NymB@k@-P>-rGkxyS#RzJM0Qg)$5jSl%+D;2f)u3zuvzGfM
z+Z${3h4+EUm3k2~focOK27o^rs3Awx3QvJHI4X4F>ru+qWxQu5XU5-IXBgk~7eJcG
nN6lE<T<fF^a}l(U|3B~>p_yMS<`MuC00000NkvXXu0mjf-WCg?

literal 0
HcmV?d00001

diff --git a/src/components/GradeFilter/index.scss b/src/components/GradeFilter/index.scss
index 3e7375a..30523f9 100644
--- a/src/components/GradeFilter/index.scss
+++ b/src/components/GradeFilter/index.scss
@@ -13,8 +13,16 @@
     background-color: $gray13;
     border: none;
     .grade-filter__list{
-      background-color: white;
-      border: 1px solid black;
+      backdrop-filter: blur(5px);
+      background-color: rgba($gray12, 0.85);
+      li{
+        border-color: $gray11 !important;
+        color: $gray5 !important;
+      }
+      // border: 1px solid black;
+    }
+    .grade-filter__box{
+      background-color: $gray12 !important;
     }
   }
   h1{
@@ -164,11 +172,11 @@
     position: relative;
     h1{
       font-size: calc(100vw / 30);
-      background-color: $green;
+      background-color: $green5;
       box-shadow: 0px 0px 2px $green;
       border-top-right-radius: 8px;
       border-bottom-right-radius: 8px;
-      padding: 12px 15px;
+      padding: 13px 15px;
       color: white;
     }
     &__box{
@@ -178,6 +186,8 @@
       align-items: center;
       position: relative;
       height: 42px;
+      border-top-left-radius: 10px;
+      border-bottom-left-radius: 10px;
       & img{
         position: absolute;
         left: 5px;
diff --git a/src/components/HomeSearchBox/index.tsx b/src/components/HomeSearchBox/index.tsx
index 8487e0a..66ddfb3 100644
--- a/src/components/HomeSearchBox/index.tsx
+++ b/src/components/HomeSearchBox/index.tsx
@@ -3,7 +3,9 @@ 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 voice from "../../assets/icons/voice.png";
+import voiceBlack from "../../assets/icons/voice-black.png";
 
 function HomeSearchBox({
   lastItems,
@@ -22,14 +24,14 @@ function HomeSearchBox({
   const submitSort = (value: any) => {
     sortFilter({ search: inputValue, sort: value });
   };
+
+  const light = theme === "light";
   return (
     <section
       className={_.join(
         [
           "home-search-box d-flex flex-column align-items-center",
-          theme === "light"
-            ? "home-search-box-light"
-            : "home-search-box-dark",
+          theme === "light" ? "home-search-box-light" : "home-search-box-dark",
         ],
         " "
       )}
@@ -47,19 +49,31 @@ function HomeSearchBox({
         >
           <img src={search} alt="" />
         </button>
-
-        <img
-          className="mobile home-search-box__searchIcon"
-          src={search}
-          onClick={() => sortFilter({ search: inputValue, sort: selectedSort })}
-          alt=""
-        />
+        {light ? (
+          <img
+            className="mobile home-search-box__searchIcon"
+            src={searchBlack}
+            onClick={() =>
+              sortFilter({ search: inputValue, sort: selectedSort })
+            }
+            alt=""
+          />
+        ) : (
+          <img
+            className="mobile home-search-box__searchIcon"
+            src={search}
+            onClick={() =>
+              sortFilter({ search: inputValue, sort: selectedSort })
+            }
+            alt=""
+          />
+        )}
 
         <button
           className="home-search-box__voice"
           onClick={() => setVocal(true)}
         >
-          <img src={voice} alt="" />
+          {light ? <img src={voiceBlack} alt="" /> : <img src={voice} alt="" />}
         </button>
       </form>
       <footer className="desktop">
diff --git a/src/components/Navbar/index.scss b/src/components/Navbar/index.scss
index 80efaf0..b2c042d 100644
--- a/src/components/Navbar/index.scss
+++ b/src/components/Navbar/index.scss
@@ -1,7 +1,7 @@
 .nav{
   width: 100%;
   height: 60px;
-  padding: 0px 10px;
+  padding: 0px;
   position: fixed !important;
   top: 0px !important;
   left: 0px;
@@ -26,6 +26,7 @@
   &__container{
     width: 100%;
     font-family: numeralLight;
+    padding : 0px 5px;
     a{
       color: white;
     }
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 4a854c1..a6dafc8 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -59,6 +59,7 @@ function Navbar(props: any) {
         user={props.user}
         logout={props.logout}
         needUpdate={props.needUpdate}
+        theme={theme}
       />
     </div>
   );
@@ -66,10 +67,13 @@ function Navbar(props: any) {
   const userStatus = proxy.status();
   return (
     <nav
-      className={_.join([
-        "nav align-items-center justify-content-center",
-        theme === "light" ? "nav-light" : "nav-dark",
-      ], " ")}
+      className={_.join(
+        [
+          "nav align-items-center justify-content-center",
+          theme === "light" ? "nav-light" : "nav-dark",
+        ],
+        " "
+      )}
     >
       <div className="nav__container d-flex align-items-center justify-content-between">
         <ul className="nav__container--links desktop align-items-center">
@@ -85,7 +89,7 @@ function Navbar(props: any) {
         </ul>
         <MenuRoundedIcon
           className="mobile"
-          style={{ color: theme === "dark" ? "white" : "black", fontSize: 40 }}
+          style={{ color: theme === "dark" ? "white" : "#555", fontSize: 40 }}
           onClick={toggleDrawer("right", true)}
         />
         <ul className="nav__container--buttons d-flex align-items-center">
diff --git a/src/components/NavbarDrawer/NavbarDrawer.scss b/src/components/NavbarDrawer/NavbarDrawer.scss
index bbbfa11..1c6868a 100644
--- a/src/components/NavbarDrawer/NavbarDrawer.scss
+++ b/src/components/NavbarDrawer/NavbarDrawer.scss
@@ -1,8 +1,23 @@
-.MuiDrawer-paperAnchorRight {
-  background: rgb(28, 28, 28) !important;
-  &::-webkit-scrollbar {
-    display: none !important;
-    width: 0px !important;
+.navbar-drawer-light{
+  .MuiDrawer-paperAnchorRight {
+    background: white !important;
+    &::-webkit-scrollbar {
+      display: none !important;
+      width: 0px !important;
+    }
+  }
+  h1, div{
+    color: $gray5;
+  }
+}
+
+.navbar-drawer-dark{
+  .MuiDrawer-paperAnchorRight {
+    background: rgb(28, 28, 28) !important;
+    &::-webkit-scrollbar {
+      display: none !important;
+      width: 0px !important;
+    }
   }
 }
 .navbar-drawer {
diff --git a/src/components/NavbarDrawer/NavbarDrawer.tsx b/src/components/NavbarDrawer/NavbarDrawer.tsx
index 8dd5376..be5a9c9 100644
--- a/src/components/NavbarDrawer/NavbarDrawer.tsx
+++ b/src/components/NavbarDrawer/NavbarDrawer.tsx
@@ -21,8 +21,9 @@ import mobileProfile from "../../assets/icons/mobileProfile.svg";
 import mobileDanger from "../../assets/icons/mobileDanger.svg";
 import mobileLogout from "../../assets/icons/mobileLogout.svg";
 import proxy from "../../redux/proxy";
+import _ from "lodash";
 
-const NavbarDrawer = ({ status, logout }: any) => {
+const NavbarDrawer = ({ status, logout, theme }: any) => {
   const [dropdown, setDropdown] = useState(false);
   const links = [
     {
@@ -71,28 +72,28 @@ const NavbarDrawer = ({ status, logout }: any) => {
       message: "",
     },
     {
-      name : 'یوتیوب',
+      name: "یوتیوب",
       link: "/video-tube",
       icon: <img src={mobileHome} alt="صفحه اصلی" />,
       toast: "",
       message: "",
     },
     {
-      name : 'خریداشتراک',
+      name: "خریداشتراک",
       link: "/subscribe",
       icon: <img src={mobileHome} alt="صفحه اصلی" />,
       toast: "",
       message: "",
     },
     {
-      name : 'سوالات متداول',
+      name: "سوالات متداول",
       link: "/faq",
       icon: <img src={mobileHome} alt="صفحه اصلی" />,
       toast: "",
       message: "",
     },
     {
-      name : 'صفحه محصول',
+      name: "صفحه محصول",
       link: "/courses/1",
       icon: <img src={mobileHome} alt="صفحه اصلی" />,
       toast: "",
@@ -178,9 +179,17 @@ const NavbarDrawer = ({ status, logout }: any) => {
   ];
   const statusx = proxy.status();
   let score = 2;
-
+  const light = theme === "light";
   return (
-    <div className="navbar-drawer d-flex flex-column">
+    <div
+      className={_.join(
+        [
+          "navbar-drawer d-flex flex-column",
+          light ? "navbar-drawer-light" : "navbar-drawer-dark",
+        ],
+        " "
+      )}
+    >
       {statusx ? (
         <div className="navbar-drawer__header d-flex align-items-center">
           <>
diff --git a/src/custom.scss b/src/custom.scss
index e1ce798..90b9615 100644
--- a/src/custom.scss
+++ b/src/custom.scss
@@ -115,7 +115,7 @@ p {
   padding-top: 60px;
   min-height: 100vh;
   position: relative;
-  padding-bottom: 100px;
+  padding-bottom: 20px;
   font-family: numeralLight;
   &__light{
     background: white;
diff --git a/src/views/Home/Courses/index.tsx b/src/views/Home/Courses/index.tsx
index 1173cdd..9de5970 100644
--- a/src/views/Home/Courses/index.tsx
+++ b/src/views/Home/Courses/index.tsx
@@ -26,7 +26,7 @@ function Courses({ number, courses, selectedSort, theme }: any) {
         light ? "home-courses-light" : "home-courses-dark",
       ], " ")}
     >
-      <header className="d-flex justify-content-between">
+      <header className="d-flex justify-content-between align-items-center">
         <div className="d-flex flex-column">
           <h1>{selectedSort}</h1>
           {/* <span>در این قسمت شاید یک متن جهت زیباسازی قرار بگیرد.</span> */}