reza created comments comp

src/components/Calendar/index.css

@@ -6,11 +6,17 @@
   
   .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 {
@@ -20,6 +26,9 @@
   .DatePicker__input::placeholder {
     color: #979797;
   }
+  .DatePicker__input:focus::placeholder{
+    color: #06BACE;
+  }
   
   .DatePicker__calendarContainer.-top + .DatePicker__calendarArrow {
     top: auto;
@@ -72,6 +81,7 @@
     --cl-color-black: #444444;
     --cl-color-disabled: #d4d4d4;
     --cl-color-error: #ff2929;
+    font-family:'iranSans';
     font-size: 10px;
     background: rgba(245, 245, 245, 0.53);
     border:1px solid #DBDBDB;
@@ -85,7 +95,7 @@
     width: 40em;
     z-index: 10;
     max-width: 90vw;
-    min-height: 36.7em;
+    min-height: 38.7em;
   }
   
   .DatePicker .Calendar,
@@ -129,7 +139,7 @@
     z-index: 1;
     opacity: 1;
     transition: 0.2s;
-    background-color: royalblue;
+    background-color: #06BACE;
   }
   
   .Calendar__monthArrowWrapper:focus {
@@ -144,18 +154,18 @@
   }
   
   .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 {
@@ -163,15 +173,18 @@
   }
   
   .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-size: 100% 100%;
+    background-color: #06BACE;
+    background-size: 10px;
+    background-position: center;
   }
   
   .Calendar__monthYearContainer {
@@ -180,7 +193,7 @@
   }
   
   .Calendar__monthYear {
-    font-size: 1.6em;
+    font-size: 2em;
     font-weight: 500;
     display: flex;
     align-items: center;
@@ -457,8 +470,16 @@
   .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[title]{
+    text-decoration: none;
   }
   
   .Calendar__sectionWrapper {
@@ -521,7 +542,7 @@
     text-align: center;
     padding: calc(0.25em - 1px);
     font-size: 1.6em;
-    border-radius: 11px;
+    border-radius: 7px;
     transition: 0.2s;
     border: 1px solid transparent;
     margin:0.2em;
@@ -532,6 +553,7 @@
     cursor: pointer;
     background-color: #F3F3F3;
     color:#06BACE;
+   
   }
   
   .Calendar__day:focus {
@@ -559,36 +581,38 @@
   .Calendar__day.-selected,
   .Calendar__day.-selectedStart,
   .Calendar__day.-selectedEnd {
-    background: #06BACE;
+    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) {

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">
@@ -20,4 +20,4 @@ const Calender = () =>{
 };
 
 
-export default Calender;
+export default SimpleCalendar;

src/components/RangeDatePicker/index.js

@@ -0,0 +1,21 @@
+import React, { useState } from "react";
+import "../Calendar/index.css";
+import DatePicker from "react-modern-calendar-datepicker";
+
+const RangeDatePicker = () => {
+    const [selectedDayRange, setSelectedDayRange] = useState({
+      from: null,
+      to: null
+    });
+    return (
+      <DatePicker
+        value={selectedDayRange}
+        onChange={setSelectedDayRange}
+        inputPlaceholder="یک بازه زمانی انتخاب کنید"
+        shouldHighlightWeekends
+        locale='fa'
+      />
+    );
+  };
+  
+  export default RangeDatePicker;

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/components/SimpleDatePicker/index.js

@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import DatePicker from "react-modern-calendar-datepicker";
+import '../Calendar/index.css';
+const SimpleDatePicker = () =>{
+    const [selectedDay, setSelectedDay] = useState(null);
+    return(
+        <div className='flex items-center justify-center w-full my-2'>
+            <DatePicker
+                value={selectedDay}
+                onChange={setSelectedDay}
+                inputPlaceholder="انتخاب تاریخ"
+                shouldHighlightWeekends
+                locale='fa'
+            />
+        </div>
+    )
+}
+
+export default SimpleDatePicker;

src/redux/data.js

@@ -21,8 +21,10 @@ 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';
 import Footer from "../components/Footer";
+import SimpleDatePicker from "../components/SimpleDatePicker";
+import RangeDatePicker from '../components/RangeDatePicker';
 
 const components = [
   {
@@ -445,14 +447,14 @@ const components = [
     },
   },
   {
-    name : "Calender",
+    name : "SimpleCalendar",
     author: "Keshavarzi",
     props : [
 
     ],
     content : {
-      name : "Calender",
+      name : "SimpleCalendar",
-      component : <Calender />,
+      component : <SimpleCalendar />,
       code : null,
     }
   },
@@ -477,25 +479,26 @@ const components = [
       
     },
   },
-
+  {
-
+    name: "SimpleDatePicker",
-
+    author: "Keshavarzi",
-
+    props: [],
-
+    content: {
-
+      name: "SimpleDatePicker",
-
+      component: <SimpleDatePicker />,
-
+      code: null,
-
+    },
-
+  },
-
+  {
-
+    name: "RangeDatePicker",
-
+    author: "Keshavarzi",
-
+    props: [],
-
+    content: {
-
+      name: "RangeDatePicker",
-
+      component: <div className="flex items-center justify-center w-full my-2"><RangeDatePicker /></div>,
-
+      code: null,
-
+    },
+  },
 ];
 
 export default components;