reza added theme

3 years ago · f4c3d552f5
parent a51732d800
commit f4c3d552f5
91 changed files with 357 additions and 276 deletions
--- a/package.json
+++ b/package.json
@ -55,6 +55,7 @@
    "jest-resolve": "26.6.0",
    "jest-watch-typeahead": "0.6.1",
    "jol-player": "^2.5.0",
+    "lodash": "^4.17.21",
    "mapir-react-component": "^2.0.1",
    "mini-css-extract-plugin": "0.11.3",
    "optimize-css-assets-webpack-plugin": "5.0.4",
--- a/src/assets/IRANSans/Farsi_numerals/webFonts/css/style.css
+++ b/src/assets/IRANSans/Farsi_numerals/webFonts/css/style.css
@ -71,7 +71,7 @@ h1 {
 blockquote {
  font-weight: 500;
  padding: 10px;
-  border: 1px dashed #666666;
+  border: 1px dashed $gray4;
 }

 .mainbox {
--- a/src/assets/IRANSans/Non_English/WebFonts/css/style.css
+++ b/src/assets/IRANSans/Non_English/WebFonts/css/style.css
@ -71,7 +71,7 @@ h1 {
 blockquote {
  font-weight: 500;
  padding: 10px;
-  border: 1px dashed #666666;
+  border: 1px dashed $gray4;
 }

 .mainbox {
--- a/src/assets/IRANSans/WebFonts/css/style.css
+++ b/src/assets/IRANSans/WebFonts/css/style.css
@ -71,7 +71,7 @@ h1 {
 blockquote {
  font-weight: 500;
  padding: 10px;
-  border: 1px dashed #666666;
+  border: 1px dashed $gray4;
 }

 .mainbox {
--- a/src/components/BreadCrumbs/index.scss
+++ b/src/components/BreadCrumbs/index.scss
@ -2,13 +2,13 @@
  a {
    text-decoration: none;
    font-family: numeralLight;
-    color: #aaa;
+    color: $gray;
    letter-spacing: -1px;
  }
 }

 .MuiBreadcrumbs-separator{
-  color: #aaa;
+  color: $gray;
 }
@media screen and (min-width: 1441px) {
  .MuiBreadcrumbs-li{
--- a/src/components/BreadCrumbs/index.tsx
+++ b/src/components/BreadCrumbs/index.tsx
@ -2,8 +2,6 @@ import React from "react";
 import Breadcrumbs from "@mui/material/Breadcrumbs";
 import { Link } from "react-router-dom";

-import "./index.scss";
-
 export default function BreadCrumbs(props: any) {
  const { links } = props;
  return (
--- a/src/components/GradeFilter/index.scss
+++ b/src/components/GradeFilter/index.scss
@ -3,7 +3,7 @@
  margin: 40px auto;
  color: white;
  font-family: numeralLight;
-  background-color: #383838;
+  background-color: $gray1;
  border-radius: 6px;
  &__box{
    display: none !important;
@ -11,11 +11,11 @@
  h1{
    margin: 0px;
    padding: 0px 15px;
-    color: #6C6C6C;
+    color: $gray2;
    span{
      width: 2px;
      height: 20px;
-      background-color: rgb(143, 142, 142);
+      background-color: $gray3;
      margin-right: 15px;
    }
  }
@ -28,8 +28,8 @@
      height: 100%;
      width : calc(100% / 12);
      transition: right 0.5s;
-      background-color: #9CDF52;
-      box-shadow: 0px 0px 20px #9CDF52;
+      background-color: $green;
+      box-shadow: 0px 0px 20px $green;
      z-index: 50;
    }
    li{
@ -37,8 +37,8 @@
      text-align: center;
      cursor: pointer;
      padding: 6px 0px;
-      // box-shadow: 0px 0px 20px #9CDF52;
-      // background-color: #9CDF52;
+      // box-shadow: 0px 0px 20px $green;
+      // background-color: $green;
    }
  }
  &__active{
@ -94,7 +94,7 @@
      position: absolute;
      left: 0px;
      top: 45px;
-      background : #383838;
+      background : $gray1;
      padding: 10px 20px;
      border-radius: 10px;
      li{
@ -102,13 +102,13 @@
        margin: 8px 5px;
        font-size: calc(100vw / 28);
        padding: 5px 0px;
-        border: 1px solid #666666;
+        border: 1px solid $gray4;
        border-radius: 5px;
        
      }
      &--active{
-        border-color: #9CDF52 !important;
-        color: #9CDF52;
+        border-color: $green !important;
+        color: $green;
      }
    }
    &__box{
@ -124,18 +124,18 @@
        top: 9px;
      }
      span{
-        color: #6C6C6C;
+        color: $gray2;
        font-size: calc(100vw / 60);
      }
      h2{
        font-size: calc(100vw / 50);
-        color: #9CDF52;
+        color: $green;
      }
    }
    h1{
      font-size: calc(100vw / 50);
-      background-color: #9CDF52;
-      box-shadow: 0px 0px 20px #9CDF52;
+      background-color: $green;
+      box-shadow: 0px 0px 20px $green;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
      padding: 12px 15px;
@ -155,8 +155,8 @@
    position: relative;
    h1{
      font-size: calc(100vw / 30);
-      background-color: #9CDF52;
-      box-shadow: 0px 0px 2px #9CDF52;
+      background-color: $green;
+      box-shadow: 0px 0px 2px $green;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
      padding: 12px 15px;
@ -175,12 +175,12 @@
        top: 9px;
      }
      span{
-        color: #6C6C6C;
+        color: $gray2;
        font-size: calc(100vw / 34);
      }
      h2{
        font-size: calc(100vw / 27);
-        color: #9CDF52;
+        color: $green;
      }
    }
    &__list{
@ -189,7 +189,7 @@
      position: absolute;
      left: 0px;
      top: 45px;
-      background : #383838;
+      background : $gray1;
      padding: 10px 20px;
      border-radius: 10px;
      justify-content:center;
@ -198,12 +198,12 @@
        margin: 8px 5px;
        font-size: calc(100vw / 28);
        padding: 5px 0px;
-        border: 1px solid #666666;
+        border: 1px solid $gray4;
        border-radius: 5px;
      }
      &--active{
-        border-color: #9CDF52 !important;
-        color: #9CDF52;
+        border-color: $green !important;
+        color: $green;
      }
    }

--- a/src/components/GradeFilter/index.tsx
+++ b/src/components/GradeFilter/index.tsx
@ -1,7 +1,6 @@
 import React, { useState, useEffect, useRef } from "react";
 import { connect } from "react-redux";
 import { book } from "../../redux/actions";
-import "./index.scss";

 import dropdown from "../../assets/icons/dropdown.png";

--- a/src/components/HomeSearchBox/index.scss
+++ b/src/components/HomeSearchBox/index.scss
@ -7,7 +7,7 @@
  }
  form {
    button {
-      background-color: #39383d;
+      background-color: $gray1;
      margin-right: 3px;
      border-top-left-radius: 9px;
      border-bottom-left-radius: 9px;
@ -15,18 +15,18 @@
    }
    input {
      width: 100%;
-      background-color: #46454a;
+      background-color: $gray5;
      border: 0px;
      border-top-right-radius: 9px;
      border-bottom-right-radius: 9px;
-      color: #ddd;
+      color: $gray6;
      &::placeholder {
        padding-right: 0px;
-        color: #ddd;
+        color: $gray6;
        opacity: 0.4;
      }
      &:focus {
-        outline: 2px solid #9cdf52 !important;
+        outline: 2px solid $green !important;
      }
    }
  }
@ -37,7 +37,7 @@
      }
    }
    strong{
-      color: #9cdf52;
+      color: $green;
      font-weight: 300;
      margin-left: 20px;
    }
@ -78,7 +78,7 @@
      }
      ul{
        li {
-          color: #a2b4cb;
+          color: $blue;
          margin-left: 25px;
          font-size: 14px;
        }
@ -115,7 +115,7 @@
      width: 850px;
      padding: 10px 0px !important;
      li {
-        color: #a2b4cb;
+        color: $blue;
        margin-left: 25px;
        font-size: calc(100vw / 110);
      }
@ -151,7 +151,7 @@
      width: 85%;
      padding: 10px 0px !important;
      li {
-        color: #a2b4cb;
+        color: $blue;
        margin-left: 25px;
        font-size: calc(100vw / 75);
      }
@ -192,7 +192,7 @@
        font-size: calc(100vw / 30);
        padding-right: 20px;
        border-radius: 8px;
-        background: #383838;
+        background: $gray1;
        &::placeholder {
          font-size: calc(100vw / 34);
          color: white !important;
--- a/src/components/HomeSearchBox/index.tsx
+++ b/src/components/HomeSearchBox/index.tsx
@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import "./index.scss";
 import { connect } from "react-redux";
 import { book } from "../../redux/actions";
 import search from "../../assets/icons/search.png";
--- a/src/components/Location/index.tsx
+++ b/src/components/Location/index.tsx
@ -2,7 +2,6 @@ import Mapir from "mapir-react-component";

 import blueMark from '../../assets/icons/location-marker.png';

-import './index.scss';

 const Map = Mapir.setToken({
  transformRequest: (url : string) => {
--- a/src/components/Navbar/index.scss
+++ b/src/components/Navbar/index.scss
@ -29,10 +29,10 @@
    }
  }
  &___share{
-    border: 2px solid #46454A;
+    border: 2px solid $gray5;
  }
  &___login{
-    background-color: #81C342;
+    background-color: $green1;
  }
  &___logo{
    img{
@ -65,7 +65,7 @@
      span{
        width: 2px;
        height: 15px;
-        background-color: rgb(197, 197, 197);
+        background-color: $gray6;
        margin-right: 15px;
        transform: translateY(-1px);
      }
@ -102,7 +102,7 @@
      span{
        width: 2px;
        height: 15px;
-        background-color: #3F3F3F;
+        background-color: $gray1;
        margin-right: 15px;
        // transform: translateY(-1px);
      }
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import "./index.scss";
 import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
 import { Link } from "react-router-dom";
 import { SwipeableDrawer } from "@mui/material";
--- a/src/components/NavbarDrawer/NavbarDrawer.scss
+++ b/src/components/NavbarDrawer/NavbarDrawer.scss
@ -39,7 +39,7 @@
      left: 0px;
      top: 10px;
      span {
-        background-color: #6cbe44;
+        background-color: $green2;

        color: white;
        padding: 2px 4px;
@ -91,7 +91,7 @@
        margin-left: 20px;
      }
      & .badge {
-        background-color: red;
+        background-color: $red;
        margin: 5px;
        position: absolute;
        left: 5px;
@ -120,7 +120,7 @@
      justify-content: center;
      align-items: center;
      & span {
-        color: #cfcfcf;
+        color: #ddd;
        font-size: 14px;
      }
    }
--- a/src/components/NavbarDrawer/NavbarDrawer.tsx
+++ b/src/components/NavbarDrawer/NavbarDrawer.tsx
@ -22,7 +22,6 @@ import mobileDanger from "../../assets/icons/mobileDanger.svg";
 import mobileLogout from "../../assets/icons/mobileLogout.svg";
 import proxy from "../../redux/proxy";

-import "./NavbarDrawer.scss";
 const NavbarDrawer = ({ status, logout }: any) => {
  const [dropdown, setDropdown] = useState(false);
  const links = [
@ -283,14 +282,14 @@ const User = (props: any) => {
      <div className="navbar-drawer-user__right d-flex flex-column">
        <h1
          style={{
-            color: props.data.status === 1 ? "#00CC69" : "#4D4D4F",
+            color: props.data.status === 1 ? "$green3" : "#4D4D4F",
          }}
        >
          {props.data.firstName + " " + props.data.lastName}
        </h1>
        <div
          style={{
-            color: props.data.status === 1 ? "#00CC69" : "#4D4D4F",
+            color: props.data.status === 1 ? "$green3" : "#4D4D4F",
          }}
        >
          {props.data.title}
@ -298,7 +297,7 @@ const User = (props: any) => {
      </div>
      {props.data.status === 1 ? (
        <div style={{ position: "absolute", left: 24, top: 16 }}>
-          <CheckIcon style={{ fontSize: 40, color: "#00CC69" }} />
+          <CheckIcon style={{ fontSize: 40, color: "$green3" }} />
        </div>
      ) : null}
    </div>
--- a/src/components/Textarea/index.scss
+++ b/src/components/Textarea/index.scss
@ -3,17 +3,17 @@
  padding: 10px 12px;
  color: white;
  border-radius: 10px;
-  border: 1px solid #707070;
+  border: 1px solid $gray2;
  background-color: black;
  margin-top: 10px;
  &::placeholder{
    color: #a2a2a2;
  }
  &:focus{
-    border: 1px solid #84DE56;
+    border: 1px solid $green1;
    outline: none;
    &::placeholder{
-      color: #84DE56;
+      color: $green1;
    }
  }
 }
--- a/src/components/Textarea/index.tsx
+++ b/src/components/Textarea/index.tsx
@ -1,5 +1,4 @@
 import React from 'react';
-import './index.scss';

 export default function Textarea({placeholder} : any) {
  return (
--- a/src/components/Timer/index.js
+++ b/src/components/Timer/index.js
@ -1,5 +1,4 @@
 import { Component } from "react";
-import "./index.css";

 const maxDesktopSize = 1250;
 const maxMobileSize = 550;
--- a/src/components/Timer/index.scss
+++ b/src/components/Timer/index.scss
@ -3,6 +3,6 @@
  direction: rtl !important;
  margin-right: 10px;
  margin-left: 10px;
-  color: #6cbe44;
+  color: $green2;
  font-family: numeralLight;
 }
--- a/src/components/Vocal/Vocal.scss
+++ b/src/components/Vocal/Vocal.scss
@ -24,7 +24,7 @@
        font-size: calc(100vw / 20);
    }
    h2{
-        color: rgb(196, 196, 196);
+        color: $gray6;
        font-family: numeralLight;
        font-size: calc(100vw / 24);
        position: fixed;
--- a/src/components/Vocal/Vocal.tsx
+++ b/src/components/Vocal/Vocal.tsx
@ -7,7 +7,6 @@ import line1 from "../../assets/icons/line1.png";
 import line2 from "../../assets/icons/line2.png";
 import arrowLeft from "../../assets/icons/arrow-left.png";

-import "./Vocal.scss";
 import { stat } from "fs";

 const Vocal = (props: any) => {
--- a/src/constants/colors.scss
+++ b/src/constants/colors.scss
@ -0,0 +1,34 @@
+// gray
+$gray : #aaa;
+$gray1 : #383838;
+$gray2 : #6c6c6c;
+$gray3 : rgb(143, 142, 142);
+$gray4 : #666666;
+$gray5 : #46454a;
+$gray6 : #ddd;
+$gray7 : #797979;
+$gray8 : #272727;
+$gray9 : #b3b3b3;
+$gray10 : #cccccc;
+$gray11 : #969696;
+$gray12 : #e3e3e3;
+// green
+$green : #4dd35b;
+$green1 : #81C342;
+$green2 : #6cbe44;
+$green3 : #00cc69;
+$green4 : #84de56;
+
+// blue
+$blue : #a2b4cb;
+$blue1 : #505a82;
+$blue2 : #00FFF8;
+// red
+$red : red;
+$red1 : rgb(255, 115, 115);
+
+//yellow
+$yellow : #FFD70F;
+
+//orange
+$orange : orange;
--- a/src/custom.scss
+++ b/src/custom.scss
@ -1,5 +1,25 @@
+@import './constants/colors.scss';
+@import './components/BreadCrumbs/index.scss';
+@import './components/GradeFilter/index.scss';
+@import './components/HomeSearchBox/index.scss';
+@import './components/Location/index.scss';
+@import './components/Navbar/index.scss';
+@import './components/NavbarDrawer/NavbarDrawer.scss';
+@import './components/Textarea/index.scss';
+@import './components/Timer/index.scss';
+@import './components/Vocal/Vocal.scss';
+@import './views/Auth/index.scss';
+@import './views/About/index.scss';
+@import './views/Contact/index.scss';
+@import './views/Course/index.scss';
+@import './views/Courses/index.scss';
+@import './views/Faq/index.scss';
+@import './views/Home/index.scss';
+@import './views/Subscription/index.scss';
+@import './views/VideoTube/index.scss';
+
 .submit {
-  background-color: #4dd35b;
+  background-color: $green;
  color: white;
  border-radius: 6px;
  border: 0px;
@ -90,7 +110,6 @@ p {
 }

 .main {
-  background: black;
  width: 100%;
  overflow-x: hidden;
  padding-top: 60px;
@ -98,6 +117,12 @@ p {
  position: relative;
  padding-bottom: 100px;
  font-family: numeralLight;
+  &__light{
+    background: white;
+  }
+  &__dark{
+    background : black;
+  }
  .footer {
    position: absolute;
    bottom: 0px;
@ -118,7 +143,7 @@ p {
  .MuiSelect-outlined.MuiSelect-outlined {
    padding-right: 15px;
  }
-  color: #797979 !important;
+  color: $gray7 !important;
 }

 .MuiSelect-select:focus {
@ -140,7 +165,7 @@ p {
  .MuiSelect-outlined.MuiSelect-outlined {
    padding-right: 15px;
  }
-  color: #797979 !important;
+  color: $gray7 !important;
  label {
    background: black !important;
    width: fit-content;
@ -152,7 +177,7 @@ p {
  top: 0px !important;
 }
 .MuiOutlinedInput-notchedOutline {
-  border-color: #666666 !important;
+  border-color: $gray4 !important;
  border-width: 1px !important;
  color: green !important;
  border-radius: 10px !important;
@ -161,9 +186,9 @@ p {
 .MuiOutlinedInput-input {
  padding: 15px 14px !important;
  font-family: numeralLight;
-  color: #84de56 !important;
+  color: $green4 !important;
  &:focus {
-    border: 1px solid #84de56 !important;
+    border: 1px solid $green4 !important;
    border-radius: 10px;
    transform: translateY(0px);
    border-radius: 10px !important;
@ -190,13 +215,13 @@ p {
  padding: 0px 10px !important;
  z-index: 130 !important;
  background-color: black !important;
-  color: #84de56 !important;
+  color: $green4 !important;
 }

 .Mui-focused {
  color: rgba(0, 0, 0, 1) !important;
-  border-color: #84de56 !important;
-  color: #84de56 !important;
+  border-color: $green4 !important;
+  color: $green4 !important;
 }

 .MuiInputBase-input {
--- a/src/redux/actions-type/public.tsx
+++ b/src/redux/actions-type/public.tsx
@ -3,6 +3,11 @@ interface getHomeData {
  data: any;
 }

+interface setTheme {
+  type: "public/setTheme";
+  data: any;
+}
+
 interface getBlogList {
  type: "public/blogList";
  data: any;
@ -84,6 +89,7 @@ interface loading {

 type PublicAction =
  | activeCategory
+  | setTheme
  | setVideoActive
  | getBlogList
  | getBlogInfo
--- a/src/redux/actions/public.tsx
+++ b/src/redux/actions/public.tsx
@ -1,6 +1,8 @@
 import { Dispatch } from "redux";
 import proxy from "../proxy";
 const publicApi = {
+  setTheme: (data: {}) => async (dispatch: Dispatch) =>
+    await dispatch({ type: "public/setTheme", data: data }),
  getHomeData: (data: undefined) => async (dispatch: Dispatch) =>
    await proxy.get("public/homePage", data, { dispatch }),

--- a/src/redux/reducers/public.tsx
+++ b/src/redux/reducers/public.tsx
@ -3,6 +3,7 @@ import proxy from "../proxy";
 import location from '../../util/location';

 const initialState = {
+  theme : localStorage.getItem('theme') || 'light',
  homeData: [],
  newProducts: [],
  levels: [],
@ -56,6 +57,9 @@ const grades = [
 export default function publicApi(state = initialState, action: PublicAction) {
  let { type, data } = action;
  switch (type) {
+    case "public/setTheme":
+      localStorage.setItem("theme", data);
+      return { ...state, location: false, error : null, theme: data };
    case "active/video":
      return {
        ...state,
--- a/src/types/comp.d.ts
+++ b/src/types/comp.d.ts
@ -1,3 +1,4 @@
 declare module '3d-react-carousal';
 declare module 'react-speech-recognition';
 declare module 'mapir-react-component';
+declare module 'lodash';
--- a/src/views/About/index.scss
+++ b/src/views/About/index.scss
@ -1,7 +1,7 @@
 .about {
  main {
    li::before {
-      color: #aaa;
+      color: $gray;
      content: "\2022";
      font-weight: bold;
      display: inline-block;
@ -14,7 +14,7 @@
    }
    p,
    li {
-      color: #aaa;
+      color: $gray;
      margin-top: 2px;
      line-height: 1.5;
    }
@ -25,7 +25,7 @@
    width: 70%;
    h1 {
      display: inline;
-      color: #00cc69;
+      color: $green3;
    }
    p {
      margin-top: 10px;
@ -45,7 +45,7 @@
        h1 {
          display: inline;
          letter-spacing: -1px;
-          color: #00cc69;
+          color: $green3;
        }
        p {
          margin-top: 10px;
@ -56,7 +56,7 @@
        margin: 20px 30px 20px 0px;
        h2 {
          display: inline;
-          color: #00cc69;
+          color: $green3;
        }
        ul {
          margin: 0px;
@ -99,7 +99,7 @@
      margin-top: 5px;
      h1 {
        display: inline;
-        color: #00cc69;
+        color: $green3;
      }
      ul {
        margin: 0px;
--- a/src/views/About/index.tsx
+++ b/src/views/About/index.tsx
@ -1,21 +1,23 @@
 import React, { Component, Fragment } from "react";
+import _ from "lodash";
 import Navbar from "../../components/Navbar/index";
 import Footer from "../Home/Footer/index";
+import { connect } from "react-redux";
+import {publicApi } from '../../redux/actions';

 import pic from "../../assets/images/pic.png";
 import aboutLg from "../../assets/images/about-lg.png";

-import "./index.scss";
-
-export default function About({
-  fury,
-  advantages,
-  keywords,
-  keywords2,
-  first,
-}: any) {
+function About({ fury, advantages, keywords, keywords2, first, theme, setTheme }: any) {
+  console.log(theme);
  return (
-    <div className="about main d-flex flex-column">
+    <div
+      className={_.join([
+        "about main d-flex flex-column",
+        theme === "dark" ? "main__light" : "main__dark",
+      ], " ")}
+      onClick={() => setTheme('dark')}
+    >
      <Navbar />
      <main className="d-flex flex-column align-items-center">
        <header>
@ -90,6 +92,13 @@ export default function About({
  );
 }

+export default connect(
+  (state: any) => ({
+    theme: state.publicApi.theme,
+  }),
+  {setTheme : publicApi.setTheme,}
+)(About);
+
 About.defaultProps = {
  first: {
    title: "درباره ما",
--- a/src/views/Auth/Login/index.scss
+++ b/src/views/Auth/Login/index.scss
@ -6,12 +6,12 @@
  &__options {
    color: #b5b5b5;
    a {
-      color: #84de56;
+      color: $green4;
    }
  }
  button[type="submit"] {
    margin-top: 25px;
-    background-color: #84de56;
+    background-color: $green4;
    color: white;
    padding: 10px 0px;
    border: 0px;
@ -56,7 +56,7 @@
      color: white;
      font-size: 14px;
      a {
-        color: #84de56;
+        color: $green4;
      }
    }
    &__back {
@ -103,7 +103,7 @@
      color: white;
      font-size: calc(100vw / 110);
      a {
-        color: #84de56;
+        color: $green4;
      }
    }
    &__back {
@ -160,7 +160,7 @@
      color: white;
      font-size: calc(100vw / 40);
      a {
-        color: #84de56;
+        color: $green4;
      }
    }
    &__back {
@ -218,7 +218,7 @@
      color: white;
      font-size: calc(100vw / 30);
      a {
-        color: #84de56;
+        color: $green4;
      }
    }
    &__back {
--- a/src/views/Auth/Login/index.tsx
+++ b/src/views/Auth/Login/index.tsx
@ -13,7 +13,6 @@ import onInput from "../../../util/onInput";
 import { connect } from "react-redux";
 import { user } from "../../../redux/actions";

-import "./index.scss";

 interface LoginFields {
  username?: string;
@ -72,12 +71,12 @@ function Login({login, ...props}: any) {
            <CustomCheckbox
              icon={
                <CheckBoxOutlineBlankTwoToneIcon
-                  style={{ color: "#666666", fontSize: 30, padding: 0 }}
+                  style={{ color: "$gray4", fontSize: 30, padding: 0 }}
                />
              }
              checkedIcon={
                <CheckBoxRoundedIcon
-                  style={{ color: "#84DE56", fontSize: 30, padding: 0 }}
+                  style={{ color: "$green4", fontSize: 30, padding: 0 }}
                />
              }
            />
--- a/src/views/Auth/Profile/Birthdate/index.js
+++ b/src/views/Auth/Profile/Birthdate/index.js
@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import onInput from "~/util/onInput";
 import Input from "../../../../components/Input/index";
-import "./index.scss";
+
 import moment from "jalali-moment";
 export default function Birthdate({ defaultValue, name, ...props }) {
  let momentDate = moment(defaultValue[name]);
--- a/src/views/Auth/Profile/Birthdate/index.scss
+++ b/src/views/Auth/Profile/Birthdate/index.scss
@ -2,7 +2,7 @@
  width: 100%;
  border-radius: 10px;
  padding: 0px 10px;
-  border: 1px solid #333;
+  border: 1px solid $gray1;
  margin: 10px 0px;
  label {
    width: fit-content;
@ -17,7 +17,7 @@
  input {
    border: none !important;
    background-color: rgba(204, 204, 204, 0.098);
-    color: #84de56;
+    color: $green4;
    max-width: 40px;
    text-align: center !important;
    direction: ltr;
@ -28,7 +28,7 @@
      border: 0px;
    }
    &::placeholder {
-      color: #383737;
+      color: $gray1;
    }
  }

--- a/src/views/Auth/Profile/Document/index.js
+++ b/src/views/Auth/Profile/Document/index.js
@ -1,5 +1,4 @@
 import React from "react";
-import "./index.scss";

 export default function Document({ defaultValue, name, onChange }) {
  return (
--- a/src/views/Auth/Profile/Document/index.scss
+++ b/src/views/Auth/Profile/Document/index.scss
@ -4,7 +4,7 @@
    width: 100%;
    height: 50px;
    border-radius: 10px;
-    border: 2px dashed #333;
+    border: 2px dashed $gray1;
    position: relative;
    input {
      width: 100%;
--- a/src/views/Auth/Profile/GenderSwitch/index.js
+++ b/src/views/Auth/Profile/GenderSwitch/index.js
@ -1,6 +1,5 @@
 import React from "react";

-import "./index.scss";

 export default function GenderSwitch({
  onChange,
--- a/src/views/Auth/Profile/GenderSwitch/index.scss
+++ b/src/views/Auth/Profile/GenderSwitch/index.scss
@ -10,10 +10,10 @@
    cursor: pointer;
    color: #ccc;
    background-color: black;
-    border: 1px solid #333;
+    border: 1px solid $gray1;
  }
  &__active{
-    background-color: #84de56 !important;
+    background-color: $green4 !important;
    color: white !important;
    border: none !important;
  }
--- a/src/views/Auth/Profile/MultipleSelector/index.scss
+++ b/src/views/Auth/Profile/MultipleSelector/index.scss
@ -2,7 +2,7 @@
  width: 100%;
  border-radius: 10px;
  padding: 9px 10px;
-  border: 1px solid #ccc !important;
+  border: 1px solid $gray6 !important;
  margin: 0px !important;
  .MuiInput-formControl {
    margin: 9px 0px 8px !important;
--- a/src/views/Auth/Profile/MultipleSelector/index.tsx
+++ b/src/views/Auth/Profile/MultipleSelector/index.tsx
@ -6,7 +6,7 @@ import MenuItem from "@mui/material/MenuItem";
 import FormControl from "@mui/material/FormControl";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";

-import "./index.scss";
+
 export default function MultipleSelector({align, onChange, selectedOptions, options, defaultValue, label, name,} : any) {
  return (
    <FormControl
--- a/src/views/Auth/Profile/Upload/index.js
+++ b/src/views/Auth/Profile/Upload/index.js
@ -1,6 +1,5 @@
 import React from "react";
 import AddAPhotoIcon from "@mui/icons-material/AddAPhoto";
-import './index.scss';

 export default function Upload({ name, value, onChange, label }) {
  return (
--- a/src/views/Auth/Profile/Upload/index.scss
+++ b/src/views/Auth/Profile/Upload/index.scss
@ -6,7 +6,7 @@
  // border: 2px dotted #ccc;
  position: relative;
  cursor: pointer;
-  background-color: #272727;
+  background-color: $gray8;
  img{
    width: 100%;
    height: 100%;
@ -22,7 +22,7 @@
    z-index: 50;
  }
  span {
-    color: #505a82;
+    color: $blue1;
    font-family: numeralLight;
    height: 20px;
    position: absolute;
--- a/src/views/Auth/Profile/index.scss
+++ b/src/views/Auth/Profile/index.scss
@ -1,3 +1,9 @@
+@import './Birthdate/index.scss';
+@import './Document/index.scss';
+@import './GenderSwitch/index.scss';
+@import './MultipleSelector/index.scss';
+@import './Upload/index.scss';
+
 .MuiOutlinedInput-input {
  font-family: numeralLight !important;
 }
@ -24,7 +30,7 @@
  }
  &__box {
    width: 100%;
-    border: 1px solid #333;
+    border: 1px solid $gray1;
    border-radius: 20px;
    &--section {
      width: 45%;
@ -48,7 +54,7 @@
      .MuiSelect-outlined.MuiSelect-outlined {
        padding-right: 15px;
      }
-      color: #797979 !important;
+      color: $gray7 !important;
    }

    button {
@ -56,7 +62,7 @@
      margin-bottom: 50px;
      font-family: numeralLight;
      border: 0px;
-      background-color: #00cc69;
+      background-color: $green3;
      border-radius: 7px;
      color: white;
      padding: 12px 0px;
--- a/src/views/Auth/Profile/index.tsx
+++ b/src/views/Auth/Profile/index.tsx
@ -11,7 +11,7 @@ import Gender from "./GenderSwitch";
 import Birthdate from "./Birthdate";
 import MultipleSelector from "./MultipleSelector";
 import Document from "./Document";
-import "./index.scss";
+
 import { useHistory } from "react-router-dom";
 import Navbar from "../../../components/Navbar";
 import Footer from "../../Home/Footer";
--- a/src/views/Auth/SignUp/index.scss
+++ b/src/views/Auth/SignUp/index.scss
@ -14,7 +14,7 @@
  }
  button[type="submit"] {
    margin-top: 25px;
-    background-color: #84de56;
+    background-color: $green4;
    color: white;
    padding: 10px 0px;
    border: 0px;
@ -37,17 +37,17 @@
      }
      input {
        text-align: center;
-        background-color: #2a2a2a;
-        border: 1px solid #a2a2a2;
+        background-color: $gray8;
+        border: 1px solid $gray;
        border-radius: 8px;
        font-size: 20px;
        padding: 8px 0px;
        color: white;
        direction: ltr;
        &:focus {
-          border: 1px solid #84de56;
+          border: 1px solid $green4;
          &::placeholder {
-            color: #84de56;
+            color: $green4;
            opacity: 0.3;
          }
        }
@ -64,7 +64,7 @@
      color: white;
      font-size: 13px;
      a {
-        color: #84de56;
+        color: $green4;
      }
    }
    &__back {
@ -81,7 +81,7 @@
    }
    &__error{
      margin-top: 10px;
-      color: rgb(255, 115, 115);
+      color: $red1;
      font-size: 14px;
    }
  }
@ -110,9 +110,9 @@
        color: white;
        direction: ltr;
        &:focus {
-          border: 1px solid #84de56;
+          border: 1px solid $green4;
          &::placeholder {
-            color: #84de56;
+            color: $green4;
            opacity: 0.3;
          }
        }
@ -129,7 +129,7 @@
      color: white;
      font-size: calc(100vw / 110);
      a {
-        color: #84de56;
+        color: $green4;
      }
    }
    &__back {
@ -146,7 +146,7 @@
    }
    &__error{
      margin-top: 10px;
-      color: rgb(255, 115, 115);
+      color: $red1;
      font-size: calc(100vw / 110);
    }
  }
@ -179,12 +179,12 @@
        border-radius: 8px;
        font-size: calc(100vw / 30);
        padding: 10px 14px;
-        color: #84de56;
+        color: $green4;
        direction: ltr;
        &:focus {
-          border: 1px solid #84de56;
+          border: 1px solid $green4;
          &::placeholder {
-            color: #84de56;
+            color: $green4;
            opacity: 0.3;
          }
        }
@ -203,7 +203,7 @@
      color: white;
      font-size: calc(100vw / 40);
      a {
-        color: #84de56;
+        color: $green4;
      }
    }
    &__back {
@ -221,7 +221,7 @@
    }
    &__error{
      margin-top: 10px;
-      color: rgb(255, 115, 115);
+      color: $red1;
      font-size: calc(100vw / 110);
    }
  }
@ -254,9 +254,9 @@
        color: white;
        direction: ltr;
        &:focus {
-          border: 1px solid #84de56;
+          border: 1px solid $green4;
          &::placeholder {
-            color: #84de56;
+            color: $green4;
            opacity: 0.3;
          }
        }
@ -277,7 +277,7 @@
      font-size: calc(100vw / 30);
      line-height: 1.5;
      a {
-        color: #84de56;
+        color: $green4;
      }
    }
    &__back {
@ -292,7 +292,7 @@
    }
    &__error{
      margin-top: 10px;
-      color: rgb(255, 115, 115);
+      color: $red1;
      font-size: calc(100vw / 30);
    }
  }
--- a/src/views/Auth/SignUp/index.tsx
+++ b/src/views/Auth/SignUp/index.tsx
@ -8,7 +8,6 @@ import { Link } from "react-router-dom";
 import arrow from "../../../assets/icons/dropdown.png";
 import arrowLeft from "../../../assets/icons/arrow-left.png";

-import "./index.scss";

 import { connect } from "react-redux";
 import { user } from "../../../redux/actions";
--- a/src/views/Auth/index.scss
+++ b/src/views/Auth/index.scss
@ -0,0 +1,3 @@
+@import './Login/index.scss';
+@import './Profile/index.scss';
+@import './SignUp/index.scss';
--- a/src/views/Contact/index.scss
+++ b/src/views/Contact/index.scss
@ -1,7 +1,7 @@
 .contact{
  header{
    color: white;
-    border-bottom: 1px solid #707070;
+    border-bottom: 1px solid $gray7;
  }
  &__form{
    &--name{
@ -13,10 +13,10 @@
      margin-bottom: 30px;
      width: 48%;
      h2{
-        color: #9CDF52;
+        color: $green;
      }
      p{
-        color: #D3D3D3;
+        color: $gray6;
      }
    }
    &--map{
@ -24,7 +24,7 @@
      height: 300px;
      position: relative;
      padding-top: 20px;
-      border-top: 1px solid #707070;
+      border-top: 1px solid $gray7;
      img {
        transform: scale(0.4);
      }
@ -33,13 +33,13 @@
  &__tab{
    margin-bottom: 15px;
    border-radius: 10px !important;
-    border: 1px solid #4DD35B;
+    border: 1px solid $green;
    position: relative;
    figure{
      z-index: 1 !important;
      border-radius: 10px;
      position: absolute;
-      background-color: #4DD35B !important;
+      background-color: $green !important;
      width : 50%;
      height: 100%;
      left: 50%;
@ -52,7 +52,7 @@
      border: none;
      background-color: rgba(255, 255, 255, 0);
      border-radius: 10px !important;
-      color: #4DD35B;
+      color: $green;
      z-index: 200;
    }
    &--figureactive{
@ -162,7 +162,7 @@
        border-radius: 10px;
        h2{
          font-size: calc(100vw / 35);
-          color: #4DD35B;
+          color: $green;
        }
        p{
          text-align: center;
@ -216,7 +216,7 @@
        margin-bottom: 15px;
        h2{
          font-size: calc(100vw / 27);
-          color: #4DD35B;
+          color: $green;
        }
        p{
          text-align: center;
--- a/src/views/Contact/index.tsx
+++ b/src/views/Contact/index.tsx
@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import "./index.scss";
 import Navbar from "../../components/Navbar";
 import Footer from "../Home/Footer";
 import Input from "../../components/Input";
--- a/src/views/Course/Lesson/index.scss
+++ b/src/views/Course/Lesson/index.scss
@ -1,23 +1,23 @@
 .lesson {
  transition: all 0.3s;
  overflow : hidden;
-  border-bottom: 1px solid #b3b3b3;
+  border-bottom: 1px solid $gray9;
  &__active{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  header {
    background-color: #414141;
-    // border: 1px solid #b3b3b3 !important;
+    // border: 1px solid $gray9 !important;
    padding: 5px 15px !important;
    cursor: pointer;
    h4 {
-      color: #9cdf52;
+      color: $green;
      margin: 0px;
      
    }
    div {
-      color: #cccccc;
+      color: $gray10;
    }
    img{
      width: 40px;
@ -25,14 +25,14 @@
  }
  &__files{
    padding : 0px !important;
-    border-left: 1px solid #b3b3b3;
-    border-right: 1px solid #b3b3b3;
+    border-left: 1px solid $gray9;
+    border-right: 1px solid $gray9;
    transition: all 0.4s ease-in;
    overflow: hidden;
    p{
      color: white;
      padding: 10px 20px;
-      background-color: rgb(58, 58, 58);
+      background-color: $gray1;
      margin: 0px !important;
    }
    & img{
@ -63,7 +63,7 @@
      }
    }
    &--active{
-      border-bottom: 1px solid #b3b3b3;
+      border-bottom: 1px solid $gray9;
    }
  }
 }
--- a/src/views/Course/Lesson/index.tsx
+++ b/src/views/Course/Lesson/index.tsx
@ -3,7 +3,6 @@ import { Link } from "react-router-dom";
 import whiteDropdown from "../../../assets/icons/white-dropdown.png";
 import whitePlay from "../../../assets/icons/white-play.png";
 import document from "../../../assets/icons/document.png";
-import "./index.scss";
 import { connect } from "react-redux";
 import { book, publicApi } from "../../../redux/actions";
 import location from "../../../util/location";
--- a/src/views/Course/index.scss
+++ b/src/views/Course/index.scss
@ -1,7 +1,9 @@
+@import './Lesson/index.scss';
+
 .course{
  &__header{
    padding: 30px 0px 45px;
-    border-bottom:2px solid #4a4a4a;
+    border-bottom:2px solid $gray5;
  }
  &__info{
    &--image{
@ -16,17 +18,17 @@
    &--description{
      padding-top: 5px;
      a{
-        color: #424242;
+        color: $gray5;
      }
      li{
-        color: #424242;
+        color: $gray5;
      }
      h1{
        color: white;
        margin-top: 12px;
      }
      p{
-        color: #D3D3D3;
+        color: $gray6;
        margin-top: 25px;
      }
      .course-info-items{
@ -34,14 +36,14 @@
        background-color: #08793d23;
        border-radius: 10px;
        i{
-          color: #4DD35B;
+          color: $green;
        }
      }
    }
  }
  &__options{
    &--rate{
-      border: 2px solid #707070;
+      border: 2px solid $gray7;
      box-shadow: 0px 0px 20px #f7ff0179;
      border-radius: 15px;
      padding-top: 20px;
@ -49,7 +51,7 @@
    }
    &--button{
      background-color: #313131;
-      border: 1px solid #707070;
+      border: 1px solid $gray7;
      color: white;
      padding: 8px;
      text-align: center;
@ -67,10 +69,10 @@
      padding: 20px 0px 20px !important;
      border: 0px !important;
      h2{
-        color: #4DD35B;
+        color: $green;
      }
      p{
-        color: #707070;
+        color: $gray7;
      }
    }
  }
@ -264,7 +266,7 @@
      padding: 0px 20px;
      p{
        margin-top: 20px;
-        color: #d3d3d3;
+        color: $gray6;
        font-size: calc(100vw / 45);
      }
    }
@ -293,7 +295,7 @@
          margin-top: 0px;
        }
        i{
-          color: #4DD35B;
+          color: $green;
          font-size: calc(100vw / 40);
        }
      }
@ -332,7 +334,7 @@
       padding: 10px 5px;
       font-size: calc(100vw / 45);
       border-radius: 30px;
-       color: #D3D3D3;
+       color: $gray6;
       margin-top: 30px;
       img{
         width: 30px;
@ -348,7 +350,7 @@
        p{
          margin-top: 0px;
          font-size: calc(100vw / 50);
-          color: #d3d3d3;
+          color: $gray7;
        }
      }
    }
@ -369,7 +371,7 @@
      
      p{
        margin-top: 20px;
-        color: #d3d3d3;
+        color: $gray7;
        font-size: calc(100vw / 30);
      }
    }
@ -393,7 +395,7 @@
          margin-top: 0px;
        }
        i{
-          color: #4DD35B;
+          color: $green;
          font-size: calc(100vw / 30);
        }
      }
@ -432,7 +434,7 @@
       padding: 5px 5px;
       font-size: calc(100vw / 35);
       border-radius: 40px;
-       color: #D3D3D3;
+       color: $gray6;
       img{
         width: 25px;
       }
@ -447,7 +449,7 @@
        p{
          margin-top: 0px;
          font-size: calc(100vw / 35);
-          color: #d3d3d3;
+          color: $gray6;
        }
      }
    }
--- a/src/views/Course/index.tsx
+++ b/src/views/Course/index.tsx
@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import "./index.scss";
 import Navbar from "../../components/Navbar";
 import Footer from "../Home/Footer";
 import BreadCrumbs from "../../components/BreadCrumbs";
--- a/src/views/Courses/Course/index.scss
+++ b/src/views/Courses/Course/index.scss
@ -1,12 +1,12 @@
 .courses-course {
  margin-top: 40px;
  padding: 10px;
-  border-bottom: 1px solid #212121;
+  border-bottom: 1px solid $gray8;
  transition: all 0.5s;
  position: relative;
  * {
    transition: all 0.5s;
-    color: #aaa;
+    color: $gray;
  }
  img {
    border-radius: 10px;
@ -27,14 +27,14 @@
@media screen and (min-width: 1441px) {
  .courses-course {
    &:hover {
-      background-color: #dddddd21;
+      background-color: $gray6;
      border-radius: 10px;
      box-shadow: 0px 0px 10px rgba(146, 146, 146, 0.6);
      img {
        transform: translateX(10px) scale(1.14);
      }
      h1 {
-        color: #84de56;
+        color: $green4;
      }
      p {
        color: #cececefa;
@ -59,14 +59,14 @@
@media screen and (min-width: 1008px) and (max-width: 1440px) {
  .courses-course {
    &:hover {
-      background-color: #dddddd21;
+      background-color: $gray6;
      border-radius: 10px;
      box-shadow: 0px 0px 10px rgba(146, 146, 146, 0.6);
      img {
        transform: translateX(10px) scale(1.14);
      }
      h1 {
-        color: #84de56;
+        color: $green4;
      }
      p {
        color: #cececefa;
@ -94,7 +94,7 @@
@media screen and (min-width: 641px) and (max-width: 1007px) {
  .courses-course {
    margin-top: 20px;
-    background-color: #aaaaaa21;
+    background-color: $gray;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(146, 146, 146, 0.6);
    img {
@ -102,7 +102,7 @@
    }
    h1 {
      font-size: calc(100vw / 45);
-      color: #84de56;
+      color: $green4;
    }
    h2{
      font-size: calc(100vw / 52);
@ -120,7 +120,7 @@
@media screen and (max-width: 640px) {
  .courses-course {
    margin-top: 20px;
-    background-color: #aaaaaa21;
+    background-color: $gray;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(146, 146, 146, 0.6);
    img {
@ -128,7 +128,7 @@
    }
    h1 {
      font-size: calc(100vw / 24);
-      color: #84de56;
+      color: $green4;
    }
    h2{
      font-size: calc(100vw / 28);
--- a/src/views/Courses/Course/index.tsx
+++ b/src/views/Courses/Course/index.tsx
@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import "./index.scss";
 import { Link } from "react-router-dom";
 import location from "../../../util/location";

--- a/src/views/Courses/index.scss
+++ b/src/views/Courses/index.scss
@ -1,3 +1,5 @@
+@import './Course/index.scss';
+
 .courses {
  position: relative;
  main {
--- a/src/views/Courses/index.tsx
+++ b/src/views/Courses/index.tsx
@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Navbar from "../../components/Navbar";
 import Footer from "../Home/Footer";
-import "./index.scss";
 import { book } from "../../redux/actions";
 import { connect } from "react-redux";
 import location from "../../util/location";
--- a/src/views/Faq/index.scss
+++ b/src/views/Faq/index.scss
@ -8,21 +8,21 @@
      margin-bottom: 15px;
    }
    p {
-      color: #969696;
+      color: $gray11;
    }
    input {
-      background-color: #424242;
+      background-color: $gray5;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      border: none;
      color: white;
      flex: 1;
      &::placeholder {
-        color: #969696;
+        color: $gray11;
      }
    }
    button {
-      background-color: #39383d;
+      background-color: $gray1;
      border: none;
      margin-right: 2px;
      width: 70px;
@ -36,7 +36,7 @@
    margin: 0px auto !important;
    padding-top: 30px !important;
    li{
-      background-color: #424242;
+      background-color: $gray5;
      margin-bottom: 15px;
      cursor: pointer;
      border-radius: 5px;
@ -46,7 +46,7 @@
      border-top-left-radius: 5px;
      padding: 10px;
      strong {
-        color: #4dd35b;
+        color: $green;
      }
      img{
        width: 30px;
--- a/src/views/Faq/index.tsx
+++ b/src/views/Faq/index.tsx
@ -7,7 +7,6 @@ import whiteDropdown from "../../assets/icons/white-dropdown.png";
 import { connect } from "react-redux";
 import { faq } from "../../redux/actions";
 import scroll from "../../util/scroll.js";
-import "./index.scss";

 function Faq({
  list,
--- a/src/views/Home/AppDownload/index.scss
+++ b/src/views/Home/AppDownload/index.scss
@ -18,7 +18,7 @@
      border-left: 12px solid black;
      border-top-left-radius: 30px;
      border-top-right-radius: 30px;
-      background-color: #E3E3E3;
+      background-color: $gray12;
    }
    &--details{
      width: 320px;
@ -35,7 +35,7 @@
        margin-bottom: 5px;
      }
      p{
-        color: #FFD70F;
+        color: $yellow;
        font-family: numeralLight;
      }
    }
@ -64,7 +64,7 @@
        border-left: 12px solid black;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
-        background-color: #E3E3E3;
+        background-color: $gray12;
      }
      &--details{
        width: 440px;
@ -82,7 +82,7 @@
          font-size: 17px;
        }
        p{
-          color: #FFD70F;
+          color: $yellow;
          font-family: numeralLight;
          font-size: 13px;
        }
--- a/src/views/Home/AppDownload/index.tsx
+++ b/src/views/Home/AppDownload/index.tsx
@ -1,7 +1,6 @@
 import React from "react";
 import ar from "../../../assets/icons/ar.png";
 import download from "../../../assets/icons/download.png";
-import "./index.scss";

 export default function AppDownload() {
  return (
--- a/src/views/Home/Blogs/Blog/index.tsx
+++ b/src/views/Home/Blogs/Blog/index.tsx
@ -1,6 +1,5 @@
 import React from "react";
 import {Link} from 'react-router-dom';
-import "./index.scss";

 export default function Blog(props: any) {
  const { data } = props;
--- a/src/views/Home/Blogs/index.scss
+++ b/src/views/Home/Blogs/index.scss
@ -1,3 +1,5 @@
+@import './Blog/index.scss';
+
 .home-blogs {
  width: 100%;
  margin: 0px auto;
@ -16,7 +18,7 @@
      margin: 0px;
    }
    span{
-      color: #aaa;
+      color: $gray;
    }

  }
--- a/src/views/Home/Blogs/index.tsx
+++ b/src/views/Home/Blogs/index.tsx
@ -5,7 +5,6 @@ import Blog from "./Blog/index";
 import { connect, useSelector } from "react-redux";
 import { blog } from "../../../redux/actions";

-import "./index.scss";

 function Blogs(props: any) {
  const slideNumberHandler = () => {
--- a/src/views/Home/Books/Book/index.tsx
+++ b/src/views/Home/Books/Book/index.tsx
@ -1,6 +1,5 @@
 import React from "react";
 import { Link } from 'react-router-dom';
-import "./index.scss";

 export default function Book(props: any) {
  const { data } = props;
--- a/src/views/Home/Books/index.scss
+++ b/src/views/Home/Books/index.scss
@ -1,3 +1,5 @@
+@import './Book/index.scss';
+
 .home-books {
  width: 100%;
  margin: 0px auto;
@ -12,7 +14,7 @@
      margin: 0px;
    }
    span{
-      color: #aaa;
+      color: $gray;
    }

  }
@ -21,7 +23,7 @@
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, +50%);
-    background-color: #0f0f0f;
+    background-color: black;
    padding-right: 5px;
    color: green;
  }
--- a/src/views/Home/Books/index.tsx
+++ b/src/views/Home/Books/index.tsx
@ -3,7 +3,6 @@ import { useSelector, connect } from "react-redux";
 import Carousel from "react-elastic-carousel";
 import Book from "./Book/index";
 import { book } from "../../../redux/actions";
-import "./index.scss";

 function Books({list, number}: any) {
  const slideNumberHandler = () => {
--- a/src/views/Home/Courses/Course/index.scss
+++ b/src/views/Home/Courses/Course/index.scss
@ -16,17 +16,17 @@
    margin-right: 10px;
    p {
      margin: 0px;
-      color: #C9C9C9;
+      color: $gray10;
    }
    h2{
      color: white;
    }
    li{
-      background-color: #4F4F4F;
+      background-color: $gray5;
      border-radius: 15px;
      padding: 3px 6px;
      margin-left: 3px;
-      color: #C4C4C4;
+      color: $gray10;
      font-family: numeralLight;
      margin-top: 5px;
    }
--- a/src/views/Home/Courses/Course/index.tsx
+++ b/src/views/Home/Courses/Course/index.tsx
@ -2,7 +2,6 @@ import React from "react";
 import Avatar from "@mui/material/Avatar";
 import {Link} from 'react-router-dom';

-import "./index.scss";

 export default function Course(props: any) {
  const { data } = props;
--- a/src/views/Home/Courses/index.scss
+++ b/src/views/Home/Courses/index.scss
@ -1,7 +1,10 @@
+@import './Course/index.scss';
+
 .home-courses {
  width: 100%;
  margin: 0px auto;
-  border-top: 1px solid #333; border-bottom: 1px solid #333;
+  border-top: 1px solid $gray8;
+  border-bottom: 1px solid $gray8;
  position: relative;
  margin-top: 30px;
  padding: 20px 10px 50px;
@ -14,7 +17,7 @@
      margin-bottom: 10px;
    }
    span{
-      color: #aaa;
+      color: $gray;
    }
    a{
      display: none;
@ -27,9 +30,9 @@
    transform: translate(-50%, +50%);
    background-color: black;
    padding-right: 5px;
-    color: #9CDF52;
+    color: $green;
    &:hover{
-      color: #9CDF52;
+      color: $green;
    }
  }
  &__list{
@ -112,7 +115,7 @@
      }
      a{
        display: flex;
-        color: #9CDF52;
+        color: $green;
        font-size: calc(100vw / 28);
      }
    }
--- a/src/views/Home/Courses/index.tsx
+++ b/src/views/Home/Courses/index.tsx
@ -4,7 +4,6 @@ import Course from "./Course/index";
 import { Link } from "react-router-dom";
 import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded";
 import { connect } from 'react-redux';
-import "./index.scss";

 function Courses({ number, courses, selectedSort }: any) {
  const slideNumberHandler = () => {
@ -50,11 +49,11 @@ function Courses({ number, courses, selectedSort }: any) {
      )}

      <Link
-        className="home-courses__more d-flex align-items-center"
+        className="home-courses__more align-items-center mobile"
        to="/courses"
      >
        مشاهده بیشتر{" "}
-        <ExpandMoreRoundedIcon style={{ fontSize: 25, color: "#9CDF52" }} />
+        <ExpandMoreRoundedIcon style={{ fontSize: 25, color: "$green" }} />
      </Link>
    </section>
  );
--- a/src/views/Home/Footer/index.scss
+++ b/src/views/Home/Footer/index.scss
@ -7,10 +7,10 @@
    margin : 0px auto;
    p{
      margin: 0px;
-      color: #A2A2A2;
+      color: $gray;
    }
    a{
-      color: #A2A2A2;
+      color: $gray;
    }
  }
 }
--- a/src/views/Home/Footer/index.tsx
+++ b/src/views/Home/Footer/index.tsx
@ -1,6 +1,5 @@
 import React, { useEffect } from "react";
 import { Link } from "react-router-dom";
-import "./index.scss";
 import scroll from "../../../util/scroll";


--- a/src/views/Home/Header/index.tsx
+++ b/src/views/Home/Header/index.tsx
@ -1,5 +1,4 @@
 import React from "react";
-import "./index.scss";
 import Avatar from '@mui/material/Avatar';

 export default function Header(props: any) {
--- a/src/views/Home/index.scss
+++ b/src/views/Home/index.scss
@ -1,3 +1,10 @@
+@import './AppDownload/index.scss';
+@import './Blogs/index.scss';
+@import './Books/index.scss';
+@import './Courses/index.scss';
+@import './Footer/index.scss';
+@import './Header/index.scss';
+
 .home {
 
 }
--- a/src/views/Home/index.tsx
+++ b/src/views/Home/index.tsx
@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import "./index.scss";
 import Navbar from "../../components/Navbar";
 import HomeSearchBox from "../../components/HomeSearchBox";
 import Courses from "./Courses";
--- a/src/views/Subscription/DiscountCode/index.scss
+++ b/src/views/Subscription/DiscountCode/index.scss
@ -1,17 +1,17 @@
 .discount-code{
  width: 100%;
-  border: 1px solid #707070;
+  border: 1px solid $gray7;
  border-radius: 10px;
  padding: 10px 30px;
  &__cancel{
-    background-color: orange;
+    background-color: $orange;
    color: white;
  }
  p{
-    color: orange;
+    color: $orange;
  }
  h3{
-    color: #aaa;
+    color: $gray;
    margin: 0px;
  }
  input{
@ -19,13 +19,13 @@
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border: 0px;
-    color: #aaa;
+    color: $gray;
    &::placeholder{
-      color: #aaa;
+      color: $gray;
    }
  }
  button{
-    background-color : #81C342;
+    background-color : $green1;
    border-top-left-radius: 6px;
    color: white;
    border-bottom-left-radius: 6px;
--- a/src/views/Subscription/DiscountCode/index.tsx
+++ b/src/views/Subscription/DiscountCode/index.tsx
@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import { connect } from "react-redux";
 import { userFactor } from "../../../redux/actions";
-import "./index.scss";

 function DiscountCode({
  codeId,
--- a/src/views/Subscription/SubscribeRadio/index.scss
+++ b/src/views/Subscription/SubscribeRadio/index.scss
@ -1,6 +1,6 @@
 .subscribe-radio{
  width: 100%;
-  border : 1px solid #777;
+  border : 1px solid $gray7;
  margin-bottom: 15px;
  border-radius: 10px;
  cursor: pointer;
@ -22,7 +22,7 @@
      color: white;
    }
    &--tag{
-      background-color: yellow;
+      background-color: $yellow;
      padding: 4px 20px;
      border-radius: 30px;
      width: fit-content;
@ -56,10 +56,8 @@
    }
  }
  &-active{
-    box-shadow: 0px 0px 6px #4DD35B;
-    background-color: #4DD35B;
-    .subscribe-radio__name{
-    }
+    box-shadow: 0px 0px 6px $green;
+    background-color: $green;
    .subscribe-radio__factor{
      background-color: rgba(255, 255, 255, 0.18);
    }
--- a/src/views/Subscription/SubscribeRadio/index.tsx
+++ b/src/views/Subscription/SubscribeRadio/index.tsx
@ -1,5 +1,4 @@
 import React from "react";
-import "./index.scss";
 import CustomCheckbox from "../../../components/CustomCheckbox";
 import CircleRoundedIcon from "@mui/icons-material/CircleRounded";
 import RadioButtonUncheckedRoundedIcon from "@mui/icons-material/RadioButtonUncheckedRounded";
--- a/src/views/Subscription/index.scss
+++ b/src/views/Subscription/index.scss
@ -1,10 +1,13 @@
+@import './DiscountCode/index.scss';
+@import './SubscribeRadio/index.scss';
+
 .subscription {
  main {
    h1,h2{
-      color: #aaa;
+      color: $gray;
    }
    p{
-      color : #aaa;
+      color : $gray;
      margin : 10px 0px 35px;
    }
  }
--- a/src/views/Subscription/index.tsx
+++ b/src/views/Subscription/index.tsx
@ -7,7 +7,6 @@ import { connect } from "react-redux";
 import { product, userFactor } from "../../redux/actions";
 import scroll from "../../util/scroll";
 import Loader from "../../components/Loader";
-import "./index.scss";

 function Subscription({ listVOD, getList, loading, selectedVOD, payment, verify }: any) {
  useEffect(() => {
--- a/src/views/VideoTube/Attachments/index.scss
+++ b/src/views/VideoTube/Attachments/index.scss
@ -1,7 +1,7 @@
 .download-attachments{
  color: white;
  margin: 0px auto;
-  border-bottom: 1px solid #2c2c2c;
+  border-bottom: 1px solid $gray8;
  span{

  }
@ -10,7 +10,7 @@
  }
  a{
    padding: 5px 15px;
-    border: 1px solid #707070;
+    border: 1px solid $gray7;
    color: white;
    text-decoration: none;
    border-radius: 8px;
--- a/src/views/VideoTube/Attachments/index.tsx
+++ b/src/views/VideoTube/Attachments/index.tsx
@ -1,5 +1,4 @@
 import React from 'react';
-import './index.scss';

 export default function Attachments({file,num} : any) {
  return (
--- a/src/views/VideoTube/Book/index.tsx
+++ b/src/views/VideoTube/Book/index.tsx
@ -1,6 +1,5 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import './index.scss';

 export default function Book({ data }: any) {
  const desc: any = {
--- a/src/views/VideoTube/Comment/index.scss
+++ b/src/views/VideoTube/Comment/index.scss
@ -5,7 +5,7 @@
  }
  button{
    background-color: inherit;
-    color: #4DD35B;
+    color: $green;
    border: none;
    margin-left: 20px;
  }
--- a/src/views/VideoTube/Comment/index.tsx
+++ b/src/views/VideoTube/Comment/index.tsx
@ -1,7 +1,6 @@
 import React from "react";
 import Avatar from "@mui/material/Avatar";

-import "./index.scss";

 export default function Comment({ comment }: any) {
  return (
--- a/src/views/VideoTube/LessonPlayList/index.scss
+++ b/src/views/VideoTube/LessonPlayList/index.scss
@ -5,12 +5,12 @@
    background-color: inherit !important;
    margin-bottom: 5px;
    h3{
-      background-color : #707070;
+      background-color : $gray7;
      padding: 5px 10px;
      margin: 0px;
    }
    span{
-      background-color : #707070;
+      background-color : $gray7;
      display: flex;
      flex: 1;
      height : 1px;
@ -21,7 +21,7 @@
      color: white;
    }
    &--active{
-      background: rgba(#ebebeb, 0.21);
+      background: rgba($gray12, 0.21);
    }
    &--text{
      padding: 15px 10px;
@ -30,7 +30,7 @@
        margin: 0px;
      }
      p{
-        color: #767676;
+        color: $gray7;
        margin: 0px;
      }
    }
--- a/src/views/VideoTube/LessonPlayList/index.tsx
+++ b/src/views/VideoTube/LessonPlayList/index.tsx
@ -1,5 +1,4 @@
 import React, { useEffect } from "react";
-import "./index.scss";
 import { connect } from "react-redux";
 import { publicApi } from "../../../redux/actions";
 import { Link } from "react-router-dom";
--- a/src/views/VideoTube/index.scss
+++ b/src/views/VideoTube/index.scss
@ -1,15 +1,20 @@
+@import './Attachments/index.scss';
+@import './Book/index.scss';
+@import './Comment/index.scss';
+@import './LessonPlayList/index.scss';
+
 .video-tube {
  &__content {
    margin-left: 15px;
    
    &--display {
-      border-bottom: 1px solid #303030;
+      border-bottom: 1px solid $gray8;
      padding-bottom: 30px;
      video{
-        border: 1px solid #303030;
+        border: 1px solid $gray8;
      }
      span{
-        color: #84DE56;
+        color: $green4;
        padding: 15px 0px;
      }
      h1{
@ -22,7 +27,7 @@
    }
    &--comments{
      color: white;
-      border-bottom: 1px solid #303030;
+      border-bottom: 1px solid $gray8;
      padding-bottom: 30px;
      header{
        padding: 20px 0px;
@ -33,7 +38,7 @@
      button{
        background-color: inherit;
        border: none;
-        color: #4DD35B;
+        color: $green;
      }
    }
    &--addComment{
@ -42,21 +47,21 @@
      textarea{
        width: 100%;
        border-radius: 12px;
-        background-color: #2D2D2D;
+        background-color: $gray8;
        padding: 10px;
        color: white;
        &:focus{
          outline: none;
        }
        &::placeholder{
-          color: #666666;
+          color: $gray4;
        }
      }
    }
  }
  &__sidebar {
    &--playlist {
-      border: 1px solid #303030;
+      border: 1px solid $gray8;
      margin-bottom: 30px;
      header {
        width: 100%;
@ -84,7 +89,7 @@

        /* Handle */
        &::-webkit-scrollbar-thumb {
-          background: #bbbbbb;
+          background: $gray;
          border-radius: 10px;
        }

@ -95,7 +100,7 @@
      }
    }
    &--attachments {
-      border: 1px solid #303030;
+      border: 1px solid $gray8;
      margin-bottom: 30px;
      header {
        width: 100%;
@ -122,7 +127,7 @@

        /* Handle */
        &::-webkit-scrollbar-thumb {
-          background: #bbbbbb;
+          background: $gray10;
          border-radius: 10px;
        }

@ -133,7 +138,7 @@
      }
    }
    &--suggests {
-      border: 1px solid #303030;
+      border: 1px solid $gray8;
      header {
        width: 100%;
        color: white;
@ -142,7 +147,7 @@
        }
        span{
          background-color: #00fff74f;
-          color: #00FFF8;
+          color: $blue2;
          padding: 5px 8px;
        }
      }
--- a/src/views/VideoTube/index.tsx
+++ b/src/views/VideoTube/index.tsx
@ -8,7 +8,6 @@ import Comment from "./Comment";
 import AddComment from "./AddComment";
 import Video from "../../components/JolPlayer";

-import "./index.scss";
 import listIcon from "../../assets/icons/list.png";
 import { connect } from "react-redux";
 import scroll from "../../util/scroll.js";
--- a/yarn.lock
+++ b/yarn.lock
@ -8004,6 +8004,11 @@ lodash.uniq@^4.5.0:
  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==

+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 loglevel@^1.6.8:
  version "1.7.1"
  resolved "https://registry.npmjs.org/loglevel/-/loglevel-1.7.1.tgz"