update src/components/TestComponentNew/index.js and src/components/TestComponentNew/index.scss

src/components/TestComponentNew/index.js

@@ -27,14 +27,14 @@ function CustomRangeInput({ openCalendar, value }) {
   return (
     <div className="flex flex-row items-center ">
       <input
-        className="w-full py-1 text-center text-sm rounded-md border border-gray-200 focus:outline-none focus:border-sky-200 focus:ring-sky-200 focus:ring-1"
+        className="w-full py-1 text-center text-sm rounded border border-gray-200 focus:outline-none focus:border-[#0074d9] focus:ring-[#0074d9] focus:ring-1"
         onFocus={openCalendar}
         value={value[0]}
         readOnly
       />
       <p className="mx-2 text-sm">تا</p>
       <input
-        className="w-full py-1 text-center text-sm rounded-md border border-gray-200 focus:outline-none focus:border-sky-200 focus:ring-sky-200 focus:ring-1"
+        className="w-full py-1 text-center text-sm rounded border border-gray-200 focus:outline-none focus:border-[#0074d9] focus:ring-[#0074d9] focus:ring-1"
         onFocus={openCalendar}
         value={value[1]}
         readOnly
@@ -42,12 +42,10 @@ function CustomRangeInput({ openCalendar, value }) {
     </div>
   );
 }
+
 const TestComponentNew = () => {
   return (
-    <div
+    <div className="w-1/2 mx-auto" style={{ direction: "rtl" }}>
-      className="bg-pink-100 w-1/2 mx-auto mt-20"
-      style={{ direction: "rtl" }}
-    >
       <Calendar calendar={persian} locale={persian_fa} />
       <hr className="my-20" />
       <DatePicker

src/components/TestComponentNew/index.scss

@@ -1,19 +1,3 @@
-// .custom-input {
-//   border-radius: 15px;
-//   border: 1px #0c8af8 solid;
-//   padding: 4px 12px;
-//   background-color: white;
-//   height: 22px;
-//   box-shadow: 0 0 2px #0074d9;
-//   display: none !important;
-// }
-
-// .custom-input:focus {
-//   outline: none;
-//   border: 1px solid #0c8af8;
-//   box-shadow: 0 0 10px 2px #0074d9;
-// }
-
 .rmdp-arrow-container {
   background-color: #0074d9;
   border-radius: 2px !important;
@@ -21,8 +5,27 @@
   width: 24px !important;
 }
 
+.rmpd-day.rmdp-range.start {
+  background: red !important;
+}
+
 .rmdp-arrow-container .rmdp-arrow {
   border: solid #fff;
   border-width: 0 2px 2px 0;
   margin-top: 8px !important;
 }
+
+.rmdp-wrapper .start {
+  background: #0074d9 !important;
+  color: #fff !important;
+}
+
+.rmdp-wrapper .end {
+  background: #0074d9 !important;
+  color: #fff !important;
+}
+
+.rmdp-range {
+  background: #f5f5f5 !important;
+  color: #0074d9 !important;
+}