Calender Component Changed To SimpleCalendar

src/components/Calendar/index.css

@@ -163,15 +163,17 @@
   }
   
   .Calendar__monthArrow {
-    border-radius: 50%;
+    border-radius: 7px;
+    padding: 12px;
     transition: var(--animation-duration) transform;
     pointer-events: none;
     background-repeat: no-repeat;
     display: block;
     width: 1.7em;
     height: 1.7em;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg class='nc-icon-wrapper' fill='%23000000'%3E%3Cdefs stroke='none'%3E%3C/defs%3E%3Cpath class='cls-1' d='M12 23.25V.75' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5px'%3E%3C/path%3E%3Cpath class='cls-2' d='M22.5 11.25L12 .75 1.5 11.25' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5px' fill-rule='evenodd'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg class='nc-icon-wrapper' fill='%23000000'%3E%3Cdefs stroke='none'%3E%3C/defs%3E%3Cpath class='cls-1' d='M12 23.25V.75' fill='white' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5px'%3E%3C/path%3E%3Cpath class='cls-2' d='M22.5 11.25L12 .75 1.5 11.25' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5px' fill-rule='evenodd'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
     background-size: 100% 100%;
+    background-color: #06BACE;
   }
   
   .Calendar__monthYearContainer {
@@ -459,6 +461,7 @@
     width: calc(100% / 7);
     text-align: center;
     text-decoration: none;
+    color: #06BACE;
   }
   
   .Calendar__sectionWrapper {

src/components/Calendar/index.js

@@ -4,7 +4,7 @@ import  {Calendar, utils}  from "react-modern-calendar-datepicker";
 
 import './index.css';
 
-const Calender = () =>{
+const SimpleCalendar = () =>{
     const [selectedDay, setSelectedDay] = useState(null);
     return(
         <div className="flex items-center justify-center w-full my-2">
@@ -14,10 +14,10 @@ const Calender = () =>{
              onChange={setSelectedDay}
              shouldHighlightWeekends
              locale="fa" // add this
-            />
+            /> 
         </div>
     );
 };
 
 
-export default Calender;
+export default SimpleCalendar;

src/components/SidebarCategoryHover/list.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import _, { set } from "lodash";
-import Col from "./col";
+import Col from "./Col";
 
 export default function List({ activeItem, item, setActiveItem, colLength }) {
   const [cols, setCols] = useState(null);

src/redux/data.js

@@ -21,7 +21,7 @@ import CircularProgressbar from "../components/CircularProgressbar";
 import Stepper from "../components/Stepper";
 import Product from "../components/Product";
 import Navbar from "../components/Navbar";
-import Calender from '../components/Calender';
+import SimpleCalendar from '../components/Calendar';
 const components = [
   {
     name : "Button",
@@ -488,7 +488,7 @@ const components = [
     ],
     content : {
       name : "Calender",
-      component : <Calender />,
+      component : <SimpleCalendar />,
       code : null,
     }
   },