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

src/components/DateRangePicker/index.js

@@ -25,16 +25,18 @@ function CustomRangeInput({ openCalendar, value }) {
   }, []);
 
   return (
-    <div className="flex flex-row items-center ">
+    <div className="flex flex-row items-center justify-center">
       <input
-        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"
+        style={{ width: "33%" }}
+        className="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 border border-gray-200 focus:outline-none focus:border-[#0074d9] focus:ring-[#0074d9] focus:ring-1"
+        style={{ width: "33%" }}
+        className="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

src/components/DateRangePicker/index.scss

@@ -5,6 +5,10 @@
   width: 24px !important;
 }
 
+.rmdp-arrow-container:hover {
+  box-shadow: none !important;
+}
+
 .rmdp-arrow-container .rmdp-arrow {
   border: solid #fff;
   border-width: 0 2px 2px 0;