update 8 files

src/components/Datepicker/SimpleCalendar/index.js

@@ -1,3 +1,5 @@
+// it has style inside index.scss ---> // Start SimpleCalendar && end SimpleCalendar
+
 import React, { useState } from "react";
 
 import Calendar from "../CalendarComponents/Calendar";
@@ -18,8 +20,7 @@ const SimpleCalendar = () => {
               className="GoToTodayButton"
               onClick={() => setSelectedDay(utils("fa").getToday())}
             >
-              {" "}
+              امروز
-              امروز{" "}
             </button>
           </center>
         )}

src/components/Datepicker/SimpleDatePicker/index.js

@@ -1,9 +1,9 @@
+// it has style inside index.scss ---> // Start SimpleCalendar && end SimpleCalendar
+
 import React, { useState } from "react";
 import DatePicker from "../CalendarComponents";
 import { utils } from "../CalendarComponents";
 
-// ! استایل های استفاده شده Calendar Component
-
 const SimpleDatePicker = (props) => {
   const [selectedDay, setSelectedDay] = useState(null);
   const gotoToday = () => {

src/index.scss

@@ -1320,6 +1320,7 @@ $red: #e92424;
   float: left;
   margin: 15px;
 }
+
 @keyframes fadeCalendar {
   from {
     opacity: 0;
@@ -1358,7 +1359,11 @@ $red: #e92424;
 
 // * end RangeDatePicker Component
 
-// TODO  Start Calendar Component
+// TODO  Start SimpleCalendar Component
+
+.Calendar * {
+  font-family: "iranSans";
+}
 
 .DatePicker {
   position: relative;
@@ -1368,11 +1373,16 @@ $red: #e92424;
 
 .DatePicker__input {
   background: #fff;
-  border: 1px solid #ddd;
+  border: 1px solid rgba(0, 0, 0, 0.4);
-  padding: 0.4em 0.8em;
+  padding: 0.6em 1.2em;
-  font-family: inherit;
+  font-family: "iranSans";
   text-align: center;
   font-size: 12px;
+  border-radius: 7px;
+}
+.DatePicker__input:focus {
+  outline: 1px solid #06bace;
+  color: #06bace;
 }
 
 .DatePicker__input.-rtl {
@@ -1382,6 +1392,9 @@ $red: #e92424;
 .DatePicker__input::placeholder {
   color: #979797;
 }
+.DatePicker__input:focus::placeholder {
+  color: #06bace;
+}
 
 .DatePicker__calendarContainer.-top + .DatePicker__calendarArrow {
   top: auto;
@@ -1433,19 +1446,41 @@ $red: #e92424;
   --cl-color-black: #444444;
   --cl-color-disabled: #d4d4d4;
   --cl-color-error: #ff2929;
+  font-family: "iranSans";
   font-size: 10px;
-  background: #fff;
+  background: rgba(245, 245, 245, 0.53);
-  box-shadow: 0 1em 4em rgba(0, 0, 0, 0.07);
+  border: 1px solid #dbdbdb;
+  box-shadow: 0 1em em rgba(0, 0, 0, 0.07);
+  border-radius: 1em;
+  position: relative;
+  user-select: none;
+  padding-top: 1.2em;
+  display: flex;
+  flex-direction: column;
+  width: 40em;
+  z-index: 10;
+  max-width: 90vw;
+  min-height: 38.7em;
+}
+.Calendar.dashboard {
+  --cl-color-black: #444444;
+  --cl-color-disabled: #d4d4d4;
+  --cl-color-error: #ff2929;
+  font-family: "iranSans";
+  font-size: 10px;
+  background: rgba(255, 255, 255, 1);
+  border: 1px solid #edf2fb;
+  box-shadow: 0 1em em rgba(0, 0, 0, 0.07);
   border-radius: 1em;
   position: relative;
   user-select: none;
   padding-top: 1.2em;
   display: flex;
   flex-direction: column;
-  width: 33em;
+  width: 50em;
   z-index: 10;
   max-width: 90vw;
-  min-height: 36.7em;
+  min-height: 38.7em;
 }
 
 .DatePicker .Calendar,
@@ -1488,6 +1523,7 @@ $red: #e92424;
   z-index: 1;
   opacity: 1;
   transition: 0.2s;
+  background-color: #06bace;
 }
 
 .Calendar__monthArrowWrapper:focus {
@@ -1502,17 +1538,17 @@ $red: #e92424;
 }
 
 .Calendar__monthArrowWrapper.-left {
-  transform: rotate(90deg);
+  transform: rotate(180deg);
 }
 .Calendar.-rtl .Calendar__monthArrowWrapper.-left {
-  transform: rotate(-90deg);
+  transform: rotate(-180deg);
 }
 
 .Calendar__monthArrowWrapper.-right {
-  transform: rotate(-90deg);
+  transform: rotate(-0deg);
 }
 .Calendar.-rtl .Calendar__monthArrowWrapper.-right {
-  transform: rotate(90deg);
+  transform: rotate(0deg);
 }
 
 .Calendar__monthArrowWrapper:active .Calendar__monthArrow {
@@ -1520,15 +1556,19 @@ $red: #e92424;
 }
 
 .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;
+  width: 0.7em;
-  height: 1.7em;
+  height: 0.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' xmlns:xlink='http://www.w3.org/1999/xlink' width='15' height='15' viewBox='0 0 50 80' xml:space='preserve'%3E%3Cpolyline fill='none' stroke='%23FFFFFF' stroke-width='15' stroke-linecap='round' stroke-linejoin='round' points=' 0.375,0.375 45.63,38.087 0.375,75.8 '/%3E%3C/svg%3E");
   background-size: 100% 100%;
+  background-color: #06bace;
+  background-size: 10px;
+  background-position: center;
 }
 
 .Calendar__monthYearContainer {
@@ -1537,7 +1577,23 @@ $red: #e92424;
 }
 
 .Calendar__monthYear {
-  font-size: 1.6em;
+  font-size: 2em;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  will-change: transform, opacity;
+  backface-visibility: hidden;
+  transform: translateZ(0);
+  transition: var(--animation-duration);
+  line-height: 1;
+  color: #246e8a;
+}
+.Calendar__monthYear.dashboard {
+  font-size: 2em;
   font-weight: 500;
   display: flex;
   align-items: center;
@@ -1550,6 +1606,7 @@ $red: #e92424;
   transform: translateZ(0);
   transition: var(--animation-duration);
   line-height: 1;
+  color: #65a9ff;
 }
 
 .Calendar__monthYear.-hiddenNext {
@@ -1760,7 +1817,7 @@ $red: #e92424;
   font-size: 1.4em;
   min-width: 85%;
   padding: 0.2em 0.5em;
-  border-radius: 8.5px;
+  border-radius: 5px;
 }
 
 .Calendar__monthSelector.-open,
@@ -1808,7 +1865,7 @@ $red: #e92424;
 
 .Calendar__monthSelectorItem.-active .Calendar__monthSelectorItemText,
 .Calendar__yearSelectorItem.-active .Calendar__yearSelectorText {
-  background-color: var(--cl-color-primary);
+  background-color: #006c94;
   color: #fff;
 }
 
@@ -1821,12 +1878,33 @@ $red: #e92424;
   padding: 0 2.6em;
   position: relative;
 }
+.Calendar__weekDays.dashboard {
+  display: flex;
+  justify-content: space-between;
+  color: var(--cl-color-disabled);
+  font-size: 1.2em;
+  margin-bottom: 0.7em;
+  padding: 0.75em 2.6em;
+  position: relative;
+  background-color: #edf2fb;
+}
 
 .Calendar__weekDay {
   display: block;
   width: calc(100% / 7);
+
   text-align: center;
   text-decoration: none;
+  border: 0px;
+  color: #06bace;
+  margin: 0.2em;
+  white-space: nowrap;
+}
+.Calendar__weekDay.dashboard {
+  color: #a2b4cb;
+}
+.Calendar__weekDay[title] {
+  text-decoration: none;
 }
 
 .Calendar__sectionWrapper {
@@ -1884,20 +1962,45 @@ $red: #e92424;
 }
 
 .Calendar__day {
-  display: block;
+  width: calc(100% / 7 - 6px);
-  width: calc(100% / 7);
   text-align: center;
-  padding: calc(0.25em - 1px) 0;
+  padding: calc(0.25em - 1px);
   font-size: 1.6em;
-  border-radius: 50%;
+  border-radius: 7px;
   transition: 0.2s;
   border: 1px solid transparent;
-  margin-bottom: 0.3em;
+  margin: 3px;
+  color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+
+  cursor: pointer;
+  vertical-align: middle;
+  background-color: #f3f3f3;
+  color: #06bace;
+}
+.Calendar__day.dashboard {
+  width: calc(100% / 7 - 6px);
+  text-align: center;
+  padding: calc(0.25em - 1px);
+  font-size: 1.6em;
+  border-radius: 7px;
+  transition: 0.2s;
+  border: 1px solid transparent;
+  margin: 3px;
   color: rgba(0, 0, 0, 0.8);
   display: flex;
-  justify-content: center;
   align-items: center;
+
   cursor: pointer;
+  vertical-align: middle;
+  background-color: transparent;
+  color: #00253a;
+}
+.Calendar__day span {
+  padding: -10px;
+  margin-top: -30px;
+  font-size: 28px;
 }
 
 .Calendar__day:focus {
@@ -1916,45 +2019,46 @@ $red: #e92424;
 }
 
 .Calendar__day:not(.-blank):not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween):not(.-selected):hover {
-  background: #eaeaea;
+  background-color: #dafbff;
-  border-radius: 50%;
+  color: #06bace;
-  color: var(--cl-color-black);
+  border: 1px solid #06bace;
-  border-color: transparent;
 }
 
 .Calendar__day.-selected,
 .Calendar__day.-selectedStart,
 .Calendar__day.-selectedEnd {
-  background: var(--cl-color-primary);
+  background: #006c94;
   color: #fff;
 }
 
 .Calendar__day.-ltr.-selectedStart {
   border-radius: 0;
-  border-top-left-radius: 100em;
+  border-top-left-radius: 7px;
-  border-bottom-left-radius: 100em;
+  border-bottom-left-radius: 7px;
 }
 
 .Calendar__day.-rtl.-selectedStart {
   border-radius: 0;
-  border-top-right-radius: 100em;
+  border-top-right-radius: 7px;
-  border-bottom-right-radius: 100em;
+  border-bottom-right-radius: 7px;
 }
 
 .Calendar__day.-selectedBetween {
-  background: var(--cl-color-primary-light);
+  background: rgba(0, 108, 148, 0.07);
-  color: var(--cl-color-primary);
+
   border-radius: 0;
 }
 
 .Calendar__day.-ltr.-selectedEnd {
-  border-top-right-radius: 100em;
+  border-radius: 0;
-  border-bottom-right-radius: 100em;
+  border-top-right-radius: 7px;
+  border-bottom-right-radius: 7px;
 }
 
 .Calendar__day.-rtl.-selectedEnd {
-  border-top-left-radius: 100em;
+  border-radius: 0;
-  border-bottom-left-radius: 100em;
+  border-top-left-radius: 7px;
+  border-bottom-left-radius: 7px;
 }
 
 .Calendar__day.-weekend:not(.-selected):not(.-blank):not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween) {
@@ -1971,7 +2075,6 @@ $red: #e92424;
   cursor: default !important;
 }
 .Calendar__day.-selected {
-  border-radius: 50%;
 }
 .Calendar__day.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween) {
   font-weight: 600;
@@ -2008,7 +2111,57 @@ $red: #e92424;
   position: relative;
   z-index: 1;
 }
+.Calendar__footer .footer__Events {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 12px;
+  font-family: "IranSans";
+  padding: 3px;
+}
+.Calendar__footer .footer__Events.dashboard {
+  display: flex;
+  justify-content: start;
+  width: 100%;
+  align-items: flex-start;
+  font-size: 12px;
+  font-family: "IranSans";
+  margin-top: 10px;
+  padding: 1em 2em;
+  border-top: 1px solid #edf2fb;
+}
 
+.Calendar__footer .footer__Events.dashboard p {
+  font-size: 15px;
+  margin: 2.5px 0px;
+}
+
+.Calendar .holiday span {
+  color: #ff2929;
+}
+.Calendar .DayNumDiv {
+  display: flex;
+  flex-direction: column;
+}
+.Calendar .DayNumDiv span {
+  margin: 0;
+  padding: 0;
+  margin-bottom: -5px;
+}
+.Calendar .DayNumDiv .eventDots {
+  margin-top: -10px;
+  font-size: 20px;
+}
+.GoToTodayButton {
+  background-color: #006c94;
+  padding: 7.5px;
+  font-size: 12px;
+  color: white;
+  font-family: "iranSans";
+  border-radius: 50%;
+  float: left;
+  margin: 15px;
+}
 @keyframes fadeCalendar {
   from {
     opacity: 0;
@@ -2045,7 +2198,7 @@ $red: #e92424;
   }
 }
 
-// * end Calendar Component
+// * end SimpleCalendar Component
 
 // TODO  Start Folderlist Component
 

src/redux/data.js

@@ -30,7 +30,7 @@ import ProductDescriptionTable from "../components/ProductDescriptionTable";
 import QuestionAnswer from "../components/QuestionAnswer";
 import RadioButton from "../components/RadioButton";
 import Range from "../components/Range";
-import Datepicker from "../components/Datepdicker";
+import Datepicker from "../components/Datepicker";
 import SearchWithSuggestion from "../components/SearchWithSuggestion";
 import SelectBox from "../components/SelectBox";
 import ProductCategories from "../components/ProductCategories";