reza added mobile home light mode

src/components/GradeFilter/index.scss

@@ -13,8 +13,16 @@
     background-color: $gray13;
     border: none;
     .grade-filter__list{
-      background-color: white;
+      backdrop-filter: blur(5px);
-      border: 1px solid black;
+      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;

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"
+          theme === "light" ? "home-search-box-light" : "home-search-box-dark",
-            ? "home-search-box-light"
-            : "home-search-box-dark",
         ],
         " "
       )}
@@ -47,19 +49,31 @@ function HomeSearchBox({
         >
           <img src={search} alt="" />
         </button>
-
+        {light ? (
-        <img
+          <img
-          className="mobile home-search-box__searchIcon"
+            className="mobile home-search-box__searchIcon"
-          src={search}
+            src={searchBlack}
-          onClick={() => sortFilter({ search: inputValue, sort: selectedSort })}
+            onClick={() =>
-          alt=""
+              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">

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;
     }

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([
+      className={_.join(
-        "nav align-items-center justify-content-center",
+        [
-        theme === "light" ? "nav-light" : "nav-dark",
+          "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">

src/components/NavbarDrawer/NavbarDrawer.scss

@@ -1,8 +1,23 @@
-.MuiDrawer-paperAnchorRight {
+.navbar-drawer-light{
-  background: rgb(28, 28, 28) !important;
+  .MuiDrawer-paperAnchorRight {
-  &::-webkit-scrollbar {
+    background: white !important;
-    display: none !important;
+    &::-webkit-scrollbar {
-    width: 0px !important;
+      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 {

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">
           <>

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;

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> */}