reza added dashboard

src/components/Navbar/index.js

@@ -196,7 +196,7 @@ function Navbar({
   ) : (
     <header
       className={`w-full border-b border-gray-200 border-solid fixed top-0 right-0 bg-white z-20`}
-      style={{boxShadow : '0px 0px 10px rgba(0,0,0,0.1)'}}
+      style={{ boxShadow: "0px 0px 10px rgba(0,0,0,0.1)" }}
     >
       <div className={`w-11/12 mx-auto flex flex-col`}>
         <div className="w-full flex flex-row items-center py-3 relative justify-between h-ful">
@@ -259,13 +259,20 @@ function Navbar({
                 {/* <img src={profileIcon} alt="" className="w-5 h-5" /> */}
               </div>
             )}
-            {!isLogin && (
+            {!isLogin ? (
               <Link
                 to="/signup"
-                className="bg-blueC0 text-white rounded-md px-4 py-3 text-sm mr-7 hover:bg-opacity-90 shadow-sm"
+                className="bg-blueC0 font-semibold text-white rounded-md px-4 py-3 text-sm mr-7 hover:bg-opacity-90 shadow-sm"
               >
                 ورود یا ثبت نام
               </Link>
+            ) : (
+              <Link
+                to="/dashboard"
+                className="bg-blueC0 font-semibold text-white rounded-md px-4 py-3 text-sm mr-7 hover:bg-opacity-90 shadow-sm"
+              >
+                حساب کاربری
+              </Link>
             )}
           </div>
         </div>
@@ -304,10 +311,6 @@ Navbar.defaultProps = {
       link: "/about-us",
       name: "درباره ما",
     },
-    {
-      link: "/orders",
-      name: "پیگیری",
-    },
     {
       link: "/blogs",
       name: "وبلاگ",

src/redux/actions/public.js

@@ -54,8 +54,10 @@ const publicApi = {
     await dispatch({ type: "active/category", data }),
   setVideoActive: (data) => async (dispatch) =>
     await dispatch({ type: "active/video", data }),
-  getArList: (data, history) => async (dispatch) =>
-    await proxy.get("public/ar", data, { history, dispatch }),
+  getArList: (data) => async (dispatch) =>
+    await proxy.get("public/ar", data, { dispatch }),
+  setDashboardOptions: (data) => async (dispatch) =>
+    await dispatch({ type: "public/dashboard", data }),
 };
 
 export default publicApi;

src/redux/reducers/public.js

@@ -63,7 +63,11 @@ const initialState = {
   desktopContentTransform: false,
   overLayer: false,
   provinces: [],
-  cities : []
+  cities : [],
+  dashboardOptions : {
+    profile : null,
+    support : null,
+  }
 };
 
 const grades = [
@@ -85,6 +89,8 @@ const grades = [
 export default function publicApi(state = initialState, action) {
   let { type, data } = action;
   switch (type) {
+    case "public/dashboard":
+      return {...state,error : null, loading :false, dashboardOptions : data }
     case "public/setOverLayer":
       return { ...state, overLayer: data };
     case "public/setDesktopContentTransform":
@@ -117,7 +123,6 @@ export default function publicApi(state = initialState, action) {
         error: null,
         selectedVideo: data.vods?.filter((item) => item.id !== videoId)[0],
       };
-
     case "public/vod/bookCourse":
       let allCats;
       allCats = Array.from(

src/router.js

@@ -371,7 +371,7 @@ function Router({
               }
             />
           </Routes>
-          {headerOptions?.shown && !isMobile && <FooterDesign1 hasHeader />}
+          {/* {headerOptions?.shown && !isMobile && <FooterDesign1 hasHeader />} */}
         </BrowserRouter>
       </div>
     </div>

src/views/Auth/SignUp/index.js

@@ -195,7 +195,7 @@ function SignUp({
               inputMode="numeric"
               style={{ direction: "ltr" }}
               name="otp1"
-              className="bg-grayF9 rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1"
+              className="bg-grayF9 outline-none rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1"
               onChange={(e) =>
                 onChange(
                   e.target.name,
@@ -209,7 +209,7 @@ function SignUp({
               inputMode="numeric"
               style={{ direction: "ltr" }}
               name="otp2"
-              className="bg-grayF9 rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1"
+              className="bg-grayF9 outline-none rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1"
               onChange={(e) =>
                 onChange(
                   e.target.name,
@@ -223,7 +223,7 @@ function SignUp({
               inputMode="numeric"
               style={{ direction: "ltr" }}
               name="otp3"
-              className="bg-grayF9 rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1"
+              className="bg-grayF9 outline-none rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1"
               onChange={(e) =>
                 onChange(
                   e.target.name,
@@ -237,7 +237,7 @@ function SignUp({
               inputMode="numeric"
               style={{ direction: "ltr" }}
               name="otp4"
-              className="bg-grayF9 rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1"
+              className="bg-grayF9 outline-none rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1"
               onChange={(e) =>
                 onChange(
                   e.target.name,

src/views/Dashboard/index.js

@@ -1,16 +1,18 @@
-import React from "react";
+import React, {useState} from "react";
 import { connect } from "react-redux";
 import Sidebar from "./layouts/SidebarMenu";
 import Main from "./layouts/Main";
 
 export const Dashboard = ({ isMobile }) => {
+  const [page, setPage] = useState("userItems");
+
   return isMobile ? (
     <div className=""></div>
   ) : (
-    <div className="w-full bg-grayF9 py-5">
-      <div className="gap-5 w-11/12 h-full mx-auto flex flex-row bg-transparent">
-        {/* <Sidebar /> */}
-        <Main />
+    <div className="w-full">
+      <div className="gap-5 w-full h-screen pt-20 mx-auto flex flex-row bg-transparent justify-end">
+        <Sidebar page={page} setPage={setPage} />
+        <Main page={page} />
       </div>
     </div>
   );

src/views/Dashboard/layouts/Main/MyBooks/index.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { connect } from "react-redux";
+import Product from "../../../../../components/Product";
+import ProductSuggestion from "../UserItems/ProductSuggestion";
+
+export const MyBooks = ({ books, grades, isMobile }) => {
+  return (
+    <div className="flex flex-1 flex-col">
+      <div className="flex flex-wrap gap-4 mb-5">
+        {books.slice(0,5).map((product, index) => (
+          <Product key={index} product={product} imageSize={5} />
+        ))}
+      </div>
+      <ProductSuggestion products={books} grades={grades} isMobile={isMobile} />
+    </div>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  books: state.book.list,
+  grades: state.publicApi.grades,
+  isMobile: state.publicApi.isMobile, 
+});
+
+const mapDispatchToProps = {};
+
+export default connect(mapStateToProps, mapDispatchToProps)(MyBooks);

src/views/Dashboard/layouts/Main/UserItems/ProductSuggestion/index.js

@@ -2,32 +2,33 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { Carousel } from "@trendyol-js/react-carousel";
 import Product from '../../../../../../components/Product';
-import arrow from "../../../../../../assets/icons/slider-arrow.svg";
+import arrow from "../../../../../../assets/icons/dropdown-blue.svg";
 
 function Suggestion({ products, grades, isMobile }) {
   return (
-    <div className="flex flex-col mt-8 px-4">
-      <strong className="text-blueC0 dark:text-white font-bold text-sm lg:text-base">
+    <div className="flex flex-col pl-7 pr-8 pt-4 border border-solid border-gray-200 shadow-all rounded-md">
+      <strong className="text-green7B dark:text-white font-bold text-2xl lg:text-base my-4">
         پیشنهادات ما به شما
       </strong>
       {products.length > 0 && (
         <div className="relative w-full" style={{ direction: "ltr" }}>
           <Carousel
-            show={Math.round(window.innerWidth / 300)}
+            show={Math.round(window.innerWidth / 400)}
             slide={2}
             swiping={true}
             useArrowKeys={true}
+            className=""
             transition={0.5}
             rightArrow={
               <img
-                className="absolute top-1/2 transform -translate-y-1/2 cursor-pointer p-2"
+                className="absolute top-1/2 transform -translate-y-1/2 cursor-pointer p-2 -rotate-90"
                 src={arrow}
                 alt=""
               />
             }
             leftArrow={
               <img
-                className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer -rotate-180 p-2"
+                className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer rotate-90 p-2 -left-3"
                 src={arrow}
                 alt=""
               />

src/views/Dashboard/layouts/Main/UserItems/index.js

@@ -13,7 +13,7 @@ export const UserItems = ({list, grades, getList, isMobile}) => {
     }
   },[]);
   return (
-    <div className="w-full flex flex-col lg:pt-20">
+    <div className="w-full flex flex-col divide-y divide-solid divide-gray-100">
       <MyBooks books={list} grades={grades} />
       <br/>
       <Videos videos={list} grades={grades} />

src/views/Dashboard/layouts/Main/index.js

@@ -1,20 +1,28 @@
 import React, { useState, useEffect } from "react";
 import { connect } from "react-redux";
-import {publicApi} from '../../../../redux/actions';
+import { publicApi } from "../../../../redux/actions";
 
 import Orders from "../../../Orders";
 import UserItems from "../Main/UserItems";
+import MyBooks from './MyBooks';
 
-export const Main = ({setHeaderOptions}) => {
+export const Main = ({ setHeaderOptions, page }) => {
   useEffect(() => {
-    setHeaderOptions({shown: true});
-  },[]);
+    setHeaderOptions({ shown: true });
+  }, []);
   const views = {
     // orders: <Orders />,
-    userItems: <UserItems />
+    mybooks : <MyBooks />,
+    userItems: <UserItems />,
   };
-  const [page, setPage] = useState("userItems");
-  return <div className="w-full py-2.5">{views[page]}</div>;
+  return (
+    <div
+      className="overflow-y-scroll overflow-x-hidden flex-1 flex-shrink-0 no-scrollbar pl-5 pb-10 pt-4"
+      style={{ height: "calc(100vh - 80px)" }}
+    >
+      {views[page]}
+    </div>
+  );
 };
 
 const mapStateToProps = (state) => ({});

src/views/Dashboard/layouts/SidebarMenu/index.js

@@ -1,86 +1,155 @@
-import React from "react";
-import Switch from "../../../../components/Switch";
+import React, { useState } from "react";
+import Avatar from "../../../../components/Avatar";
+import { connect } from "react-redux";
+import { publicApi, user } from "../../../../redux/actions";
 
 import "./index.scss";
 
 //assets
-import downwardArrow from "./arrow-down.svg";
 import profilePic from "./profile-pic.svg";
-import element from "./element-4.svg";
-import folderOpen from "./folder-open.svg";
-import wallet from "./wallet-money.svg";
 import logout from "./logout.svg";
-import messageText from "./message-text.svg";
 import moon from "./moon.svg";
 import sms from "./sms.svg";
 import userEdit from "./user-edit.svg";
+import dropdownIcon from "../../../../assets/icons/dropdown-blue.svg";
 
-const SidebarMenu = ({ items, buttons }) => {
+const SidebarMenu = ({
+  profile,
+  support,
+  user,
+  dashboardOptions,
+  setDashboardOptions,
+  page,
+  setPage,
+  logout
+}) => {
+  const [toggleList, setToggleList] = useState({
+    profile: false,
+    support: false,
+  });
+
+  const Dropdown = ({ list, title, name, active, icon }) => {
     return (
-    <div className="bg-white py-5 px-3 shadow-sm border border-gray-300 rounded overflow-y-scroll no-scrollbar w-1/5">
-      {/* profile */}
-      <div className="flex flex-row items-center">
-        <img src={profilePic} alt="" className="w-12 rounded-full" />
-        <p className="text-blue-600 font-bold text-base flex-1 mx-2">
-          کامران کوهستانی شیرازی
-        </p>
-        <img src={downwardArrow} alt="" className="w-5" />
-      </div>
-      {/* divider */}
-      <div className="border border-gray-200 mt-5"></div>
-      <p className="text-tiny text-gray-400 my-4">منوی کاربری</p>
-      {/* items */}
-      {items.map((item, i) => (
-        <div className="flex flex-col item-center">
-          {/* menu items */}
+      <div className="flex flex-col">
         <div
-            key={i}
-            className="flex flex-row items-center cursor-pointer hover:bg-blue-100 rounded-md p-2"
+          className="flex flex-row justify-between items-center py-2 my-2 cursor-pointer group hover:bg-blueC0 hover:bg-opacity-10 rounded-md px-1"
+          onClick={() =>
+            setToggleList({ ...toggleList, [name]: !toggleList[name] })
+          }
         >
-            <img src={item.icon} alt="" />
-            <p className="text-blue-600 text-tiny flex-1 mx-2">{item.title}</p>
-            {item.notification && (
-              <div className=" w-6 h-6 bg-blue-700 text-center rounded-full flex flex-col items-center justify-center">
-                <span className=" text-white text-tiny">
-                  {item.notification}
-                </span>
+          <div className="flex items-center">
+            <img src={icon} alt="" className="ml-2 w-6 mb-1" />
+            <strong className="font-semibold text-base text-green7B">
+              {title}
+            </strong>
           </div>
-            )}
+          <img
+            src={dropdownIcon}
+            alt=""
+            className={`w-4 transform transition-all ${
+              toggleList[name] ? "rotate-180" : ""
+            }`}
+          />
         </div>
-          {/* sub items */}
-          {item.subItems.map((subItem, i) => (
+        <ul
+          className={`list-none p-0 mb-0 mt-0 mx-0 flex overflow-x-hidden flex-col transition-all`}
+          style={{
+            maxHeight: !toggleList[name] ? 0 : "calc(100vh)",
+            overflowY: !toggleList[name] ? "hidden" : "",
+          }}
+        >
+          {list.map((item, index) => (
+            <li
+              key={index}
+              className={`flex flex-row items-center cursor-pointer rounded-md hover:bg-gray-100`}
+              onClick={() => (page !== item.value ? setPage(item.value) : {})}
+            >
+              <span
+                className={`text-tiny font-medium py-2 my-1  px-4 rounded-full ${
+                  page === item.value ? "text-white bg-green-600" : "text-gray70"
+                }`}
+              >
+                {item.title}
+              </span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  };
+
+  const buttons = [
+    {
+      icon: null,
+      title: "کتاب های من",
+      onClick: () => setPage("mybooks"),
+      name: "mybooks",
+    },
+    {
+      icon: null,
+      title: "ویدئوهای من",
+      onClick: () => setPage("myvideos"),
+      name: "myvideos",
+    },
+    { icon: moon, title: "حالت شب", onClick: () => {}, name: "dark" },
+    {
+      icon: logout,
+      title: "خروج از حساب کاربری",
+      onClick: () => logout(),
+      name: "logout",
+    },
+  ];
+
+  return (
     <div
-              key={i}
-              className="flex flex-row items-center cursor-pointer hover:bg-gray-100 rounded-md p-2"
+      className="bg-grayF9 py-5 pl-4 pr-8 shadow-sm border border-gray-300 rounded overflow-y-scroll no-scrollbar divide-y divide-solid divide-gray-200"
+      style={{
+        height: "calc(100vh - 80px)",
+        minWidth: 400,
+      }}
     >
-              {subItem.name && (
-                <p className="text-gray-400 text-sm flex-1 mr-4">
-                  {subItem.name}
+      {/* profile */}
+      <div className="flex flex-row items-center mb-10">
+        <Avatar size={60} rounded={true} />
+        <p className="text-green7B font-bold text-base flex-1 mx-2">
+          {user.firstName + " " + user.lastName}
         </p>
-              )}
-              {subItem.num && (
-                <div className=" w-6 h-6 bg-yellow-400 text-center rounded-full flex flex-col items-center justify-center">
-                  <span className=" text-white text-xs">{subItem.num}</span>
       </div>
-              )}
-            </div>
-          ))}
-        </div>
-      ))}
-      {/* buttons */}
+      <Dropdown
+        list={support.list}
+        title={support.title}
+        name={support.name}
+        active={true}
+        icon={support.icon}
+        active={dashboardOptions.support}
+      />
+      <Dropdown
+        list={profile.list}
+        title={profile.title}
+        name={profile.name}
+        active={true}
+        icon={profile.icon}
+        active={dashboardOptions.profile}
+      />
       {buttons.map((button, i) => (
-        <div className="flex flex-col item-center">
-          {/* divider */}
-          <div className="border border-gray-200 my-1"></div>
+        <div
+          className="flex flex-col item-center mb-0"
+          onClick={() => button.onClick()}
+        >
           <div
             key={i}
-            className="flex flex-row items-center cursor-pointer hover:bg-blue-100 rounded-md p-2"
+            className={`flex flex-row items-center cursor-pointer rounded-md py-2 my-3  px-1`}
           >
             <img src={button.icon} alt="" />
-            <p className="text-blue-600 text-sm flex-1 mx-2">{button.title}</p>
-            {/* <div className="relative rounded-full overflow-hidden flex-1">
-              {button.leftIcon && <Switch />}
-            </div> */}
+            <strong
+              className={`${
+                page === button.name
+                  ? "text-white bg-green-600"
+                  : "text-green7B hover:bg-blueC0 hover:bg-opacity-10"
+              } text-base mx-2 p-2 rounded-full`}
+            >
+              {button.title}
+            </strong>
           </div>
         </div>
       ))}
@@ -88,68 +157,34 @@ const SidebarMenu = ({ items, buttons }) => {
   );
 };
 
-export default SidebarMenu;
+const mapStateToProps = (state) => ({
+  user: state.user.status,
+  dashboardOptions: state.publicApi.dashboardOptions,
+});
+
+const mapDispatchToProps = {
+  setDashboardOptions: publicApi.setDashboardOptions,
+  logout : user.logout
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(SidebarMenu);
 
 SidebarMenu.defaultProps = {
-  items: [
-    {
-      icon: element,
-      title: "داشبورد مدیریت",
-      notification: null,
-      subItems: [],
-    },
-    {
-      icon: folderOpen,
-      title: "پروژه ها",
-      notification: null,
-      subItems: [
-        { name: "افزدون پروژه", num: null },
-        { name: "مدیریت پروژه ها", num: null },
-        { name: "پروژه های حذف شده", num: null },
-      ],
-    },
-    {
-      icon: wallet,
-      title: "مالی و حسابداری",
-      notification: null,
-      subItems: [
-        { name: "تمدید سرویس", num: null },
-        { name: "بسته های اشتراکی", num: null },
-        { name: "فاکتور ها", num: 1 },
-        { name: "درخواست تسویه حساب", num: null },
-      ],
-    },
-    {
-      icon: userEdit,
-      title: "دیدگاه ها",
-      notification: null,
-      subItems: [],
-    },
-    {
+  profile: {
+    name: "profile",
     icon: userEdit,
     title: "حساب کاربری",
     notification: null,
-      subItems: [{ name: "ویرایش حساب کاربری", num: null }],
+    list: [{ title: "ویرایش حساب کاربری", value: "edit" }],
   },
-    {
+  support: {
+    name: "support",
     icon: sms,
     title: "پشتیبانی",
-      notification: 7,
-      subItems: [
-        { name: "تیکت ها", num: null },
-        { name: "ارسال تیکت جدید", num: null },
-        { name: "ویکی", num: null },
-      ],
-    },
-    {
-      icon: messageText,
-      title: "متستندات",
     notification: null,
-      subItems: [{ name: "API توسعه دهندگان", num: null }],
-    },
-  ],
-  buttons: [
-    { icon: moon, title: "حالت شب", leftIcon: moon },
-    { icon: logout, title: "خروج از حساب کاربری", leftIcon: null },
+    list: [
+      { title: "تیکت ها", value: "tickets" },
+      { title: "ارسال تیکت جدید", value: "send" },
     ],
+  },
 };

src/views/Dashboard/layouts/SidebarMenu/logout.svg

@@ -1,6 +1,6 @@
 <svg id="logout" xmlns="http://www.w3.org/2000/svg" width="24.545" height="24.545" viewBox="0 0 24.545 24.545">
-  <path id="Vector" d="M0,5.185C.317,1.5,2.209,0,6.351,0h.133c4.571,0,6.4,1.831,6.4,6.4V13.07c0,4.571-1.831,6.4-6.4,6.4H6.351c-4.111,0-6-1.483-6.341-5.1" transform="translate(9.102 2.547)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
-  <path id="Vector-2" data-name="Vector" d="M11.638,0H0" transform="translate(3.702 12.272)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
-  <path id="Vector-3" data-name="Vector" d="M3.426,0,0,3.426,3.426,6.852" transform="translate(2.557 8.846)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
+  <path id="Vector" d="M0,5.185C.317,1.5,2.209,0,6.351,0h.133c4.571,0,6.4,1.831,6.4,6.4V13.07c0,4.571-1.831,6.4-6.4,6.4H6.351c-4.111,0-6-1.483-6.341-5.1" transform="translate(9.102 2.547)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
+  <path id="Vector-2" data-name="Vector" d="M11.638,0H0" transform="translate(3.702 12.272)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
+  <path id="Vector-3" data-name="Vector" d="M3.426,0,0,3.426,3.426,6.852" transform="translate(2.557 8.846)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
   <path id="Vector-4" data-name="Vector" d="M0,0H24.545V24.545H0Z" transform="translate(24.545 24.545) rotate(180)" fill="none" opacity="0"/>
 </svg>

src/views/Dashboard/layouts/SidebarMenu/moon.svg

@@ -1,4 +1,4 @@
 <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">
-  <path id="Vector" d="M.025,9.556a9.631,9.631,0,0,0,17.352,4.858c.752-1.017.348-1.7-.907-1.467a8.7,8.7,0,0,1-1.907.128A8.547,8.547,0,0,1,6.4,4.716,8.154,8.154,0,0,1,7.083,1.37c.5-1.137-.1-1.677-1.247-1.192A9.442,9.442,0,0,0,.025,9.556Z" transform="translate(1.836 1.829)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
+  <path id="Vector" d="M.025,9.556a9.631,9.631,0,0,0,17.352,4.858c.752-1.017.348-1.7-.907-1.467a8.7,8.7,0,0,1-1.907.128A8.547,8.547,0,0,1,6.4,4.716,8.154,8.154,0,0,1,7.083,1.37c.5-1.137-.1-1.677-1.247-1.192A9.442,9.442,0,0,0,.025,9.556Z" transform="translate(1.836 1.829)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
   <path id="Vector-2" data-name="Vector" d="M0,0H22V22H0Z" transform="translate(22 22) rotate(180)" fill="none" opacity="0"/>
 </svg>

src/views/Dashboard/layouts/SidebarMenu/sms.svg

@@ -1,5 +1,5 @@
 <svg id="sms" xmlns="http://www.w3.org/2000/svg" width="21.904" height="21.904" viewBox="0 0 21.904 21.904">
-  <path id="Vector" d="M13.69,15.516H4.563C1.825,15.516,0,14.147,0,10.952V4.563C0,1.369,1.825,0,4.563,0H13.69c2.738,0,4.563,1.369,4.563,4.563v6.389C18.254,14.147,16.428,15.516,13.69,15.516Z" transform="translate(1.825 3.194)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
-  <path id="Vector-2" data-name="Vector" d="M9.127,0,6.27,2.282a2.889,2.889,0,0,1-3.423,0L0,0" transform="translate(6.389 8.214)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
+  <path id="Vector" d="M13.69,15.516H4.563C1.825,15.516,0,14.147,0,10.952V4.563C0,1.369,1.825,0,4.563,0H13.69c2.738,0,4.563,1.369,4.563,4.563v6.389C18.254,14.147,16.428,15.516,13.69,15.516Z" transform="translate(1.825 3.194)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
+  <path id="Vector-2" data-name="Vector" d="M9.127,0,6.27,2.282a2.889,2.889,0,0,1-3.423,0L0,0" transform="translate(6.389 8.214)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
   <path id="Vector-3" data-name="Vector" d="M0,0H21.9V21.9H0Z" fill="none" opacity="0"/>
 </svg>

src/views/Dashboard/layouts/SidebarMenu/user-edit.svg

@@ -1,9 +1,9 @@
 <svg id="user-edit" xmlns="http://www.w3.org/2000/svg" width="20.478" height="20.478" viewBox="0 0 20.478 20.478">
-  <path id="Vector" d="M8.533,4.266A4.266,4.266,0,1,1,4.266,0,4.266,4.266,0,0,1,8.533,4.266Z" transform="translate(5.973 1.707)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
+  <path id="Vector" d="M8.533,4.266A4.266,4.266,0,1,1,4.266,0,4.266,4.266,0,0,1,8.533,4.266Z" transform="translate(5.973 1.707)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
   <g id="Group" transform="translate(12.945 12.941)">
-    <path id="Vector-2" data-name="Vector" d="M3.446.489.426,3.509a1.051,1.051,0,0,0-.256.5L.008,5.165a.542.542,0,0,0,.648.648l1.152-.162a1.015,1.015,0,0,0,.5-.256L5.332,2.375a1.165,1.165,0,0,0,0-1.894A1.161,1.161,0,0,0,3.446.489Z" transform="translate(0 0)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
-    <path id="Vector-3" data-name="Vector" d="M0,0A2.718,2.718,0,0,0,1.894,1.894" transform="translate(3.011 0.924)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
+    <path id="Vector-2" data-name="Vector" d="M3.446.489.426,3.509a1.051,1.051,0,0,0-.256.5L.008,5.165a.542.542,0,0,0,.648.648l1.152-.162a1.015,1.015,0,0,0,.5-.256L5.332,2.375a1.165,1.165,0,0,0,0-1.894A1.161,1.161,0,0,0,3.446.489Z" transform="translate(0 0)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
+    <path id="Vector-3" data-name="Vector" d="M0,0A2.718,2.718,0,0,0,1.894,1.894" transform="translate(3.011 0.924)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
   </g>
-  <path id="Vector-4" data-name="Vector" d="M0,5.973C0,2.671,3.285,0,7.329,0A8.79,8.79,0,0,1,9.864.367" transform="translate(2.91 12.799)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
+  <path id="Vector-4" data-name="Vector" d="M0,5.973C0,2.671,3.285,0,7.329,0A8.79,8.79,0,0,1,9.864.367" transform="translate(2.91 12.799)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
   <path id="Vector-5" data-name="Vector" d="M0,0H20.478V20.478H0Z" fill="none" opacity="0"/>
 </svg>

src/views/Dashboard/layouts/SidebarMenu/wallet-money.svg

@@ -1,8 +1,8 @@
 <svg id="wallet-money" xmlns="http://www.w3.org/2000/svg" width="20.809" height="20.809" viewBox="0 0 20.809 20.809">
-  <path id="Vector" d="M6.2,0V1.76a2.916,2.916,0,0,1-3.1,2.7A2.924,2.924,0,0,1,0,1.76V0C0,1.491,1.387,2.549,3.1,2.549S6.2,1.483,6.2,0Z" transform="translate(3.123 14.619)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
-  <path id="Vector-2" data-name="Vector" d="M6.208,2.688a2.275,2.275,0,0,1-.329,1.179A3.186,3.186,0,0,1,3.1,5.237,3.206,3.206,0,0,1,.329,3.867,2.274,2.274,0,0,1,0,2.688,2.518,2.518,0,0,1,.9.789,3.309,3.309,0,0,1,3.1,0,3.355,3.355,0,0,1,5.289.789,2.465,2.465,0,0,1,6.208,2.688Z" transform="translate(3.113 9.546)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
-  <path id="Vector-3" data-name="Vector" d="M6.2,2.7V5.081C6.2,6.572,4.812,7.63,3.1,7.63S0,6.564,0,5.081V2.7A2.919,2.919,0,0,1,3.1,0,3.355,3.355,0,0,1,5.3.789,2.536,2.536,0,0,1,6.2,2.7Z" transform="translate(3.123 9.538)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
-  <path id="Vector-4" data-name="Vector" d="M4.447.884V2.671a.89.89,0,0,1-.867.884h-1.7A1.849,1.849,0,0,1,.008,1.934,1.741,1.741,0,0,1,.528.52,1.728,1.728,0,0,1,1.777,0h1.8A.89.89,0,0,1,4.447.884Z" transform="translate(14.628 8.627)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
-  <path id="Vector-5" data-name="Vector" d="M0,6.069V4.335A4.035,4.035,0,0,1,3.633.052,4.615,4.615,0,0,1,4.335,0h7.8a3.965,3.965,0,0,1,.65.043,4.044,4.044,0,0,1,3.685,4.292V5.593h-1.8A1.787,1.787,0,0,0,12.9,7.526a1.849,1.849,0,0,0,1.873,1.621h1.7V10.4a4.1,4.1,0,0,1-4.335,4.335H9.971" transform="translate(1.734 3.035)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
+  <path id="Vector" d="M6.2,0V1.76a2.916,2.916,0,0,1-3.1,2.7A2.924,2.924,0,0,1,0,1.76V0C0,1.491,1.387,2.549,3.1,2.549S6.2,1.483,6.2,0Z" transform="translate(3.123 14.619)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
+  <path id="Vector-2" data-name="Vector" d="M6.208,2.688a2.275,2.275,0,0,1-.329,1.179A3.186,3.186,0,0,1,3.1,5.237,3.206,3.206,0,0,1,.329,3.867,2.274,2.274,0,0,1,0,2.688,2.518,2.518,0,0,1,.9.789,3.309,3.309,0,0,1,3.1,0,3.355,3.355,0,0,1,5.289.789,2.465,2.465,0,0,1,6.208,2.688Z" transform="translate(3.113 9.546)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
+  <path id="Vector-3" data-name="Vector" d="M6.2,2.7V5.081C6.2,6.572,4.812,7.63,3.1,7.63S0,6.564,0,5.081V2.7A2.919,2.919,0,0,1,3.1,0,3.355,3.355,0,0,1,5.3.789,2.536,2.536,0,0,1,6.2,2.7Z" transform="translate(3.123 9.538)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
+  <path id="Vector-4" data-name="Vector" d="M4.447.884V2.671a.89.89,0,0,1-.867.884h-1.7A1.849,1.849,0,0,1,.008,1.934,1.741,1.741,0,0,1,.528.52,1.728,1.728,0,0,1,1.777,0h1.8A.89.89,0,0,1,4.447.884Z" transform="translate(14.628 8.627)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
+  <path id="Vector-5" data-name="Vector" d="M0,6.069V4.335A4.035,4.035,0,0,1,3.633.052,4.615,4.615,0,0,1,4.335,0h7.8a3.965,3.965,0,0,1,.65.043,4.044,4.044,0,0,1,3.685,4.292V5.593h-1.8A1.787,1.787,0,0,0,12.9,7.526a1.849,1.849,0,0,0,1.873,1.621h1.7V10.4a4.1,4.1,0,0,1-4.335,4.335H9.971" transform="translate(1.734 3.035)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
   <path id="Vector-6" data-name="Vector" d="M0,0H20.809V20.809H0Z" transform="translate(20.809 20.809) rotate(180)" fill="none" opacity="0"/>
 </svg>

src/views/Home/Portrait/Private/MyBooks/index.js

@@ -7,7 +7,7 @@ import Progress from "../../../../../components/Progress";
 function MyBooks({ books, getList, grades, isMobile }) {
   const Book = ({ book }) => {
     return (
-      <li className="flex flex-col lg:ml-6 lg:p-2 lg:border lg:border-solid lg:border-gray-200 lg:shadow-md lg:rounded-md">
+      <li className="flex flex-col lg:ml-6 lg:p-2 lg:border lg:border-solid lg:border-green-200 lg:rounded-md lg:pt-4">
         <Link to={"/products/" + book.id}>
           <img
             src={`https://dnvn.ir/api/v1/file/${book.fileIds}`}
@@ -23,7 +23,7 @@ function MyBooks({ books, getList, grades, isMobile }) {
           <h2 className="mt-2 text-sm lg:text-tiny font-semibold text-blue5F dark:text-white lg:mt-4">
             {book.name}
           </h2>
-          <p className="font-medium text-blueC0 dark:text-greenBA text-xs lg:text-sm mt-1 lg:mt-2">{`پایه ${
+          <p className="font-medium text-green7B dark:text-greenBA text-xs lg:text-sm mt-1 lg:mt-2">{`پایه ${
             grades[book.gradeId]
           }`}</p>
           <Progress percent={60} />
@@ -33,9 +33,9 @@ function MyBooks({ books, getList, grades, isMobile }) {
   };
 
   return (
-    <div className="px-4 mb-5" style={{maxWidth: '100%'}}>
-      <div className="w-full flex flex-col rounded-md pt-4 lg:py-5  px-2 lg:px-4 bg-blueFF1 dark:bg-gray2077 overflow-hidden">
-        <strong className="text-blueC0 dark:text-white font-bold text-sm lg:text-base">
+    <div className="px-4 mb-5 lg:mb-0" style={{maxWidth: '100%'}}>
+      <div className="w-full flex flex-col rounded-md pt-4 lg:py-5  px-2 lg:px-4 bg-blueC0 bg-opacity-10 border border-green-200 border-solid dark:bg-gray2077 overflow-hidden">
+        <strong className="text-green7B dark:text-white font-bold text-sm lg:text-base">
           کتابهای من
         </strong>
         {isMobile ? (

src/views/Home/Portrait/Private/Videos/index.js

@@ -9,7 +9,7 @@ import arrowWhiteIcon from "../../../../../assets/icons/arrow-left-white.svg";
 function Videos({ videos, grades, isDark, isMobile }) {
   const Video = ({ video }) => {
     return (
-      <li className="flex flex-col lg:ml-6 lg:p-2 lg:border lg:border-solid lg:border-gray-200 lg:shadow-md lg:rounded-md">
+      <li className="flex flex-col lg:ml-6 lg:p-2 lg:border lg:border-solid lg:border-green-200 lg:rounded-md">
         <Link to={"/products/" + video.id}>
           <img
             src={`https://dnvn.ir/api/v1/file/${video.posterId}`}
@@ -23,7 +23,7 @@ function Videos({ videos, grades, isDark, isMobile }) {
             }}
           />
           <h2 className="mt-2 text-sm font-normal text-blue5F dark:text-white lg:mt-4 lg:text-tiny lg:mb-5">
-            {'دوره ویدئویی' + ' ' +  video.name}
+            {"دوره ویدئویی" + " " + video.name}
           </h2>
           {/* <p className="font-medium text-blueC0 dark:text-greenBA text-xs mt-1 lg:mt-2 lg:text-sm">{`پایه ${
             grades[video.gradeId]
@@ -34,10 +34,10 @@ function Videos({ videos, grades, isDark, isMobile }) {
     );
   };
   return (
-    <div className="w-full px-4">
-      <div className="w-full flex flex-col py-4 lg:px-3 overflow-hidden lg:border lg:border-solid lg:border-gray-200 rounded-md lg:bg-blueFF1">
+    <div className="w-full px-4 lg:py-4">
+      <div className="w-full flex flex-col py-4 lg:px-3 overflow-hidden lg:border lg:border-solid lg:border-gray-200 rounded-md lg:bg-blueC0 lg:bg-opacity-10">
         <header className="w-full flex flex-row justify-between items-center">
-          <strong className="text-blueC0 dark:text-white font-bold text-sm lg:text-base">
+          <strong className="text-green7B dark:text-white font-bold text-sm lg:text-base">
             دوره‌های ویدئویی شما
           </strong>
           <img
@@ -53,7 +53,7 @@ function Videos({ videos, grades, isDark, isMobile }) {
             ))}
           </ul>
         ) : (
-          <ScrollingCarousel className="mt-6 pb-3">
+          <ScrollingCarousel className="mt-6 pb-0">
             {videos?.map((video, index) => (
               <Video video={video} key={index} />
             ))}