reza added theme

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

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 {

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 {

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 {

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{

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 (

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;
+      background-color: $green;
-      box-shadow: 0px 0px 20px #9CDF52;
+      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;
+      // box-shadow: 0px 0px 20px $green;
-      // background-color: #9CDF52;
+      // 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;
+        border-color: $green !important;
-        color: #9CDF52;
+        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;
+      background-color: $green;
-      box-shadow: 0px 0px 20px #9CDF52;
+      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;
+      background-color: $green;
-      box-shadow: 0px 0px 2px #9CDF52;
+      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;
+        border-color: $green !important;
-        color: #9CDF52;
+        color: $green;
       }
     }
 

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

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;

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

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) => {

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

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

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

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>

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

src/components/Textarea/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import './index.scss';
 
 export default function Textarea({placeholder} : any) {
   return (

src/components/Timer/index.js

@@ -1,5 +1,4 @@
 import { Component } from "react";
-import "./index.css";
 
 const maxDesktopSize = 1250;
 const maxMobileSize = 550;

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

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;

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) => {

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;

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;
+  border-color: $green4 !important;
-  color: #84de56 !important;
+  color: $green4 !important;
 }
 
 .MuiInputBase-input {

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

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 }),
 

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,

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

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;

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";
+function About({ fury, advantages, keywords, keywords2, first, theme, setTheme }: any) {
-
+  console.log(theme);
-export default function About({
-  fury,
-  advantages,
-  keywords,
-  keywords2,
-  first,
-}: any) {
   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: "درباره ما",

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 {

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

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]);

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

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 (

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

src/views/Auth/Profile/GenderSwitch/index.js

@@ -1,6 +1,5 @@
 import React from "react";
 
-import "./index.scss";
 
 export default function GenderSwitch({
   onChange,

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

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;

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

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 (

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;

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;

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

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;
+        background-color: $gray8;
-        border: 1px solid #a2a2a2;
+        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);
     }
   }

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

src/views/Auth/index.scss

@@ -0,0 +1,3 @@
+@import './Login/index.scss';
+@import './Profile/index.scss';
+@import './SignUp/index.scss';

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;

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

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-left: 1px solid $gray9;
-    border-right: 1px solid #b3b3b3;
+    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;
     }
   }
 }

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

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

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

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

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

src/views/Courses/index.scss

@@ -1,3 +1,5 @@
+@import './Course/index.scss';
+
 .courses {
   position: relative;
   main {

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

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;

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,

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

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 (

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;

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

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 = () => {

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;

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

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 = () => {

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

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;

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

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

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

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

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) {

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

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

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;

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,

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;
+    box-shadow: 0px 0px 6px $green;
-    background-color: #4DD35B;
+    background-color: $green;
-    .subscribe-radio__name{
-    }
     .subscribe-radio__factor{
       background-color: rgba(255, 255, 255, 0.18);
     }

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

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

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(() => {

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;

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 (

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 = {

src/views/VideoTube/Comment/index.scss

@@ -5,7 +5,7 @@
   }
   button{
     background-color: inherit;
-    color: #4DD35B;
+    color: $green;
     border: none;
     margin-left: 20px;
   }

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 (

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

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

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

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

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"